embed share
This commit is contained in:
Tykayn
tykayn
parent
5d636b0027
commit
f8abb4d11a
20 changed files with 1040 additions and 72 deletions
|
|
@ -5,6 +5,9 @@
|
|||
@if (isLoading) {
|
||||
<span class="loading-indicator">⏳</span>
|
||||
}
|
||||
<a routerLink="/embed" class="btn-share" title="Partager et intégrer les événements">
|
||||
🔗 Partager
|
||||
</a>
|
||||
</div>
|
||||
@if(showOptions){
|
||||
|
||||
|
|
|
|||
|
|
@ -63,8 +63,29 @@
|
|||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
|
||||
.btn-share {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: #007bff;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import {Component, inject, signal, OnDestroy, OnInit} from '@angular/core';
|
||||
import {Router} from '@angular/router';
|
||||
import {Router, RouterLink} from '@angular/router';
|
||||
import {FormsModule} from '@angular/forms';
|
||||
import {Menu} from './menu/menu';
|
||||
import {AllEvents} from '../../maps/all-events/all-events';
|
||||
|
|
@ -25,7 +25,8 @@ import {NgClass} from '@angular/common';
|
|||
Osm,
|
||||
FormsModule,
|
||||
WhatFilterComponent,
|
||||
NgClass
|
||||
NgClass,
|
||||
RouterLink
|
||||
],
|
||||
templateUrl: './home.html',
|
||||
styleUrl: './home.scss'
|
||||
|
|
|
|||
|
|
@ -1,38 +1,45 @@
|
|||
<menu>
|
||||
<div class="menu-overlay" [class.overlay-active]="isMenuOpen" (click)="closeMenu()"></div>
|
||||
|
||||
<div class="menu-header">
|
||||
<h1>OpenEventDatabase</h1>
|
||||
<button class="burger-menu-toggle" (click)="toggleMenu()" [attr.aria-expanded]="isMenuOpen" aria-label="Toggle menu">
|
||||
<span class="burger-line"></span>
|
||||
<span class="burger-line"></span>
|
||||
<span class="burger-line"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="nav">
|
||||
<nav class="nav" [class.nav-open]="isMenuOpen">
|
||||
<div class="nav-section quick-tools">
|
||||
<h3>Outils rapides</h3>
|
||||
<a routerLink="/embed" class="link highlight">🔗 Intégration embarquée</a>
|
||||
<a routerLink="/batch-edit" class="link highlight">⚡ Modification en masse</a>
|
||||
<a routerLink="/batch-edit" class="link highlight" (click)="closeMenu()">⚡ Modification en masse</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h3>Navigation principale</h3>
|
||||
<a routerLink="/" class="link">🏠 Accueil</a>
|
||||
<a routerLink="/agenda" class="link">📅 Agenda</a>
|
||||
<a routerLink="/research" class="link">🔍 Recherche</a>
|
||||
<a routerLink="/" class="link" (click)="closeMenu()">🏠 Accueil</a>
|
||||
<a routerLink="/agenda" class="link" (click)="closeMenu()">📅 Agenda</a>
|
||||
<a routerLink="/research" class="link" (click)="closeMenu()">🔍 Recherche</a>
|
||||
<a routerLink="/embed" class="link" (click)="closeMenu()">🔗 Intégration embarquée</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h3>Outils d'administration</h3>
|
||||
<a routerLink="/unlocated-events" class="link">📍 Événements non localisés</a>
|
||||
<a routerLink="/nouvelles-categories" class="link">🏷️ Nouvelles catégories</a>
|
||||
<a routerLink="/unlocated-events" class="link" (click)="closeMenu()">📍 Événements non localisés</a>
|
||||
<a routerLink="/nouvelles-categories" class="link" (click)="closeMenu()">🏷️ Nouvelles catégories</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h3>Intégration & API</h3>
|
||||
<a routerLink="/events-docs" class="link">📚 Documentation API</a>
|
||||
<a href="/stats" class="link">📊 Statistiques</a>
|
||||
<a routerLink="/events-docs" class="link" (click)="closeMenu()">📚 Documentation API</a>
|
||||
<a href="/stats" class="link" (click)="closeMenu()">📊 Statistiques</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<h3>Communauté</h3>
|
||||
<a routerLink="/community-upcoming" class="link">👥 Community à venir</a>
|
||||
<a href="https://source.cipherbliss.com/tykayn/oedb-backend" class="link" target="_blank">💻 Sources</a>
|
||||
<a routerLink="/community-upcoming" class="link" (click)="closeMenu()">👥 Community à venir</a>
|
||||
<a href="https://source.cipherbliss.com/tykayn/oedb-backend" class="link" target="_blank" (click)="closeMenu()">💻 Sources</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,18 +4,111 @@
|
|||
border-right: 1px solid #e9ecef;
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: relative;
|
||||
min-height: auto;
|
||||
padding: 0.75rem;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay pour mobile (masqué par défaut, montré quand le menu est ouvert)
|
||||
.menu-overlay {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 999;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
|
||||
&.overlay-active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid #3498db;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
h1 {
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
flex: 1;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Bouton burger menu
|
||||
.burger-menu-toggle {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 1001;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid #3498db;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.burger-line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #2c3e50;
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.burger-menu-toggle[aria-expanded="true"] {
|
||||
.burger-line:nth-child(1) {
|
||||
transform: rotate(45deg) translate(7px, 7px);
|
||||
}
|
||||
|
||||
.burger-line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.burger-line:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(7px, -7px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -23,6 +116,28 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
background: #f8f9fa;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
gap: 1.5rem;
|
||||
border-radius: 0 0 8px 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.nav-open {
|
||||
max-height: 2000px;
|
||||
opacity: 1;
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ export class Menu {
|
|||
public onDownloadGeoJSON?: () => void;
|
||||
public onDownloadCSV?: () => void;
|
||||
protected whats: any = [];
|
||||
|
||||
isMenuOpen = false;
|
||||
|
||||
constructor() {
|
||||
let keys = Object.keys(oedb_what_categories.presets.what);
|
||||
|
|
@ -36,4 +38,12 @@ export class Menu {
|
|||
toggleView() { this.onToggleView && this.onToggleView(); }
|
||||
downloadGeoJSON() { this.onDownloadGeoJSON && this.onDownloadGeoJSON(); }
|
||||
downloadCSV() { this.onDownloadCSV && this.onDownloadCSV(); }
|
||||
|
||||
toggleMenu() {
|
||||
this.isMenuOpen = !this.isMenuOpen;
|
||||
}
|
||||
|
||||
closeMenu() {
|
||||
this.isMenuOpen = false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue