sam/goalsbreakdown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sam:0fc62f2d16164266ff154df56aa4ddcd9f9743bc
Branches Tags
sam:master
..
compare: sam:91169f117b34a21c717ba4d8f337133407e72182
Branches Tags
sam:master

2 Commits
0fc62f2d16 ... 91169f117b

Author SHA1 Message Date
Yuyao Huang
91169f117b responsive layout fixes for mobile and desktop 
- style.css: shrink nav-link padding, wrap nav-links on mobile,
  reduce container margin, responsive modal
- goals.css: stack goal cards vertically on small screens
- tasks.css: fix scroll-view height for mobile (50-55vh),
  side-panel width uses percentage (85%), add small-screen
  breakpoint at 480px
- notes.css: stack filters vertically on mobile, remove
  min-width constraints
 2026-05-09 10:51:09 +08:00
Yuyao Huang
3dbe7f9c17 disable browser autocomplete on all input fields 2026-05-09 10:38:00 +08:00
10 changed files with 98 additions and 13 deletions
Show Stats Expand all files Collapse all files

20
static/css/goals.css
View File

@ -128,3 +128,23 @@
.empty-state h3 { .empty-state h3 {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@media (max-width: 640px) {
.goals-header {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.goal-card {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
padding: 1rem;
}
.goal-actions {
justify-content: flex-end;
flex-wrap: wrap;
}
}

14
static/css/notes.css
View File

@ -254,4 +254,18 @@
flex-direction: column; flex-direction: column;
gap: 0; gap: 0;
} }
.notes-filters {
flex-direction: column;
align-items: stretch;
}
.filter-group select {
min-width: 0;
width: 100%;
}
.search-group {
min-width: 0;
}
} }

36
static/css/style.css
View File

