From abb82ceb5ad48a3aa520c3034d07700848ad485d Mon Sep 17 00:00:00 2001 From: Marie Birner Date: Thu, 6 Apr 2023 13:15:40 +0200 Subject: [PATCH] [TASK] add overlays sidebar --- frontend/js/sidebar.ts | 47 ++++++++++++ frontend/main.ts | 20 ++++- frontend/scss/app.scss | 84 +++++++++++++++++++++ templates/index.html.tera | 154 ++++++++++++++++++++++++++------------ 4 files changed, 258 insertions(+), 47 deletions(-) create mode 100644 frontend/js/sidebar.ts diff --git a/frontend/js/sidebar.ts b/frontend/js/sidebar.ts new file mode 100644 index 0000000..6dad1b0 --- /dev/null +++ b/frontend/js/sidebar.ts @@ -0,0 +1,47 @@ +export class Sidebar { + element: HTMLElement | null; + trigger: string; + contentWrapper: HTMLElement| null; + closeBtn: any; + overlay: HTMLElement| null; + isOpen: boolean; + + constructor(trigger: string) { + this.trigger = trigger; + this.element = document.getElementById(trigger); + this.contentWrapper = document.querySelector('body'); + this.overlay = document.querySelector('.sidebar-overlay[data-trigger='+ this.trigger + ']'); + if(this.element) { + this.closeBtn = this.element.querySelector('[data-trigger='+ this.trigger + ']'); + } + this.isOpen = false; + } + + checkStatus() { + return this.isOpen; + } + + toggle() { + this.isOpen = !this.isOpen; + if(this.trigger) { + document.getElementById(this.trigger)?.classList.toggle('open'); + } + if( this.contentWrapper) { + this.contentWrapper.classList.toggle('overlay'); + } + if(this.overlay) { + this.overlay.classList.toggle('show'); + } + if(this.element) { + this.element.ariaModal = (this.element.ariaModal === 'true') ? 'false' : 'true'; + if(this.isOpen){ + const focusElement= this.element.querySelector('.focus-js') as HTMLElement | null; + if(focusElement) { + focusElement.focus(); + } else { + this.closeBtn.focus(); + } + } + } + } +} \ No newline at end of file diff --git a/frontend/main.ts b/frontend/main.ts index 24b9ba3..e09f22a 100644 --- a/frontend/main.ts +++ b/frontend/main.ts @@ -1,8 +1,9 @@ +import { Sidebar } from './js/sidebar'; import './scss/app.scss' document.addEventListener('DOMContentLoaded', function() { - console.log("init"); initSearch(); + initSidebar(); }); function initSearch() { @@ -40,3 +41,20 @@ function filterElements(input: string) { resultWrapper.innerHTML = (amountShownElements === 0 ? 'Kein Ergebnis gefunden' : '' + amountShownElements + '' + (amountShownElements > 1 ? ' Ergebnisse' : ' Ergebnis') + ' gefunden'); } } + +function initSidebar() { + const sidebarTrigger = >document.querySelectorAll('[data-trigger]'); + + if(sidebarTrigger) { + Array.prototype.forEach.call(sidebarTrigger, (triggerElement: HTMLElement) => { + if(triggerElement.dataset.trigger) { + const sidebar = new Sidebar(triggerElement.dataset.trigger); + + triggerElement.addEventListener('click', () => { + sidebar.toggle(); + }); + + } + }); + } +} diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss index b5c61c9..c9e7c41 100644 --- a/frontend/scss/app.scss +++ b/frontend/scss/app.scss @@ -1,3 +1,87 @@ @tailwind base; @tailwind components; @tailwind utilities; + +/* purgecss start ignore */ +.sidebar { + position: fixed; + overflow-y: scroll; + top: 0; + background: white; + z-index: 2000; + width: 0; + box-shadow: 0 1rem 3rem rgba(0,0,0,.175); + + &.open { + background-color: rgba(255, 255, 255, 100%); + display: block; + height: 100vh; + right: 0; + top: 0; + width: 375px; + z-index: 40000; + } + + &.slide-in { + transition-duration: 75ms; + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-timing-function: cubic-bezier(0, 0, 0.2, 1); + } + + &.from-right { + right: -24rem; + + &.open { + right: 0; + } + } + + &.from-left { + left: -24rem; + + &.open { + left: 0; + } + } + + &-overlay { + display: none; + + &.show { + background-color: rgba(0, 0, 0, 0.2); + content: ''; + display: block; + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 1025; + } + } + + &-close { + border-radius: 100%; + width: 27.5px; + + &:focus { + background: white !important; + } + } + + &-footer { + position: fixed; + margin: 0 -8px -4px; + width: 374px; + bottom: 0; + } + + &-header { + position: fixed; + width: 375px; + top: 0; + z-index: 1; + } +} +/* purgecss end ignore */ diff --git a/templates/index.html.tera b/templates/index.html.tera index d3add5b..0de79c0 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -1,25 +1,25 @@ {% extends "base" %} {% block content %} -
+
{% if flash %} {% if flash.0 == "success" %} -
+
{{ flash.1 }}
{% endif %} {% if flash.0 == "error" %} -
+
{{ flash.1 }}
{% endif %} {% endif %} -

