fix: replace card with cardGrid component #discussion_r909418818

This commit is contained in:
Arman
2022-06-30 10:52:15 +02:00
parent 18f3bf6ca0
commit 116afa8a7b
@@ -1,5 +1,5 @@
<script lang="ts">
import { Card } from '$lib/components';
import { CardGrid } from '$lib/components';
import { Pill } from '$lib/elements';
import { Container } from '$lib/layout';
import { addNotification } from '$lib/stores/notifications';
@@ -34,54 +34,50 @@
</script>
<Container>
<Card>
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1">
<h2 class="heading-level-7">Auth Methods</h2>
<p>Enable the auth methods you wish to use.</p>
</div>
<div class="grid-1-2-col-2">
<form class="form">
<ul class="form-list is-multiple">
{#each $authMethods.list as box}
<li class="form-item ">
<label class="choice-item" for={box.method}>
<input
label={box.label}
id={box.method}
type="checkbox"
class="switch"
role="switch"
bind:checked={box.value}
on:change={() => {
authUpdate(box.method, box.value);
}} />
<div class="choice-item-content">
<div class="choice-item-title">{box.label}</div>
</div>
</label>
</li>
{/each}
<CardGrid>
<h2 class="heading-level-7">Auth Methods</h2>
<p>Enable the auth methods you wish to use.</p>
<svelte:fragment slot="aside">
<form class="form">
<ul class="form-list is-multiple">
{#each $authMethods.list as box}
<li class="form-item ">
<label class="choice-item" for="phone">
<label class="choice-item" for={box.method}>
<input
label="Phone"
id="phone"
label={box.label}
id={box.method}
type="checkbox"
class="switch"
role="switch"
disabled />
bind:checked={box.value}
on:change={() => {
authUpdate(box.method, box.value);
}} />
<div class="choice-item-content">
<div class="choice-item-title">Phone</div>
<span class="choice-item-paragraph">(soon)</span>
<div class="choice-item-title">{box.label}</div>
</div>
</label>
</li>
</ul>
</form>
</div>
</div>
</Card>
{/each}
<li class="form-item ">
<label class="choice-item" for="phone">
<input
label="Phone"
id="phone"
type="checkbox"
class="switch"
role="switch"
disabled />
<div class="choice-item-content">
<div class="choice-item-title">Phone</div>
<span class="choice-item-paragraph">(soon)</span>
</div>
</label>
</li>
</ul>
</form>
</svelte:fragment>
</CardGrid>
<section class="common-section">
<h2 class="heading-level-6 common-section">OAuth2 Providers</h2>
<ul class="grid-box common-section">