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 2 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 {
0% {
height: 7vh;
height: 8vh;
}
100% {
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 {
0% {
height: 15vh;
height: 6.5rem;
margin-top: 1.5rem;
}
100% {
height: 20vh;
height: 9.5rem;
margin-top: 1.5rem;
}
}
@keyframes shrinkActivitys {
0% {
height: 40vh;
}
100% {
height: 35vh;
}
}
@keyframes growActivitys {
0% {
height: 35vh;
}
100% {
height: 40vh;
}
}
@keyframes openSettingscolor {
0% {
height: 6vh;
height: 7vh;
}
100% {
height: 95vh;
@ -88,7 +72,7 @@
height: 95vh;
}
100% {
height: 6vh;
height: 7vh;
}
}
@ -97,27 +81,27 @@
height: 100vh;
}
100% {
height: 7vh;
height: 8vh;
}
}
@keyframes closeMonthArea {
0% {
height: 20vh;
height: 9.5rem;
margin-top: 1.5rem;
}
100% {
height: 15vh;
height: 6.5rem;
margin-top: 1.5rem;
}
}
.HeaderDefaultHeightbg {
height: 7vh;
height: 8vh;
}
.HeaderDefaultHeightcolor {
height: 6vh;
height: 7vh;
}
.slide-out {
@ -145,14 +129,6 @@
animation: closeMonthArea 1s forwards;
}
.shrinkActivitys {
animation: shrinkActivitys 1s forwards;
}
.growActivitys {
animation: growActivitys 1s forwards;
}
.closeSettingsbg {
animation: closeSettingsbg 1s forwards;
}
@ -170,7 +146,7 @@
}
#dashbord_month_area {
height: 15vh;
height: 6.5rem;
}
/* Neu hinzugefügte Icons (Filter-Toggle, Maximieren) in Grau statt Schwarz/Weiß.
@ -200,13 +176,9 @@
pointer-events: none;
}
#ActivitysTable {
transition: height 0.4s ease-in-out;
}
#ActivitysTable.ActivitysTableMaximized {
height: 65vh !important;
}
/* Kein fester height-Override beim Maximieren mehr nötig: ActivitysTable ist flex:1 1 auto
(siehe #dashboard) und wächst automatisch in den Platz, den die kollabierende Timer-Karte
freigibt - inklusive sauberer Animation, weil beides gleichzeitig neu layoutet wird. */
/* Filter/Sortierung ein- und ausblenden.
overflow bleibt im geöffneten Zustand "visible", damit das Dropdown-Menü (sortFieldMenu)
@ -248,7 +220,7 @@
}
.maincontainer {
height: 93vh;
height: 92vh;
transition: height 1s ease, transform 1s ease;
margin: 0;
/* Grundsätzlicher Fix für kleinere Displays (z.B. iPhone 12 mini vs. 15 Pro): die feste
@ -271,6 +243,16 @@
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. */
@keyframes updateWow {
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';
// 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).
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.add(['openMonthArea'])
document.getElementById('dashbord_month_area').classList.add(['ActiveMonth'])
document.getElementById('ActivitysTable').classList.add(['shrinkActivitys'])
document.getElementById('ActivitysTable').classList.replace('growActivitys', 'shrinkActivitys')
document.getElementById('dashbord_month_area').classList.remove('mt-4')
// ActivitysTable ist jetzt flex:1 1 auto (siehe custom.css) und macht der wachsenden
// Monatskarte automatisch Platz - kein manuelles shrinkActivitys/growActivitys mehr nötig,
// 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')
// Für jedes ausgewählte Element die neue Klasse hinzufügen
setTimeout(function() {
@ -718,7 +720,7 @@ document.getElementById('dashbord_month_area').addEventListener('click', () =>{
} else {
document.getElementById('dashbord_month_area').classList.remove('ActiveMonth')
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 => {
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.
HeaderText ist absolut mittig zur vollen Breite positioniert, damit "PIOMINT" mittig
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>
<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;">
<span class="d-none" id="share_icon" style="width: 28px; flex: 0 0 auto;" title="Bericht für WhatsApp kopieren">

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

@ -10,7 +10,7 @@
document.getElementById('maincontainer').classList.replace('align-items-center', 'align-items-top')
</script>
<div class="container" id="welcome_content">
<div class="container" id="welcome_content" style="padding-bottom: 3rem;">
<br>
<h1>Willkommen! 👋</h1>
<p>
@ -34,7 +34,7 @@
<button class="btn btn-primary" id="allOk">Alles klar</button>
</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' %}
@ -42,38 +42,40 @@
</div>
<div class="d-none" id="dashboard">
<div class="row justify-content-around mt-3" style="width: 100vw; color: black;">
<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="row justify-content-between">
<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>
<p class="offset-1 col-5" style="font-size: 1rem; margin-top: -0.75rem;"><b>Offen:</b> <span id="yearRest"></span>h</p>
</div>
<div class="progress" style="height: 5px; width: 100%; border-radius: 2rem; background-color: lightgray; margin-top: -1rem;">
<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="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;">
<!-- flex-shrink:0 auf beiden Kindern: sonst quetscht Flexbox in der knappen Höhe
den 5px-Balken dünner als den (nicht-flex) Balken der Monatskarte. -->
<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 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>
</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">
<p class="col-7" style="font-size: 1.25rem;"><b id="MonthNameOfActual">Monat:</b> <span id="monthHours"></span>h</p>
<div class="row justify-content-between" style="margin: 0 0 0.4rem 0;">
<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">
<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 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>
<!-- justify-content-around verteilt die Badges wie bisher auf die verfügbare Breite,
solange sie passen; erst wenn der individuell vergebene Schnellwahl-Titel (siehe
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;"><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>
</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>
<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>
@ -81,10 +83,10 @@
</div>
</div>
<div class="row justify-content-around" id="timerCard" style="width: 100vw; color: black; padding-top: 2rem;">
<div class="col-11" style="height: 15vh; padding: 1rem; border-radius:1rem; box-shadow: 0 0 0.5rem gray">
<p style="font-size: 1.2rem;"><b>Timer</b></p>
<div class="row justify-content-between" style="margin-top: -1rem;">
<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="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; margin: 0; flex-shrink: 0;"><b>Timer</b></p>
<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>
<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;">
@ -94,18 +96,17 @@
</div>
</div>
</div>
<div class="row justify-content-around" style="width: 95vw; color: black; padding-top: 2rem;"></div>
<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; z-index: 100; width: 100%;">
<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 style="position: sticky; top: 0; background-color: white; padding-top: 1rem; padding-bottom: 0.5rem; z-index: 100; 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>
<div class="d-flex align-items-center" style="gap: 0.5rem;">
<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="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="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>
<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: 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: 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: 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 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
Popup irgendwo auf dem Bildschirm erscheint, sondern direkt unter dem Button. -->
<div style="position: relative; flex: 1;">

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.