From a88ace403fcc8ada5100a0e0e0ec1c293fc5197d Mon Sep 17 00:00:00 2001 From: ReAnzu Date: Sat, 10 Mar 2018 19:02:09 -0600 Subject: [PATCH] Page formatting/style updates --- client/css/core-forms.styl | 32 +++++++++++++++ client/css/user-view.styl | 17 +++----- client/html/user_tokens.tpl | 60 ++++++++++++++++------------- client/js/util/views.js | 6 +++ client/js/views/user_tokens_view.js | 4 +- 5 files changed, 80 insertions(+), 39 deletions(-) diff --git a/client/css/core-forms.styl b/client/css/core-forms.styl index f083ffbe..bed63e3b 100644 --- a/client/css/core-forms.styl +++ b/client/css/core-forms.styl @@ -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 */ diff --git a/client/css/user-view.styl b/client/css/user-view.styl index 64a01b52..3cdd29cb 100644 --- a/client/css/user-view.styl +++ b/client/css/user-view.styl @@ -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% - - diff --git a/client/html/user_tokens.tpl b/client/html/user_tokens.tpl index 8a37aca2..8032dc1a 100644 --- a/client/html/user_tokens.tpl +++ b/client/html/user_tokens.tpl @@ -1,31 +1,35 @@
<% if (ctx.tokens.length > 0) { %> -
+
<% _.each(ctx.tokens, function(token, index) { %> -
-
-
Token:
-
Note:
-
Created:
-
Expires:
-
Used:
+
+
+
Token:
+
Note:
+
Created:
+
Expires:
+
Last used:
-
-
<%= token.token %>
-
<%= token.note %>
-
<%= ctx.makeRelativeTime(token.creationTime) %>
- <% if (token.expirationTime) { %> -
<%= ctx.makeRelativeTime(token.expirationTime) %>
+
+
<%= token.token %>
+ <% if (token.note !== null) { %> +
<%= token.note %>
<% } else { %> -
No expiration
+
 
<% } %> -
<%= ctx.makeRelativeTime(token.lastUsageTime) %>
+
<%= ctx.makeRelativeTime(token.creationTime) %>
+ <% if (token.expirationTime) { %> +
<%= ctx.makeRelativeTime(token.expirationTime) %>
+ <% } else { %> +
No expiration
+ <% } %> +
<%= ctx.makeRelativeTime(token.lastUsageTime) %>
-
-
-
+
+
+
<% if (token.isCurrentAuthToken) { %> @@ -45,14 +49,18 @@

No Registered Tokens

<% } %> -
    -
  • - - +
      +
    • + <%= ctx.makeTextInput({ + text: 'Note', + id: 'note', + }) %>
      • -
    • - - +
    • + <%= ctx.makeDateInput({ + text: 'Expires', + id: 'expirationTime', + }) %>
    diff --git a/client/js/util/views.js b/client/js/util/views.js index b0b7ccec..9f238b1e 100644 --- a/client/js/util/views.js +++ b/client/js/util/views.js @@ -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, diff --git a/client/js/views/user_tokens_view.js b/client/js/views/user_tokens_view.js index bb81acc2..3433ea74 100644 --- a/client/js/views/user_tokens_view.js +++ b/client/js/views/user_tokens_view.js @@ -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'); } }