🎨 placing bottom nav on small screens

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

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"
>
<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>
</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"

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;

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>

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>

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">
<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
class="button is-full has-no-border delete-hour"
(click)="pollService.timeList.splice(id, 1)"
[attr.aria-label]="'choices.delete' | translate"
class="button is-full has-no-border delete-hour pull-right"
(click)="dayChoice.timeSlices.splice(id, 1)"
>
<i class="fa fa-trash"></i>
<!-- {{ 'choices.delete' | translate }}-->
{{ 'choices.delete' | translate }}
<img src="assets/icons/trash-2.svg" class="icon" />
</button>
</div>
</div>
<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>

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;
}
}

View File

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

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>

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 {

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,

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 {

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;

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%;
}