ulysia/szurubooru
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Page formatting/style updates

Browse source
This commit is contained in:
ReAnzu 2018-03-10 19:02:09 -06:00
parent 5ce8fab533
commit a88ace403f
5 changed files with 80 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
client/css/core-forms.styl
View file

@ -137,6 +137,38 @@ input[type=checkbox]:focus + .checkbox:before
/*
* Date and time inputs
*/
input[type=date],
input[type=time]
vertical-align: top
font-family: 'Droid Sans', sans-serif
font-size: 100%
padding: 0.2em 0.3em
box-sizing: border-box
border: 2px solid $input-enabled-border-color
background: $input-enabled-background-color
color: $input-enabled-text-color
box-shadow: none /* :-moz-submit-invalid on FF */
transition: border-color 0.1s linear, background-color 0.1s linear
&:disabled
border: 2px solid $input-disabled-border-color
background: $input-disabled-background-color
color: $input-disabled-text-color
&:focus
border-color: $main-color
&[readonly]
border: 2px solid $input-disabled-border-color
background: $input-disabled-background-color
color: $input-disabled-text-color
/*
* Regular inputs
*/

17
client/css/user-view.styl
View file

@ -42,12 +42,6 @@ $token-border-color = $active-tab-background-color
#user-tokens
.flex-centered
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
.token-flex-container
width: 100%
display: flex;
@ -63,14 +57,14 @@ $token-border-color = $active-tab-background-color
justify-content: space-between;
padding: 0.2em;
.no-wrap
white-space: nowrap;
.token-input
min-height: 2em;
line-height: 2em;
text-align: center;
form
width: auto;
.token-flex-column
display: flex;
flex-direction: column;
@ -81,7 +75,8 @@ $token-border-color = $active-tab-background-color
hr
border-top: 3px solid $token-border-color
form
width: 100%;
#user-delete form
width: 100%

60
client/html/user_tokens.tpl
View file

@ -1,31 +1,35 @@
<div id='user-tokens'>
<div class='messages'></div>
<% if (ctx.tokens.length > 0) { %>
<div class="token-flex-container">
<div class='token-flex-container'>
<% _.each(ctx.tokens, function(token, index) { %>
<div class="token-flex-row">
<div class="token-flex-column token-flex-labels">
<div class="token-flex-row">Token:</div>
<div class="token-flex-row">Note:</div>
<div class="token-flex-row">Created:</div>
<div class="token-flex-row">Expires:</div>
<div class="token-flex-row">Used:</div>
<div class='token-flex-row'>
<div class='token-flex-column token-flex-labels'>
<div class='token-flex-row'>Token:</div>
<div class='token-flex-row'>Note:</div>
<div class='token-flex-row'>Created:</div>
<div class='token-flex-row'>Expires:</div>
<div class='token-flex-row no-wrap'>Last used:</div>
</div>
<div class="token-flex-column full-width">
<div class="token-flex-row"><%= token.token %></div>
<div class="token-flex-row"><%= token.note %></div>
<div class="token-flex-row"><%= ctx.makeRelativeTime(token.creationTime) %></div>
<% if (token.expirationTime) { %>
<div class="token-flex-row"><%= ctx.makeRelativeTime(token.expirationTime) %></div>
<div class='token-flex-column full-width'>
<div class='token-flex-row'><%= token.token %></div>
<% if (token.note !== null) { %>
<div class='token-flex-row'><%= token.note %></div>
<% } else { %>
<div class="token-flex-row">No expiration</div>
<div class='token-flex-row'>&nbsp;</div>
<% } %>
<div class="token-flex-row"><%= ctx.makeRelativeTime(token.lastUsageTime) %></div>
<div class='token-flex-row'><%= ctx.makeRelativeTime(token.creationTime) %></div>
<% if (token.expirationTime) { %>
<div class='token-flex-row'><%= ctx.makeRelativeTime(token.expirationTime) %></div>
<% } else { %>
<div class='token-flex-row'>No expiration</div>
<% } %>
<div class='token-flex-row'><%= ctx.makeRelativeTime(token.lastUsageTime) %></div>
</div>
</div>
<div class="token-flex-row">
<div class="token-flex-column full-width">
<div class="token-flex-row">
<div class='token-flex-row'>
<div class='token-flex-column full-width'>
<div class='token-flex-row'>
<form class='token' data-token-id='<%= index %>'>
<input type='hidden' name='token' value='<%= token.token %>'/>
<% if (token.isCurrentAuthToken) { %>
@ -45,14 +49,18 @@
<h2>No Registered Tokens</h2>
<% } %>
<form id='create-token-form'>
<ul class="input">
<li>
<label>Note</label>
<input name='note', type='textbox'/>
<ul class='input'>
<li class='note'>
<%= ctx.makeTextInput({
text: 'Note',
id: 'note',
}) %>
</li>
<li>
<label>Expires</label>
<input name='expirationTime' type='date'/>
<li class='expirationTime'>
<%= ctx.makeDateInput({
text: 'Expires',
id: 'expirationTime',
}) %>
</li>
</ul>
<div class='buttons'>

6
client/js/util/views.js
View file

@ -168,6 +168,11 @@ function makeNumericInput(options) {
return makeInput(options);
}
function makeDateInput(options) {
options.type = 'date';
return makeInput(options)
}
function getPostUrl(id, parameters) {
return uri.formatClientLink(
'post', id,
@ -392,6 +397,7 @@ function getTemplate(templatePath) {
makePasswordInput: makePasswordInput,
makeEmailInput: makeEmailInput,
makeColorInput: makeColorInput,
makeDateInput: makeDateInput,
makePostLink: makePostLink,
makeTagLink: makeTagLink,
makeUserLink: makeUserLink,

4
client/js/views/user_tokens_view.js
View file

@ -94,11 +94,11 @@ class UserTokenView extends events.EventTarget {
}
get _userTokenNoteInputNode() {
return this._formNode.querySelector('[name=note]');
return this._formNode.querySelector('.note input');
}
get _userTokenExpirationTimeInputNode() {
return this._formNode.querySelector('[name=expirationTime]');
return this._formNode.querySelector('.expirationTime input');
}
}