From a14ccb3ddd025ee7c32d5a74ca26f1bddd6a53c1 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 9 Feb 2022 14:47:51 +0100 Subject: [PATCH] responsive home and stepper nav --- .../components/header/header.component.html | 70 +++++++------------ .../components/header/header.component.scss | 4 +- .../core/components/home/home.component.ts | 2 +- .../stepper/stepper.component.html | 10 +-- .../stepper/stepper.component.scss | 12 ++-- src/styles/partials/_forms.scss | 6 -- src/styles/partials/_responsive.scss | 8 ++- src/styles/partials/global.scss | 69 +++++++++--------- src/styles/variables.scss | 2 + 9 files changed, 83 insertions(+), 100 deletions(-) diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index 0f599a95..7680e60a 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -1,54 +1,32 @@
-
-
- -
+ +
+
+ +
+
+
+ +
- +
{{ pollService.form.value.title }} {{ 'nav.no_title' | translate }} - - {{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }} - +
+
+ {{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }} +
diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss index e5f8d2b2..37e59086 100644 --- a/src/app/features/administration/stepper/stepper.component.scss +++ b/src/app/features/administration/stepper/stepper.component.scss @@ -25,9 +25,6 @@ display: inline-block !important; overflow: hidden; } - .step-counter-text { - display: block; - } .columns, .column { @@ -125,7 +122,7 @@ font-size: 0.85rem; color: #767486; margin-bottom: 0; - padding-top: 0.5rem; + padding-left: 0; display: block; font-weight: bold; } @@ -135,8 +132,13 @@ } .step-counter-text { + color: $d-primary-intense; + font-size: 1rem; + line-height: 1.25rem; font-weight: 600; - color: $d-blue-700; + display: block; + float: left; + width: 100%; } .top { diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss index d8fa6491..5825f196 100644 --- a/src/styles/partials/_forms.scss +++ b/src/styles/partials/_forms.scss @@ -295,12 +295,6 @@ mat-checkbox { line-height: 32px; } - .step-counter-text { - color: $d-primary-intense; - font-size: 1rem; - line-height: 1.25rem; - } - .columns { margin-left: 0; margin-right: 0; diff --git a/src/styles/partials/_responsive.scss b/src/styles/partials/_responsive.scss index 3e16b294..3a491701 100644 --- a/src/styles/partials/_responsive.scss +++ b/src/styles/partials/_responsive.scss @@ -1,7 +1,13 @@ +@import '../variables'; + // small screens @media (max-width: 487px) { + .big-header { + height: $home-nav-height-small; + } + .step { - padding: 0.25rem; + padding: $stepper-nav-height 0.25rem; } .bottom-step-buttons { padding: 0; diff --git a/src/styles/partials/global.scss b/src/styles/partials/global.scss index 8ab8000d..4c01bb91 100644 --- a/src/styles/partials/global.scss +++ b/src/styles/partials/global.scss @@ -21,11 +21,10 @@ form { } main { - min-height: 90vh; + min-height: 60vh; } .min-height { - margin-top: 1em; margin-bottom: 1em; min-height: 50vh; } @@ -57,39 +56,39 @@ main { margin: 0 auto; padding: 0; - //.column { - // padding: 0; - // width: 50% !important; - // float: left; - // - // &:nth-of-type(1) { - // padding-right: 1.5rem; - // - // .step-info & { - // padding: 0; - // } - // } - // - // &:nth-of-type(2) { - // padding-left: 1.5rem; - // } - // - // &.is-fullwidth { - // width: 100% !important; - // padding-right: 0 !important; - // - // .button:nth-of-type(1) { - // width: 50%; - // float: right; - // } - // } - //} - // - //.button { - // .is-half-offseted { - // float: right; - // } - //} + .column { + // padding: 0; + width: 50% !important; + // float: left; + // + // &:nth-of-type(1) { + // padding-right: 1.5rem; + // + // .step-info & { + // padding: 0; + // } + // } + // + // &:nth-of-type(2) { + // padding-left: 1.5rem; + // } + // + // &.is-fullwidth { + // width: 100% !important; + // padding-right: 0 !important; + // + // .button:nth-of-type(1) { + // width: 50%; + // float: right; + // } + // } + //} + // + //.button { + // .is-half-offseted { + // float: right; + // } + } } } .top-padding-nav { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index eeee4a52..c52e7fab 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -80,6 +80,8 @@ $header-nav-height: 4.85rem; $header-nav-inner-height: 4.5rem; $widescreen-width-main-column: 75rem; $stepper-nav-height: 4.5rem; +$home-nav-height: 4.5rem; +$home-nav-height-small: 3.5rem; // datepicker $cell-size: 30px; $cell-size-desktop: 40px;