Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

position header

Browse Source
This commit is contained in:
Tykayn 2022-02-15 14:48:50 +01:00 committed by tykayn
parent ed6b3794bf
commit 3fa415f24c
9 changed files with 47 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/core/components/header/header.component.scss
View File

@ -1,6 +1,7 @@
@import '../../../../styles/variables'; @import '../../../../styles/variables';
.big-header { .big-header {
height: $home-nav-height; height: $header-nav-height;
padding-top: 1rem;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
position: fixed; position: fixed;
top: 0; top: 0;

2
src/app/core/components/home/home.component.scss
View File

@ -2,7 +2,7 @@
:host { :host {
.landing-box { .landing-box {
padding: 70px 1em 6em; padding: 6em 0;
color: $primary_color; color: $primary_color;
min-height: 500px; min-height: 500px;
.title { .title {

82
src/app/features/administration/stepper/stepper.component.html
View File

@ -52,53 +52,47 @@
</div> </div>
<div class="step-info"> <div class="step-info">
<div class="columns"> <a class="logo-home-link logo-home-link-img pull-left" routerLink="/" routerLinkActive="active">
<div class="column"> <img
<a class="logo-home-link logo-home-link-img pull-left" routerLink="/" routerLinkActive="active"> class="stepper-app-logo"
<img *ngIf="environment.appLogo"
class="stepper-app-logo" src="{{ environment.appLogo }}"
*ngIf="environment.appLogo" alt="accueil {{ environment.appTitle }}"
src="{{ environment.appLogo }}" />
alt="accueil {{ environment.appTitle }}" </a>
/> <h1 class="title-section">
</a> <a class="logo-home-link pull-left" routerLink="/" routerLinkActive="active">
<h1 class="title-section"> <span class="step-title-poll" *ngIf="pollService.step_current == 1">
<a class="logo-home-link pull-left" routerLink="/" routerLinkActive="active"> {{ 'creation.title' | translate }}
<span class="step-title-poll" *ngIf="pollService.step_current == 1"> </span>
{{ 'creation.title' | translate }} </a>
</span>
</a>
<div *ngIf="pollService.step_current > 1"> <div *ngIf="pollService.step_current > 1">
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length"> <span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
{{ pollService.form.value.title }} {{ pollService.form.value.title }}
</span> </span>
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length"> <span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
{{ 'nav.no_title' | translate }} {{ 'nav.no_title' | translate }}
</span>
</div>
<div class="step-counter-text">
{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
</div>
</h1>
</div>
<div class="column has-text-right is-narrow">
<button class="is-visible-smallest-screen pull-right menu-button" (click)="toggle_mobile_menu()">
{{ 'nav.menu' | translate }}
<img class="icon" aria-hidden="true" src="assets/icons/book.svg" />
</button>
<span class="is-hidden-smallest-screen">
<app-language-selector class="nav-button"></app-language-selector>
<button
class="nav-button cancel-button-stepper"
(click)="showCancelDialog()"
id="display_cancel_popup_button"
aria-haspopup="dialog"
>
{{ 'nav.leave' | translate }}
</button>
</span> </span>
</div> </div>
<div class="step-counter-text">
{{ 'nav.step' | translate }} {{ step_current }} {{ 'nav.on' | translate }} {{ step_max }}
</div>
</h1>
<button class="is-visible-smallest-screen pull-right menu-button" (click)="toggle_mobile_menu()">
{{ 'nav.menu' | translate }}
<img class="icon" aria-hidden="true" src="assets/icons/book.svg" />
</button>
<div class="is-hidden-smallest-screen has-right-elements pull-right">
<app-language-selector class="nav-button"></app-language-selector>
<button
class="nav-button cancel-button-stepper"
(click)="showCancelDialog()"
id="display_cancel_popup_button"
aria-haspopup="dialog"
>
{{ 'nav.leave' | translate }}
</button>
</div> </div>
</div> </div>
<div class="step-bar-container"></div> <div class="step-bar-container"></div>

6
src/app/features/administration/stepper/stepper.component.scss
View File

@ -76,8 +76,8 @@
.nav-button { .nav-button {
margin-top: 0; margin-top: 0;
margin-right: 1em; margin-right: 1em;
line-height: $stepper-nav-height / 2; line-height: $stepper-nav-height;
height: $stepper-nav-height / 2; height: $stepper-nav-height;
display: inline-block; display: inline-block;
padding-left: 1em; padding-left: 1em;
@ -150,7 +150,6 @@
.cancel-button-stepper { .cancel-button-stepper {
padding: 0 1rem; padding: 0 1rem;
height: auto; height: auto;
margin-top: 0.75rem;
border-color: $primary_color; border-color: $primary_color;
color: $primary_color; color: $primary_color;
} }
@ -206,7 +205,6 @@
width: $logo-side; width: $logo-side;
display: inline-block; display: inline-block;
margin-right: 1rem; margin-right: 1rem;
margin-top: 10px;
border-radius: 100%; border-radius: 100%;
&:hover { &:hover {
background: $d-primary; background: $d-primary;

1
src/app/shared/components/selectors/language-selector/language-selector.component.html
View File

@ -7,7 +7,6 @@
[attr.aria-label]="'LANGUAGES.' + currentLang.toUpperCase() | translate" [attr.aria-label]="'LANGUAGES.' + currentLang.toUpperCase() | translate"
> >
<i class="fa fa-language"></i> <i class="fa fa-language"></i>
<span class="short-lang is-hidden-tablet"> <span class="short-lang is-hidden-tablet">
{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }} {{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
</span> </span>

2
src/app/shared/components/selectors/language-selector/language-selector.component.scss
View File

@ -59,7 +59,7 @@
border: none; border: none;
padding: 0 1rem; padding: 0 1rem;
display: block; display: block;
line-height: 2rem; line-height: $stepper-nav-height;
height: $stepper-nav-height; height: $stepper-nav-height;
} }

2
src/styles/partials/_navigation.scss
View File

@ -72,7 +72,7 @@ a span.ui-steps-number {
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
padding: 0; padding: 10px;
.button { .button {
display: inline-block; display: inline-block;

5
src/styles/partials/_responsive.scss
View File

@ -45,9 +45,7 @@
@media (max-width: 569px) { @media (max-width: 569px) {
.logo-home-link-img { .logo-home-link-img {
display: inline-block; display: inline-block;
margin-top: 8px;
width: 50px; width: 50px;
padding: 8px !important;
} }
.title-section { .title-section {
width: 60%; width: 60%;
@ -78,9 +76,6 @@
background: transparent; background: transparent;
} }
} }
.step-info {
height: 4.5rem;
}
.cancel-button { .cancel-button {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
min-width: 1em; min-width: 1em;

4
src/styles/variables.scss
View File

@ -79,8 +79,8 @@ $mobile-size: 25rem;
$header-nav-height: 4.85rem; $header-nav-height: 4.85rem;
$header-nav-inner-height: 4.5rem; $header-nav-inner-height: 4.5rem;
$widescreen-width-main-column: 75rem; $widescreen-width-main-column: 75rem;
$stepper-nav-height: 56px; $stepper-nav-height: 2rem;
$home-nav-height: 56px; $home-nav-height: 2rem;
$home-nav-height-small: 3.5rem; $home-nav-height-small: 3.5rem;
// datepicker // datepicker
$cell-size-datepicker-small: 30px; $cell-size-datepicker-small: 30px;