move sila-dev to _silasila-fe

2 files changed, 86 insertions, 73 deletions

diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue
index 7ce1c806..53fae569 100644
--- a/src/layouts/_sila/AppLayout.vue
+++ b/src/layouts/_sila/AppLayout.vue
@@ -2,10 +2,11 @@
   <div class="app-container">
     <app-header
       ref="focusTarget"
+      :key="routerKey"
       class="app-header"
-      :router-key="routerKey"
       @refresh="refresh"
     />
+    <sub-header ref="focusTarget" class="sub-header" :router-key="routerKey" />
     <app-navigation class="app-navigation" />
     <page-container class="app-content">
       <router-view ref="routerView" :key="routerKey" />
@@ -17,6 +18,7 @@
 
 <script>
 import AppHeader from '@/components/_sila/AppHeader';
+import SubHeader from '@/components/_sila/SubHeader';
 import AppNavigation from '@/components/_sila/AppNavigation';
 import PageContainer from '@/components/_sila/Global/PageContainer';
 import ButtonBackToTop from '@/components/_sila/Global/ButtonBackToTop';
@@ -26,6 +28,7 @@ export default {
   name: 'App',
   components: {
     AppHeader,
+    SubHeader,
     AppNavigation,
     PageContainer,
     ButtonBackToTop,
@@ -60,15 +63,17 @@ export default {
 .app-container {
   display: grid;
   grid-template-columns: 100%;
-  grid-template-rows: auto;
+  grid-template-rows: $first-header-height $second-header-height 1fr;
   grid-template-areas:
     'header'
+    'subheader'
     'content';
 
   @include media-breakpoint-up($responsive-layout-bp) {
     grid-template-columns: $navigation-width 1fr;
     grid-template-areas:
       'header header'
+      'subheader subheader'
       'navigation content';
   }
 }
@@ -80,7 +85,16 @@ export default {
   z-index: $zindex-fixed + 1;
 }
 
+.sub-header {
+  grid-area: subheader;
+  position: sticky;
+  top: $first-header-height;
+  z-index: $zindex-fixed - 1;
+}
+
 .app-navigation {
+  overflow: auto;
+  scrollbar-gutter: auto;
   grid-area: navigation;
 }
 
diff --git a/src/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue
index cdff2040..d4e072c8 100644
--- a/src/layouts/_sila/LoginLayout.vue
+++ b/src/layouts/_sila/LoginLayout.vue
@@ -1,33 +1,26 @@
 <template>
   <main>
     <div class="login-container">
-      <div class="login-main">
-        <div>
-          <div class="login-brand mb-5">
-            <img
-              width="90px"
-              src="@/assets/images/login-company-logo.svg"
-              :alt="altLogo"
-            />
-          </div>
-          <h1 v-if="customizableGuiName" class="h3 mb-5">
-            {{ customizableGuiName }}
-          </h1>
-          <router-view class="login=form form-background" />
-        </div>
-      </div>
       <div class="login-aside">
-        <div class="login-aside__logo-brand">
-          <!-- Add Secondary brand logo if needed -->
-        </div>
-        <div class="login-aside__logo-bmc">
-          <img
-            height="60px"
-            src="@/assets/images/built-on-openbmc-logo.svg"
-            alt="Built on OpenBMC"
-          />
-        </div>
+        <img
+          class="login-aside__picture"
+          src="@/assets/images/_sila/login/autrorization-left-image.svg"
+        />
+        <img
+          class="login-aside__vector1"
+          src="@/assets/images/_sila/login/vector1.svg"
+        />
+      </div>
+      <div class="login-main">
+        <!-- <h1 v-if="customizableGuiName">
+          {{ customizableGuiName }}
+        </h1> -->
+        <router-view class="login=form form-background" />
       </div>
+      <img
+        class="login-aside__vector2"
+        src="@/assets/images/_sila/login/vector2.svg"
+      />
     </div>
   </main>
 </template>
@@ -37,7 +30,6 @@ export default {
   name: 'LoginLayout',
   data() {
     return {
-      altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
       customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
     };
   },
@@ -46,67 +38,74 @@ export default {
 
 <style lang="scss" scoped>
 .login-container {
-  background: gray('100');
+  background: $white;
   display: flex;
-  flex-direction: column;
-  gap: $spacer * 2;
-  max-width: 1400px;
+  flex-direction: row;
   min-width: 320px;
   min-height: 100vh;
-  justify-content: space-around;
+  justify-content: flex-start;
+}
 
-  @include media-breakpoint-up('md') {
-    background: $white;
-    flex-direction: row;
-  }
+.login-aside {
+  min-height: 100vh;
+  width: 480px;
 }
 
-.login-main {
-  min-height: 50vh;
-  padding: $spacer * 3;
+.login-aside__picture {
+  height: 100vh;
+  width: 480px;
+  object-fit: cover;
+}
 
-  @include media-breakpoint-up('md') {
-    background: gray('100');
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 75%;
-    min-height: 100vh;
-    justify-content: center;
-    align-items: center;
-  }
+.login-aside__vector1 {
+  position: absolute;
+  top: 0%;
+  left: 0%;
 }
 
-.login-form {
-  @include media-breakpoint-up('md') {
-    max-width: 360px;
-  }
+.login-aside__vector2 {
+  position: absolute;
+  bottom: 32px;
+  right: 32px;
 }
 
-.login-aside {
+.login-main {
   display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  gap: $spacer * 1.5;
-  margin-right: $spacer * 3;
-  margin-bottom: $spacer;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: calc(100vw - 480px);
+  margin: 0;
+  padding: 0;
+}
+
+@media (max-width: 992px) {
+  .login-container {
+    flex-direction: column;
+
+    .login-aside {
+      width: 100%;
+      min-height: 40vh;
+      height: 40vh;
+
+      .login-aside__picture {
+        width: 100%;
+        height: 40vh;
+      }
+    }
 
-  @include media-breakpoint-up('md') {
-    min-height: 100vh;
-    padding-bottom: $spacer;
-    flex: 1 1 25%;
-    margin-bottom: 0;
+    .login-main {
+      width: 100%;
+      min-height: 40vh;
+      height: 40vh;
+    }
   }
 }
 
-.login-aside__logo-brand:not(:empty) {
-  &::after {
-    content: '';
-    display: inline-block;
-    height: 2.5rem;
-    width: 2px;
-    background-color: gray('200');
-    margin-left: $spacer * 1.5;
-    vertical-align: middle;
+@media (max-width: 576px) {
+  .login-form {
+    width: 90%;
   }
 }
 </style>