admin route dev

docker-compose.yml

@@ -18,6 +18,8 @@ services:
       - "8002:8080"
     networks:
       - fbla25
+    volumes:
+      - ./.env:/srv/FBLA25/.env
 
 networks:
   fbla25:

src/app.css

@@ -6,7 +6,7 @@
     --text-color: #000000;
     --bg-color: #f4f4f4;
     --hover-bg-color: #e4e4f0;
-    --elevated-bg-color: #ffffff;
+    --elevated-bg-color: #e0e0e0;
     --low-emphasis-text-color: #6b6b6b;
     --primary-color: #1F96F3;
 }
@@ -59,8 +59,8 @@ h1 {
     border-bottom: 1px solid var(--elevated-bg-color);
 }
 
-.small-icon {
+.icon-16 {
-    font-size: 24px !important;
+    font-size: 16px !important;
     font-variation-settings:
             'FILL' 0,
             'wght' 400,
@@ -68,3 +68,70 @@ h1 {
             'opsz' 20
 }
 
+.icon-20 {
+    font-size: 20px !important;
+    font-variation-settings:
+            'FILL' 0,
+            'wght' 400,
+            'GRAD' 0,
+            'opsz' 20
+}
+
+input[type='search'] {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    border: 1px solid var(--elevated-bg-color);
+}
+
+input[type='search']:focus {
+    outline: 0 solid var(--text-color);
+    border: 1px solid var(--primary-color);
+    box-shadow: 0 0 0 0 var(--primary-color);
+}
+
+.search-bar {
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+}
+
+.search-bar input[type='search'] {
+    flex-grow: 1;
+    border: 1px solid var(--elevated-bg-color);
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+    outline: none;
+    height: 36px;
+}
+
+.search-bar button {
+    height: 36px;
+    background: none;
+    border-top: 1px solid var(--elevated-bg-color);
+    border-right: 1px solid var(--elevated-bg-color);
+    border-bottom: 1px solid var(--elevated-bg-color);
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    padding: 6px
+}
+
+.search-bar button:hover {
+    background-color: var(--hover-bg-color);
+
+}
+
+.container {
+    width: 100%;
+    max-width: 1280px;
+    margin: 0 auto;
+}
+
+.content {
+    width: 100%;
+
+    @apply px-6;
+}
+

src/routes/+layout.svelte

@@ -42,10 +42,10 @@
 
 <link
 	rel="stylesheet"
-	href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..40,400,0,0&display=block&icon_names=account_circle,dark_mode,group,light_mode,login,sell,work"
+	href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..40,400,0,0&display=block&icon_names=account_circle,arrow_drop_down,dark_mode,group,light_mode,login,search,sell,work"
 />
 
-<div class="bottom-border mx-2 flex h-16 justify-between p-4 align-middle">
+<div class="bottom-border flex h-14 justify-between p-3 align-middle">
 	<nav class="pt-1">
 		<a href="/" class="hover-bg-color mr-1 rounded-md px-2 pb-2 pt-1.5">
 			<img
@@ -68,12 +68,14 @@
 	</nav>
 	<div>
 		<button onclick={toggleTheme} class="">
-			<span class="material-symbols-outlined rounded-full p-1 dark:invisible">
+			<span class="material-symbols-outlined hover-bg-color rounded-full p-1 dark:invisible">
 				{'light_mode'}
 			</span>
 		</button>
 		<button onclick={toggleTheme} class="">
-			<span class="material-symbols-outlined invisible rounded-full p-1 dark:visible">
+			<span
+				class="material-symbols-outlined hover-bg-color invisible rounded-full p-1 dark:visible"
+			>
 				{'dark_mode'}
 			</span>
 		</button>
@@ -81,7 +83,7 @@
 			onclick={() =>
 				(window.location.href = (userState.perms & 0b00000010) !== 0 ? '/account' : '/signin')}
 		>
-			<span class="material-symbols-outlined rounded-full p-1">
+			<span class="material-symbols-outlined hover-bg-color rounded-full p-1">
 				{(userState.perms & 0b00000010) !== 0 ? 'account_circle' : 'login'}
 			</span>
 		</button>

src/routes/administration/+layout.svelte

@@ -5,30 +5,30 @@
 	let { children } = $props();
 </script>
 
-<div class="pt-2 text-center">
+<div class="bottom-border h-10 pt-2 text-center">
 	<a
 		href="/administration/postings"
 		class="p-2 {$page.url.pathname === '/administration/postings'
 			? 'primary-underline font-bold'
 			: 'low-emphasis-text'}"
-		><span class="material-symbols-outlined small-icon align-bottom">work</span> Postings</a
+		><span class="material-symbols-outlined align-bottom">work</span> Postings</a
 	>
 	<a
 		href="/administration/users"
 		class="p-2 {$page.url.pathname === '/administration/users'
 			? 'primary-underline font-bold'
 			: 'low-emphasis-text'}"
-		><span class="material-symbols-outlined small-icon align-bottom">group</span> Users</a
+		><span class="material-symbols-outlined align-bottom">group</span> Users</a
 	>
 	<a
 		href="/administration/tags"
 		class="{$page.url.pathname === '/administration/tags'
 			? 'primary-underline font-bold'
 			: 'low-emphasis-text'} p-2"
-		><span class="material-symbols-outlined small-icon align-bottom">sell</span> Tags</a
+		><span class="material-symbols-outlined align-bottom">sell</span> Tags</a
 	>
 </div>
 
-<div>
+<div class="container">
 	{@render children()}
 </div>

src/routes/administration/users/+page.svelte

@@ -0,0 +1,18 @@
+<div class="content">
+	<form action="">
+		<div class="flex py-4">
+			<div class="search-bar">
+				<input type="search" name="searchUsers" id="searchUsers" placeholder="Search Users" />
+				<button><span class="material-symbols-outlined">search</span></button>
+			</div>
+			<button class="hover-bg-color mx-2 mr-1 rounded px-3 py-2 text-sm"
+				>Filter<span class="material-symbols-outlined icon-20 align-middle">arrow_drop_down</span
+				></button
+			>
+			<button class="hover-bg-color mr-1 rounded px-3 py-2 text-sm"
+				>Sort<span class="material-symbols-outlined icon-20 align-middle">arrow_drop_down</span
+				></button
+			>
+		</div>
+	</form>
+</div>