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

🎨 placing bottom nav on small screens

Browse Source
This commit is contained in:
Tykayn 2022-02-14 15:51:17 +01:00 committed by tykayn
parent bbebaa4aae
commit 7db8bf3f56
13 changed files with 50 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/core/components/header/header.component.html
View File

@ -1,24 +1,17 @@
<header class="big-header"> <header class="big-header">
<div class="contained-desktop"> <div class="contained-desktop">
<div class="container"> <div class="container">
<a class="logo-home-link navbar-item pull-left" routerLink="/"> <a class="logo-home-link pull-left" routerLink="/">
<img class="header-app-logo app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" /> <img class="header-app-logo app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
</a> </a>
<div class="create-section" *ngIf="environment.display_header_create_button"> <div class="create-section" *ngIf="environment.display_header_create_button">
<span class="navbar-item"> <a class="button is-primary" role="button" routerLink="/administration" routerLinkActive="is-active">
<a <i class="fa fa-plus-circle"></i>
class="button is-primary" <div class="is-hidden-touch">
role="button" {{ 'creation.init' | translate }}
routerLink="/administration" </div>
routerLinkActive="is-active" </a>
>
<i class="fa fa-plus-circle"></i>
<div class="is-hidden-touch">
{{ 'creation.init' | translate }}
</div>
</a>
</span>
</div> </div>
<div class="pull-right right-end-bar"> <div class="pull-right right-end-bar">
<!-- <button--> <!-- <button-->
@ -55,8 +48,9 @@
<i class="fa fa-file-epub"></i> <i class="fa fa-file-epub"></i>
<em> <em>
demo demo
</em> </a </em>
><a </a>
<a
class="navbar-item" class="navbar-item"
[routerLink]="['/poll/dessin-anime/consultation']" [routerLink]="['/poll/dessin-anime/consultation']"
routerLinkActive="is-primary" routerLinkActive="is-primary"

2
src/app/core/services/poll.service.ts
View File

