Add horizonal flex layout to admin-vote page; Add subcards for different election types: published, closed, and unpublished

Author: skyFzz

docker-compose-saml.yaml

@@ -1,15 +1,13 @@
 services:
   auth:
     ports:
-      - 443:443
+      - 3000:3000
     build:
       dockerfile: Dockerfile.dev
     command: air
     volumes:
       - ./keys:/app/keys
       - ./tlskeys:/app/tlskeys
-    environment:
-      - ENV=saml
     develop:
       watch:
         - action: sync

templates/#admin-vote.html.tpl#

@@ -0,0 +1,39 @@
+{{ template "admin.html.tpl" . }}
+
+{{ define "title" }}Admin Vote | Cyber Security Club @ Ohio State{{ end }}
+
+{{ define "admin" }}
+<div class="card">
+  <div class="card-title">Admin Votes</div>
+  <div class="card-content">
+    <a hx-boost="true" href="/admin/vote/new" class="secondary-button"
+      >New Vote</a
+    >
+
+    <div>
+      <h1>Past Votes</h1>
+      <ul class="list-disc list-inside">
+        {{
+          range.pastElections
+        }}
+        <li>
+          <a
+            class="font-bold"
+            hx-boost="true"
+            href="/admin/vote/{{ .ElectionId }}"
+            >{{ .Name }}</a
+          >
+          {{ if .Published }}<em>published</em>{{ end }}
+
+          {{ if .Done }}
+          <em>completed {{ .DoneTime }}</em>
+          {{ end }}
+        </li>
+        {{
+          end
+        }}
+      </ul>
+    </div>
+  </div>
+</div>
+{{ end }}

templates/admin-vote.html.tpl

@@ -5,35 +5,70 @@
 {{ define "admin" }}
 <div class="card">
   <div class="card-title">Admin Votes</div>
-  <div class="card-content">
-    <a hx-boost="true" href="/admin/vote/new" class="secondary-button"
-      >New Vote</a
-    >
-
-    <div>
-      <h1>Past Votes</h1>
-      <ul class="list-disc list-inside">
-        {{
-          range.pastElections
-        }}
-        <li>
-          <a
-            class="font-bold"
-            hx-boost="true"
-            href="/admin/vote/{{ .ElectionId }}"
-            >{{ .Name }}</a
-          >
-          {{ if .Published }}<em>published</em>{{ end }}
-
-          {{ if .Done }}
-          <em>completed {{ .DoneTime }}</em>
-          {{ end }}
-        </li>
-        {{
-          end
-        }}
-      </ul>
-    </div>
-  </div>
+	<a hx-boost="true" href="/admin/vote/new" class="secondary-button"
+		>New Vote</a
+	>
+	<div class="container">
+		<div class="subcard">
+			<h5 class="mb-3 text-base font-semibold">
+				Published
+			</h5>
+			<ul>
+				{{ range.pastElections }}
+				<li>
+					{{ if .Published }} 
+					<span class="flex-1 ms-3 whitespace-nowrap">
+						<a
+							hx-boost="true"
+							href="/admin/vote/{{ .ElectionId }}"
+							>{{ .Name }}</a
+						>
+					</span>
+					{{ end }}
+				</li>
+				{{ end }}
+			</ul>
+		</div>
+		<div class="subcard">
+			<h5 class="mb-3 text-base font-semibold">
+				Closed
+			</h5>
+			<ul>
+				{{ range.pastElections }}
+				<li>
+					{{ if .Done }} 
+					<span class="flex-1 ms-3 whitespace-nowrap">
+						<a
+							hx-boost="true"
+							href="/admin/vote/{{ .ElectionId }}"
+							>{{ .Name }}</a
+						>
+					</span>
+					{{ end }}
+				</li>
+				{{ end }}
+			</ul>
+		</div>
+		<div class="subcard">
+			<h5 class="mb-3 text-base font-semibold">
+				Unpublished
+			</h5>
+			<ul>
+				{{ range.pastElections }}
+				<li>
+					{{ if and (not .Published) (not .Done) }} 
+					<span class="flex-1 ms-3 whitespace-nowrap">
+						<a
+							hx-boost="true"
+							href="/admin/vote/{{ .ElectionId }}"
+							>{{ .Name }}</a
+						>
+					</span>
+					{{ end }}
+				</li>
+				{{ end }}
+			</ul>
+		</div>
+	</div>
 </div>
 {{ end }}

templates/base.html.tpl

@@ -11,11 +11,21 @@
       @tailwind base;
       @tailwind components;
       @tailwind utilities;
-      .card { @apply shadow-md rounded-sm border; }
+      .card { 
+				@apply shadow-md rounded-sm 
+				border; 
+				padding-right: 25px;
+			}
+			.container {
+				display: flex; 
+				margin-right: 20px;
+			}
+			.container div { margin: 5px 10px; }
+      .subcard { @apply w-full max-w-sm p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:p-6 dark:bg-gray-100 dark:border-gray-100; }
       .card-title { @apply shadow-sm py-2 px-3 font-bold; }
       .card-content { @apply py-2 px-3; }
       .external-link { @apply text-blue-500; }
-      .secondary-button { @apply inline-flex border border-gray-300 hover:border-gray-400 active:border-gray-500 text-gray-800 rounded-md cursor-pointer px-4 py-2 text-center; }
+      .secondary-button { @apply inline-flex border border-gray-300 hover:border-gray-400 active:border-gray-500 text-gray-800 rounded-md cursor-pointer px-4 py-2 text-center; margin-left: 20px; }
       .primary-button { @apply inline-flex bg-teal-400 hover:bg-teal-500 active:bg-teal-600 font-bold text-gray-100 rounded-md cursor-pointer px-4 py-2 text-center; }
     </style>
     <title>{{ block "title" . }}{{ end }}</title>