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>
<app-nav-steps
class="is-fixed-top"
[next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1"
></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="columns half-columns">
<div class="column is-narrow-mobile">
<div class="column">
<button
*ngIf="display_previous_button"
class="button button-previous is-secondary is-fullwidth"
@ -10,7 +10,7 @@
Précédent
</button>
</div>
<div class="column is-narrow-mobile">
<div class="column">
<button
*ngIf="display_next_button"
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';
.bottom-step-buttons {
padding: 8px 16px;
}
.button {
&.is-secondary {
color: $secondary_color !important;

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

@ -78,9 +78,8 @@
</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>
<!-- modale pour quitter la création-->
<p-dialog

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

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

3
src/index.html
View File

@ -1,9 +1,8 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="has-navbar-fixed-top">
<head>
<meta charset="utf-8" />
<base href="/" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<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" />

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

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

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

@ -5,6 +5,9 @@ html {
color: $font_color;
}
form {
margin: 0 !important;
}
main {
min-height: 90vh;
}
@ -37,12 +40,25 @@ main {
.columns {
&.half-columns {
max-width: 900px;
max-width: $main-column-width;
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;
}
}
.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';
$title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
// sizes and breakpoints
$main-column-width: 900px;
$mobile-size: 380px;