fredrik/org-todo-pwa
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor navigation and form elements for improved usability and localization

Browse Source
This commit is contained in:
fredrik
2025-01-25 11:21:26 +01:00
parent 09772d859d
commit 1122de442b
3 changed files with 41 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
public/index.html
View File

@@ -17,12 +17,12 @@
<h1 class="center-align">Logga in</h1>
<form id="loginForm">
<div class="input-field">
<label for="username">Användarnamn:</label>
<input type="text" id="username" placeholder="Username" required>
<input type="text" id="username" placeholder="Användarnamn" required>
<label for="username">Användarnamn</label>
</div>
<div class="input-field">
<label for="password">Lösenord:</label>
<input type="password" id="password" placeholder="Password" required>
<input type="password" id="password" placeholder="Lösenord" required>
<label for="password">Lösenord</label>
</div>
<button class="btn waves-effect waves-light" type="submit">Login</button>
</form>
@@ -31,49 +31,43 @@
<div id="appContainer" class="container" style="display:none;">
<h1 class="center-align">TODO</h1>
<div class="menu">
<button class="hamburger" id="hamburgerButton">&#9776;</button>
<div class="menu-content" id="menuContent">
<button id="logoutButton" class="btn waves-effect waves-light">Logout</button>
<nav style="display:none;">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Menu</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a id="logoutButton" class="hide-on-med-and-down">Logout</a></li>
</ul>
</div>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
<li><a id="logoutButton">Logout</a></li>
</ul>
<form id="taskForm">
<div class="input-field">
<label for="subject">Uppgift:</label>
<input type="text" id="subject" placeholder="Subject" required autocomplete="off">
<input type="text" id="subject" placeholder="Uppgift" required autocomplete="off">
<label for="subject">Uppgift</label>
</div>
<div class="input-field">
<label for="description">Beskrivning:</label>
<textarea id="description" class="materialize-textarea" placeholder="Description"></textarea>
<textarea id="description" class="materialize-textarea" placeholder="Beskrivning"></textarea>
<label for="description">Beskrivning</label>
</div>
<div class="input-field">
<label for="scheduled">Datum:</label>
<input type="date" id="scheduled" lang="sv-SE" required>
<input type="text" id="scheduled" class="datepicker" required>
<label for="scheduled">Planerat datum</label>
</div>
<div class="input-field">
<label for="tags">Taggar (separera med komma):</label>
<input type="text" id="tags" class="autocomplete" placeholder="Tags" autocomplete="off">
<input type="text" id="tags" placeholder="Taggar">
<label for="tags">Taggar</label>
</div>
<button class="btn waves-effect waves-light" type="submit">Spara</button>
<button class="btn waves-effect waves-light" type="submit">Save Task</button>
<p id="responseMessage"></p>
</form>
<p id="responseMessage" class="center-align"></p>
</div>
<script src="app.js"></script>
<script>
// Set today's date as the default for the date input
const today = new Date().toISOString().split('T')[0];
document.getElementById('scheduled').value = today;
// Initialize flatpickr with Swedish locale and Monday as the first day of the week
flatpickr("#scheduled", {
weekNumbers: true, // Show week numbers
firstDayOfWeek: 1 // Start weeks on Monday
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</body>
</html>