tandem
/
numerus
2
0
Fork 0
Code Issues 39 Pull Requests Packages Projects 1 Releases 1 Wiki Activity

Complete the style of the profile dialog

This commit is contained in:
jordi fita mas 2023-01-23 19:35:49 +01:00
parent 22509dd683
commit f9e22c0789
2 changed files with 86 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/static/numerus.css
View File

@ -189,6 +189,7 @@ p, h1, h2, h3, h4, h5, h6 {
} }
input[type="submit"], button { input[type="submit"], button {
min-width: 34rem;
background-color: var(--numerus--color--white); background-color: var(--numerus--color--white);
border: 2px solid var(--numerus--color--black); border: 2px solid var(--numerus--color--black);
text-transform: uppercase; text-transform: uppercase;
@ -279,6 +280,52 @@ input[type="text"], input[type="password"], input[type="email"], select {
transition: 0.2s; transition: 0.2s;
} }
fieldset {
border: none;
padding: 2rem 0 0;
margin-top: 3rem;
border-top: 1px solid var(--numerus--color--light-gray);
}
legend {
float: left;
font-style: italic;
margin-bottom: 3rem;
width: 100%;
}
legend + * {
clear: both;
}
fieldset {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.full-width {
gap: 2rem;
}
.full-width legend {
margin-bottom: initial;
}
.full-width .input {
flex: 1;
}
.full-width input {
width: 100%;
}
.dialog-content {
max-width: 120rem;
margin: 0 auto;
}
/* Profile Menu */ /* Profile Menu */
#profilemenu { #profilemenu {

72
web/template/profile.html
View File

@ -1,40 +1,46 @@
{{ define "content" }} {{ define "content" }}
<h2>{{(pgettext "User Settings" "title")}}</h2> <section class="dialog-content">
<form method="POST" action="/profile"> <h2>{{(pgettext "User Settings" "title")}}</h2>
<fieldset> <form method="POST" action="/profile">
<legend>{{( pgettext "User Access Data" "title" )}}</legend> <fieldset class="full-width">
<legend>{{( pgettext "User Access Data" "title" )}}</legend>
<div class="input"> <div class="input">
<input type="text" name="name" id="name" required="required" value="{{ .Name }}" placeholder="{{( pgettext "User name" "input" )}}"> <input type="text" name="name" id="name" required="required" value="{{ .Name }}" placeholder="{{( pgettext "User name" "input" )}}">
<label for="name">{{( pgettext "User name" "input" )}}</label> <label for="name">{{( pgettext "User name" "input" )}}</label>
</div> </div>
<div class="input"> <div class="input">
<input type="email" name="email" id="email" required="required" value="{{ .Email }}" placeholder="{{( pgettext "Email" "input" )}}"> <input type="email" name="email" id="email" required="required" value="{{ .Email }}" placeholder="{{( pgettext "Email" "input" )}}">
<label for="email">{{( pgettext "Email" "input" )}}</label> <label for="email">{{( pgettext "Email" "input" )}}</label>
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset class="full-width">
<legend>{{( pgettext "Password Change" "title" )}}</legend> <legend>{{( pgettext "Password Change" "title" )}}</legend>
<div class="input"> <div class="input">
<input type="password" name="password" id="password" value="{{ .Password }}" placeholder="{{( pgettext "Password" "input" )}}"> <input type="password" name="password" id="password" value="{{ .Password }}" placeholder="{{( pgettext "Password" "input" )}}">
<label for="password">{{( pgettext "Password" "input" )}}</label> <label for="password">{{( pgettext "Password" "input" )}}</label>
</div> </div>
<div class="input"> <div class="input">
<input type="password" name="password_confirm" id="password_confirm" value="{{ .PasswordConfirm }}" placeholder="{{( pgettext "Password Confirmation" "input" )}}"> <input type="password" name="password_confirm" id="password_confirm" value="{{ .PasswordConfirm }}" placeholder="{{( pgettext "Password Confirmation" "input" )}}">
<label for="password_confirm">{{( pgettext "Password Confirmation" "input" )}}</label> <label for="password_confirm">{{( pgettext "Password Confirmation" "input" )}}</label>
</div> </div>
</fieldset> </fieldset>
<label for="language">{{( pgettext "Language" "input" )}}</label> <fieldset>
<select id="language" name="language"> <legend id="language-legend">{{( pgettext "Language" "input" )}}</legend>
<option value="und">{{( pgettext "Automatic" "language option" )}}</option>
{{- range $language := .Languages }} <select id="language" name="language" aria-labelledby="language-legend">
<option value="{{ .Tag }}" {{ if eq .Tag $.Language }}selected="selected"{{ end }}>{{ .Name }}</option> <option value="und">{{( pgettext "Automatic" "language option" )}}</option>
{{- end }} {{- range $language := .Languages }}
</select> <option value="{{ .Tag }}" {{ if eq .Tag $.Language }}selected="selected"{{ end }}>{{ .Name }}</option>
<button type="submit">{{( pgettext "Save changes" "action" )}}</button> {{- end }}
</form> </select>
<button type="submit">{{( pgettext "Save changes" "action" )}}</button>
</fieldset>
</form>
</section>
{{- end }} {{- end }}