wbrawner/twigs
1
0
Fork 0
Code Issues Pull requests 4 Projects Releases Packages 1 Wiki Activity Actions

Fix some styling issues for forms #20

Merged
wbrawner merged 1 commit from frontend-fixes into main 2024-07-07 17:46:32 +00:00
Conversation 0 Commits 1 Files changed 4 +68 -49
4 changed files with 68 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/main/resources/static/style.css
View file

@ -1,4 +1,5 @@
* {
box-sizing: border-box;
transition: 0.25s ease;
}
@ -129,6 +130,7 @@ header.row {
font-weight: bold;
padding: var(--input-padding);
text-decoration: none;
text-align: center;
}
.flex-full-width {
@ -261,11 +263,22 @@ a {
}
@media all and (max-width: 400px) {
button {
.button {
width: 100%;
}
.center {
padding: 10px;
}
.flex-full-width {
flex-direction: column;
padding: 5px;
width: 100%;
}
.flex-full-width .button {
flex-direction: column;
margin: 5px;
}
}

28
web/src/main/resources/templates/budget-form.mustache
View file

@ -1,17 +1,19 @@
{{> partials/head }}
<div id="app">
<h1>{{title}}</h1>
<div class="center">
{{#error }}
<p class="error">{{error}}</p>
{{/error}}
<form method="post">
<label for="name">Name</label>
<input id="name" type="text" name="name" value="{{ budget.name }}"/>
<label for="description">Description</label>
<textarea id="description" name="description">{{ budget.description }}</textarea>
<input id="submit" type="submit" class="button button-primary" value="Save"/>
</form>
</div>
<main>
<h1>{{title}}</h1>
<div class="center">
{{#error }}
<p class="error">{{error}}</p>
{{/error}}
<form method="post">
<label for="name">Name</label>
<input id="name" type="text" name="name" value="{{ budget.name }}"/>
<label for="description">Description</label>
<textarea id="description" name="description">{{ budget.description }}</textarea>
<input id="submit" type="submit" class="button button-primary" value="Save"/>
</form>
</div>
</main>
</div>
{{>partials/foot}}

34
web/src/main/resources/templates/login.mustache
View file

@ -1,20 +1,22 @@
{{> partials/head }}
<div id="app">
<h1>{{title}}</h1>
<div class="center">
<div class="logo"></div>
{{#error }}
<p class="error">{{error}}</p>
{{/error}}
<form action="/login" method="post">
<label for="username">Username</label>
<input id="username" type="text" name="username" value="{{ username }}"/>
<label for="password">Password</label>
<input id="password" type="password" name="password"/>
<input id="submit" type="submit" class="button button-primary" value="Login"/>
</form>
<a href="/resetpassword" style="padding: var(--input-padding)">Forgot your password?</a>
<a href="/register" style="padding: var(--input-padding)">Create an account</a>
</div>
<main>
<h1>{{title}}</h1>
<div class="center">
<div class="logo"></div>
{{#error }}
<p class="error">{{error}}</p>
{{/error}}
<form action="/login" method="post">
<label for="username">Username</label>
<input id="username" type="text" name="username" value="{{ username }}"/>
<label for="password">Password</label>
<input id="password" type="password" name="password"/>
<input id="submit" type="submit" class="button button-primary" value="Login"/>
</form>
<a href="/resetpassword" style="padding: var(--input-padding)">Forgot your password?</a>
<a href="/register" style="padding: var(--input-padding)">Create an account</a>
</div>
</main>
</div>
{{>partials/foot}}

40
web/src/main/resources/templates/register.mustache
View file

@ -1,23 +1,25 @@
{{> partials/head }}
<div id="app">
<h1>{{title}}</h1>
<div class="center">
<div class="logo"></div>
{{#error }}
<p class="error">{{error}}</p>
{{/error}}
<form action="/register" method="post">
<label for="username">Username</label>
<input id="username" type="text" name="username" value="{{ username }}"/>
<label for="email">Email</label>
<input id="email" type="email" name="email" value="{{ email }}"/>
<label for="password">Password</label>
<input id="password" type="password" name="password"/>
<label for="confirm-password">Confirm Password</label>
<input id="confirm-password" type="password" name="confirmPassword"/>
<input type="submit" class="button button-primary" value="Login"/>
</form>
<a href="/login" style="padding: var(--input-padding)">Login</a>
</div>
<main>
<h1>{{title}}</h1>
<div class="center">
<div class="logo"></div>
{{#error }}
<p class="error">{{error}}</p>
{{/error}}
<form action="/register" method="post">
<label for="username">Username</label>
<input id="username" type="text" name="username" value="{{ username }}"/>
<label for="email">Email</label>
<input id="email" type="email" name="email" value="{{ email }}"/>
<label for="password">Password</label>
<input id="password" type="password" name="password"/>
<label for="confirm-password">Confirm Password</label>
<input id="confirm-password" type="password" name="confirmPassword"/>
<input type="submit" class="button button-primary" value="Register"/>
</form>
<a href="/login" style="padding: var(--input-padding)">Login</a>
</div>
</main>
</div>
{{>partials/foot}}