connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Improve login form layout and accessibility

Browse Source 
- Move remember checkboxes inline with inputs for better space utilization
- Implement proper tab order: server → username → password → checkboxes
- Increase form width from 400px to 500px to accommodate horizontal layout
- Make checkbox labels more concise ("Remember" instead of full text)
- Enhance checkbox styling with vertical label placement and larger size
- Reduce form label bottom margin for tighter spacing
- Ensure consistent input widths across all form fields

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-13 18:15:47 -04:00
parent a4476dcfae
commit fad03f94f9
2 changed files with 64 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/login.rs
View File

@@ -164,45 +164,53 @@ pub fn Login(props: &LoginProps) -> Html {
<form onsubmit={on_submit}>
<div class="form-group">
<label for="server_url">{"CalDAV Server URL"}</label>
<input
ref={server_url_ref}
type="text"
id="server_url"
placeholder="https://your-caldav-server.com/dav/"
value={(*server_url).clone()}
onchange={on_server_url_change}
disabled={*is_loading}
/>
<div class="remember-checkbox">
<div class="input-with-checkbox">
<input
type="checkbox"
id="remember_server"
checked={*remember_server}
onchange={on_remember_server_change}
ref={server_url_ref}
type="text"
id="server_url"
placeholder="https://your-caldav-server.com/dav/"
value={(*server_url).clone()}
onchange={on_server_url_change}
disabled={*is_loading}
tabindex="1"
/>
<label for="remember_server">{"Remember server"}</label>
<div class="remember-checkbox">
<label for="remember_server">{"Remember"}</label>
<input
type="checkbox"
id="remember_server"
checked={*remember_server}
onchange={on_remember_server_change}
tabindex="4"
/>
</div>
</div>
</div>
<div class="form-group">
<label for="username">{"Username"}</label>
<input
ref={username_ref}
type="text"
id="username"
placeholder="Enter your username"
value={(*username).clone()}
onchange={on_username_change}
disabled={*is_loading}
/>
<div class="remember-checkbox">
<div class="input-with-checkbox">
<input
type="checkbox"
id="remember_username"
checked={*remember_username}
onchange={on_remember_username_change}
ref={username_ref}
type="text"
id="username"
placeholder="Enter your username"
value={(*username).clone()}
onchange={on_username_change}
disabled={*is_loading}
tabindex="2"
/>
<label for="remember_username">{"Remember username"}</label>
<div class="remember-checkbox">
<label for="remember_username">{"Remember"}</label>
<input
type="checkbox"
id="remember_username"
checked={*remember_username}
onchange={on_remember_username_change}
tabindex="5"
/>
</div>
</div>
</div>
@@ -216,6 +224,7 @@ pub fn Login(props: &LoginProps) -> Html {
value={(*password).clone()}
onchange={on_password_change}
disabled={*is_loading}
tabindex="3"
/>
</div>

32
frontend/styles.css
View File

@@ -452,7 +452,7 @@ body {
border-radius: var(--border-radius-medium);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
max-width: 500px;
}
.login-form h2, .register-form h2 {
@@ -492,24 +492,42 @@ body {
cursor: not-allowed;
}
.remember-checkbox {
.input-with-checkbox {
display: flex;
align-items: center;
gap: 0.375rem;
margin-top: 0.375rem;
gap: 1rem;
}
.input-with-checkbox input[type="text"],
.input-with-checkbox input[type="password"] {
flex: 1;
min-width: 0;
}
.form-group input {
width: 100%;
}
.remember-checkbox {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
opacity: 0.7;
white-space: nowrap;
min-width: 80px;
}
.remember-checkbox input[type="checkbox"] {
width: auto;
margin: 0;
cursor: pointer;
transform: scale(0.85);
transform: scale(1.1);
}
.remember-checkbox label {
margin: 0;
font-size: 0.75rem;
font-size: 0.55rem;
color: #888;
cursor: pointer;
user-select: none;
@@ -1826,7 +1844,7 @@ body {
.form-group label {
display: block;
margin-bottom: 0.75rem;
margin-bottom: 0.4rem;
color: #374151;
font-weight: 600;
font-size: 0.95rem;