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

better responsive stepper bar

Browse Source
This commit is contained in:
Tykayn 2022-02-09 14:27:22 +01:00 committed by tykayn
parent 73dc9d69f3
commit f635400d94
7 changed files with 112 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,9 @@
line-height: 4rem; line-height: 4rem;
display: inline-block; display: inline-block;
} }
.navbar { .header-app-logo {
background: white; width: $logo-side;
height: $logo-side;
} }
.navbar-item { .navbar-item {
a { a {

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

@ -52,24 +52,26 @@
</div> </div>
<div class="step-info"> <div class="step-info">
<div class="columns half-columns"> <div class="columns">
<div class="column"> <div class="column">
<a <a
class="logo-home-link navbar-item pull-left is-hidden-mobile" class="logo-home-link navbar-item pull-left is-hidden-mobile"
[routerLink]="['/']" routerLink="/"
routerLinkActive="active" routerLinkActive="active"
> >
<img <img
class="stepper-app-logo logo" class="stepper-app-logo"
*ngIf="environment.appLogo" *ngIf="environment.appLogo"
src="{{ environment.appLogo }}" src="{{ environment.appLogo }}"
alt="accueil {{ environment.appTitle }}" alt="accueil {{ environment.appTitle }}"
/> />
</a> </a>
<h1> <h1 class="title-section">
<span class="step-title-poll" *ngIf="pollService.step_current == 1"> <a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
{{ 'creation.title' | translate }} <span class="step-title-poll" *ngIf="pollService.step_current == 1">
</span> {{ 'creation.title' | translate }}
</span>
</a>
<span *ngIf="pollService.step_current > 1"> <span *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">
@ -84,7 +86,7 @@
</span> </span>
</h1> </h1>
</div> </div>
<div class="column has-text-right"> <div class="column has-text-right is-narrow">
<app-language-selector class="nav-button"></app-language-selector> <app-language-selector class="nav-button"></app-language-selector>
<button <button
class="nav-button cancel-button" class="nav-button cancel-button"

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

@ -14,11 +14,31 @@
} }
} }
.title-section {
display: inline-block;
width: 40%;
float: left;
}
.step-title-poll {
max-width: 18ch;
text-overflow: ellipsis;
display: inline-block !important;
overflow: hidden;
}
.step-counter-text {
display: block;
}
.columns, .columns,
.column { .column {
padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
} }
.columns {
padding-top: 1rem;
}
.step-bar-container { .step-bar-container {
margin: 0; margin: 0;
width: 100%; width: 100%;
@ -59,13 +79,16 @@
height: $stepper-nav-height / 2; height: $stepper-nav-height / 2;
display: inline-block; display: inline-block;
padding-left: 1em; padding-left: 1em;
&:nth-last-of-type(1) { &:nth-last-of-type(1) {
margin-right: 0; margin-right: 0;
} }
&app-language-selector { &app-language-selector {
padding-top: 1rem; padding-top: 1rem;
} }
} }
.cancel-button { .cancel-button {
line-height: $stepper-nav-height / 2; line-height: $stepper-nav-height / 2;
height: $stepper-nav-height / 2; height: $stepper-nav-height / 2;
@ -79,6 +102,7 @@
background: $primary_color; background: $primary_color;
} }
} }
.cancel-button-reject-bottom { .cancel-button-reject-bottom {
background: $secondary_color; background: $secondary_color;
color: $white; color: $white;
@ -91,6 +115,7 @@
display: block; display: block;
background: $white; background: $white;
height: $header-nav-inner-height; height: $header-nav-inner-height;
i { i {
margin-left: 1ch; margin-left: 1ch;
} }
@ -117,15 +142,18 @@
.top { .top {
height: 2rem; height: 2rem;
} }
.cancel-button-reject { .cancel-button-reject {
background: none; background: none;
color: $primary_color; color: $primary_color;
margin-right: -1rem; margin-right: -1rem;
i { i {
color: $primary_color; color: $primary_color;
margin-left: 1ch; margin-left: 1ch;
} }
} }
.cancel-button-confirm { .cancel-button-confirm {
color: $secondary_color; color: $secondary_color;
margin-right: 0; margin-right: 0;
@ -137,13 +165,20 @@
display: inline-block; display: inline-block;
} }
.logo-home-link {
padding: 0;
}
.stepper-app-logo { .stepper-app-logo {
max-width: $main-column-width-inner; max-width: $main-column-width-inner;
max-height: $main-column-width-inner; max-height: $main-column-width-inner;
height: 3rem; margin: 10px 16px;
width: 3rem; height: $logo-side;
width: $logo-side;
display: inline-block; display: inline-block;
} }
#display_cancel_popup_button { #display_cancel_popup_button {
min-width: 7em; // to adapt other lang without making the nav move min-width: 7em; // to adapt other lang without making the nav move
z-index: 10;
} }

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

