Skip to content

Top Banner #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArmanNik merged 4 commits into from
Apr 15, 2024
Merged

Top Banner #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6cb7cb4
Top Banner
elad2412 Jan 15, 2024
b9bc728
Top Banner
elad2412 Jan 15, 2024
12cdd39
update uril to variables
elad2412 Mar 11, 2024
23d2dbd
Merge branch 'main' into upgrade-banner
ArmanNik Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added apps/kitchensink/images/top-banner/bg-mint-desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/kitchensink/images/top-banner/bg-mint-mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/kitchensink/images/top-banner/bg-pink-desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/kitchensink/images/top-banner/bg-pink-mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
245 changes: 245 additions & 0 deletions apps/kitchensink/top-banner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,245 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!--<meta name="viewport" content="width=device-width, initial-scale=1.0" />-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>@appwrite/kitchensink - user demo</title>
</head>

<body>
<main class="grid-with-side is-fixed-layout" id="main">

<div class="top-banner">
<div class="top-banner-content aw-u-color-text-primary">
<a class="u-flex u-gap-16 u-main-center u-cross-center u-flex-vertical-mobile" href="/blog/post/announcing-appwrite-pro">
<span class="body-text-1 u-bold">Appwrite Pro is now available!</span>
<div class="button is-secondary u-line-height-1 is-full-width-mobile aw-u-max-width-380">Upgrade</div>
</a>
<button class="top-banner-button" aria-label="close upgrade message">
<span class="icon-x" aria-hidden="true" />
</button>
</div>
</div>

{{> topNav}} {{> sideNav}}
<section class="main-content">
<div class="top-cover">
<div class="container">
<div class="u-flex u-cross-center u-gap-16 u-margin-block-start-20">
<h1 class="heading-level-4 u-flex u-min-width-0">
<a class="button is-text is-only-icon" href="" aria-label="back to [PAGE NAME]">
<span class="icon-cheveron-left" aria-hidden="true"></span>
</a>
<span class="text u-trim-1">Users</span>
</h1>
<button class="tag">
<span class="icon-duplicate" aria-hidden="true"></span><span class="text">User ID</span>
</button>
</div>
<div class="top-cover-options">

</div>
<div class="tabs">
<button
class="tabs-button-scroll is-start"
aria-label="Show items in start side"
>
<span class="icon-cheveron-left" aria-hidden="true"></span>
</button>
<button
class="tabs-button-scroll is-end"
aria-label="Show items in end side"
>
<span class="icon-cheveron-right" aria-hidden="true"></span>
</button>
<ul class="tabs-list">
<li class="tabs-item">
<a class="tabs-button is-selected" href="">
<span class="text">Overview</span>
</a>
</li>
<li class="tabs-item">
<a class="tabs-button" href="">
<span class="text">Sessions</span>
</a>
</li>
<li class="tabs-item">
<a class="tabs-button" href="">
<span class="text">Activity</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container u-margin-block-start-24">

