IBS: _sila UI theme

3 files changed, 212 insertions, 0 deletions

diff --git a/src/layouts/_sila/AppLayout.vue b/src/layouts/_sila/AppLayout.vue
new file mode 100644
index 00000000..0b78e5b1
--- /dev/null
+++ b/src/layouts/_sila/AppLayout.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="app-container">
+    <app-header
+      ref="focusTarget"
+      class="app-header"
+      :router-key="routerKey"
+      @refresh="refresh"
+    />
+    <app-navigation class="app-navigation" />
+    <page-container class="app-content">
+      <router-view ref="routerView" :key="routerKey" />
+      <!-- Scroll to top button -->
+      <button-back-to-top />
+    </page-container>
+  </div>
+</template>
+
+<script>
+import AppHeader from '@/components/AppHeader';
+import AppNavigation from '@/components/AppNavigation';
+import PageContainer from '@/components/Global/PageContainer';
+import ButtonBackToTop from '@/components/Global/ButtonBackToTop';
+import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
+
+export default {
+  name: 'App',
+  components: {
+    AppHeader,
+    AppNavigation,
+    PageContainer,
+    ButtonBackToTop,
+  },
+  mixins: [JumpLinkMixin],
+  data() {
+    return {
+      routerKey: 0,
+    };
+  },
+  watch: {
+    $route: function () {
+      this.$nextTick(function () {
+        this.setFocus(this.$refs.focusTarget.$el);
+      });
+    },
+  },
+  mounted() {
+    this.$root.$on('refresh-application', () => this.refresh());
+  },
+  methods: {
+    refresh() {
+      // Changing the component :key value will trigger
+      // a component re-rendering and 'refresh' the view
+      this.routerKey += 1;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: auto;
+  grid-template-areas:
+    'header'
+    'content';
+
+  @include media-breakpoint-up($responsive-layout-bp) {
+    grid-template-columns: $navigation-width 1fr;
+    grid-template-areas:
+      'header header'
+      'navigation content';
+  }
+}
+
+.app-header {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: $zindex-fixed + 1;
+}
+
+.app-navigation {
+  grid-area: navigation;
+}
+
+.app-content {
+  grid-area: content;
+  background-color: $white;
+}
+</style>
diff --git a/src/layouts/_sila/ConsoleLayout.vue b/src/layouts/_sila/ConsoleLayout.vue
new file mode 100644
index 00000000..9f8175bf
--- /dev/null
+++ b/src/layouts/_sila/ConsoleLayout.vue
@@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script>
+export default {
+  name: 'Console',
+};
+</script>
diff --git a/src/layouts/_sila/LoginLayout.vue b/src/layouts/_sila/LoginLayout.vue
new file mode 100644
index 00000000..cdff2040
--- /dev/null
+++ b/src/layouts/_sila/LoginLayout.vue
@@ -0,0 +1,112 @@
+<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>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+export default {
+  name: 'LoginLayout',
+  data() {
+    return {
+      altLogo: process.env.VUE_APP_COMPANY_NAME || 'OpenBMC',
+      customizableGuiName: process.env.VUE_APP_GUI_NAME || '',
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  background: gray('100');
+  display: flex;
+  flex-direction: column;
+  gap: $spacer * 2;
+  max-width: 1400px;
+  min-width: 320px;
+  min-height: 100vh;
+  justify-content: space-around;
+
+  @include media-breakpoint-up('md') {
+    background: $white;
+    flex-direction: row;
+  }
+}
+
+.login-main {
+  min-height: 50vh;
+  padding: $spacer * 3;
+
+  @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-form {
+  @include media-breakpoint-up('md') {
+    max-width: 360px;
+  }
+}
+
+.login-aside {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: $spacer * 1.5;
+  margin-right: $spacer * 3;
+  margin-bottom: $spacer;
+
+  @include media-breakpoint-up('md') {
+    min-height: 100vh;
+    padding-bottom: $spacer;
+    flex: 1 1 25%;
+    margin-bottom: 0;
+  }
+}
+
+.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;
+  }
+}
+</style>