samuelzielke
/
piomint
1
0
Fork 0
Code Issues 7 Pull Requests Packages Projects Releases Wiki Activity

Little fixes before Launch

Browse Source
main
Samuel Zielke 3 days ago
parent efc64ddba1
commit 4ce2250650
4 changed files with 66 additions and 81 deletions
Show Stats Download Patch File Download Diff File

72
app/static/app/css/custom.css
Unescape View File

@ -38,45 +38,29 @@
@keyframes openSettingsbg { @keyframes openSettingsbg {
0% { 0% {
height: 7vh; height: 8vh;
} }
100% { 100% {
height: 100vh; height: 100vh;
} }
} }
/* rem statt vh: die Monatskarte soll auf jedem Gerät gleich groß aussehen ("fix"), nur die
Aktivitäten-Tabelle (flex:1 1 auto, siehe unten) gleicht unterschiedliche Displayhöhen aus. */
@keyframes openMonthArea { @keyframes openMonthArea {
0% { 0% {
height: 15vh; height: 6.5rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
100% { 100% {
height: 20vh; height: 9.5rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
} }
@keyframes shrinkActivitys {
0% {
height: 40vh;
}
100% {
height: 35vh;
}
}
@keyframes growActivitys {
0% {
height: 35vh;
}
100% {
height: 40vh;
}
}
@keyframes openSettingscolor { @keyframes openSettingscolor {
0% { 0% {
height: 6vh; height: 7vh;
} }
100% { 100% {
height: 95vh; height: 95vh;
@ -88,7 +72,7 @@
height: 95vh; height: 95vh;
} }
100% { 100% {
height: 6vh; height: 7vh;
} }
} }
@ -97,27 +81,27 @@
height: 100vh; height: 100vh;
} }
100% { 100% {
height: 7vh; height: 8vh;
} }
} }
@keyframes closeMonthArea { @keyframes closeMonthArea {
0% { 0% {
height: 20vh; height: 9.5rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
100% { 100% {
height: 15vh; height: 6.5rem;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
} }
.HeaderDefaultHeightbg { .HeaderDefaultHeightbg {
height: 7vh; height: 8vh;
} }
.HeaderDefaultHeightcolor { .HeaderDefaultHeightcolor {
height: 6vh; height: 7vh;
} }
.slide-out { .slide-out {
@ -145,14 +129,6 @@
animation: closeMonthArea 1s forwards; animation: closeMonthArea 1s forwards;
} }
.shrinkActivitys {
animation: shrinkActivitys 1s forwards;
}
.growActivitys {
animation: growActivitys 1s forwards;
}
.closeSettingsbg { .closeSettingsbg {
animation: closeSettingsbg 1s forwards; animation: closeSettingsbg 1s forwards;
} }
@ -170,7 +146,7 @@
} }
#dashbord_month_area { #dashbord_month_area {
height: 15vh; height: 6.5rem;
} }
/* Neu hinzugefügte Icons (Filter-Toggle, Maximieren) in Grau statt Schwarz/Weiß. /* Neu hinzugefügte Icons (Filter-Toggle, Maximieren) in Grau statt Schwarz/Weiß.
@ -200,13 +176,9 @@
pointer-events: none; pointer-events: none;
} }
#ActivitysTable { /* Kein fester height-Override beim Maximieren mehr nötig: ActivitysTable ist flex:1 1 auto
transition: height 0.4s ease-in-out; (siehe #dashboard) und wächst automatisch in den Platz, den die kollabierende Timer-Karte
} freigibt - inklusive sauberer Animation, weil beides gleichzeitig neu layoutet wird. */
#ActivitysTable.ActivitysTableMaximized {
height: 65vh !important;
}
/* Filter/Sortierung ein- und ausblenden. /* Filter/Sortierung ein- und ausblenden.
overflow bleibt im geöffneten Zustand "visible", damit das Dropdown-Menü (sortFieldMenu) overflow bleibt im geöffneten Zustand "visible", damit das Dropdown-Menü (sortFieldMenu)
@ -248,7 +220,7 @@
} }
.maincontainer { .maincontainer {
height: 93vh; height: 92vh;
transition: height 1s ease, transform 1s ease; transition: height 1s ease, transform 1s ease;
margin: 0; margin: 0;
/* Grundsätzlicher Fix für kleinere Displays (z.B. iPhone 12 mini vs. 15 Pro): die feste /* Grundsätzlicher Fix für kleinere Displays (z.B. iPhone 12 mini vs. 15 Pro): die feste
@ -271,6 +243,16 @@
width: 100%; width: 100%;
} }
/* Jahr/Monat/Timer bleiben "fix" (rem-/inhaltsbasiert, gerätunabhängig gleich groß).
Die Aktivitäten-Tabelle (flex:1 1 auto, siehe ihre eigene Regel) gleicht als einziges
Element unterschiedliche Displayhöhen aus, statt dass wir jede Karte einzeln pro
Gerät neu austarieren müssen. */
#dashboard {
display: flex;
flex-direction: column;
height: 100%;
}
/* "Wow-Moment" beim Öffnen der Update-Infos: sanftes Herein-Poppen statt einfach da zu sein. */ /* "Wow-Moment" beim Öffnen der Update-Infos: sanftes Herein-Poppen statt einfach da zu sein. */
@keyframes updateWow { @keyframes updateWow {
0% { opacity: 0; transform: scale(0.85) translateY(20px); } 0% { opacity: 0; transform: scale(0.85) translateY(20px); }

12
app/static/app/js/home01.js
Unescape View File

@ -38,7 +38,8 @@ var sortField = 'date';
var sortDirection = 'asc'; var sortDirection = 'asc';
// Ob die Filter/Sortier-Optionen gerade sichtbar sind (wird ebenfalls im Cache gespeichert). // Ob die Filter/Sortier-Optionen gerade sichtbar sind (wird ebenfalls im Cache gespeichert).
var isFilterVisible = true; // Standardmäßig ausgeblendet, bis der Nutzer sie einmal selbst einblendet.
var isFilterVisible = false;
// Ob die Aktivitäten-Tabelle gerade maximiert ist (Timer-Karte ist dann ausgeblendet). // Ob die Aktivitäten-Tabelle gerade maximiert ist (Timer-Karte ist dann ausgeblendet).
var isTableMaximized = false; var isTableMaximized = false;
@ -700,9 +701,10 @@ document.getElementById('dashbord_month_area').addEventListener('click', () =>{
document.getElementById('dashbord_month_area').classList.replace('closeMonthArea', 'openMonthArea') document.getElementById('dashbord_month_area').classList.replace('closeMonthArea', 'openMonthArea')
document.getElementById('dashbord_month_area').classList.add(['openMonthArea']) document.getElementById('dashbord_month_area').classList.add(['openMonthArea'])
document.getElementById('dashbord_month_area').classList.add(['ActiveMonth']) document.getElementById('dashbord_month_area').classList.add(['ActiveMonth'])
document.getElementById('ActivitysTable').classList.add(['shrinkActivitys']) // ActivitysTable ist jetzt flex:1 1 auto (siehe custom.css) und macht der wachsenden
document.getElementById('ActivitysTable').classList.replace('growActivitys', 'shrinkActivitys') // Monatskarte automatisch Platz - kein manuelles shrinkActivitys/growActivitys mehr nötig,
document.getElementById('dashbord_month_area').classList.remove('mt-4') // das würde der Flex-Berechnung sonst mit einer festen vh-Höhe in die Quere kommen.
document.getElementById('dashbord_month_area').classList.remove('mt-3')
// document.getElementById('dashbord_year_area').classList.add('fade-out') // document.getElementById('dashbord_year_area').classList.add('fade-out')
// Für jedes ausgewählte Element die neue Klasse hinzufügen // Für jedes ausgewählte Element die neue Klasse hinzufügen
setTimeout(function() { setTimeout(function() {
@ -718,7 +720,7 @@ document.getElementById('dashbord_month_area').addEventListener('click', () =>{
} else { } else {
document.getElementById('dashbord_month_area').classList.remove('ActiveMonth') document.getElementById('dashbord_month_area').classList.remove('ActiveMonth')
document.getElementById('dashbord_month_area').classList.replace('openMonthArea', 'closeMonthArea') document.getElementById('dashbord_month_area').classList.replace('openMonthArea', 'closeMonthArea')
document.getElementById('ActivitysTable').classList.replace('shrinkActivitys', 'growActivitys') document.getElementById('dashbord_month_area').classList.add('mt-3')
monthEntrys.forEach(element => { monthEntrys.forEach(element => {
element.classList.replace('fade-in', 'fade-out'); element.classList.replace('fade-in', 'fade-out');
}); });

4
app/templates/app/base.html
Unescape View File

@ -25,10 +25,10 @@
dadurch wurde der Settings-Button vom overflow:hidden des Headers abgeschnitten. dadurch wurde der Settings-Button vom overflow:hidden des Headers abgeschnitten.
HeaderText ist absolut mittig zur vollen Breite positioniert, damit "PIOMINT" mittig HeaderText ist absolut mittig zur vollen Breite positioniert, damit "PIOMINT" mittig
bleibt, egal wie breit die Icon-Gruppen links/rechts gerade sind. --> bleibt, egal wie breit die Icon-Gruppen links/rechts gerade sind. -->
<div class="d-flex align-items-center headerline" style="position: relative; width: 100%; height: 6vh; flex: 0 0 auto; padding: 0 0.75rem;"> <div class="d-flex align-items-center headerline" style="position: relative; width: 100%; height: 7vh; flex: 0 0 auto; padding: 0 0.75rem;">
<span class="d-none" id="refresh_icon" style="width: 28px; flex: 0 0 auto;"><img onclick="window.location.reload();" src="{% static 'app/images/refresh.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 100%; opacity: 0.75;"></span> <span class="d-none" id="refresh_icon" style="width: 28px; flex: 0 0 auto;"><img onclick="window.location.reload();" src="{% static 'app/images/refresh.png' %}" alt="Settings" class="img-fluid" id="image" style="width: 100%; opacity: 0.75;"></span>
<h3 id="HeaderText" class="pt-2" style="display: none; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h3> <h3 id="HeaderText" style="display: none; margin: 0; padding: 0; line-height: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"><b>PIO</b><b style="color: rgb(120,170,86);">MINT</b></h3>
<div class="d-flex align-items-center" style="gap: 1rem; margin-left: auto;"> <div class="d-flex align-items-center" style="gap: 1rem; margin-left: auto;">
<span class="d-none" id="share_icon" style="width: 28px; flex: 0 0 auto;" title="Bericht für WhatsApp kopieren"> <span class="d-none" id="share_icon" style="width: 28px; flex: 0 0 auto;" title="Bericht für WhatsApp kopieren">

55
app/templates/app/home.html
Unescape View File

@ -10,7 +10,7 @@
document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top') document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top')
</script> </script>
<div class="container" id="welcome_content"> <div class="container" id="welcome_content" style="padding-bottom: 3rem;">
<br> <br>
<h1>Willkommen! 👋</h1> <h1>Willkommen! 👋</h1>
<p> <p>
@ -34,7 +34,7 @@
<button class="btn btn-primary" id="allOk">Alles klar</button> <button class="btn btn-primary" id="allOk">Alles klar</button>
</div> </div>
<div class="container mt-5" id="update_content"> <div class="container mt-5" id="update_content" style="padding-bottom: 3rem;">
{% include 'app/updateinfo.html' %} {% include 'app/updateinfo.html' %}
@ -42,38 +42,40 @@
</div> </div>
<div class="d-none" id="dashboard"> <div class="d-none" id="dashboard">
<div class="row justify-content-around mt-3" style="width: 100vw; color: black;"> <div class="row justify-content-around mt-3" style="width: 100vw; color: black; flex-shrink: 0;">
<div class="col-11" id="dashbord_year_area" style="height: 5vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray"> <div class="col-11" id="dashbord_year_area" style="padding: 0.5rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;">
<div class="row justify-content-between"> <!-- flex-shrink:0 auf beiden Kindern: sonst quetscht Flexbox in der knappen Höhe
<p class="col-6" style="font-size: 1rem; margin-top: -0.75rem; white-space: nowrap;"><b>Jahr:</b> <span id="yearHours"></span>h/600h<span id="rule55Badge" class="badge badge-warning d-none" title="55h-Regel aktiv: Monate mit LDC/Sonstiges werden auf 55h gedeckelt" style="font-size: 0.55rem; vertical-align: middle; margin-left: 0.25rem;">55h</span></p> den 5px-Balken dünner als den (nicht-flex) Balken der Monatskarte. -->
<p class="offset-1 col-5" style="font-size: 1rem; margin-top: -0.75rem;"><b>Offen:</b> <span id="yearRest"></span>h</p> <div class="row justify-content-between" style="margin: 0; flex-shrink: 0;">
<p class="col-6" style="font-size: 1rem; margin: 0; white-space: nowrap;"><b>Jahr:</b> <span id="yearHours"></span>h/600h<span id="rule55Badge" class="badge badge-warning d-none" title="55h-Regel aktiv: Monate mit LDC/Sonstiges werden auf 55h gedeckelt" style="font-size: 0.55rem; vertical-align: middle; margin-left: 0.25rem;">55h</span></p>
<p class="offset-1 col-5" style="font-size: 1rem; margin: 0;"><b>Offen:</b> <span id="yearRest"></span>h</p>
</div> </div>
<div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -1rem;"> <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin: 0; flex-shrink: 0;">
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 0.5%; height: 5px;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarYear"></div> <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); width: 0.5%; height: 5px;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarYear"></div>
</div> </div>
</div> </div>
<div class="col-11 mt-4" id="dashbord_month_area" style="padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray"> <div class="col-11 mt-3" id="dashbord_month_area" style="padding: 0.75rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<div class="row justify-content-between"> <div class="row justify-content-between" style="margin: 0 0 0.4rem 0;">
<p class="col-7" style="font-size: 1.25rem;"><b id="MonthNameOfActual">Monat:</b> <span id="monthHours"></span>h</p> <p class="col-7" style="font-size: 1.25rem; margin: 0;"><b id="MonthNameOfActual">Monat:</b> <span id="monthHours"></span>h</p>
<input type="number" class="d-none" id="MonthSumHours"> <input type="number" class="d-none" id="MonthSumHours">
<p class="col-5" style="font-size: 1.25rem;"><b>Offen:</b> <span id="monthRest"></span>h</p> <p class="col-5" style="font-size: 1.25rem; margin: 0;"><b>Offen:</b> <span id="monthRest"></span>h</p>
</div> </div>
<div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -0.75rem"> <div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin: 0;">
<div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); height: 5px; width: 1%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarMonth"></div> <div class="progress-bar" role="progressbar" style="background-color:rgb(120,170,86); height: 5px; width: 1%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="50" id="prBarMonth"></div>
</div> </div>
<!-- justify-content-around verteilt die Badges wie bisher auf die verfügbare Breite, <!-- justify-content-around verteilt die Badges wie bisher auf die verfügbare Breite,
solange sie passen; erst wenn der individuell vergebene Schnellwahl-Titel (siehe solange sie passen; erst wenn der individuell vergebene Schnellwahl-Titel (siehe
Einstellungen) zu lang wird, greift overflow-x: auto statt eines Umbruchs. --> Einstellungen) zu lang wird, greift overflow-x: auto statt eines Umbruchs. -->
<div class="d-flex justify-content-around mt-3" style="overflow-x: auto; gap: 0.5rem; padding-bottom: 2px;"> <div class="d-flex justify-content-around" style="overflow-x: auto; gap: 0.5rem; padding-bottom: 2px; margin-top: 0.5rem;">
<button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Dienst: <span id="monthHourService"></span>h</button> <button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Dienst: <span id="monthHourService"></span>h</button>
<button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;"><span id="monthHourLDCLabel">LDC</span>: <span id="monthHourLDC"></span>h</button> <button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;"><span id="monthHourLDCLabel">LDC</span>: <span id="monthHourLDC"></span>h</button>
<button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Übrig: <span id="monthHourOther"></span>h</button> <button class="badge badge-primary" style="height: 25px; border: none; white-space: nowrap; flex: 0 0 auto;">Übrig: <span id="monthHourOther"></span>h</button>
</div> </div>
<div class="row justify-content-around align-middle monthEntrys mt-3" style="max-height: 2.5rem; width: 99%; margin-left: 1%;"> <div class="row justify-content-around align-middle monthEntrys" style="max-height: 2.5rem; width: 99%; margin-left: 1%; margin-top: 0.5rem;">
<span class="col-2 btn btn-secondary" id="btn-month-before" onclick="event.stopPropagation();"><</span> <span class="col-2 btn btn-secondary" id="btn-month-before" onclick="event.stopPropagation();"><</span>
<p class="col-6" style="text-align:center; width: 100%; font-size: 1.75rem; margin: 0;"><b id="actualMonthName"></b></p> <p class="col-6" style="text-align:center; width: 100%; font-size: 1.75rem; margin: 0;"><b id="actualMonthName"></b></p>
<span class="col-2 btn btn-secondary" id="btn-month-next" onclick="event.stopPropagation();">></span> <span class="col-2 btn btn-secondary" id="btn-month-next" onclick="event.stopPropagation();">></span>
@ -81,10 +83,10 @@
</div> </div>
</div> </div>
<div class="row justify-content-around" id="timerCard" style="width: 100vw; color: black; padding-top: 2rem;"> <div class="row justify-content-around" id="timerCard" style="width: 100vw; color: black; padding-top: 1.5rem; flex-shrink: 0;">
<div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray"> <div class="col-11" style="padding: 0.75rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem;">
<p style="font-size: 1.2rem;"><b>Timer</b></p> <p style="font-size: 1.2rem; margin: 0; flex-shrink: 0;"><b>Timer</b></p>
<div class="row justify-content-between" style="margin-top: -1rem;"> <div class="row justify-content-between" style="margin: 0; flex-shrink: 0;">
<p class="col-5"><b id="timerDisplay" style="font-size: 2.5rem;">00:00</b><i id="secondsDisplay" style="font-size: 1rem;">:00</i></p> <p class="col-5"><b id="timerDisplay" style="font-size: 2.5rem;">00:00</b><i id="secondsDisplay" style="font-size: 1rem;">:00</i></p>
<div class="col-7 row justify-content-center"> <div class="col-7 row justify-content-center">
<img id="startTimer" src="{% static 'app/images/play.png' %}" alt="play" class="img-fluid col-6" style="height: 55px;"> <img id="startTimer" src="{% static 'app/images/play.png' %}" alt="play" class="img-fluid col-6" style="height: 55px;">
@ -94,18 +96,17 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div> <div class="col-12 mt-3" id="ActivitysTable" style="flex: 1 1 auto; min-height: 220px; padding: 0rem 1rem 1rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; overflow-y: auto;">
<div class="col-12" id="ActivitysTable" style="height: 40vh; padding: 0rem 1rem 1rem 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray; overflow-y: auto;"> <div style="position: sticky; top: 0; background-color: white; padding-top: 1rem; padding-bottom: 0.5rem; z-index: 100; width: 100%;">
<div style="position: sticky; top: 0; background-color: white; padding-top: 1rem; z-index: 100; width: 100%;">
<div class="d-flex justify-content-between align-items-center" style="width: 100%;"> <div class="d-flex justify-content-between align-items-center" style="width: 100%;">
<p style="font-size: 1.2rem; margin: 0;" ><b>Aktivitäten</b></p> <p style="font-size: 1.2rem; margin: 0;" ><b>Aktivitäten</b></p>
<div class="d-flex align-items-center" style="gap: 0.5rem;"> <div class="d-flex align-items-center" style="gap: 1rem;">
<button type="button" id="openNewEntryForm" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal" style="width: 45px; height: 45px; padding: 0;"><img id="openNewEntryFormIcon" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid"></button> <button type="button" id="openNewEntryForm" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#newEntryModal" style="width: 28px; height: 28px; padding: 0;"><img id="openNewEntryFormIcon" src="{% static 'app/images/addcircle.png' %}" alt="add" class="img-fluid" style="width: 100%;"></button>
<button type="button" id="toggleSortOptions" class="btn btn-light" title="Filter/Sortierung ein-/ausblenden" style="width: 45px; height: 45px; padding: 0;"><img id="toggleSortOptionsIcon" src="{% static 'app/images/more.png' %}" alt="filter" class="img-fluid"></button> <button type="button" id="toggleSortOptions" class="btn btn-light" title="Filter/Sortierung ein-/ausblenden" style="width: 28px; height: 28px; padding: 0;"><img id="toggleSortOptionsIcon" src="{% static 'app/images/more.png' %}" alt="filter" class="img-fluid" style="width: 100%;"></button>
<button type="button" id="openViewOfEntry" class="btn btn-light" title="Tabelle maximieren" style="width: 45px; height: 45px; padding: 0;"><img id="openViewOfEntryIcon" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid"></button> <button type="button" id="openViewOfEntry" class="btn btn-light" title="Tabelle maximieren" style="width: 28px; height: 28px; padding: 0;"><img id="openViewOfEntryIcon" src="{% static 'app/images/open.png' %}" alt="open" class="img-fluid" style="width: 100%;"></button>
</div> </div>
</div> </div>
<div class="d-flex align-items-center" id="sortOptionsRow" style="width: 100%; margin-top: 0.5rem; gap: 0.5rem;"> <div class="d-flex align-items-center sortOptionsCollapsed" id="sortOptionsRow" style="width: 100%; margin-top: 0.5rem; gap: 0.5rem;">
<!-- Eigener Dropdown statt <select>, damit das Auswahlmenü nicht als winziges natives <!-- Eigener Dropdown statt <select>, damit das Auswahlmenü nicht als winziges natives
Popup irgendwo auf dem Bildschirm erscheint, sondern direkt unter dem Button. --> Popup irgendwo auf dem Bildschirm erscheint, sondern direkt unter dem Button. -->
<div style="position: relative; flex: 1;"> <div style="position: relative; flex: 1;">

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.