From 2f9b91f2c765fc5f2635d05734c4277f0452e87e Mon Sep 17 00:00:00 2001 From: Tykayn Date: Wed, 15 Oct 2025 00:20:52 +0200 Subject: [PATCH] more style for interface; dark top --- frontend/src/app/pages/home/home.html | 1 + frontend/src/app/pages/home/home.scss | 264 ++++++++++++++++++-------- frontend/src/app/pages/home/home.ts | 170 +++++++++++------ frontend/src/styles.scss | 43 ++++- 4 files changed, 339 insertions(+), 139 deletions(-) diff --git a/frontend/src/app/pages/home/home.html b/frontend/src/app/pages/home/home.html index 244c8db..0c12ff8 100644 --- a/frontend/src/app/pages/home/home.html +++ b/frontend/src/app/pages/home/home.html @@ -301,6 +301,7 @@ +

} } diff --git a/frontend/src/app/pages/home/home.scss b/frontend/src/app/pages/home/home.scss index 3427d53..0acb839 100644 --- a/frontend/src/app/pages/home/home.scss +++ b/frontend/src/app/pages/home/home.scss @@ -1,20 +1,22 @@ :host { display: block; - button{ + button { background: white; - border: 1px solid rgba(0,0,0,0.06); + border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px; padding: 10px; cursor: pointer; - &:hover{ + + &:hover { background-color: #f0f0f0; } - + button{ + + + button { margin-left: 10px; margin-bottom: 10px; - } + } } } @@ -23,24 +25,26 @@ grid-template-columns: 400px 1fr; grid-template-rows: 100vh; gap: 0; - &.is-small{ + + &.is-small { grid-template-columns: 100px 1fr; } + /* Quand la zone principale est en plein écran */ - &:has(.main.is-full){ + &:has(.main.is-full) { grid-template-columns: 1fr; } } .aside { background: #ffffff; - border-right: 1px solid rgba(0,0,0,0.06); - box-shadow: 2px 0 12px rgba(0,0,0,0.03); + border-right: 1px solid rgba(0, 0, 0, 0.06); + box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03); padding: 16px; padding-bottom: 150px; overflow: auto; /* Masquer l'aside en mode plein écran */ - .layout:has(.main.is-full) &{ + .layout:has(.main.is-full) & { display: none; } } @@ -50,7 +54,8 @@ flex-direction: column; height: 100vh; overflow: hidden; - &.is-full{ + + &.is-full { flex-grow: 1; } } @@ -103,7 +108,7 @@ &:focus { outline: none; border-color: #007bff; - box-shadow: 0 0 0 2px rgba(0,123,255,0.25); + box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } } @@ -129,28 +134,82 @@ flex: 1 1 auto; min-height: 0; } -.unlocated-layout{ + +.unlocated-layout { display: grid; grid-template-columns: 360px 1fr; height: 100%; } -.agenda-sidebar{ + +.agenda-sidebar { overflow: auto; border-right: 1px solid #eee; padding: 10px; } -.event-list{ list-style: none; padding: 0; margin: 0; } -.event-item{ display: flex; gap: 8px; padding: 8px; cursor: pointer; } -.event-item.active{ background: #f0f9ff; } -.event-title{ font-weight: 600; } -.event-when{ font-size: 12px; color: #64748b; } -.agenda-main{ padding: 10px; } -.event-edit-panel{ border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; } -.panel-header{ display:flex; justify-content: space-between; align-items:center; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; } -.panel-content{ padding: 8px; } -.btn-close{ background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; width: 32px; height: 32px; cursor: pointer; } -.hint{ color: #64748b; padding: 20px; } -.floating-actions{ + +.event-list { + list-style: none; + padding: 0; + margin: 0; +} + +.event-item { + display: flex; + gap: 8px; + padding: 8px; + cursor: pointer; +} + +.event-item.active { + background: #f0f9ff; +} + +.event-title { + font-weight: 600; +} + +.event-when { + font-size: 12px; + color: #64748b; +} + +.agenda-main { + padding: 10px; +} + +.event-edit-panel { + border: 1px solid #e2e8f0; + border-radius: 8px; + background: #fff; +} + +.panel-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px 12px; + border-bottom: 1px solid #e2e8f0; +} + +.panel-content { + padding: 8px; +} + +.btn-close { + background: #f5f5f5; + border: 1px solid #ddd; + border-radius: 4px; + width: 32px; + height: 32px; + cursor: pointer; +} + +.hint { + color: #64748b; + padding: 20px; +} + +.floating-actions { position: fixed; right: 1rem; bottom: 16px; @@ -159,12 +218,12 @@ gap: 10px; z-index: 2000; - .fab{ + .fab { width: 48px; height: 48px; border-radius: 50%; border: none; - box-shadow: 0 4px 12px rgba(0,0,0,0.15); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); cursor: pointer; display: flex; align-items: center; @@ -174,27 +233,30 @@ background: #1976d2; color: #fff; } - .fab.counter{ + + .fab.counter { background: #0d9488; margin-left: 0.5rem; } - .fab.plus{ + + .fab.plus { background: #1976d2; } } -.filters{ - label{ +.filters { + label { padding: 1rem; display: block; cursor: pointer; - &:hover{ + + &:hover { background: lemonchiffon; } } } -.presets{ +.presets { position: fixed; top: 63px; margin-left: 397px; @@ -203,20 +265,23 @@ display: block; /* En plein écran, plus d'offset gauche */ - .layout:has(.main.is-full) &{ + .layout:has(.main.is-full) & { margin-left: 0; } } -.agenda-main{ - app-edit-form{ + +.agenda-main { + app-edit-form { right: 2rem; top: 3.5rem; - .actions{ + + .actions { right: 1rem !important; } } } -app-edit-form{ + +app-edit-form { position: fixed; top: 135px; margin-left: 397px; @@ -226,14 +291,14 @@ app-edit-form{ display: block; overflow: auto; background: rgba(228, 235, 255, 0.85); - border: 1px solid rgba(0,0,0,0.06); + border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px; padding: 10px; - box-shadow: 0 0 10px rgba(0,0,0,0.1); + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; padding-bottom: 150px; /* En plein écran, plus d'offset gauche */ - .layout:has(.main.is-full) &{ + .layout:has(.main.is-full) & { margin-left: 0; } } @@ -243,36 +308,63 @@ app-edit-form{ flex-direction: column; gap: 8px; padding: 8px 12px; - .help { font-size: 12px; color: #64748b; } - .chips { display: flex; gap: 6px; flex-wrap: wrap; } - .chip { border: 1px solid #e2e8f0; border-radius: 999px; padding: 6px 10px; background: #fff; cursor: pointer; } - .chip.active { background: #e3f2fd; border-color: #90caf9; } - .emoji { margin-right: 6px; } + + .help { + font-size: 12px; + color: #64748b; + } + + .chips { + display: flex; + gap: 6px; + flex-wrap: wrap; + } + + .chip { + border: 1px solid #e2e8f0; + border-radius: 999px; + padding: 6px 10px; + background: #fff; + cursor: pointer; + } + + .chip.active { + background: #e3f2fd; + border-color: #90caf9; + } + + .emoji { + margin-right: 6px; + } } -.toggle-options{ +.toggle-options { position: fixed; bottom: 1rem; left: 1rem; z-index: 100; background: white; - border: 1px solid rgba(0,0,0,0.06); + border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 10px; - padding: 10px; + padding: 2rem 1rem; cursor: pointer; - &:hover{ + + &:hover { background-color: #f0f0f0; } - &:active{ + + &:active { background-color: #e0e0e0; } - &:focus{ + + &:focus { outline: none; } } + // presets de boutons -.quick-actions{ +.quick-actions { margin-top: 8px; display: inline-block; gap: 6px; @@ -281,9 +373,16 @@ app-edit-form{ right: 5rem; bottom: 1.1rem; z-index: 100; + + .btn { + + padding: 1rem 1.25rem; + cursor: pointer; + height: 3.5rem; + } } -.guide-preset{ +.guide-preset { background: #4caf50; color: #222; padding: 1rem; @@ -294,7 +393,8 @@ app-edit-form{ bottom: 2rem; right: 3.5rem; } -.guide-preset-more{ + +.guide-preset-more { background: white; padding: 1rem; position: fixed; @@ -302,11 +402,13 @@ app-edit-form{ bottom: 1rem; margin: 1rem; width: 70%; - input, textarea{ + + input, textarea { width: 90%; } - button{ + + button { margin: 1rem; display: block; background: #4caf50; @@ -315,45 +417,57 @@ app-edit-form{ border-radius: 0.5rem; } } -table{ + +table { width: 100%; border-collapse: collapse; border: 1px solid #eee; border-radius: 10px; overflow: hidden; - td:nth-of-type(1){ + + td:nth-of-type(1) { font-weight: bold; width: 100px; } - th, td{ + + th, td { padding: 10px; } - tr:nth-child(even){ + + tr:nth-child(even) { background: #f0f0f0; } - tr:nth-child(odd){ + + tr:nth-child(odd) { background: #fff; } - tr:hover{ + + tr:hover { background: #f0f0f0; } - th{ + + th { background: #f0f0f0; } } -.toaster{ - position:fixed; - right:16px; - top:16px; - display:flex; - flex-direction:column; - gap:8px; - z-index:1000; - &.success{ +.toaster { + position: fixed; + right: 16px; + top: 16px; + display: flex; + flex-direction: column; + gap: 8px; + z-index: 1000; + + &.success { background: greenyellow; } - &.info{ + + &.info { background: cornflowerblue; } } + + + diff --git a/frontend/src/app/pages/home/home.ts b/frontend/src/app/pages/home/home.ts index 3e7e26f..35a4cf9 100644 --- a/frontend/src/app/pages/home/home.ts +++ b/frontend/src/app/pages/home/home.ts @@ -1,18 +1,19 @@ -import { Component, inject, signal , OnDestroy, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { FormsModule } from '@angular/forms'; +import {Component, inject, signal, OnDestroy, OnInit} from '@angular/core'; +import {Router} from '@angular/router'; +import {FormsModule} from '@angular/forms'; import {Menu} from './menu/menu'; -import { AllEvents } from '../../maps/all-events/all-events'; -import { EditForm } from '../../forms/edit-form/edit-form'; -import { OedbApi } from '../../services/oedb-api'; -import { ActivatedRoute } from '@angular/router'; +import {AllEvents} from '../../maps/all-events/all-events'; +import {EditForm} from '../../forms/edit-form/edit-form'; +import {OedbApi} from '../../services/oedb-api'; +import {ActivatedRoute} from '@angular/router'; import oedb from '../../../oedb-types'; -import { UnlocatedEvents } from '../../shared/unlocated-events/unlocated-events'; -import { OsmAuth } from '../../services/osm-auth'; -import { Osm } from '../../forms/osm/osm'; -import { WhatFilterComponent } from '../../shared/what-filter/what-filter'; +import {UnlocatedEvents} from '../../shared/unlocated-events/unlocated-events'; +import {OsmAuth} from '../../services/osm-auth'; +import {Osm} from '../../forms/osm/osm'; +import {WhatFilterComponent} from '../../shared/what-filter/what-filter'; import {NgClass} from '@angular/common'; + @Component({ selector: 'app-home', standalone: true, @@ -42,7 +43,7 @@ export class Home implements OnInit, OnDestroy { showTable = false; showFilters = false; showEditForm = false; - showOptions = true; + showOptions = false; pleinAirMode = false; civilianMode = false; toasts: Array<{ id: number, type: 'success' | 'error' | 'info', message: string }> = []; @@ -88,17 +89,20 @@ export class Home implements OnInit, OnDestroy { unlocatedOrOnline: Array = []; showUnlocatedList = false; protected showQuickActions: boolean = true; + firstToastDone = false; ngOnInit() { // Écouteur global pour toasts try { (window as any).addEventListener('toast', (e: any) => { - const d = e?.detail || {}; this.pushToast(d.type || 'info', d.message || ''); + const d = e?.detail || {}; + this.pushToast(d.type || 'info', d.message || ''); }); - } catch {} + } catch { + } // Initialiser la bbox par défaut pour l'Île-de-France - this.currentBbox = { ...this.IDF_BBOX }; + this.currentBbox = {...this.IDF_BBOX}; this.route.queryParamMap.subscribe(map => { const id = (map.get('id') || '').trim(); @@ -111,24 +115,31 @@ export class Home implements OnInit, OnDestroy { if (id) { this.loadSingleEvent(id); } else { - this.loadEvents({ what: what || undefined, limit: limit || undefined }); + this.loadEvents({what: what || undefined, limit: limit || undefined}); } // Appliquer filtre par what côté client si fourni if (what) { this.selectedWhatFilter = what; } // Activer mode plein air via query param - if (pleinAir === '1' || pleinAir === 'true' || pleinAir === 'yes') { - this.enablePleinAirMode(); - } + // if (pleinAir === '1' || pleinAir === 'true' || pleinAir === 'yes') { + // this.enablePleinAirMode(); + // } // Support: preset=plein_air if (preset === 'plein_air') { + if (!this.firstToastDone) { + this.selectedWhatFilter = "traffic" + this.pushToast('info', "mode plein air activé") + this.useBboxFilter = true; + this.loadEvents({ what: 'traffic' }); + } + this.firstToastDone = true this.enablePleinAirMode(); } }); this.startAutoReload(); - this.loadEvents({ what: "culture" , limit: 100 }); + this.loadEvents({what: "culture", limit: 100}); } ngOnDestroy() { @@ -227,7 +238,7 @@ export class Home implements OnInit, OnDestroy { } onDaysAheadChange() { - this.loadEvents({ daysAhead: this.daysAhead, what: this.selectedWhatFilter || undefined }); + this.loadEvents({daysAhead: this.daysAhead, what: this.selectedWhatFilter || undefined}); } updateAvailableWhatTypes() { @@ -278,8 +289,8 @@ export class Home implements OnInit, OnDestroy { const description = feature?.properties?.description || ''; const what = feature?.properties?.what || ''; return label.toLowerCase().includes(searchLower) || - description.toLowerCase().includes(searchLower) || - what.toLowerCase().includes(searchLower); + description.toLowerCase().includes(searchLower) || + what.toLowerCase().includes(searchLower); }); } @@ -315,7 +326,7 @@ export class Home implements OnInit, OnDestroy { } enablePleinAirMode() { - this.pushToast('info', "mode plein air activé") + if (!this.pleinAirMode) { this.pleinAirMode = true; this.applyFilters(); @@ -326,7 +337,7 @@ export class Home implements OnInit, OnDestroy { quickCreate(what: string) { const osmUsername = this.osmAuth.getUsername(); this.selectedPreset = what; - this.showGuidePresetPlace = true; + this.showGuidePresetPlace = true; this.selected = { id: null, properties: { @@ -334,18 +345,25 @@ export class Home implements OnInit, OnDestroy { description: '', what, where: '', - ...(osmUsername && { last_modified_by: osmUsername }) + ...(osmUsername && {last_modified_by: osmUsername}) }, - geometry: { type: 'Point', coordinates: [0, 0] } + geometry: {type: 'Point', coordinates: [0, 0]} }; // Ensuite, l'utilisateur clique sur la carte: voir onPickCoords() // this.showEditForm = true; } - submitPreset(){ + cancelSubmitPreset(){ + this.selected = null; + this.presetMoreDetails = '' + this.showGuidePresetMoreInfo = false + this.showGuidePresetPlace = false; + this.showQuickActions = true; + } + submitPreset() { const now = new Date(); const w = this.selected.properties.what; // fin du signalement par défaut dans 20 jours - const stop = new Date(now.getTime() + 20* 24 * 3600 * 1000); + const stop = new Date(now.getTime() + 20 * 24 * 3600 * 1000); const feature = { type: 'Feature', properties: { @@ -359,7 +377,7 @@ export class Home implements OnInit, OnDestroy { start: now.toISOString(), stop: stop.toISOString() }, - geometry: { type: 'Point', coordinates: [this.selected.lon, this.selected.lat] } + geometry: {type: 'Point', coordinates: [this.selected.lon, this.selected.lat]} } as any; this.OedbApi.createEvent(feature).subscribe({ next: () => { @@ -367,11 +385,14 @@ export class Home implements OnInit, OnDestroy { this.selected = null; this.presetMoreDetails = '' this.showGuidePresetMoreInfo = false + this.showGuidePresetPlace = false; // Après création rapide en plein air: recharger uniquement ce type pour feedback instantané this.selectedWhatFilter = w; - this.loadEvents({ what: 'traffic' }); + this.loadEvents({what: 'traffic'}); }, - error: () => { this.pushToast('error', 'Échec de création'); } + error: () => { + this.pushToast('error', 'Échec de création'); + } }); } @@ -382,6 +403,7 @@ export class Home implements OnInit, OnDestroy { onSelect(feature: any) { this.selected = feature; } + onSelectFromCalendarView(feature: any) { this.selected = feature; this.showEditForm = false; @@ -392,19 +414,19 @@ export class Home implements OnInit, OnDestroy { if (this.selected && this.selected.properties) { this.selected = { ...this.selected, - geometry: { type: 'Point', coordinates: [lon, lat] } + geometry: {type: 'Point', coordinates: [lon, lat]} }; // this.showOptions = true; // En mode plein air, si c'est une création rapide, proposer l'envoi direct if (this.pleinAirMode && (this.selected.id == null)) { const w = this.selected.properties.what; - const allowed = new Set(['traffic.contestation','traffic.interruption','traffic.wrong_way']); + const allowed = new Set(['traffic.contestation', 'traffic.interruption', 'traffic.wrong_way']); if (allowed.has(w)) { - this.showGuidePresetPlace = true; - this.showGuidePresetMoreInfo = true; - this.showQuickActions = false; - const self:this = this; + this.showGuidePresetPlace = true; + this.showGuidePresetMoreInfo = true; + this.showQuickActions = false; + const self: this = this; const ok = typeof window !== 'undefined' ? window.confirm('Envoyer cet évènement maintenant ?') : true; if (ok) { self.submitPreset() @@ -430,9 +452,9 @@ export class Home implements OnInit, OnDestroy { description: '', what: whatKey || '', where: '', - ...(osmUsername && { last_modified_by: osmUsername }) + ...(osmUsername && {last_modified_by: osmUsername}) }, - geometry: { type: 'Point', coordinates: [lon, lat] } + geometry: {type: 'Point', coordinates: [lon, lat]} }; } } @@ -440,7 +462,7 @@ export class Home implements OnInit, OnDestroy { private pushToast(type: 'success' | 'error' | 'info', message: string) { if (!message) return; const id = Date.now() + Math.random(); - this.toasts.push({ id, type, message }); + this.toasts.push({id, type, message}); setTimeout(() => { this.toasts = this.toasts.filter(t => t.id !== id); }, 6000); @@ -469,9 +491,11 @@ export class Home implements OnInit, OnDestroy { startRectSelection() { this.selectionMode = this.selectionMode === 'rectangle' ? 'none' : 'rectangle'; } + startPolySelection() { this.selectionMode = this.selectionMode === 'polygon' ? 'none' : 'polygon'; } + clearSelection() { this.selectionMode = 'none'; this.selectedIds = []; @@ -490,12 +514,21 @@ export class Home implements OnInit, OnDestroy { const doUpdate = async (id: string | number, updater: (f: any) => any) => { const feature = this.features.find(f => (f?.properties?.id ?? f?.id) === id); - if (!feature) { failed++; return; } + if (!feature) { + failed++; + return; + } const updated = updater(feature); await new Promise((resolve) => { this.OedbApi.updateEvent(id, updated).subscribe({ - next: () => { success++; resolve(); }, - error: (err) => { (err?.status === 0 ? networkErrors++ : failed++); resolve(); } + next: () => { + success++; + resolve(); + }, + error: (err) => { + (err?.status === 0 ? networkErrors++ : failed++); + resolve(); + } }); }); }; @@ -503,24 +536,35 @@ export class Home implements OnInit, OnDestroy { if (this.batchAction === 'delete') { for (const id of this.selectedIds) { await new Promise((resolve) => { - this.OedbApi.deleteEvent(id).subscribe({ next: () => { success++; resolve(); }, error: (err) => { (err?.status === 0 ? networkErrors++ : failed++); resolve(); } }); + this.OedbApi.deleteEvent(id).subscribe({ + next: () => { + success++; + resolve(); + }, error: (err) => { + (err?.status === 0 ? networkErrors++ : failed++); + resolve(); + } + }); }); } } else if (this.batchAction === 'changeWhat') { const what = this.batchWhat.trim(); if (!what) return; for (const id of this.selectedIds) { - await doUpdate(id, (feature: any) => ({ ...feature, properties: { ...feature.properties, what } })); + await doUpdate(id, (feature: any) => ({...feature, properties: {...feature.properties, what}})); } } else if (this.batchAction === 'setField') { const key = this.batchFieldKey.trim(); if (!key) return; for (const id of this.selectedIds) { - await doUpdate(id, (feature: any) => ({ ...feature, properties: { ...feature.properties, [key]: this.batchFieldValue } })); + await doUpdate(id, (feature: any) => ({ + ...feature, + properties: {...feature.properties, [key]: this.batchFieldValue} + })); } } - this.batchSummary = { success, failed, networkErrors }; + this.batchSummary = {success, failed, networkErrors}; this.loadEvents(); } @@ -569,21 +613,25 @@ export class Home implements OnInit, OnDestroy { description: '', what: 'traffic.mammoth', where: '', - ...(osmUsername && { last_modified_by: osmUsername }) + ...(osmUsername && {last_modified_by: osmUsername}) }, - geometry: { type: 'Point', coordinates: [0, 0] } + geometry: {type: 'Point', coordinates: [0, 0]} }; this.showEditForm = true; } private buildSubthemes() { const t = this.theme(); - if (!t) { this.subthemes = []; this.activeSubtheme.set(null); return; } + if (!t) { + this.subthemes = []; + this.activeSubtheme.set(null); + return; + } const what = oedb.presets.what as Record; const list: Array<{ key: string, label: string, emoji: string }> = []; Object.keys(what).forEach(k => { if (k === t || k.startsWith(`${t}.`)) { - list.push({ key: k, label: what[k].label || k, emoji: what[k].emoji || '' }); + list.push({key: k, label: what[k].label || k, emoji: what[k].emoji || ''}); } }); this.subthemes = list.sort((a, b) => a.key.localeCompare(b.key)); @@ -592,7 +640,10 @@ export class Home implements OnInit, OnDestroy { } downloadGeoJSON() { - const blob = new Blob([JSON.stringify({ type: 'FeatureCollection', features: this.filteredFeatures }, null, 2)], { type: 'application/geo+json' }); + const blob = new Blob([JSON.stringify({ + type: 'FeatureCollection', + features: this.filteredFeatures + }, null, 2)], {type: 'application/geo+json'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; @@ -615,7 +666,7 @@ export class Home implements OnInit, OnDestroy { JSON.stringify(f?.geometry?.coordinates?.[1] ?? '') ].join(',')); const csv = [header.join(','), ...rows].join('\n'); - const blob = new Blob([csv], { type: 'text/csv' }); + const blob = new Blob([csv], {type: 'text/csv'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; @@ -631,7 +682,7 @@ export class Home implements OnInit, OnDestroy { const end = (this.endDateStr || '').trim() || undefined; const days = this.daysAhead; const what = (this.selectedWhatFilter || '').trim() || undefined; - this.loadEvents({ start, end, daysAhead: days, what }); + this.loadEvents({start, end, daysAhead: days, what}); } onBboxFilterToggle() { @@ -657,12 +708,13 @@ export class Home implements OnInit, OnDestroy { } // Méthode pour recharger les événements quand la carte bouge - showGuidePresetPlace: boolean = false; - showGuidePresetMoreInfo: boolean= false; + showGuidePresetPlace: boolean = false; + showGuidePresetMoreInfo: boolean = false; - guidePresetMoreInfoPseudo: string = ''; - presetMoreDetails: string = ''; + guidePresetMoreInfoPseudo: string = ''; + presetMoreDetails: string = ''; selectedPreset: string = ''; + onMapMove(bbox: { minLng: number, minLat: number, maxLng: number, maxLat: number }) { this.setCurrentBbox(bbox); } diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 00def06..1acb019 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -131,6 +131,13 @@ label { font-size: 0.85rem; color: $color-muted; } .search{ width: 20%; + .btn{ + padding: 1rem 1.25rem; + cursor: pointer; + height: 2.7rem; + line-height: 0.7rem; + margin-top: 0.15rem; + } } .aside{ @@ -150,8 +157,8 @@ label { font-size: 0.85rem; color: $color-muted; } } } .actions{ - - position: fixed; + + position: fixed; bottom: 10px; left: 415px; right: 10px; @@ -182,7 +189,7 @@ pre{ text-overflow: ellipsis; white-space: nowrap; } -} +} nav{ display: flex; flex-direction: row; @@ -226,7 +233,7 @@ nav{ .loading-indicator{ color: #007bff; font-size: 12px; - position: fixed; + position: fixed; top: 10px; left: 10px; z-index: 1000; @@ -245,4 +252,30 @@ nav{ &:active{ background: linear-gradient( 135deg, #5982b1, #6992c1); } -} \ No newline at end of file +} + +.main{ + nav{ + background: $color-text ; + a { + + color: white; + &:hover{ + background: white; + color: $color-text; + } + } + } + .content { + main{ + height: calc(100vh - 0.1rem); + overflow: hidden; + } + } +} + +.maplibregl-ctrl-attrib{ + position: fixed; + bottom: 0 ; + right: 0; +}