feat: update filter for mobile

src/app/app.module.ts

@@ -29,7 +29,7 @@ import { ProfileComponent } from './pages/admin/profile/profile.component';
 import { AuthenticationService } from "./services/authentication.service";
 import { ShortDomainPipe } from './pipes/short-domain.pipe';
 import { EventCardComponent } from './components/events/event-card/event-card.component';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDatepickerI18n, NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { EventFilterComponent } from './components/events/event-filter/event-filter.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { MessagesComponent } from './components/messages/messages.component';
@@ -56,6 +56,8 @@ import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { RouteReuseStrategy } from '@angular/router';
 import { RouterReuseStrategy } from './routing/router-reuse.strategy';
 import { AppRouterOutletDirective } from './routing/app-router-outlet.directive';
+import { EventFilterModalComponent } from './components/events/event-filter-modal/event-filter-modal.component';
+import { DatepickerTranslatorService } from './services/datepicker-translator.service';
 
 export function jwtOptionsFactory(authService: AuthenticationService) {
     return {
@@ -122,6 +124,7 @@ export function createTranslateLoader(http: HttpClient) {
         DeleteEventComponent,
         ReasonForChangeComponent,
         AppRouterOutletDirective,
+        EventFilterModalComponent,
     ],
     imports: [
         BrowserModule,
@@ -152,6 +155,10 @@ export function createTranslateLoader(http: HttpClient) {
             provide: RouteReuseStrategy,
             useClass: RouterReuseStrategy
         },
+        {
+            provide: NgbDatepickerI18n,
+            useClass: DatepickerTranslatorService
+        },
         provideClientHydration()
     ],
     bootstrap: [AppComponent]

src/app/components/events/event-filter-modal/event-filter-modal.component.html

@@ -0,0 +1,18 @@
+<div class="modal-header">
+    <h2>filter</h2>
+    <button type="button" class="close-button" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
+        <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39" fill="none">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M30.399 8.60095C31.0337 9.23555 31.0337 10.2644 30.399 10.899L10.899 30.399C10.2644 31.0337 9.23555 31.0337 8.60095 30.399C7.96635 29.7644 7.96635 28.7356 8.60095 28.101L28.101 8.60095C28.7356 7.96635 29.7644 7.96635 30.399 8.60095Z"
+                  fill="#1C2B33"/>
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M8.60095 8.60095C9.23555 7.96635 10.2644 7.96635 10.899 8.60095L30.399 28.101C31.0337 28.7356 31.0337 29.7644 30.399 30.399C29.7644 31.0337 28.7356 31.0337 28.101 30.399L8.60095 10.899C7.96635 10.2644 7.96635 9.23555 8.60095 8.60095Z"
+                  fill="#1C2B33"/>
+        </svg>
+    </button>
+</div>
+
+<div class="filter">
+    <app-event-filter (hideFilterIfNeeded)="activeModal.dismiss('filter applied')"></app-event-filter>
+</div>
+

src/app/components/events/event-filter-modal/event-filter-modal.component.scss

@@ -0,0 +1,27 @@
+:host {
+    max-height: 100vh;
+    overflow-y: scroll;
+    padding: 1rem;
+}
+
+.modal-header {
+    border-bottom: none;
+    padding-left: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+
+    h2 {
+        font-size: 1.25rem;
+    }
+
+    .close-button {
+        background-color: unset;
+        border: none;
+        margin-top: -6px;
+        margin-bottom: 6px;
+    }
+}
+
+.filter {
+    overflow-y: scroll;
+}

src/app/components/events/event-filter-modal/event-filter-modal.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventFilterModalComponent } from './event-filter-modal.component';
+
+describe('EventFilterModalComponent', () => {
+  let component: EventFilterModalComponent;
+  let fixture: ComponentFixture<EventFilterModalComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [EventFilterModalComponent]
+    });
+    fixture = TestBed.createComponent(EventFilterModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/events/event-filter-modal/event-filter-modal.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+    selector: 'app-event-filter-modal',
+    templateUrl: './event-filter-modal.component.html',
+    styleUrls: ['./event-filter-modal.component.scss']
+})
+export class EventFilterModalComponent {
+    constructor(public activeModal: NgbActiveModal) {
+    }
+}

src/app/components/events/event-filter/event-filter.component.html

