make css consistent

server/assets_src/static/stylesheets/main.css

@@ -13,6 +13,10 @@ form {
     align-items: flex-end;
 }
 
+form>* {
+    width: 100%;
+}
+
 form input[type=password],
 form input[type=text] {
     margin-bottom: 0.25rem;
@@ -37,21 +41,20 @@ body {
     line-height: 1rem;
 }
 
-.left-cut {
-    display: flex;
-    flex-direction: row-reverse;
-    overflow-x: hidden;
+table td, 
+table th {
+    border: none;
+    margin: 0;
 }
 
-table#recent-folders {
-    line-height: 0.45rem;
+table {
     overflow: hidden;
     white-space: nowrap;
 }
 
-table#recent-folders td, th {
-    border: none;
-    margin: 0;
+table#stats td:first-child {
+    display: inline-block;
+    margin-right: 10px;
 }
 
 a,
@@ -75,8 +78,10 @@ a:hover {
 }
 
 #header img {
-    max-width: 580px;
-    position: relative;
+    width: 60%;
+    display: block;
+    margin: 0 auto;
+    height: auto;
 }
 
 #footer {
@@ -89,10 +94,14 @@ a:hover {
     border-bottom: 2px solid #fd1b1b1c;
 }
 
-.right {
+.text-right {
     text-align: right;
 }
 
+.block-right>* {
+    margin-left: auto;
+}
+
 .light {
     color: #00000082;
 }
@@ -101,10 +110,6 @@ a:hover {
     font-family: monospace;
 }
 
-.pre {
-    white-space: pre;
-}
-
 .box {
     background-color: #00000005;
     border-right: 2px solid #0000000c;

server/assets_src/static/stylesheets/reset.css

@@ -0,0 +1,40 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+     margin: 0;
+     padding: 0;
+     border: 0;
+     font-size: 100%;
+     font: inherit;
+     vertical-align: baseline;
+}
+
+/* html5 display-role reset for older browsers */
+ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+     display: block;
+}
+
+body {
+     line-height: 1;
+}
+
+ol, ul {
+     list-style: none;
+}
+
+blockquote, q {
+     quotes: none;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+     content: '';
+     content: none;
+}
+
+table {
+     border-collapse: collapse;
+     border-spacing: 0;
+}

server/assets_src/templates/layout.tmpl

@@ -5,6 +5,7 @@
         <meta charset="utf-8">
         <title>{{ template "title" }}</title>
         <link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css">
+        <link rel="stylesheet" href="/admin/static/stylesheets/reset.css">
         <link rel="stylesheet" href="/admin/static/stylesheets/main.css">
         <link rel="shortcut icon" href="/admin/static/images/favicon.ico" type="image/x-icon">
         <link rel="icon" href="/admin/static/images/favicon.ico" type="image/x-icon">

server/assets_src/templates/pages/delete_user.tmpl

@@ -5,7 +5,7 @@
     <div class="box-title">
         <i class="mdi mdi-account-remove"></i> deleting user {{ .SelectedUser.Name }}
     </div>
-    <div class="right">
+    <div class="text-right">
         are you sure?
     </div>
     <form action="/admin/delete_user_do?user={{ .SelectedUser.Name }}" method="post">

server/assets_src/templates/pages/home.tmpl

@@ -5,17 +5,25 @@
     <div class="box-title">
         <i class="mdi mdi-chart-arc"></i> stats
     </div>
-    <div class="right">
-        <span class="pre">artists: {{ printf "%7v" .ArtistCount }}</span><br/>
-        <span class="pre">albums: {{ printf "%7v" .AlbumCount }}</span><br/>
-        <span class="pre">tracks: {{ printf "%7v" .TrackCount }}</span>
+    <div class="block-right">
+        <table id="stats" class="text-right">
+            <tr>
+                <td>artists:</td> <td>{{ .ArtistCount }}</td>
+            </tr>
+            <tr>
+                <td>albums:</td> <td>{{ .AlbumCount }}</td>
+            </tr>
+            <tr>
+                <td>tracks:</td> <td>{{ .TrackCount }}</td>
+            </tr>
+        </table>
     </div>
 </div>
 <div class="padded box mono">
     <div class="box-title">
         <i class="mdi mdi-lastfm"></i> last.fm
     </div>
-    <div class="right">
+    <div class="text-right">
         {{ if .User.IsAdmin }}
             <a href="/admin/update_lastfm_api_key">update api key</a><br/>
         {{ end }}
@@ -40,7 +48,7 @@
         <div class="box-title">
             <i class="mdi mdi-account-multiple"></i> users
         </div>
-        <div class="right">
+        <div class="text-right">
         {{ range $user := .AllUsers }}
             <i>{{ $user.Name }}</i>
             <span class="light">{{ $user.CreatedAt.Format "jan 02, 2006" }}</span>
@@ -56,7 +64,7 @@
         <div class="box-title">
             <i class="mdi mdi-account"></i> your account
         </div>
-        <div class="right">
+        <div class="text-right">
             <a href="/admin/change_own_password" class="button">change password</a>
         </div>
     {{ end }}
@@ -65,7 +73,7 @@
     <div class="box-title">
         <i class="mdi mdi-folder-multiple"></i> recent folders
     </div>
-    <div class="left-cut">
+    <div class="left-cut block-right">
         <table id="recent-folders">
         {{ range $folder := .RecentFolders }}
             <tr>

server/assets_src/templates/pages/update_lastfm_api_key.tmpl

@@ -5,7 +5,7 @@
     <div class="box-title">
         <i class="mdi mdi-key-change"></i> updating last.fm keys
     </div>
-    <div class="right">
+    <div class="text-right">
         <span class="light">current key</span> <i>{{ if .CurrentLastFMAPIKey }}{{ .CurrentLastFMAPIKey }}{{ else }}not set{{ end }}</i><br/>
         <span class="light">current secret</span> <i>{{ if .CurrentLastFMAPISecret }}{{ .CurrentLastFMAPISecret }}{{ else }}not set{{ end }}</i>
     </div>

server/assets_src/templates/user.tmpl

@@ -1,7 +1,7 @@
 {{ define "title" }}home{{ end }}
 
 {{ define "content" }}
-<div class="side-padded light right mono">
+<div class="side-padded light text-right mono">
     welcome {{ .User.Name }}
     &#124;
     <a href="/admin/home">home</a>