@ -37,7 +37,7 @@ export class PollService implements Resolve<Poll> {
public intervalDays: number = 1; public intervalDays: number = 1;
public intervalDaysDefault = 7; public intervalDaysDefault = 7;
public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll public dateChoiceList: DateChoice[] = []; // sets of days as strings, config to set identical time for days in a special days poll
public timeList: TimeSlices[] = [{ literal: '' }]; // ranges of time expressed as strings public timeList: TimeSlices[] = [{ literal: 'example' }]; // ranges of time expressed as strings
public previousRouteName: string = '/administration'; public previousRouteName: string = '/administration';
public nextRouteName: string = '/administration/step/2'; public nextRouteName: string = '/administration/step/2';
public step_current: number = 1; public step_current: number = 1;

2
src/app/features/administration/form/date-select/date-select.component.html
View File

@ -76,7 +76,7 @@
{{ timeSlices.length }} {{ timeSlices.length }}
</span> </span>
<button class="button is-warning" (click)="removeAllTimes()"> <button class="button is-warning" (click)="removeAllTimes()">
<i class="fa fa-trash"></i> <img src="assets/icons/trash-2.svg" class="icon" />
</button> </button>
<button class="button is-info" (click)="resetTimes()"> <button class="button is-info" (click)="resetTimes()">
<i class="fa fa-refresh"></i> <i class="fa fa-refresh"></i>

2
src/app/features/administration/form/date/list/time/time-list.component.html
View File

@ -1,5 +1,5 @@
<div class="time-list-container" cdkDropList [cdkDropListData]="timeSlices" (cdkDropListDropped)="dropTimeItem($event)"> <div class="time-list-container" cdkDropList [cdkDropListData]="timeSlices" (cdkDropListDropped)="dropTimeItem($event)">
<div *ngFor="let time of timeSlices; index as id" class="time-choice" cdkDrag> <div *ngFor="let time of timeSlices; index as id" class="time-choice">
<label class="icon button is-default" for="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}"> <label class="icon button is-default" for="choice_{{ prefix_choice_id }}_timeChoices_{{ id }}">
{{ 'hours.element' | translate }} {{ id }} {{ 'hours.element' | translate }} {{ id }}
<i class="fa fa-arrows-v" aria-hidden="true"></i> <i class="fa fa-arrows-v" aria-hidden="true"></i>

38
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -16,31 +16,23 @@
</div> </div>
<section class="time-slice-list-of-a-day"> <section class="time-slice-list-of-a-day">
<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice padded"> <div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice">
<label for="dateChoices_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label> <label class="pull-left" for="dateChoices_{{ id }}">
<div class="columns"> {{ 'hours.element' | translate }} {{ id + 1 }}
<div class="column"> </label>
<input <button
class="input is-fullwidth" [attr.aria-label]="'choices.delete' | translate"
type="text" class="button is-full has-no-border delete-hour pull-right"
id="dateChoices_{{ id }}" (click)="dayChoice.timeSlices.splice(id, 1)"
[(ngModel)]="timeSlice.literal" >
/> {{ 'choices.delete' | translate }}
</div> <img src="assets/icons/trash-2.svg" class="icon" />
<div class="column is-narrow"> </button>
<button <input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
class="button is-full has-no-border delete-hour"
(click)="pollService.timeList.splice(id, 1)"
>
<i class="fa fa-trash"></i>
<!-- {{ 'choices.delete' | translate }}-->
</button>
</div>
</div>
</div> </div>
<div class="add-time-choice"> <div class="add-time-choice">
<button <button
class="has-text-primary button has-no-border is-fullwidth text-left" class="has-text-primary button has-no-border is-fullwidth has-text-left"
(click)="addChoiceForDay(dayChoice)" (click)="addChoiceForDay(dayChoice)"
> >
<img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" /> <img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" />
@ -133,7 +125,7 @@
</div> </div>
<div class="column is-narrow"> <div class="column is-narrow">
<button class="button is-block has-no-border" (click)="pollService.timeList.splice(id, 1)"> <button class="button is-block has-no-border" (click)="pollService.timeList.splice(id, 1)">
<i class="fa fa-trash"></i> <img src="assets/icons/trash-2.svg" class="icon" />
</button> </button>
</div> </div>
</div> </div>

5
src/app/features/administration/form/steps/step-four/step-four.component.scss
View File

@ -2,9 +2,8 @@
@import '../../../../../../styles/dev-utilities/helpers'; @import '../../../../../../styles/dev-utilities/helpers';
.time-slice-list-of-a-day { .time-slice-list-of-a-day {
.column { label {
min-height: 2rem; line-height: 2.25rem;
max-height: 3rem;
} }
} }

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

@ -1,8 +1,6 @@
@import '../../../../styles/variables'; @import '../../../../styles/variables';
.bottom-step-buttons { .bottom-step-buttons {
width: 100vw;
.button-previous { .button-previous {
margin-left: 0; margin-left: 0;
&:hover { &:hover {

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

@ -54,11 +54,7 @@
<div class="step-info"> <div class="step-info">
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<a <a class="logo-home-link logo-home-link-img pull-left" routerLink="/" routerLinkActive="active">
class="logo-home-link logo-home-link-img navbar-item pull-left"
routerLink="/"
routerLinkActive="active"
>
<img <img
class="stepper-app-logo" class="stepper-app-logo"
*ngIf="environment.appLogo" *ngIf="environment.appLogo"
@ -67,7 +63,7 @@
/> />
</a> </a>
<h1 class="title-section"> <h1 class="title-section">
<a class="logo-home-link navbar-item pull-left" routerLink="/" routerLinkActive="active"> <a class="logo-home-link pull-left" routerLink="/" routerLinkActive="active">
<span class="step-title-poll" *ngIf="pollService.step_current == 1"> <span class="step-title-poll" *ngIf="pollService.step_current == 1">
{{ 'creation.title' | translate }} {{ 'creation.title' | translate }}
</span> </span>

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

@ -24,7 +24,6 @@
} }
.step-title-poll { .step-title-poll {
margin-top: 5px;
max-width: 45ch; max-width: 45ch;
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block !important; display: inline-block !important;
@ -107,12 +106,15 @@
} }
.step-info { .step-info {
padding: 0 10px; padding: 16px 10px;
width: 100%; width: 100%;
display: block; display: block;
background: $white; background: $white;
height: $header-nav-inner-height; height: $header-nav-inner-height;
.columns {
padding-top: 0;
}
i { i {
margin-left: 1ch; margin-left: 1ch;
} }
@ -196,19 +198,19 @@
.logo-home-link { .logo-home-link {
padding: 0; padding: 0;
} }
.logo-home-link-img {
&:hover {
background: #ccc;
}
}
.stepper-app-logo { .stepper-app-logo {
max-width: $logo-side; max-width: $logo-side;
max-height: $logo-side; max-height: $logo-side;
margin: 10px 16px;
height: $logo-side; height: $logo-side;
width: $logo-side; width: $logo-side;
display: inline-block; display: inline-block;
margin-right: 1rem;
margin-top: 10px;
border-radius: 100%;
&:hover {
background: $d-primary;
}
} }
#display_cancel_popup_button { #display_cancel_popup_button {

2
src/environments/environment.ts
View File

@ -24,7 +24,7 @@ export const environment = {
appSupportEmail: 'example-support@example.com', appSupportEmail: 'example-support@example.com',
appSupportWebpage: 'https://www.cipherbliss.com/contact', appSupportWebpage: 'https://www.cipherbliss.com/contact',
autofill_creation: false, autofill_creation: false,
autofill_default_timeslices: false, autofill_default_timeslices: true,
autofill_participation: false, autofill_participation: false,
autoSendNewPoll: false, autoSendNewPoll: false,
creation_display_admin_url: false, creation_display_admin_url: false,

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

@ -291,7 +291,8 @@ mat-checkbox {
margin: 0 auto; margin: 0 auto;
padding: 7rem 0; padding: 7rem 0;
box-sizing: border-box; box-sizing: border-box;
overflow: auto; overflow-y: auto;
overflow-x: hidden;
@extend .top-padding-nav; @extend .top-padding-nav;
.title { .title {

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

@ -72,7 +72,7 @@ a span.ui-steps-number {
position: fixed; position: fixed;
right: 0; right: 0;
left: 0; left: 0;
padding: 1rem 0.5rem; padding: 0;
.button { .button {
display: inline-block; display: inline-block;

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

@ -64,13 +64,7 @@
} }
.step { .step {
padding: calc(56px + 32px) 1rem; padding: calc(56px + 32px) 0.5rem;
}
.bottom-step-buttons {
padding: 0.25rem 0;
.contained-in-main-column {
padding: 0.5rem;
}
} }
#creation_stepper { #creation_stepper {
.logo-home-link { .logo-home-link {
@ -80,6 +74,9 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
&:hover {
background: transparent;
}
} }
.step-info { .step-info {
height: 4.5rem; height: 4.5rem;
@ -121,8 +118,6 @@
display: inline-block; display: inline-block;
} }
.time-choice { .time-choice {
padding: 1em;
input { input {
width: 80%; width: 80%;
} }