tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

better responsive stepper bar

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;
display: inline-block;
}
.navbar {
background: white;
.header-app-logo {
width: $logo-side;
height: $logo-side;
}
.navbar-item {
a {

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

@ -52,24 +52,26 @@
</div>
<div class="step-info">
<div class="columns half-columns">
<div class="columns">
<div class="column">
<a
class="logo-home-link navbar-item pull-left is-hidden-mobile"
[routerLink]="['/']"
routerLink="/"
routerLinkActive="active"
>
<img
class="stepper-app-logo logo"
class="stepper-app-logo"
*ngIf="environment.appLogo"
src="{{ environment.appLogo }}"
alt="accueil {{ environment.appTitle }}"
/>
</a>
<h1>
<span class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}
</span>
<h1 class="title-section">
<a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active">
<span class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }}
</span>
</a>
<span *ngIf="pollService.step_current > 1">
<span class="step-title-poll poll-title-filled" *ngIf="pollService.form.value.title.length">
@ -84,7 +86,7 @@
</span>
</h1>
</div>
<div class="column has-text-right">
<div class="column has-text-right is-narrow">
<app-language-selector class="nav-button"></app-language-selector>
<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,
.column {
padding-top: 0;
padding-bottom: 0;
}
.columns {
padding-top: 1rem;
}
.step-bar-container {
margin: 0;
width: 100%;
@ -59,13 +79,16 @@
height: $stepper-nav-height / 2;
display: inline-block;
padding-left: 1em;
&:nth-last-of-type(1) {
margin-right: 0;
}
&app-language-selector {
padding-top: 1rem;
}
}
.cancel-button {
line-height: $stepper-nav-height / 2;
height: $stepper-nav-height / 2;
@ -79,6 +102,7 @@
background: $primary_color;
}
}
.cancel-button-reject-bottom {
background: $secondary_color;
color: $white;
@ -91,6 +115,7 @@
display: block;
background: $white;
height: $header-nav-inner-height;
i {
margin-left: 1ch;
}
@ -117,15 +142,18 @@
.top {
height: 2rem;
}
.cancel-button-reject {
background: none;
color: $primary_color;
margin-right: -1rem;
i {
color: $primary_color;
margin-left: 1ch;
}
}
.cancel-button-confirm {
color: $secondary_color;
margin-right: 0;
@ -137,13 +165,20 @@
display: inline-block;
}
.logo-home-link {
padding: 0;
}
.stepper-app-logo {
max-width: $main-column-width-inner;
max-height: $main-column-width-inner;
height: 3rem;
width: 3rem;
margin: 10px 16px;
height: $logo-side;
width: $logo-side;
display: inline-block;
}
#display_cancel_popup_button {
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;
padding: 0 1rem;
display: block;
line-height: $header-nav-height;
height: $header-nav-height;
line-height: 2rem;
height: 4rem;
}

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

@ -1,4 +1,26 @@
// 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) {
.feedback-container {
//position: fixed;
@ -9,6 +31,7 @@
td {
width: $cell-size-desktop;
}
td span,
.p-ripple {
width: $cell-size-desktop;
@ -17,6 +40,7 @@
}
}
}
// wide screen like desktop
@media (min-width: $widescreen) {
.step {

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

@ -57,39 +57,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 {

5
src/styles/variables.scss
View File

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