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

136
templates/layout.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>OpenTimeTracker</title>
<!-- Favicon: Simple Clock SVG -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%232383e2%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><polyline points=%2212 6 12 12 16 14%22/></svg>">
@@ -26,20 +26,22 @@
margin: 0;
padding: 0;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
}
/* Modern Navigation */
nav {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 0.8rem 1.5rem;
/* Modern Navigation (Top) */
.top-nav {
background: rgba(255, 255, 255, 0.98); /* Less transparent for stability */
border-bottom: 1px solid var(--border-dim);
padding: 0.8rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
z-index: 100; /* Lower than modal */
height: 60px;
box-sizing: border-box;
}
.brand {
@@ -50,7 +52,7 @@
display: flex; align-items: center; gap: 8px;
}
nav a {
.top-nav a {
color: var(--text-secondary);
text-decoration: none;
margin-left: 20px;
@@ -58,9 +60,16 @@
font-weight: 500;
transition: color 0.15s;
}
nav a:hover { color: var(--text-primary); }
.top-nav a:hover { color: var(--text-primary); }
.container { max-width: 1100px; margin: 3rem auto; padding: 0 1.5rem; }
.container {
max-width: 1100px;
margin: 2rem auto;
padding: 0 1.5rem;
min-height: 80vh; /* Ensure content area has height */
position: relative;
z-index: 1;
}
/* Clean Notion-style Cards */
.card {
@@ -103,6 +112,7 @@
color: var(--text-primary);
font-family: inherit;
transition: all 0.2s;
-webkit-appearance: none; /* iOS fix */
}
input:focus, select:focus, textarea:focus {
@@ -115,7 +125,6 @@
/* Custom Select Style */
select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2337352f%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
@@ -249,6 +258,7 @@
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 2000;
align-items: center;
justify-content: center;
@@ -292,28 +302,104 @@
::-webkit-calendar-picker-indicator:hover {
opacity: 1;
}
/* Mobile Responsive Styles */
.bottom-nav { display: none; }
.mobile-only { display: none; }
@media (max-width: 768px) {
.desktop-links { display: none; }
.top-nav { padding: 0.8rem 1rem; }
.container {
margin: 1.5rem auto;
padding-bottom: 100px;
padding-left: 1rem;
padding-right: 1rem;
}
/* Bottom Navigation */
.bottom-nav {
display: flex;
position: fixed;
bottom: 0; left: 0; width: 100%;
background: white;
border-top: 1px solid var(--border-dim);
justify-content: space-around;
padding: 10px 0 25px 0; /* Extra padding for iOS home indicator */
z-index: 1000;
box-shadow: 0 -2px 10px rgba(0,0,0,0.02);
}
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-secondary);
font-size: 0.7rem;
gap: 4px;
padding: 5px;
flex: 1;
}
.nav-item svg { stroke-width: 2px; }
.nav-item.active { color: var(--primary-color); }
.nav-item.active svg { stroke: var(--primary-color); }
/* Mobile Modals (Bottom Sheet) */
.modal-backdrop { align-items: flex-end; }
.modal-card {
width: 100%;
max-width: 100%;
border-radius: 16px 16px 0 0;
margin: 0;
max-height: 85vh;
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* Adjust header for mobile */
h2 { font-size: 1.5rem; }
.mobile-only { display: block; }
}
</style>
</head>
<body>
<nav>
<nav class="top-nav">
<a href="{{ url_for('index') }}" class="brand" style="text-decoration: none;">
<!-- Simple SVG Icon -->
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
OpenTimeTracker
</a>
<div>
<!-- Desktop Navigation -->
<div class="desktop-links">
{% if session.user_id %}
<a href="{{ url_for('index') }}">Tracker</a>
<a href="{{ url_for('tasks') }}">Tasks</a>
<a href="{{ url_for('goals') }}">Goals</a>
<a href="{{ url_for('logbook') }}">Logbook</a>
<a href="{{ url_for('logout') }}">Logout</a>
<a href="{{ url_for('logout') }}" style="color: var(--danger-color);">Logout</a>
{% else %}
<a href="{{ url_for('login') }}">Login</a>
<a href="{{ url_for('register') }}">Register</a>
{% endif %}
</div>
<!-- Mobile: Small user icon or logout -->
{% if session.user_id %}
<div class="mobile-only">
<a href="{{ url_for('logout') }}" style="color: var(--text-secondary); text-decoration: none;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
</a>
</div>
{% endif %}
</nav>
<div class="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
@@ -324,5 +410,27 @@
{% endwith %}
{% block content %}{% endblock %}
</div>
<!-- Mobile Bottom Navigation (Only authenticated) -->
{% if session.user_id %}
<nav class="bottom-nav">
<a href="{{ url_for('index') }}" class="nav-item {% if request.endpoint == 'index' %}active{% endif %}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
<span>Tracker</span>
</a>
<a href="{{ url_for('tasks') }}" class="nav-item {% if request.endpoint == 'tasks' or request.endpoint == 'task_detail' %}active{% endif %}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
<span>Tasks</span>
</a>
<a href="{{ url_for('goals') }}" class="nav-item {% if request.endpoint == 'goals' %}active{% endif %}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
<span>Goals</span>
</a>
<a href="{{ url_for('logbook') }}" class="nav-item {% if request.endpoint == 'logbook' %}active{% endif %}">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
<span>Logbook</span>
</a>
</nav>
{% endif %}
</body>
</html>