Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: positioning

Browse Source
This commit is contained in:
Arman
2023-02-15 12:19:04 +01:00
parent 1c61ea1bd4
commit 8a58748892
1 changed files with 65 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/admin.svelte
+65 -47
View File
@@ -8,58 +8,76 @@
</script>
<div class="admin">
<div class="box u-flex u-gap-24 u-flex-vertical" class:u-hide={show}>
<h1 class="heading-level-6">Admin</h1>
<div>
<p>Mode:</p>
<SecondaryTabs>
<SecondaryTabsItem
disabled={$modeOverwrite === 'self-hosted'}
on:click={() => modeOverwrite.set('self-hosted')}>
Self
</SecondaryTabsItem>
<SecondaryTabsItem
disabled={$modeOverwrite === 'cloud'}
on:click={() => modeOverwrite.set('cloud')}>
Cloud
</SecondaryTabsItem>
</SecondaryTabs>
{#if show}
<div class="box u-flex u-gap-24 u-flex-vertical">
<div class="u-flex u-cross-center">
<h1 class="heading-level-6">Admin Panel</h1>
<button
type="button"
class="button is-text is-only-icon u-margin-inline-start-auto"
style="--button-size:1.5rem;"
aria-label="Close Admin"
title="Close Admin"
on:click={() => (show = false)}>
<span class="icon-x" aria-hidden="true" />
</button>
</div>
<div>
<p>Mode:</p>
<SecondaryTabs>
<SecondaryTabsItem
disabled={$modeOverwrite === 'self-hosted'}
on:click={() => modeOverwrite.set('self-hosted')}>
Self
</SecondaryTabsItem>
<SecondaryTabsItem
disabled={$modeOverwrite === 'cloud'}
on:click={() => modeOverwrite.set('cloud')}>
Cloud
</SecondaryTabsItem>
</SecondaryTabs>
</div>
<div>
<p>Tier:</p>
<SecondaryTabs>
<SecondaryTabsItem
disabled={$modeTier === 'base'}
on:click={() => modeTier.set('base')}>
Base
</SecondaryTabsItem>
<SecondaryTabsItem
disabled={$modeTier === 'premium'}
on:click={() => modeTier.set('premium')}>
Premium
</SecondaryTabsItem>
<SecondaryTabsItem
disabled={$modeTier === 'enterprise'}
on:click={() => modeTier.set('enterprise')}>
Enterprise
</SecondaryTabsItem>
</SecondaryTabs>
</div>
<Button
secondary
on:click={() => {
$feedback.type === 'general'
? feedback.switchType('nps')
: feedback.switchType('general');
}}>Switch Feedback</Button>
</div>
<div>
<p>Tier:</p>
<SecondaryTabs>
<SecondaryTabsItem
disabled={$modeTier === 'base'}
on:click={() => modeTier.set('base')}>
Base
</SecondaryTabsItem>
<SecondaryTabsItem
disabled={$modeTier === 'premium'}
on:click={() => modeTier.set('premium')}>
Premium
</SecondaryTabsItem>
<SecondaryTabsItem
disabled={$modeTier === 'enterprise'}
on:click={() => modeTier.set('enterprise')}>
Enterprise
</SecondaryTabsItem>
</SecondaryTabs>
</div>
<Button
secondary
on:click={() => {
$feedback.type === 'general'
? feedback.switchType('nps')
: feedback.switchType('general');
}}>Switch Feedback</Button>
</div>
{:else}
<Button round text secondary on:click={() => (show = true)}>
<span class="icon-academic-cap" />
</Button>
{/if}
</div>
<style lang="scss">
.admin {
position: fixed;
inset: 50% 100%;
min-width: 20rem;
transform: translate(-100%);
top: 50%;
right: 0;
transform: translateY(-50%);
}
</style>