MarinoDev/FBLA25
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

admin route dev
All checks were successful
ci / docker_image (push) Successful in 1m28s
Details
ci / deploy (push) Successful in 16s
Details

Browse Source
This commit is contained in:
Drake Marino 2025-01-19 09:21:54 -06:00
parent cfde960e63
commit 95fb591b4b
5 changed files with 102 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

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

73
src/app.css
View File

@ -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 {
font-size: 24px !important;
.icon-16 {
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;
}

12
src/routes/+layout.svelte
View File

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

10
src/routes/administration/+layout.svelte
View File

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

18
src/routes/administration/users/+page.svelte
View File

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