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

first mobile improvements

Browse Source
This commit is contained in:
Calvin-Nevaro Erfmann
2026-02-10 21:12:49 +01:00
parent fcfd2d5662
commit 6621c622d3
3 changed files with 177 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
templates/dashboard.html
View File

@@ -1,9 +1,45 @@
{% extends "layout.html" %}
{% block content %}
<style>
/* Specific Dashboard Mobile Fixes */
@media (max-width: 768px) {
.activity-grid {
grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on mobile */
}
.active-section {
/* Active timer card styles for mobile */
position: fixed;
bottom: 70px; /* Above nav bar */
left: 10px; right: 10px;
z-index: 900;
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;
}
/* 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
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;">
<!-- Left Column: Activity Grid (Main Content) -->
<div style="flex: 1; min-width: 300px;">
<div style="flex: 1; min-width: 300px; max-width: 100%;">
<h2 style="margin-bottom: 1.5rem;">Start Tracking</h2>
<div class="activity-grid">
@@ -66,14 +102,17 @@
<!-- Right Column: Sidebar (Active Timer) -->
<!-- Only visible if tracking, or hidden via JS initially if not tracking but we use 'display:none' on the card itself -->
<div style="flex: 0 0 380px; position: sticky; top: 100px; max-width: 100%;">
<div style="flex: 0 0 380px; position: sticky; top: 100px; max-width: 100%;" class="sidebar-container">
<div class="card active-section" id="activeSection" style="{% if not current_entry %}display:none;{% endif %} padding: 1.5rem;">
<div style="text-align: center; margin-bottom: 1rem;">
<small style="text-transform: uppercase; font-weight: bold; color: var(--primary-color);">Currently Tracking</small>
<h3 id="activeName" style="margin: 0.5rem 0; color: {{ current_entry.activity_color if current_entry else '#333' }}">
{{ current_entry.activity_name if current_entry else '' }}
</h3>
<div style="display:flex; justify-content: space-between; align-items: start;">
<div style="text-align: center; flex: 1;">
<small style="text-transform: uppercase; font-weight: bold; color: var(--primary-color);">Currently Tracking</small>
<h3 id="activeName" style="margin: 0.5rem 0; color: {{ current_entry.activity_color if current_entry else '#333' }}">
{{ current_entry.activity_name if current_entry else '' }}
</h3>
</div>
<!-- Collapse Button for Mobile (Optional, keeping simple for now) -->
</div>
<!-- Context Info -->
@@ -124,6 +163,9 @@
let startTime = {% if current_entry %}{{ current_entry.start_time.timestamp() * 1000 }}{% else %}null{% endif %};
let timerInterval;
// Initial state check for padding
if(startTime) setTrackingState(true);
function updateTimer() {
if (!startTime) return;
const now = new Date().getTime();
@@ -194,6 +236,8 @@
// Update UI State
document.getElementById('activeSection').style.display = 'block';
setTrackingState(true); // Add padding for mobile
document.getElementById('activeName').innerText = name;
document.getElementById('activeName').style.color = color;