Skip to content

Commit

Permalink
Wizard - New page grid layout
Browse files Browse the repository at this point in the history 
- wizard.html demo
- _wizard.scss - grid styles
  • Loading branch information
@elad2412
elad2412 committed Jul 21, 2022
1 parent 593e17d commit c8e5e61
Show file tree
Hide file tree
Showing 4 changed files with 288 additions and 0 deletions.
1 change: 1 addition & 0 deletions apps/kitchensink/vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const config = {
input: {
index: new URL("./index.html", import.meta.url).pathname,
noSide: new URL("./no-side.html", import.meta.url).pathname,
wizard: new URL("./wizard.html", import.meta.url).pathname,
users: new URL("./users.html", import.meta.url).pathname,
user: new URL("./user.html", import.meta.url).pathname,
userSecurity: new URL("./userSecurity.html", import.meta.url).pathname,
Expand Down
265 changes: 265 additions & 0 deletions apps/kitchensink/wizard.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,265 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@appwrite/kitchensink - user demo</title>
</head>

<body>
<main class="grid-with-side is-empty-side u-hide" id="main">
{{> topNav}}
<section class="main-content">
<div class="u-margin-block-start-24">
<div class="container /is-size-xl/">
<section class="common-section">
<article class="card">
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
<img
width="64"
height="64"
class="avatar"
src="https://torsten.appwrite.org/v1/avatars/initials?name=Eldad+Test&amp;width=128&amp;height=128&amp;project=test"
title="Eldad Test"
alt="Eldad Test"
style="--size: 64px"
/>
<h6 class="heading-level-6">Eldad Test</h6>
<div class="tag">Unverified</div>
</div>
<div class="grid-1-2-col-2">
<span class="title">[email protected]</span>
<p>Joined: June 11, 2022</p>
</div>
</div>
<div class="common-section card-separator u-flex u-main-end u-gap-12">
<button class="button is-text" type="button">
<span class="text">Block Account</span>
</button>
<button class="button is-secondary" type="button">
<span class="text">Verify Account</span>
</button>
</div>
</article>
</section>
<section class="common-section">
<article class="card">
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1 u-grid u-gap-16">
<h6 class="heading-level-6">Update Name</h6>
<p>Free text in here</p>
</div>
<div class="grid-1-2-col-2">
<form class="form">
<ul class="form-list">
<li class="form-item">
<label class="label" for="name">Name</label>
<div class="input-text-wrapper">
<input
id="name"
placeholder="Eldad Test"
autocomplete="on"
type="text"
class="input-text"
/>
</div>
</li>
</ul>
</form>
</div>
</div>
<div class="common-section card-separator u-flex u-main-end">
<button disabled="" class="button" type="button">Update</button>
</div>
</article>
</section>
<section class="common-section">
<article class="card">
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1">
<h6 class="heading-level-6">Update Email</h6>
<p>Free text</p>
</div>
<div class="grid-1-2-col-2">
<form class="form">
<ul class="form-list">
<li class="form-item">
<label class="label" for="email">Email</label>
<div class="input-text-wrapper">
<input
id="email"
placeholder="[email protected]"
type="email"
class="input-text"
/>
</div>
</li>
</ul>
</form>
</div>
</div>
<div class="common-section card-separator u-flex u-main-end">
<button disabled="" class="button" type="button"><span class="text">Update</span></button>
</div>
</article>
</section>
<section class="common-section">
<article class="card">
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1">
<h6 class="heading-level-6">Update Password</h6>
<p>
Enter a new password. A password must contain
<b>at least 8 characters.</b>
</p>
</div>
<div class="grid-1-2-col-2">
<form class="form">
<ul class="form-list">
<li class="form-item">
<label class="label" for="newPassword">New Password</label>
<div class="input-text-wrapper">
<input
id="newPassword"
placeholder="Enter new password"
type="password"
class="input-text"
/>
</div>
</li>
</ul>
</form>
</div>
</div>
<div class="common-section card-separator u-flex u-main-end">
<button disabled="" class="button" type="button">Update</button>
</div>
</article>
</section>
<section class="common-section">
<article class="card">
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1">
<h6 class="heading-level-6">User Preferences</h6>
<p>
You can update your user preferences by storing information
on the user's objects so they can easily be shared across
devices and sessions.
</p>
</div>
<div class="grid-1-2-col-2">
<form class="form u-grid u-gap-16">
<ul class="form-list">
<li class="form-item is-multiple">
<div class="form-item-part u-stretch">
<label class="label" for="key-theme">Key</label>
<div class="input-text-wrapper">
<input
id="key-theme"
placeholder=""
autocomplete="on"
type="text"
class="input-text"
/>
</div>
</div>
<div class="form-item-part u-stretch">
<label class="label" for="value-light">Value</label>
<div class="input-text-wrapper">
<input
id="value-light"
placeholder=""
autocomplete="on"
type="text"
class="input-text"
/>
</div>
</div>
<div class="form-item-part u-cross-child-end">
<button class="button is-text" type="button" aria-label="delete">
<span class="icon-x" aria-hidden="true"></span>
</button>
</div>
</li>
</ul>
<div class="u-flex u-main-end">
<button class="button is-text" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Add Preferences</span>
</button>
</div>
</form>
</div>
</div>
<div class="common-section card-separator u-flex u-main-end">
<button disabled="" class="button" type="button">Update</button>
</div>
</article>
</section>
<section class="common-section">
<article class="card">
<div class="common-section grid-1-2">
<div class="grid-1-2-col-1">
<h6 class="heading-level-6">Danger Zone</h6>
<p>
The user will be permanently deleted, including all data
associated with this user. This action is irreversible.
</p>
</div>
<div class="grid-1-2-col-2">
<div class="box">
<div class="u-flex u-gap-16">
<img
width="64"
height="64"
class="avatar"
src="https://torsten.appwrite.org/v1/avatars/initials?name=Eldad+Test&amp;width=128&amp;height=128&amp;project=test"
title="Eldad Test"
alt="Eldad Test"
style="--size: 64px"
/>
<div class="u-cross-child-center u-line-height-1-5">
<h6 class="u-bold">Eldad Test</h6>
<p>[email protected]</p>
</div>
</div>
</div>
</div>
</div>
<div class="common-section card-separator u-flex u-main-end">
<button class="button is-secondary" type="button">
<span class="text">Delete</span>
</button>
</div>
</article>
</section>
</div>
</div>

</section>
<footer class="main-footer"></footer>
</main>


<section class="wizard">
<!-- elements for colors -->
<div class="wizard-header-strip"></div>
<div class="wizard-start-bg"></div>
<div class="wizard-end-bg"></div>

<!-- content elements -->
<header class="wizard-header">
HEADER
</header>

<div class="wizard-side">
<ol class="steps">STEPS - 346</ol>
</div>
<div class="wizard-main">670</div>

</section>

<script type="module" src="/main.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions packages/ui/src/7-grids/_index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@forward "grid-with-side";
@forward "grid-box";
@forward "grid-1-2";
@forward "wizard";

/* old grid from old console */
@forward "inner-grid";
21 changes: 21 additions & 0 deletions packages/ui/src/7-grids/_wizard.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
@use '../abstract/index' as *;

.wizard {
--p-start-color: var(--color-neutral-5);
--p-end-color: var(--color-neutral-10);

display: grid;
grid-template-columns: 1fr pxToRem(378) pxToRem(708) 1fr;
grid-auto-rows: pxToRem(64) 1fr;
height: 100vh;

/* bg layout */
&-header-strip { grid-row:1; grid-column:1 / -1; background-color:hsl(var(--color-neutral-0)); border-block-end:solid pxToRem(1) hsl(var(--color-border)); }
&-start-bg { grid-row:2; grid-column:1 / 3; background-color:hsl(var(--color-neutral-5)); border-inline-end:solid pxToRem(1) hsl(var(--color-border));}
&-end-bg { grid-row:2; grid-column:3 / 5; background-color:hsl(var(--color-neutral-10)); }

/* content layout */
&-header { grid-row:1; grid-column:2 / 4; padding-inline:pxToRem(32); }
&-side { grid-row:2; grid-column:2; padding-inline:pxToRem(32); }
&-main { grid-row:2; grid-column:3; padding-inline:pxToRem(32); }
}

0 comments on commit c8e5e61

Please sign in to comment.