@ -29,15 +29,18 @@ body {
.nav-links { .nav-links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
} }
.nav-link { .nav-link {
color: white; color: white;
text-decoration: none; text-decoration: none;
padding: 0.5rem 1rem; padding: 0.4rem 0.6rem;
border-radius: 4px; border-radius: 4px;
transition: background-color 0.2s; transition: background-color 0.2s;
white-space: nowrap;
} }
.nav-link:hover { .nav-link:hover {
@ -251,3 +254,32 @@ body {
gap: 1rem; gap: 1rem;
margin-top: 1rem; margin-top: 1rem;
} }
@media (max-width: 640px) {
.navbar {
padding: 0.5rem 0.75rem;
flex-wrap: wrap;
gap: 0.25rem;
}
.nav-brand {
font-size: 1.15rem;
}
.container {
margin: 0.75rem auto;
}
.modal-content {
margin: 0.5rem;
padding: 1rem;
}
.modal-actions {
flex-wrap: wrap;
}
.modal-actions .btn-danger {
width: 100%;
}
}

23
static/css/tasks.css
View File

@ -202,8 +202,9 @@
.side-panel { .side-panel {
position: fixed; position: fixed;
top: 0; top: 0;
right: -400px; right: -100%;
width: 400px; width: 85%;
max-width: 400px;
height: 100%; height: 100%;
background: white; background: white;
box-shadow: -2px 0 8px rgba(0,0,0,0.1); box-shadow: -2px 0 8px rgba(0,0,0,0.1);
@ -216,6 +217,24 @@
.side-panel.active { .side-panel.active {
right: 0; right: 0;
} }
.scroll-view {
height: 55vh;
}
}
@media (max-width: 480px) {
.scroll-view {
height: 50vh;
}
.tasks-list {
padding: 30vh 1rem;
}
.goal-selector-container select {
min-width: 140px;
}
} }
@media (orientation: landscape) and (min-width: 1024px) { @media (orientation: landscape) and (min-width: 1024px) {

2
templates/admin.html
View File

@ -123,7 +123,7 @@ function renderUsers() {
</td> </td>
<td> <td>
<input type="number" min="1" value="${user.max_goals}" <input type="number" min="1" value="${user.max_goals}"
id="max-goals-${user.user_id}"> id="max-goals-${user.user_id}" autocomplete="off">
</td> </td>
<td> <td>
<button class="save-btn" onclick="saveUser(${user.user_id})">Save</button> <button class="save-btn" onclick="saveUser(${user.user_id})">Save</button>

2
templates/goals.html
View File

@ -21,7 +21,7 @@
<h2 id="modal-title">Create Goal</h2> <h2 id="modal-title">Create Goal</h2>
<button class="modal-close" id="modal-close">&times;</button> <button class="modal-close" id="modal-close">&times;</button>
</div> </div>
<form id="goal-form"> <form id="goal-form" autocomplete="off">
<input type="hidden" id="goal-id"> <input type="hidden" id="goal-id">
<div class="form-group"> <div class="form-group">
<label for="goal-title">Goal Title</label> <label for="goal-title">Goal Title</label>

2
templates/login.html
View File

@ -9,7 +9,7 @@
<body class="auth-page"> <body class="auth-page">
<div class="auth-container"> <div class="auth-container">
<h1>Login</h1> <h1>Login</h1>
<form id="login-form"> <form id="login-form" autocomplete="off">
<div class="form-group"> <div class="form-group">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" id="username" name="username" required> <input type="text" id="username" name="username" required>

4
templates/notes.html
View File

@ -21,7 +21,7 @@
</select> </select>
</div> </div>
<div class="filter-group search-group"> <div class="filter-group search-group">
<input type="text" id="filter-search" placeholder="Search notes..."> <input type="text" id="filter-search" placeholder="Search notes..." autocomplete="off">
</div> </div>
</div> </div>
@ -34,7 +34,7 @@
<h2 id="note-modal-title">New Note</h2> <h2 id="note-modal-title">New Note</h2>
<button class="modal-close" id="note-modal-close">&times;</button> <button class="modal-close" id="note-modal-close">&times;</button>
</div> </div>
<form id="note-form"> <form id="note-form" autocomplete="off">
<input type="hidden" id="note-id"> <input type="hidden" id="note-id">
<div class="form-group"> <div class="form-group">
<label for="note-title">Title</label> <label for="note-title">Title</label>

2
templates/register.html
View File

@ -9,7 +9,7 @@
<body class="auth-page"> <body class="auth-page">
<div class="auth-container"> <div class="auth-container">
<h1>Register</h1> <h1>Register</h1>
<form id="register-form"> <form id="register-form" autocomplete="off">
<div class="form-group"> <div class="form-group">
<label for="username">Username</label> <label for="username">Username</label>
<input type="text" id="username" name="username" required> <input type="text" id="username" name="username" required>

6
templates/tasks.html
View File

@ -32,11 +32,11 @@
<div class="side-panel-content"> <div class="side-panel-content">
<div class="form-group"> <div class="form-group">
<label for="edit-task-title">Title</label> <label for="edit-task-title">Title</label>
<input type="text" id="edit-task-title"> <input type="text" id="edit-task-title" autocomplete="off">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="edit-task-desc">Description</label> <label for="edit-task-desc">Description</label>
<textarea id="edit-task-desc" rows="12"></textarea> <textarea id="edit-task-desc" rows="12" autocomplete="off"></textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="edit-task-status">Status</label> <label for="edit-task-status">Status</label>
@ -63,7 +63,7 @@
<h2 id="task-modal-title">Create Task</h2> <h2 id="task-modal-title">Create Task</h2>
<button class="modal-close" id="task-modal-close">&times;</button> <button class="modal-close" id="task-modal-close">&times;</button>
</div> </div>
<form id="task-form"> <form id="task-form" autocomplete="off">
<input type="hidden" id="task-id"> <input type="hidden" id="task-id">
<div class="form-group"> <div class="form-group">
<label for="task-title">Task Title</label> <label for="task-title">Task Title</label>