@@ -1,37 +1,38 @@
-<div class="modal-header">
-    <button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
-</div>
+<div class="filter">
+    <input class="search-term" type="text" [(ngModel)]="searchTerm" (ngModelChange)="searchTermUpdated()"
+           placeholder="tschertgar">
+
+    <hr>
+
+    <h2>data d’entschatta</h2>
+    <ngb-datepicker [(ngModel)]="selectedStartDate" (dateSelect)="dateSelected($event)"></ngb-datepicker>
 
-<div class="container">
-    <div class="row p-1">
-        <div class="col-4">
-            <h2>regiun</h2>
-            <div class="tags">
-                <ng-container *ngFor="let region of regions">
+    <hr>
+
+    <h2>regiun</h2>
+    <div class="tags">
+        <ng-container *ngFor="let region of regions">
                     <span class="tag-element" [class.active]="selectedRegionIds.includes(region.id)"
                           (click)="toggleRegion(region.id)">{{ region.name }}</span><br>
-                </ng-container>
-            </div>
-        </div>
-        <div class="col-4">
-            <h2>gener</h2>
-            <div class="tags">
-                <ng-container *ngFor="let genre of genres">
+        </ng-container>
+    </div>
+
+    <hr>
+
+    <h2>gener</h2>
+    <div class="tags">
+        <ng-container *ngFor="let genre of genres">
                     <span class="tag-element" [class.active]="selectedGenreIds.includes(genre.id)"
                           (click)="toggleGenre(genre.id)">{{ genre.name }}</span><br>
-                </ng-container>
-            </div>
-        </div>
-        <div class="col-4">
-            <h2>data d’entschatta</h2>
-            <ngb-datepicker [(ngModel)]="selectedStartDate" (dateSelect)="dateSelected($event)"></ngb-datepicker>
-            <h2 class="mt-3">tschertga</h2>
-            <input class="search-term" type="text" [(ngModel)]="searchTerm" (ngModelChange)="searchTermUpdated()">
-        </div>
+        </ng-container>
     </div>
-</div>
-<div class="modal-footer d-flex justify-content-center">
-    <button type="button" class="clndr" (click)="resetFilters();activeModal.close('Close click')">stizzar il filter
+
+    <hr>
+
+    <button type="button" class="clndr accent" (click)="resetFilters()">
+        stizzar il filter
+    </button>
+    <button type="button" class="clndr accent" (click)="close()">
+        abunar quest filter
     </button>
-    <button type="button" class="clndr" (click)="activeModal.close('Close click')">abunar quest filter</button>
 </div>

src/app/components/events/event-filter/event-filter.component.scss

@@ -1,14 +1,37 @@
-.modal-header {
-    border-bottom: none;
+.filter {
+    //overflow-y: scroll;
 }
 
 h2 {
     font-size: 1.25rem;
 }
 
+.search-term {
+    width: 100%;
+}
+
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+}
+
 .tag-element {
-    display: inline-block;
     margin-bottom: 6px;
     margin-left: 0;
     cursor: pointer;
 }
+
+hr {
+    border: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    width: 100%;
+    height: 1px;
+    background: #BBBFC2;
+    opacity: unset;
+}
+
+button {
+    width: 100%;
+    margin-bottom: 1rem;
+}

src/app/components/events/event-filter/event-filter.component.ts

