From 7db8bf3f56afb228822aabf7741d63243780dd5d Mon Sep 17 00:00:00 2001 From: Tykayn Date: Mon, 14 Feb 2022 15:51:17 +0100 Subject: [PATCH] :art: placing bottom nav on small screens --- .../components/header/header.component.html | 26 +++++-------- src/app/core/services/poll.service.ts | 2 +- .../date-select/date-select.component.html | 2 +- .../date/list/time/time-list.component.html | 2 +- .../steps/step-four/step-four.component.html | 38 ++++++++----------- .../steps/step-four/step-four.component.scss | 5 +-- .../nav-steps/nav-steps.component.scss | 2 - .../stepper/stepper.component.html | 8 +--- .../stepper/stepper.component.scss | 18 +++++---- src/environments/environment.ts | 2 +- src/styles/partials/_forms.scss | 3 +- src/styles/partials/_navigation.scss | 2 +- src/styles/partials/_responsive.scss | 13 ++----- 13 files changed, 50 insertions(+), 73 deletions(-) diff --git a/src/app/core/components/header/header.component.html b/src/app/core/components/header/header.component.html index 9afbba69..9d8fab1e 100644 --- a/src/app/core/components/header/header.component.html +++ b/src/app/core/components/header/header.component.html @@ -1,24 +1,17 @@
- +
- - - -
- {{ 'creation.init' | translate }} -
- - + + +
+ {{ 'creation.init' | translate }} +
+
@@ -55,8 +48,9 @@ demo - + + { public intervalDays: number = 1; public intervalDaysDefault = 7; public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll - public timeList: TimeSlices[] = [{ literal: '' }]; // ranges of time expressed as strings + public timeList: TimeSlices[] = [{ literal: 'example' }]; // ranges of time expressed as strings public previousRouteName: string = '/administration'; public nextRouteName: string = '/administration/step/2'; public step_current: number = 1; diff --git a/src/app/features/administration/form/date-select/date-select.component.html b/src/app/features/administration/form/date-select/date-select.component.html index 88e7ed62..a4dc51a4 100644 --- a/src/app/features/administration/form/date-select/date-select.component.html +++ b/src/app/features/administration/form/date-select/date-select.component.html @@ -76,7 +76,7 @@ {{ timeSlices.length }} -
-
+
+ + +
diff --git a/src/app/features/administration/form/steps/step-four/step-four.component.scss b/src/app/features/administration/form/steps/step-four/step-four.component.scss index 69dc1670..1eab7ce3 100644 --- a/src/app/features/administration/form/steps/step-four/step-four.component.scss +++ b/src/app/features/administration/form/steps/step-four/step-four.component.scss @@ -2,9 +2,8 @@ @import '../../../../../../styles/dev-utilities/helpers'; .time-slice-list-of-a-day { - .column { - min-height: 2rem; - max-height: 3rem; + label { + line-height: 2.25rem; } } diff --git a/src/app/features/administration/nav-steps/nav-steps.component.scss b/src/app/features/administration/nav-steps/nav-steps.component.scss index 468a217d..02979618 100644 --- a/src/app/features/administration/nav-steps/nav-steps.component.scss +++ b/src/app/features/administration/nav-steps/nav-steps.component.scss @@ -1,8 +1,6 @@ @import '../../../../styles/variables'; .bottom-step-buttons { - width: 100vw; - .button-previous { margin-left: 0; &:hover { diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html index c978a536..504c1865 100644 --- a/src/app/features/administration/stepper/stepper.component.html +++ b/src/app/features/administration/stepper/stepper.component.html @@ -54,11 +54,7 @@
- +

- + {{ 'creation.title' | translate }} diff --git a/src/app/features/administration/stepper/stepper.component.scss b/src/app/features/administration/stepper/stepper.component.scss index 8a6c1956..af0bc7c3 100644 --- a/src/app/features/administration/stepper/stepper.component.scss +++ b/src/app/features/administration/stepper/stepper.component.scss @@ -24,7 +24,6 @@ } .step-title-poll { - margin-top: 5px; max-width: 45ch; text-overflow: ellipsis; display: inline-block !important; @@ -107,12 +106,15 @@ } .step-info { - padding: 0 10px; + padding: 16px 10px; width: 100%; display: block; background: $white; height: $header-nav-inner-height; + .columns { + padding-top: 0; + } i { margin-left: 1ch; } @@ -196,19 +198,19 @@ .logo-home-link { padding: 0; } -.logo-home-link-img { - &:hover { - background: #ccc; - } -} .stepper-app-logo { max-width: $logo-side; max-height: $logo-side; - margin: 10px 16px; height: $logo-side; width: $logo-side; display: inline-block; + margin-right: 1rem; + margin-top: 10px; + border-radius: 100%; + &:hover { + background: $d-primary; + } } #display_cancel_popup_button { diff --git a/src/environments/environment.ts b/src/environments/environment.ts index cb9eac27..c32f4e15 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -24,7 +24,7 @@ export const environment = { appSupportEmail: 'example-support@example.com', appSupportWebpage: 'https://www.cipherbliss.com/contact', autofill_creation: false, - autofill_default_timeslices: false, + autofill_default_timeslices: true, autofill_participation: false, autoSendNewPoll: false, creation_display_admin_url: false, diff --git a/src/styles/partials/_forms.scss b/src/styles/partials/_forms.scss index c71d24ba..c9d3834a 100644 --- a/src/styles/partials/_forms.scss +++ b/src/styles/partials/_forms.scss @@ -291,7 +291,8 @@ mat-checkbox { margin: 0 auto; padding: 7rem 0; box-sizing: border-box; - overflow: auto; + overflow-y: auto; + overflow-x: hidden; @extend .top-padding-nav; .title { diff --git a/src/styles/partials/_navigation.scss b/src/styles/partials/_navigation.scss index 15eb3223..4107e490 100644 --- a/src/styles/partials/_navigation.scss +++ b/src/styles/partials/_navigation.scss @@ -72,7 +72,7 @@ a span.ui-steps-number { position: fixed; right: 0; left: 0; - padding: 1rem 0.5rem; + padding: 0; .button { display: inline-block; diff --git a/src/styles/partials/_responsive.scss b/src/styles/partials/_responsive.scss index 060b47d5..79a38f65 100644 --- a/src/styles/partials/_responsive.scss +++ b/src/styles/partials/_responsive.scss @@ -64,13 +64,7 @@ } .step { - padding: calc(56px + 32px) 1rem; - } - .bottom-step-buttons { - padding: 0.25rem 0; - .contained-in-main-column { - padding: 0.5rem; - } + padding: calc(56px + 32px) 0.5rem; } #creation_stepper { .logo-home-link { @@ -80,6 +74,9 @@ padding: 0; margin: 0; } + &:hover { + background: transparent; + } } .step-info { height: 4.5rem; @@ -121,8 +118,6 @@ display: inline-block; } .time-choice { - padding: 1em; - input { width: 80%; }