Fix some styling issues for forms
This commit is contained in:
parent
5aef4630a6
commit
3434bf099c
GPG key ID:
8FF12381C6C90D35
4 changed files with 68 additions and 49 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -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}}
|
||||
|
|
@ -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}}
|
||||
Loading…
Reference in a new issue