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

style to fix button nav

This commit is contained in:
Tykayn 2021-12-09 15:06:55 +01:00 committed by tykayn
parent 9c55186aa1
commit cf7e6603f9
15 changed files with 69 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.component.ts
View File

@ -72,9 +72,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
this.onHomePage = evt.url === '/';
let mainelem = this.document.querySelector('#big_container');
console.log('mainelem', mainelem);
window.scrollTo(0, mainelem.offsetTop);
window.scrollTo(0, 0);
});
if (!environment.production) {

3
src/app/features/administration/form/date/list/day/day-list.component.html
View File

@ -21,7 +21,8 @@
<div class="columns">
<div class="column">
<label class="pull-left" for="dateChoices_{{ id }}">
Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
Date {{ id + 1 }}
<!-- - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
</label>
<span class="format-helper pull-right">JJ/MM/AAAA</span>
</div>

4
src/app/features/administration/form/date/list/day/day-list.component.scss
View File

@ -1,5 +1,7 @@
@import '../../../../../../../styles/variables';
.day-list-container {
padding-bottom: 2rem;
}
.day-weekend {
background: #dccfed;
}

10
src/app/features/administration/form/steps/step-seven/step-seven.component.html
View File

@ -80,11 +80,11 @@
</div>
</div>
</div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1"
[is_finish_step]="true"
></app-nav-steps>
</div>
</div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1"
[is_finish_step]="true"
></app-nav-steps>
</div>

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

@ -41,10 +41,9 @@
</div>
</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>
</form>
<app-nav-steps
[next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1"
></app-nav-steps>
</div>

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

@ -1,30 +1,24 @@
<div class="bottom-step-buttons" class="is-fixed-bottom">
<div class="container">
<div class="columns half-columns">
<div class="column" *ngIf="display_previous_button">
<button
class="button button-previous is-secondary is-fullwidth"
[routerLink]="['/administration/step/' + previous_step_number]"
>
Précédent
</button>
</div>
<div class="column" [ngClass]="{ 'is-fullwidth': !display_previous_button }">
<button
*ngIf="display_next_button"
class="button button-next"
[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
[routerLink]="['/administration/step/' + next_step_number]"
(click)="runEndAction()"
>
<span *ngIf="is_finish_step">
Enregistrer
</span>
<span *ngIf="!is_finish_step">
Suivant
</span>
</button>
</div>
</div>
</div>
<div class="bottom-step-buttons" style="">
<button
*ngIf="display_previous_button"
class="button button-previous is-secondary pull-left"
[routerLink]="['/administration/step/' + previous_step_number]"
>
Précédent
</button>
<button
*ngIf="display_next_button"
class="button button-next pull-right"
[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
[routerLink]="['/administration/step/' + next_step_number]"
(click)="runEndAction()"
>
<span *ngIf="is_finish_step">
Enregistrer
</span>
<span *ngIf="!is_finish_step">
Suivant
</span>
</button>
</div>

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

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

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

@ -53,11 +53,7 @@
<div class="step-info">
<div class="columns half-columns">
<div class="column">
<a
class="navbar-item is-block pull-left is-hidden-mobile"
[routerLink]="['/']"
routerLinkActive="active"
>
<a class="navbar-item pull-left is-hidden-mobile" [routerLink]="['/']" routerLinkActive="active">
<img src="assets/img/icone_home.png" alt="accueil FramaDate" />
</a>
<h2 class="step-title-poll" *ngIf="pollService.step_current == 1">

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

@ -4,7 +4,7 @@
#creation_stepper {
@extend .fixed-box;
background: $white;
height: 56px;
height: 64px;
a {
@extend .clickable;

18
src/styles.scss
View File

@ -44,26 +44,26 @@
@import './styles/themes/all';
// most general dom elements
@import './styles/partials/global';
@import './styles/partials/logo';
@import './styles/partials/navigation';
// main content elements
@import './styles/partials/main';
@import './styles/partials/tables';
@import './styles/partials/buttons';
// @import './styles/partials/links';
@import './styles/partials/logo';
@import './styles/partials/navigation';
@import './styles/partials/links';
@import './styles/partials/forms';
@import './styles/partials/form-controls';
@import './styles/partials/images';
// responsive, mobile first goal
// responsive, mobile first
@import './styles/partials/responsive';
// reset suggested by material-angular
html,
body {
height: 100%;
}
//html,
//body {
// height: 100%;
//}
body {
margin: 0;
font-family: Roboto, 'Helvetica Neue', sans-serif;
font-family: $default_font;
}

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

@ -201,11 +201,9 @@ mat-checkbox {
}
}
.admin-form {
.step {
max-width: $main-column-width;
margin: 0 auto;
}
.step {
max-width: $main-column-width;
margin: 0 auto;
}
.fa {

49
src/styles/partials/_links.scss
View File

@ -1,50 +1 @@
@charset "UTF-8";
a {
color: $primary !important;
@extend .button, .is-hoverable;
&:hover,
&:focus {
color: $dark !important;
background: $pale-purple;
}
&.active {
color: $dark !important;
&:hover,
&:focus {
color: $white !important;
background: $pale-purple;
}
}
.fa {
margin-right: 1ch;
}
}
.button,
.btn {
.fa {
margin-right: 1ch;
}
}
.list-my-polls {
a {
@extend .is-block;
}
sub {
margin-left: 2em;
}
}
.preview-url {
a {
overflow: hidden;
@extend .text-ellipsis;
}
framadate-copy-text {
float: right;
}
}

19
src/styles/partials/_navigation.scss
View File

@ -109,16 +109,25 @@ a span.ui-steps-number {
.bottom-step-buttons {
box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.05);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
height: auto;
background: $white;
padding: 0.85rem;
padding: 8px 16px;
position: fixed !important;
width: 100vw;
position: fixed;
right: 0;
.button {
width: 100%;
display: block;
display: inline-block;
}
.button {
&.is-secondary {
color: $secondary_color !important;
border-color: $secondary_color !important;
}
}
}

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

@ -41,7 +41,7 @@ main {
.columns {
&.half-columns {
max-width: $main-column-width;
max-width: 100%;
margin: 0 auto;
padding: 0;
@ -73,8 +73,6 @@ main {
}
.button {
width: 100%;
.is-half-offseted {
float: right;
}

4
src/styles/variables.scss
View File

@ -68,5 +68,5 @@ $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;
$main-column-width: 400px;
$mobile-size: 400px;