feat(1xp-banner): add banner to /signin, /account, and /error p…

…ages (#2195) * feat(1xp-banner): add banner to /signin and /account pages * feat(1xp-banner): add banner to error template --------- Co-authored-by: //va <vabarbosa@users.noreply.github.com>
Qiskit · Sep 7, 2023 · 5d9ba88 · 5d9ba88
1 parent 10379d3
commit 5d9ba88
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 5 deletions.
diff --git a/frontend/scss/components/textbook__page.scss b/frontend/scss/components/textbook__page.scss
@@ -4,9 +4,6 @@
 @import '../variables/mq.scss';
 @import '../variables/fonts.scss';
 
-$one-xp-banner-height-desktop: 3.25rem;
-$one-xp-banner-height-mobile: 5rem;
-
 body {
   max-height: 100vh;
   display: grid;

diff --git a/frontend/scss/variables/settings.scss b/frontend/scss/variables/settings.scss
@@ -7,6 +7,9 @@ $textbook-page-width: 100%;
 $qiskit-navbar-height: 3.5rem;
 $textbook-page-banner-height: 40px;
 
+$one-xp-banner-height-desktop: 3.25rem;
+$one-xp-banner-height-mobile: 5rem;
+
 $left-sidebar-width: 16rem;
 $left-sidebar-width-hidden: 3rem;
 $left-sidebar-width-sm: 3.5rem;

diff --git a/frontend/vue/components/SignIn/SignIn.vue b/frontend/vue/components/SignIn/SignIn.vue
@@ -63,20 +63,26 @@ export default class SignIn extends Vue {
 <style lang="scss" scoped>
 @import 'carbon-components/scss/globals/scss/typography';
 @import '~/../scss/variables/mq.scss';
+@import '~/../scss/variables/settings.scss';
 @import '~/../scss/mixins/mixins.scss';
 @import '~/../scss/variables/colors.scss';
 
 .sign-in {
   position: fixed;
-  top: 3.5rem;
+  top: calc($qiskit-navbar-height + $one-xp-banner-height-desktop + 1px);
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 3;
-  max-height: calc(100vh - 3.5rem);
+  max-height: calc(100vh - ($qiskit-navbar-height + $one-xp-banner-height-desktop + 1px));
   overflow: hidden;
   display: flex;
 
+  @include mq($from: medium, $until: large) {
+    top: calc($qiskit-navbar-height + $one-xp-banner-height-mobile + 1px);
+    max-height: calc(100vh - ($qiskit-navbar-height + $one-xp-banner-height-mobile + 1px));
+  }
+
   @include mq($until: medium) {
     flex-direction: column;
     position: initial;

diff --git a/server/templates/error.pug b/server/templates/error.pug
@@ -12,6 +12,7 @@ html(lang=`${req.locale.id}` dir=dir)
   body
     div.qiskit__navbar#qiskit-navbar
       q-the-menu
+    q-one-xp-banner
 
     .body
       article.c-textbook__page.c-textbook__page__error

diff --git a/server/templates/signIn.pug b/server/templates/signIn.pug
@@ -8,6 +8,8 @@ html(lang=lang dir=dir)
   body#app
     div.qiskit__navbar#qiskit-navbar
       q-the-menu
+    q-one-xp-banner
+
 
     .body
       q-sign-in

diff --git a/server/templates/userAccount.pug b/server/templates/userAccount.pug
@@ -8,6 +8,7 @@ html(lang=lang dir=dir)
   body
     div.qiskit__navbar#qiskit-navbar
       q-the-menu
+    q-one-xp-banner
 
     .body
       q-user-account-layout(first-name=userData.firstName, last-name=userData.lastName email=userData.email user-id=userData.userId)