<div class="common-section u-flex u-gap-12">
<div class="input-text-wrapper u-flex-basis-50-percent">
<input type="search" placeholder="Search" />
<div class="icon-search" aria-hidden="true"></div>
</div>
<button class="button u-margin-inline-start-auto" type="button">
<span class="icon-plus" aria-hidden="true"></span>
<span class="text">Create User</span>
</button>
</div>
<div class="common-section">
<table class="table is-vertical">
<thead class="table-thead">
<tr class="table-row">
<th width="30" class="table-thead-col">
<span class="text"></span>
</th>
<th width="" class="table-thead-col">
<span class="text">Name</span>
</th>
<th width="" class="table-thead-col">
<span class="text">E-Mail</span>
</th>
<th width="" class="table-thead-col">
<span class="text">Status</span>
</th>
<th width="" class="table-thead-col">
<span class="text">Joined</span>
</th>
</tr>
</thead>
<tbody class="table-tbody">
<tr class="table-row">
<td width="" class="table-col is-only-desktop">
<div class="image">
<img
class="avatar"
width="30"
height="30"
src="https://unsplash.it/30"
alt="test"
/>
</div>
</td>
<td class="table-col" data-title="Name">
<a role="button" tabindex="0" class="link" href="#">test</a>
</td>
<td class="table-col" data-title="E-Mail">
<span class="text">test@test.test</span>
</td>
<td class="table-col" data-title="Status">
<span class="text"><div class="pill">Unverified</div> </span>
</td>
<td class="table-col" data-title="Joined">
<span class="text">April 14, 2022</span>
</td>
</tr>
<tr class="table-row">
<td width="" class="table-col is-only-desktop">
<div class="image">
<img
class="avatar"
width="30"
height="30"
src="https://unsplash.it/31"
alt="errtretewr"
/>
</div>
</td>
<!--<Cell>-->
<td class="table-col" data-title="Name">
<a role="button" tabindex="0" class="link" href="#"
>Robin Hood</a
>
</td>
<td class="table-col" data-title="E-Mail">
<span class="text">robin@notthingam.co</span>
</td>
<td class="table-col" data-title="Status">
<span class="text"><div class="pill">Unverified</div> </span>
</td>
<td class="table-col" data-title="Joined">
<span class="text">April 13, 2022</span>
</td>
</tr>
<tr class="table-row">
<td width="" class="table-col is-only-desktop">
<div class="image">
<img
class="avatar"
width="30"
height="30"
src="https://unsplash.it/32"
alt="Mark"
/>
</div>
</td>
<!--<Cell>-->
<td class="table-col" data-title="Name">
<a
role="button"
tabindex="0"
class="link"
href="#/user/6253ea4d3138cff6eb41"
>Mark</a
>
</td>
<!--<CellLink>-->
<td class="table-col" data-title="E-Mail">
<span class="text">mark@mark.mark</span>
</td>
<!--<CellText>-->
<td class="table-col" data-title="Status">
<span class="text"
><div class="pill">Unverified</div>
<!--<Pill>--></span
>
</td>
<td class="table-col" data-title="Joined">
<span class="text">April 11, 2022</span>
</td>
</tr>
</tbody>
</table>
</div>
<div class="common-section">
<div class="card is-border-dashed u-flex u-flex-vertical u-cross-center">
<button class="button is-secondary is-only-icon" aria-label="Add user">
<span class="icon-plus" aria-hidden="true"></span>
</button>
<p class="u-margin-block-start-20">Add Your First User To Get Started</p>
<button class="button is-secondary u-margin-block-start-32" aria-label="Add user">
<span class="text">Documentation</span>
</button>
</div>
</div>
</div>
<footer class="main-footer">
<div class="main-footer-start">
<ul class="inline-links is-no-padding-first-and-last u-x-small">
<li class="inline-links-item">
<a href=""><span class="text">version 1.1.1</span></a>
</li>
<li class="inline-links-item">
<a href=""><span class="text">Terms</span></a>
</li>
<li class="inline-links-item">
<a href=""><span class="text">Privacy</span></a>
</li>
</ul>
</div>
<div class="main-footer-end">
<ul class="inline-links is-no-padding-first-and-last u-x-small">
<li class="inline-links-item">
<span class="text">ⓒ 2022 Appwrite. All rights reserved.</span>
</li>
<li class="inline-links-item u-flex u-gap-8">
<a href=""><span class="icon-github" aria-hidden="true" aria-label="Appwrite on Github"></span></a>
<a href=""><span class="icon-discord" aria-hidden="true" aria-label="Appwrite on Discord"></span></a>
</li>
</ul>
</div>
</footer>
</section>
</main>
<script type="module" src="/main.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions apps/kitchensink/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const config = {
coverFrame: new URL("./cover-frame.html", import.meta.url).pathname,
coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname,
users: new URL("./users.html", import.meta.url).pathname,
topBanner: new URL("./top-banner.html", import.meta.url).pathname,
user: new URL("./user.html", import.meta.url).pathname,
functions: new URL("./functions.html", import.meta.url).pathname,
userSecurity: new URL("./userSecurity.html", import.meta.url).pathname,
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/7-components/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@
@forward "toggle-button";
@forward "clickable-list";
@forward "progress-bar";

@forward "top-cover";
@forward "code-panel";

@forward "top-banner";

/* main parts */
@forward "main-header";
@forward "breadcrumbs";
Expand Down
29 changes: 29 additions & 0 deletions packages/ui/src/7-components/_top-banner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@use '../abstract' as *;
.top-banner {
--top-banner-mobile-bg-1-url: url("/images/top-banner/bg-pink-mobile.png");
--top-banner-mobile-bg-2-url: url("/images/top-banner/bg-mint-mobile.png");
--top-banner-desktop-bg-1-url: url("/images/top-banner/bg-pink-desktop.png");
--top-banner-desktop-bg-2-url: url("/images/top-banner/bg-mint-desktop.png");

position:relative; display:flex; justify-content:center;
padding-block:pxToRem(5); padding-inline:pxToRem(12);
background: var(--top-banner-desktop-bg-1-url) no-repeat left center,
var(--top-banner-desktop-bg-2-url) no-repeat right -330px;
//background: linear-gradient(94deg, rgba(253, 54, 110, 0.00) 0%, rgba(253, 54, 110, 0.50) 50.82%, rgba(253, 54, 110, 0.00) 100%);
&-content { line-height:pxToRem(50); transition:var(--transition); }
&-button { position:absolute; inset-block:0; inset-inline-end:pxToRem(12); }

[data-banner-hidden] & {
display: none;
}
@media #{$break1} {
inline-size:100%; padding:pxToRem(16);
background: var(--top-banner-mobile-bg-1-url) no-repeat left bottom,
var(--top-banner-mobile-bg-2-url) no-repeat right top;
&-content { display:flex; flex-direction:column; inline-size:100%; line-height:1.5; transition:var(--transition); }
&-button {
position:static; line-height:1; align-self:end; order:-1;
margin-block-start:-4px; margin-inline-end:-5px; margin-block-end:pxToRem(8);
}
}
}
1 change: 1 addition & 0 deletions packages/ui/src/8-grids/_grid-with-side.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
--p-side-size: #{pxToRem(200)};
> {
:where(.alert) { grid-area:alert; }
:where(.top-banner) { grid-area:alert; }
:where(.main-header) { grid-area:header; }
:where(.main-side) { grid-area:side; }
:where(.main-content) { grid-area:main; }
Expand Down