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

style for mobile

Browse Source
This commit is contained in:
Tykayn 2021-12-09 11:21:41 +01:00 committed by tykayn
parent 7575e9ca50
commit cdfff22967
10 changed files with 67 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/features/administration/form/steps/step-two/step-two.component.html
View File

@ -42,6 +42,7 @@
</div> </div>
</div> </div>
<app-nav-steps <app-nav-steps
class="is-fixed-top"
[next_step_number]="pollService.step_current + 1" [next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1" [previous_step_number]="pollService.step_current - 1"
></app-nav-steps> ></app-nav-steps>

6
src/app/features/administration/nav-steps/nav-steps.component.html
View File

@ -1,7 +1,7 @@
<div class="bottom-step-buttons"> <div class="bottom-step-buttons" class="is-fixed-bottom">
<div class="container"> <div class="container">
<div class="columns half-columns"> <div class="columns half-columns">
<div class="column is-narrow-mobile"> <div class="column">
<button <button
*ngIf="display_previous_button" *ngIf="display_previous_button"
class="button button-previous is-secondary is-fullwidth" class="button button-previous is-secondary is-fullwidth"
@ -10,7 +10,7 @@
Précédent Précédent
</button> </button>
</div> </div>
<div class="column is-narrow-mobile"> <div class="column">
<button <button
*ngIf="display_next_button" *ngIf="display_next_button"
class="button button-next is-fullwidth" class="button button-next is-fullwidth"

4
src/app/features/administration/nav-steps/nav-steps.component.scss
View File

@ -1,5 +1,7 @@
@import '../../../../styles/variables'; @import '../../../../styles/variables';
.bottom-step-buttons {
padding: 8px 16px;
}
.button { .button {
&.is-secondary { &.is-secondary {
color: $secondary_color !important; color: $secondary_color !important;

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

@ -78,9 +78,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="step-bar-container" style="width: 100%;"> <div class="step-bar-container"></div>
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div> <div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
</div>
<!-- modale pour quitter la création--> <!-- modale pour quitter la création-->
<p-dialog <p-dialog

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

@ -4,7 +4,7 @@
#creation_stepper { #creation_stepper {
@extend .fixed-box; @extend .fixed-box;
background: $white; background: $white;
height: 6em; height: 56px;
a { a {
@extend .clickable; @extend .clickable;
@ -21,19 +21,21 @@
.step-bar-container { .step-bar-container {
margin: 0; margin: 0;
height: 0.6em;
display: inline-block;
min-width: 1px;
background: $d-grey !important;
width: 100%; width: 100%;
position: relative;
top: 4px;
display: block;
min-width: 1px;
height: 4px;
background: $d-grey !important;
} }
.step-bar-progress { .step-bar-progress {
position: relative; position: relative;
top: -0.5em; top: 0;
left: 0; left: 0;
height: 0.5em; height: 4px;
display: inline-block; display: block;
min-width: 1px; min-width: 1px;
background: $d-blue-700; background: $d-blue-700;
} }
@ -51,8 +53,9 @@
} }
.cancel-button { .cancel-button {
margin-top: -0.5em; margin-top: 0;
line-height: 2rem; line-height: 60px;
height: 60px;
display: inline-block; display: inline-block;
&:hover { &:hover {
@ -63,7 +66,7 @@
.step-info { .step-info {
padding: 9px 10px; padding: 9px 10px;
background: $white; background: $white;
height: 60px;
i { i {
margin-left: 1ch; margin-left: 1ch;
} }

3
src/index.html
View File

@ -1,9 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" class="has-navbar-fixed-top">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<base href="/" /> <base href="/" />
<meta content="width=device-width, initial-scale=1" name="viewport" /> <meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="favicon.ico" rel="icon" type="image/x-icon" /> <link href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />

5
src/styles/libraries/_overrides.scss
View File

@ -19,3 +19,8 @@ $input-shadow: none;
display: block !important; display: block !important;
width: 80%; width: 80%;
} }
html.has-navbar-fixed-top,
body.has-navbar-fixed-top {
padding-top: 68px;
}

30
src/styles/partials/_forms.scss
View File

@ -21,7 +21,6 @@ app-step-three,
app-step-four, app-step-four,
app-step-six, app-step-six,
app-step-seven { app-step-seven {
padding: 2em 2.5em;
display: block; display: block;
} }
@ -83,13 +82,17 @@ textarea {
} }
// radio input structure // radio input structure
.mat-checkbox-label,
.mat-checkbox-layout .mat-checkbox-label {
max-width: 90vw;
}
.button { .button {
label { label {
margin-bottom: 0; margin-bottom: 0;
width: 100%; width: 100%;
display: inline-block; display: inline-block;
text-align: left; text-align: left;
max-width: 90vw;
} }
} }
input[type='radio'] { input[type='radio'] {
@ -103,11 +106,6 @@ li {
list-style-type: none; list-style-type: none;
} }
.next {
max-width: 200px;
margin-bottom: 50px;
}
.btn-block { .btn-block {
display: block; display: block;
width: 100%; width: 100%;
@ -138,12 +136,14 @@ option {
background-position: right 1rem center; background-position: right 1rem center;
background-clip: border-box; background-clip: border-box;
min-width: 10rem; min-width: 10rem;
max-width: 90vw;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
border-bottom: 2px solid $primary_color !important; border-bottom: 2px solid $primary_color !important;
} }
select { select {
@extend .select, .input; @extend .select, .input;
max-width: 90vw;
} }
#multi_hours select { #multi_hours select {
@ -153,11 +153,13 @@ select {
input { input {
border-color: #4e4c59 !important; border-color: #4e4c59 !important;
@extend .text-ellipsis; @extend .text-ellipsis;
max-width: 90vw;
display: block;
} }
textarea { textarea {
width: 100%; width: 100%;
max-width: 100%; max-width: 90vw;
min-height: 213px; min-height: 213px;
padding: 0.5em 1em; padding: 0.5em 1em;
margin-bottom: 1em; margin-bottom: 1em;
@ -198,7 +200,7 @@ mat-checkbox {
.admin-form { .admin-form {
.step { .step {
max-width: 800px; max-width: $main-column-width;
margin: 0 auto; margin: 0 auto;
} }
} }
@ -305,14 +307,16 @@ mat-checkbox {
} }
.step { .step {
padding-top: 8em; padding: 1rem 1rem;
.title { .title {
color: $primary_color; color: $d-primary-intense;
margin-bottom: 36px;
font-size: 28px;
line-height: 32px;
} }
.step-counter-text { .step-counter-text {
color: $primary_color; color: $d-primary-intense;
font-size: 1rem; font-size: 1rem;
line-height: 1.25rem; line-height: 1.25rem;
} }

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

@ -5,6 +5,9 @@ html {
color: $font_color; color: $font_color;
} }
form {
margin: 0 !important;
}
main { main {
min-height: 90vh; min-height: 90vh;
} }
@ -37,12 +40,25 @@ main {
.columns { .columns {
&.half-columns { &.half-columns {
max-width: 900px; max-width: $main-column-width;
margin: 0 auto; margin: 0 auto;
padding: 0;
.column { .column {
padding: 0; padding: 0;
width: 50% !important; width: 50% !important;
float: left; float: left;
&:nth-of-type(1) {
padding-right: 1.5rem;
.step-info & {
padding: 0;
}
}
&:nth-of-type(2) {
padding-left: 1.5rem;
}
}
.button {
width: 100%;
} }
} }
} }

4
src/styles/variables.scss
View File

@ -66,3 +66,7 @@ $success: $d-success;
$default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
$title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
// sizes and breakpoints
$main-column-width: 900px;
$mobile-size: 380px;