Page formatting/style updates

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
  */

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%
-
-

client/html/user_tokens.tpl

@@ -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-row'>
-            <div class="token-flex-column token-flex-labels">
+            <div class='token-flex-column token-flex-labels'>
-                <div class="token-flex-row">Token:</div>
+                <div class='token-flex-row'>Token:</div>
-                <div class="token-flex-row">Note:</div>
+                <div class='token-flex-row'>Note:</div>
-                <div class="token-flex-row">Created:</div>
+                <div class='token-flex-row'>Created:</div>
-                <div class="token-flex-row">Expires:</div>
+                <div class='token-flex-row'>Expires:</div>
-                <div class="token-flex-row">Used:</div>
+                <div class='token-flex-row no-wrap'>Last used:</div>
             </div>
-            <div class="token-flex-column full-width">
+            <div class='token-flex-column full-width'>
-                <div class="token-flex-row"><%= token.token %></div>
+                <div class='token-flex-row'><%= token.token %></div>
-                <div class="token-flex-row"><%= token.note %></div>
+                <% if (token.note !== null) { %>
-                <div class="token-flex-row"><%= ctx.makeRelativeTime(token.creationTime) %></div>
+                    <div class='token-flex-row'><%= token.note %></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'>&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-row'>
-            <div class="token-flex-column full-width">
+            <div class='token-flex-column full-width'>
-                <div class="token-flex-row">
+                <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">
+        <ul class='input'>
-            <li>
+            <li class='note'>
-                <label>Note</label>
+                <%= ctx.makeTextInput({
-                <input name='note', type='textbox'/>
+                    text: 'Note',
+                    id: 'note',
+                }) %>
             </li>
-            <li>
+            <li class='expirationTime'>
-                <label>Expires</label>
+                <%= ctx.makeDateInput({
-                <input name='expirationTime' type='date'/>
+                    text: 'Expires',
+                    id: 'expirationTime',
+                }) %>
             </li>
         </ul>
         <div class='buttons'>

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,

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');
     }
 }