Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests 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">
<div class="contained-desktop">
<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 }}" />
</a>
<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"
>
<i class="fa fa-plus-circle"></i>
<div class="is-hidden-touch">
{{ 'creation.init' | translate }}
</div>
</a>
</span>
<a class="button is-primary" role="button" routerLink="/administration" routerLinkActive="is-active">
<i class="fa fa-plus-circle"></i>
<div class="is-hidden-touch">
{{ 'creation.init' | translate }}
</div>
</a>
</div>
<div class="pull-right right-end-bar">
<!-- <button-->
@ -55,8 +48,9 @@
<i class="fa fa-file-epub"></i>
<em>
demo
</em> </a
><a
</em>
</a>
<a
class="navbar-item"
[routerLink]="['/poll/dessin-anime/consultation']"
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 intervalDaysDefault = 7;
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 nextRouteName: string = '/administration/step/2';
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 }}
</span>
<button class="button is-warning" (click)="removeAllTimes()">
<i class="fa fa-trash"></i>
<img src="assets/icons/trash-2.svg" class="icon" />
</button>
<button class="button is-info" (click)="resetTimes()">
<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 *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 }}">
{{ 'hours.element' | translate }} {{ id }}
<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>
<section class="time-slice-list-of-a-day">
<div *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice padded">
<label for="dateChoices_{{ id }}"> {{ 'hours.element' | translate }} {{ id + 1 }} </label>
<div class="columns">
<div class="column">
<input
class="input is-fullwidth"
type="text"
id="dateChoices_{{ id }}"
[(ngModel)]="timeSlice.literal"
/>
</div>
<div class="column is-narrow">
<button
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 *ngFor="let timeSlice of dayChoice.timeSlices; index as id" class="time-choice">
<label class="pull-left" for="dateChoices_{{ id }}">
{{ 'hours.element' | translate }} {{ id + 1 }}
</label>
<button
[attr.aria-label]="'choices.delete' | translate"
class="button is-full has-no-border delete-hour pull-right"
(click)="dayChoice.timeSlices.splice(id, 1)"
>
{{ 'choices.delete' | translate }}
<img src="assets/icons/trash-2.svg" class="icon" />
</button>
<input class="input" type="text" id="dateChoices_{{ id }}" [(ngModel)]="timeSlice.literal" />
</div>
<div class="add-time-choice">
<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)"
>
<img class="icon" aria-hidden="true" src="assets/icons/plus-circle.svg" />
@ -133,7 +125,7 @@
</div>
<div class="column is-narrow">
<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>
</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';
.time-slice-list-of-a-day {
.column {
min-height: 2rem;
max-height: 3rem;
label {
line-height: 2.25rem;
}
}

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

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

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

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

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

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

2
src/environments/environment.ts
View File

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

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

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

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

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

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

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