calvin.erfmann/OpenTimeTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

event better mobile

Browse Source
This commit is contained in:
Calvin-Nevaro Erfmann
2026-02-10 21:21:19 +01:00
parent 6621c622d3
commit a867087bc5
2 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
templates/dashboard.html
View File

@@ -4,42 +4,71 @@
<style>
/* Specific Dashboard Mobile Fixes */
@media (max-width: 768px) {
/* Grid Layout for Mobile: Strict 2 columns */
.activity-grid {
grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1rem !important;
justify-content: stretch;
width: 100%;
}
/* Reset child width constraints from flex logic */
.activity-grid > div {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
}
/* Fix container widths */
.main-content {
text-align: center;
min-width: 0 !important; /* Override inline style */
}
.main-content h2 {
margin-left: auto;
margin-right: auto;
}
/* Layout Reordering: Sidebar (Active Timer) first */
.dashboard-container {
flex-direction: column;
}
.sidebar-container {
order: -1; /* Visualize first */
flex: 0 0 auto !important;
width: 100% !important;
position: static !important; /* Reset sticky/fixed */
margin-bottom: 2rem;
min-width: 0 !important; /* Override inline style */
}
.active-section {
/* Active timer card styles for mobile */
position: fixed;
bottom: 70px; /* Above nav bar */
left: 10px; right: 10px;
z-index: 900;
/* Reset fixed styles from previous iteration if any */
position: static !important;
margin: 0 !important;
padding: 1rem !important;
border-radius: 12px;
box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
border: 1px solid var(--primary-color);
}
/* Create space for the fixed active card so list isn't hidden */
body.is-tracking .container {
padding-bottom: 350px !important;
box-shadow: none !important;
border: 1px solid var(--border-dim) !important;
}
/* Mobile specific timer adjustments */
.timer-display { font-size: 2.5rem !important; margin: 0.5rem 0 1rem 0 !important; }
}
</style>
<script>
// Helper to toggle body class for spacing
// Helper to toggle body class for spacing (Keeping logic but simplifying CSS impact)
function setTrackingState(isTracking) {
if(isTracking) document.body.classList.add('is-tracking');
else document.body.classList.remove('is-tracking');
}
</script>
<div style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">
<!-- Added class dashboard-container for flex control -->
<div class="dashboard-container" style="display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start;">
<!-- Left Column: Activity Grid (Main Content) -->
<div style="flex: 1; min-width: 300px; max-width: 100%;">
<div class="main-content" style="flex: 1; min-width: 300px; max-width: 100%;">
<h2 style="margin-bottom: 1.5rem;">Start Tracking</h2>
<div class="activity-grid">
@@ -64,13 +93,15 @@
{% endfor %}
<!-- Add New Button -->
<div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
<span>+ New Activity</span>
<div style="position: relative;">
<div class="activity-card" style="background-color: #95a5a6; color: white;" onclick="document.getElementById('newActivityForm').style.display='block'">
<span>+ New Activity</span>
</div>
</div>
</div>
<!-- Create Activity Form -->
<div id="newActivityForm" class="card" style="display:none; margin-top: 2rem;">
<div id="newActivityForm" class="card" style="display:none; margin-top: 2rem; text-align: left;">
<h3>Create New Activity Category</h3>
<form action="{{ url_for('add_activity') }}" method="POST" onsubmit="prepareTasksList()">
<label>Name</label>