Mobile Admin and contrast
This commit is contained in:
parent
1474ba29db
commit
0752bf129e
@ -20,7 +20,7 @@
|
|||||||
[data-theme='dark'] {
|
[data-theme='dark'] {
|
||||||
--text-color: #f4f4f4;
|
--text-color: #f4f4f4;
|
||||||
--bg-color: #0c0c0c;
|
--bg-color: #0c0c0c;
|
||||||
--hover-bg-color: #1c1e1e;
|
--hover-bg-color: #2c2e2e;
|
||||||
--separator-line-color: #2e343d;
|
--separator-line-color: #2e343d;
|
||||||
--low-emphasis-text-color: #999999;
|
--low-emphasis-text-color: #999999;
|
||||||
--primary-color: #1F96F3;
|
--primary-color: #1F96F3;
|
||||||
|
|||||||
@ -2,50 +2,59 @@
|
|||||||
import { page } from '$app/state';
|
import { page } from '$app/state';
|
||||||
import { userState } from '$lib/shared.svelte';
|
import { userState } from '$lib/shared.svelte';
|
||||||
import { PERMISSIONS } from '$lib/consts';
|
import { PERMISSIONS } from '$lib/consts';
|
||||||
|
import { MediaQuery } from 'svelte/reactivity';
|
||||||
|
|
||||||
|
const largeScreen = new MediaQuery('min-width: 1024px');
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="bottom-border h-10 pt-2 text-center">
|
{#if largeScreen.current}
|
||||||
{#if (userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0}
|
<div class="bottom-border h-10 pt-2 text-center">
|
||||||
<a
|
{#if (userState.perms & PERMISSIONS.MANAGE_POSTINGS) > 0}
|
||||||
href="/admin/postings"
|
<a
|
||||||
class="p-2 {page.url.pathname.startsWith('/admin/postings')
|
href="/admin/postings"
|
||||||
? 'primary-underline font-bold'
|
class="p-2 {page.url.pathname.startsWith('/admin/postings')
|
||||||
: 'low-emphasis-text low-emphasis-text-button'}"
|
? 'primary-underline font-bold'
|
||||||
><span class="material-symbols-outlined align-bottom">work</span> Postings</a
|
: 'low-emphasis-text low-emphasis-text-button'}"
|
||||||
>
|
><span class="material-symbols-outlined align-bottom">work</span> Postings</a
|
||||||
{/if}
|
>
|
||||||
{#if (userState.perms & PERMISSIONS.MANAGE_USERS) > 0}
|
{/if}
|
||||||
<a
|
{#if (userState.perms & PERMISSIONS.MANAGE_USERS) > 0}
|
||||||
href="/admin/users"
|
<a
|
||||||
class="p-2 {page.url.pathname.startsWith('/admin/users')
|
href="/admin/users"
|
||||||
? 'primary-underline font-bold'
|
class="p-2 {page.url.pathname.startsWith('/admin/users')
|
||||||
: 'low-emphasis-text low-emphasis-text-button'}"
|
? 'primary-underline font-bold'
|
||||||
><span class="material-symbols-outlined align-bottom">group</span> Users</a
|
: 'low-emphasis-text low-emphasis-text-button'}"
|
||||||
>
|
><span class="material-symbols-outlined align-bottom">group</span> Users</a
|
||||||
{/if}
|
>
|
||||||
<!--TODO-->
|
{/if}
|
||||||
<!--{#if (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0}-->
|
<!--TODO-->
|
||||||
<!-- <a-->
|
<!--{#if (userState.perms & PERMISSIONS.MANAGE_TAGS) > 0}-->
|
||||||
<!-- href="/admin/tags"-->
|
<!-- <a-->
|
||||||
<!-- class="{page.url.pathname.startsWith('/admin/tags')-->
|
<!-- href="/admin/tags"-->
|
||||||
<!-- ? 'primary-underline font-bold'-->
|
<!-- class="{page.url.pathname.startsWith('/admin/tags')-->
|
||||||
<!-- : 'low-emphasis-text low-emphasis-text-button'} p-2"-->
|
<!-- ? 'primary-underline font-bold'-->
|
||||||
<!-- ><span class="material-symbols-outlined align-bottom">sell</span> Tags</a-->
|
<!-- : 'low-emphasis-text low-emphasis-text-button'} p-2"-->
|
||||||
<!-- >-->
|
<!-- ><span class="material-symbols-outlined align-bottom">sell</span> Tags</a-->
|
||||||
<!--{/if}-->
|
<!-- >-->
|
||||||
{#if (userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0}
|
<!--{/if}-->
|
||||||
<a
|
{#if (userState.perms & PERMISSIONS.MANAGE_COMPANIES) > 0}
|
||||||
href="/admin/companies"
|
<a
|
||||||
class="{page.url.pathname.startsWith('/admin/companies')
|
href="/admin/companies"
|
||||||
? 'primary-underline font-bold'
|
class="{page.url.pathname.startsWith('/admin/companies')
|
||||||
: 'low-emphasis-text low-emphasis-text-button'} p-2"
|
? 'primary-underline font-bold'
|
||||||
><span class="material-symbols-outlined align-bottom">store</span> Companies</a
|
: 'low-emphasis-text low-emphasis-text-button'} p-2"
|
||||||
>
|
><span class="material-symbols-outlined align-bottom">store</span> Companies</a
|
||||||
{/if}
|
>
|
||||||
</div>
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<div class="base-container">
|
<div class="base-container">
|
||||||
{@render children()}
|
{#if largeScreen.current}
|
||||||
|
{@render children()}
|
||||||
|
{:else}
|
||||||
|
<h2 class="m-3 text-center">Please use a computer to view the admin page!</h2>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user