@@ -1,8 +1,8 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {NgbActiveModal, NgbCalendar, NgbDate, NgbDateStruct} from "@ng-bootstrap/ng-bootstrap";
-import {StaticDataService} from "../../../services/static-data.service";
-import {Genre, Region} from "../../../data/static-data";
-import {EventsFilterService} from "../../../services/events-filter.service";
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { NgbCalendar, NgbDate, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
+import { StaticDataService } from "../../../services/static-data.service";
+import { Genre, Region } from "../../../data/static-data";
+import { EventsFilterService } from "../../../services/events-filter.service";
 
 @Component({
     selector: 'app-event-filter',
@@ -19,13 +19,16 @@ export class EventFilterComponent implements OnInit, OnDestroy {
     selectedStartDate: NgbDateStruct;
     searchTerm: string = '';
 
+    @Output()
+    hideFilterIfNeeded: EventEmitter<void> = new EventEmitter<void>();
+
     private selectedGenresSubscription: any;
     private selectedRegionsSubscription: any;
     private selectedStartDateSubscription: any;
     private searchTermSubscription: any;
 
 
-    constructor(public activeModal: NgbActiveModal, private staticData: StaticDataService, private eventsFilterService: EventsFilterService, private calendar: NgbCalendar) {
+    constructor(private staticData: StaticDataService, private eventsFilterService: EventsFilterService, private calendar: NgbCalendar) {
         // this.startDate = this.calendar.getToday();
         this.selectedStartDate = {year: 2023, month: 4, day: 1}; // TODO: change to today
     }
@@ -68,6 +71,11 @@ export class EventFilterComponent implements OnInit, OnDestroy {
 
     resetFilters() {
         this.eventsFilterService.resetFilters();
+        this.hideFilterIfNeeded.emit();
+    }
+
+    close() {
+        this.hideFilterIfNeeded.emit();
     }
 
     private loadStaticData() {

src/app/components/header/header.component.html

@@ -1,5 +1,5 @@
 <div class="name">
-    <a href="/">CHALENDER.CH</a>
+    <a href="/">chalender.ch</a>
 </div>
 
 <div class="short-menu">

src/app/components/header/header.component.scss

@@ -8,19 +8,23 @@
     align-items: center;
     justify-content: space-between;
     font-family: CadizBlack, sans-serif;
-    height: 124px;
+    height: 68px;
     border-bottom: 1px solid #BBBFC2;
 
     a {
         color: black;
         text-decoration: none;
     }
+
+    @include media-breakpoint-up(md) {
+        height: 124px;
+    }
 }
 
 .name {
     font-size: 19px;
     margin-left: 1.5rem;
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(md) {
         font-size: 38px;
     }
 }

src/app/pages/events/events-list/events-list.component.ts

@@ -4,10 +4,10 @@ import { EventFilter, EventLookup } from "../../../data/event";
 import * as dayjs from 'dayjs'
 import { rmLocale } from "../../../utils/day-js-locale";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
-import { EventFilterComponent } from "../../../components/events/event-filter/event-filter.component";
 import { EventsFilterService } from "../../../services/events-filter.service";
 import { Page } from "../../../data/page";
 import { OnAttach, OnDetach } from '../../../routing/app-router-outlet.directive';
+import { EventFilterModalComponent } from '../../../components/events/event-filter-modal/event-filter-modal.component';
 
 const LOCALSTORAGE_EVENTS_LIST_SCROLL_POSITION = 'events-scroll-position';
 
@@ -72,7 +72,9 @@ export class EventsListComponent implements OnInit, OnDestroy, OnAttach, OnDetac
     }
 
     openFilter(): void {
-        const modalRef = this.modalService.open(EventFilterComponent, {size: 'lg'});
+        const modalRef = this.modalService.open(EventFilterModalComponent, {
+            fullscreen: true,
+        });
     }
 
     search() {

src/app/services/datepicker-translator.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DatepickerTranslatorService } from './datepicker-translator.service';
+
+describe('DatepickerTranslatorService', () => {
+  let service: DatepickerTranslatorService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DatepickerTranslatorService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/datepicker-translator.service.ts

@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { NgbDatepickerI18n, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class DatepickerTranslatorService extends NgbDatepickerI18n {
+
+    private v = {
+        weekdays: ['gl', 'ma', 'me', 'gie', 've', 'so', 'du'],
+        months: ['scha', 'fev', 'mar', 'avr', 'matg', 'zercl', 'fen', 'uost', 'sett', 'oct', 'nov', 'dec'],
+        weekLabel: 'emna'
+    };
+
+    constructor(private translateService: TranslateService) {
+        super();
+    }
+
+    getWeekdayLabel(weekday: number): string {
+        return this.v.weekdays[weekday - 1];
+    }
+
+    override getWeekLabel(): string {
+        return this.v.weekLabel;
+    }
+
+    getMonthShortName(month: number): string {
+        return this.v.months[month - 1];
+    }
+
+    getMonthFullName(month: number): string {
+        return this.getMonthShortName(month);
+    }
+
+    getDayAriaLabel(date: NgbDateStruct): string {
+        return `${date.day}-${date.month}-${date.year}`;
+    }
+}

src/styles.scss

@@ -1,6 +1,7 @@
 @import "styles/normalize";
 @import "styles/fonts";
 @import "styles/menu";
+@import "styles/filter";
 
 
 :root {