@ -33,6 +33,6 @@
border: none; border: none;
padding: 0 1rem; padding: 0 1rem;
display: block; display: block;
line-height: $header-nav-height; line-height: 2rem;
height: $header-nav-height; height: 4rem;
} }

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

@ -1,4 +1,26 @@
// small screens // small screens
@media (max-width: 487px) {
.step {
padding: 0.25rem;
}
.bottom-step-buttons {
padding: 0;
.contained-in-main-column {
padding: 0.5rem;
}
}
#creation_stepper {
.step-info {
height: 4.5rem;
}
.cancel-button {
padding: 0.5rem 0.75rem;
min-width: 1em;
line-height: 1.5rem;
margin-top: 0;
}
}
}
@media (min-width: 380px) { @media (min-width: 380px) {
.feedback-container { .feedback-container {
//position: fixed; //position: fixed;
@ -9,6 +31,7 @@
td { td {
width: $cell-size-desktop; width: $cell-size-desktop;
} }
td span, td span,
.p-ripple { .p-ripple {
width: $cell-size-desktop; width: $cell-size-desktop;
@ -17,6 +40,7 @@
} }
} }
} }
// wide screen like desktop // wide screen like desktop
@media (min-width: $widescreen) { @media (min-width: $widescreen) {
.step { .step {

66
src/styles/partials/global.scss
View File

@ -57,39 +57,39 @@ main {
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
.column { //.column {
padding: 0; // padding: 0;
width: 50% !important; // width: 50% !important;
float: left; // float: left;
//
&:nth-of-type(1) { // &:nth-of-type(1) {
padding-right: 1.5rem; // padding-right: 1.5rem;
//
.step-info & { // .step-info & {
padding: 0; // padding: 0;
} // }
} // }
//
&:nth-of-type(2) { // &:nth-of-type(2) {
padding-left: 1.5rem; // padding-left: 1.5rem;
} // }
//
&.is-fullwidth { // &.is-fullwidth {
width: 100% !important; // width: 100% !important;
padding-right: 0 !important; // padding-right: 0 !important;
//
.button:nth-of-type(1) { // .button:nth-of-type(1) {
width: 50%; // width: 50%;
float: right; // float: right;
} // }
} // }
} //}
//
.button { //.button {
.is-half-offseted { // .is-half-offseted {
float: right; // float: right;
} // }
} //}
} }
} }
.top-padding-nav { .top-padding-nav {

5
src/styles/variables.scss
View File

@ -74,9 +74,10 @@ $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
$large-column-width: 588px; $large-column-width: 588px;
$main-column-width: 25rem; $main-column-width: 25rem;
$main-column-width-inner: 23.75rem; $main-column-width-inner: 23.75rem;
$logo-side: 31px;
$mobile-size: 25rem; $mobile-size: 25rem;
$header-nav-height: 3.85rem; $header-nav-height: 4.85rem;
$header-nav-inner-height: 3.5rem; $header-nav-inner-height: 4.5rem;
$widescreen-width-main-column: 75rem; $widescreen-width-main-column: 75rem;
$stepper-nav-height: 4.5rem; $stepper-nav-height: 4.5rem;
// datepicker // datepicker