tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki 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';
.big-header {
height: $home-nav-height;
height: $header-nav-height;
padding-top: 1rem;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
position: fixed;
top: 0;

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

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

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

@ -52,53 +52,47 @@
</div>
<div class="step-info">
<div class="columns">
<div class="column">
<a class="logo-home-link logo-home-link-img pull-left" routerLink="/" routerLinkActive="active">
<img
class="stepper-app-logo"
*ngIf="environment.appLogo"
src="{{ environment.appLogo }}"
alt="accueil {{ environment.appTitle }}"
/>
</a>
<h1 class="title-section">
<a class="logo-home-link pull-left" routerLink="/" routerLinkActive="active">
<span class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}
</span>
</a>
<a class="logo-home-link logo-home-link-img pull-left" routerLink="/" routerLinkActive="active">
<img
class="stepper-app-logo"
*ngIf="environment.appLogo"
src="{{ environment.appLogo }}"
alt="accueil {{ environment.appTitle }}"
/>
</a>
<h1 class="title-section">
<a class="logo-home-link pull-left" routerLink="/" routerLinkActive="active">
<span class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}
</span>
</a>
<div *ngIf="pollService.step_current > 1">
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
{{ pollService.form.value.title }}
</span>
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
{{ '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>
<div *ngIf="pollService.step_current > 1">
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
{{ pollService.form.value.title }}
</span>
<span class="step-title-poll poll-title-empty" *ngIf="!pollService.form.value.title.length">
{{ 'nav.no_title' | translate }}
</span>
</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 class="step-bar-container"></div>

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

@ -76,8 +76,8 @@
.nav-button {
margin-top: 0;
margin-right: 1em;
line-height: $stepper-nav-height / 2;
height: $stepper-nav-height / 2;
line-height: $stepper-nav-height;
height: $stepper-nav-height;
display: inline-block;
padding-left: 1em;
@ -150,7 +150,6 @@
.cancel-button-stepper {
padding: 0 1rem;
height: auto;
margin-top: 0.75rem;
border-color: $primary_color;
color: $primary_color;
}
@ -206,7 +205,6 @@
width: $logo-side;
display: inline-block;
margin-right: 1rem;
margin-top: 10px;
border-radius: 100%;
&:hover {
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"
>
<i class="fa fa-language"></i>
<span class="short-lang is-hidden-tablet">
{{ 'LANGUAGES_SHORT.' + currentLang.toUpperCase() | translate }}
</span>

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

@ -59,7 +59,7 @@
border: none;
padding: 0 1rem;
display: block;
line-height: 2rem;
line-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;
right: 0;
left: 0;
padding: 0;
padding: 10px;
.button {
display: inline-block;

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

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

4
src/styles/variables.scss
View File

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