Ausfahrten

+

Ausfahrten

{% for day in days %}
-

{{ day.day| date(format="%d.%m.%Y") }}

+

{{ day.day| date(format="%d.%m.%Y") }}

{% for planned_event in day.planned_events %}

Planned event '{{ planned_event.name }}'

@@ -32,7 +32,7 @@ {% for cox in planned_event.cox %} {{ cox }} {% if cox == loggedin_user.name %} - ABMELDEN + ABMELDEN {% endif %} {% endfor %}
@@ -41,68 +41,130 @@ {% for rower in planned_event.rower%} {{ rower.name }} (angemeldet seit {{ rower.registered_at }}) {% if rower.name == loggedin_user.name %} - ABMELDEN + ABMELDEN {% endif %} {% endfor %} {% if planned_event.max_people > planned_event.rower | length %} - MITRUDERN + MITRUDERN {% endif %} {% if loggedin_user.is_cox %} - STEUERN + STEUERN {% endif %} {% if loggedin_user.is_admin %} - DELETE + DELETE {% endif %} {% endfor %} - - {% for trip in day.trips %} -

Ausfahrt von {{ trip.cox_name }}

- Planned starting time: {{ trip.planned_starting_time }}
- Max people: {{ trip.max_people }}
- Notes: {{ trip.notes }}
- Folgende Ruderer haben sich schon angemeldet: - {% for rower in trip.rower %} - {{ rower.name }} (angemeldet seit {{ rower.registered_at }}) - {% if rower.name == loggedin_user.name %} - ABMELDEN - {% endif %} + {% if day.trips | length > 0 %} +
+ {% for trip in day.trips %} +
+
+
{{ trip.planned_starting_time }} Uhr ({{ trip.cox_name }})
+ Details +
+ {% if trip.max_people > trip.rower | length and trip.cox_id != loggedin_user.id %} + MITRUDERN + {% endif %} + {% for rower in trip.rower %} + {% if rower.name == loggedin_user.name %} + ABMELDEN + {% endif %} + {% endfor %} +
+ +
{% endfor %} - - {% if trip.max_people > trip.rower | length and trip.cox_id != loggedin_user.id %} - MITRUDERN - {% endif %} - {% endfor %} +
+ {% endif %} {% if loggedin_user.is_admin %} -

Add planned event

-
- - - - Gäste - - - + Event hinzufügen - -
+ +
{% endif %} {% if loggedin_user.is_cox%} -

Add trip

-
- - - - + Ausfahrt hinzufügen - -
+ +
{% endif %}