Merge pull request #27 from ssb-ngi-pointer/prettify-templates

improve styles of template containers and sign-in
ssbc · Feb 22, 2021 · 1787a27 · 1787a27
2 parents 9dc7713 + 143b910
commit 1787a27
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 33 deletions.
diff --git a/web/templates/admin/dashboard.tmpl b/web/templates/admin/dashboard.tmpl
@@ -5,7 +5,7 @@
 </div>
 <div class="row">
     <div class="text-xs">
-    <p class="text-2xl" id="roomCount">{{i18npl "AdminRoomCount" .Count}}</p>
+    <p class="text-xl" id="roomCount">{{i18npl "AdminRoomCount" .Count}}</p>
     <ul>
     {{range .Clients}}
      <li>{{.}}</li>

diff --git a/web/templates/auth/fallback_sign_in.tmpl b/web/templates/auth/fallback_sign_in.tmpl
@@ -1,16 +1,18 @@
 {{ define "title" }}{{i18n "AuthFallbackTitle"}}{{ end }}
 {{ define "content" }}
-<div class="page-header">
-  <h1 id="welcome">{{i18n "AuthFallbackWelcome"}}</h1>
+<div id="page-header">
+  <h1 id="welcome" class="text-lg">{{i18n "AuthFallbackWelcome"}}</h1>
 </div>
-<div class="row">
-    <div class="col-md-12">
-    <form method="POST" action={{urlTo "auth:fallback:signin"}}>
-        {{ .csrfField }}
-        <input type="text" name="user">
-        <input type="password" name="pass">
-        <input type="submit">
-    </form>
+<div class="">
+  <form method="POST" action={{urlTo "auth:fallback:signin"}} class="flex flex-row items-end">
+    {{ .csrfField }}
+    <div class="w-96 grid grid-cols-2 gap-x-4 gap-y-1 mr-4">
+      <label>Username</label>
+      <label>Password</label>
+      <input class="shadow rounded border border-transparent h-8 p-1 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:border-transparent" type="text" name="user">
+      <input class="shadow rounded border border-transparent h-8 p-1 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:border-transparent" type="password" name="pass">
     </div>
+    <button type="submit" class="shadow rounded px-4 h-8 text-gray-100 bg-pink-600 hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50">Enter</button>
+  </form>
 </div> <!-- /row -->
 {{end}}
diff --git a/web/templates/base.tmpl b/web/templates/base.tmpl
@@ -8,31 +8,29 @@
   <link href="/assets/style.css" rel="stylesheet">
   <title>{{block "title" .}}Go-SSB Room Server{{end}}</title>
 </head>
-<body>
+<body class="bg-gray-100">
   {{block "extra" .}}{{end}}
 
-  <div>
-    {{$user := is_logged_in}}
-    {{if $user}}
-      <p>
-        Hello {{$user.Name}}!
-      </p>
-      <ul>
-        <li><a href="{{urlTo "news:overview"}}">{{i18n "NewsTitle"}}</a></li>
-        <li><a href="{{urlTo "admin:dashboard"}}">{{i18n "NavAdminDashboard"}}</a></li>
-        <li><a href="{{urlTo "admin:allow-list:overview"}}">{{i18n "AdminAllowListTitle"}}</a></li>
-        <li><a href="{{urlTo "auth:fallback:logout"}}">{{i18n "AuthSignOut"}}</a></li>
-      </ul>
-    {{else}}
-      <ul>
-        <li><a href="{{urlTo "news:overview"}}">{{i18n "NewsTitle"}}</a></li>
-        <li><a href="{{urlTo "auth:fallback:signin:form"}}">{{i18n "AuthSignIn"}}</a></li>
-      </ul>
-    {{end}}
-  </div>
+  <div class="sm:mx-auto sm:container">
+    <div class="flex flex-row justify-end space-x-4 my-4 pr-4">
+      {{$user := is_logged_in}}
+      {{if $user}}
+      <a href="{{urlTo "news:overview"}}">{{i18n "NewsTitle"}}</a>
+      <a href="{{urlTo "admin:dashboard"}}">{{i18n "NavAdminDashboard"}}</a>
+      <a href="{{urlTo "admin:allow-list:overview"}}">{{i18n "AdminAllowListTitle"}}</a>
+      <div class="inline">
+        ({{$user.Name}})
+        <a href="{{urlTo "auth:fallback:logout"}}">{{i18n "AuthSignOut"}}</a>
+      </div>
+      {{else}}
+      <a href="{{urlTo "news:overview"}}">{{i18n "NewsTitle"}}</a>
+      <a href="{{urlTo "auth:fallback:signin:form"}}">{{i18n "AuthSignIn"}}</a>
+      {{end}}
+    </div>
 
-  <div>
-    {{ block "content" . }}{{end}}
+    <div class="bg-gray-50 rounded-2xl p-4 shadow-xl mb-16">
+      {{ block "content" . }}{{end}}
+    </div>
   </div>
 </body>
 </html>