From 18c458d91ca5e7187ffb3615fca8970fc6e4ca65 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Mon, 6 Jun 2022 15:48:53 +0200 Subject: feat: More work on portal --- .../src/components/breadcrumb/bread.svelte | 9 ++ .../src/components/breadcrumb/crumb.svelte | 22 +++++ apps/web-shared/src/components/breadcrumb/index.ts | 7 ++ apps/web-shared/src/components/link-card.svelte | 47 ++++++++++ apps/web-shared/src/components/menu/menu.svelte | 2 +- .../src/components/theme-switcher.svelte | 71 +++++++++++----- apps/web-shared/src/components/user-menu.svelte | 99 ++++++++++++++++++++++ apps/web-shared/src/lib/helpers.ts | 4 +- apps/web-shared/src/lib/session.ts | 8 +- .../src/styles/components/auto-sized-grid.scss | 56 ++++++++++++ .../src/styles/components/breadcrumbs.scss | 18 ++++ .../src/styles/components/link-card.scss | 56 ++++++++++++ .../src/styles/components/user-menu.scss | 8 +- 13 files changed, 379 insertions(+), 28 deletions(-) create mode 100644 apps/web-shared/src/components/breadcrumb/bread.svelte create mode 100644 apps/web-shared/src/components/breadcrumb/crumb.svelte create mode 100644 apps/web-shared/src/components/breadcrumb/index.ts create mode 100644 apps/web-shared/src/components/link-card.svelte create mode 100644 apps/web-shared/src/components/user-menu.svelte create mode 100644 apps/web-shared/src/styles/components/auto-sized-grid.scss create mode 100644 apps/web-shared/src/styles/components/breadcrumbs.scss create mode 100644 apps/web-shared/src/styles/components/link-card.scss (limited to 'apps/web-shared/src') diff --git a/apps/web-shared/src/components/breadcrumb/bread.svelte b/apps/web-shared/src/components/breadcrumb/bread.svelte new file mode 100644 index 0000000..4cf0698 --- /dev/null +++ b/apps/web-shared/src/components/breadcrumb/bread.svelte @@ -0,0 +1,9 @@ + + diff --git a/apps/web-shared/src/components/breadcrumb/crumb.svelte b/apps/web-shared/src/components/breadcrumb/crumb.svelte new file mode 100644 index 0000000..7621de6 --- /dev/null +++ b/apps/web-shared/src/components/breadcrumb/crumb.svelte @@ -0,0 +1,22 @@ + +
  • + {name} + {#if withArrow} + + {/if} +
    • diff --git a/apps/web-shared/src/components/breadcrumb/index.ts b/apps/web-shared/src/components/breadcrumb/index.ts new file mode 100644 index 0000000..485ed7b --- /dev/null +++ b/apps/web-shared/src/components/breadcrumb/index.ts @@ -0,0 +1,7 @@ +import Bread from "./bread.svelte"; +import Crumb from "./crumb.svelte"; + +export { + Bread, + Crumb +}; diff --git a/apps/web-shared/src/components/link-card.svelte b/apps/web-shared/src/components/link-card.svelte new file mode 100644 index 0000000..0c15a53 --- /dev/null +++ b/apps/web-shared/src/components/link-card.svelte @@ -0,0 +1,47 @@ + + + +
    +
    + +
    +

    {name}

    + {#if description} +

    {description}

    + {/if} +
    +
    +
    +
    +

    {text}

    +
    + + + + + + +
    +
    +     + diff --git a/apps/web-shared/src/components/menu/menu.svelte b/apps/web-shared/src/components/menu/menu.svelte index 33b1160..33517ab 100644 --- a/apps/web-shared/src/components/menu/menu.svelte +++ b/apps/web-shared/src/components/menu/menu.svelte @@ -1,7 +1,7 @@ -
    +
    + + +
    + + + Profile + + + + + + Settings + + + + + Team + + + + + logout_user()}> + Logout + +
    +     diff --git a/apps/web-shared/src/lib/helpers.ts b/apps/web-shared/src/lib/helpers.ts index f2d0cca..4da8254 100644 --- a/apps/web-shared/src/lib/helpers.ts +++ b/apps/web-shared/src/lib/helpers.ts @@ -51,9 +51,7 @@ export function get_cookie(name) { } export function set_cookie(name, value, baseDomain = window.location.host) { - let asdf = name + "=" + encodeURIComponent(value) + (baseDomain ? ";domain=" + baseDomain : ""); - console.log(asdf); - document.cookie = asdf; + document.cookie = name + "=" + encodeURIComponent(value) + (baseDomain ? ";domain=" + baseDomain : ""); } export function unwrap_date_time_from_entry(entry: TimeEntryDto): UnwrappedEntryDateTime { diff --git a/apps/web-shared/src/lib/session.ts b/apps/web-shared/src/lib/session.ts index 4f40a17..f729687 100644 --- a/apps/web-shared/src/lib/session.ts +++ b/apps/web-shared/src/lib/session.ts @@ -1,5 +1,5 @@ import {Temporal} from "@js-temporal/polyfill"; -import {get_profile_for_active_check} from "./api/user"; +import {get_profile_for_active_check, logout} from "./api/user"; import {is_guid, session_storage_get_json, session_storage_set_json} from "./helpers"; import {SECONDS_BETWEEN_SESSION_CHECK, StorageKeys} from "./configuration"; import type {ISession} from "$shared/lib/models/ISession"; @@ -21,6 +21,12 @@ export async function is_active(forceRefresh: boolean = false): Promise } } +export async function end_session(cb: Function): Promise { + await logout(); + clear_session_data(); + cb(); +} + async function call_api(): Promise { console.log("Getting profile data while checking session state"); try { diff --git a/apps/web-shared/src/styles/components/auto-sized-grid.scss b/apps/web-shared/src/styles/components/auto-sized-grid.scss new file mode 100644 index 0000000..a3b1be5 --- /dev/null +++ b/apps/web-shared/src/styles/components/auto-sized-grid.scss @@ -0,0 +1,56 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_auto-sized-grid +Title: Auto Sized Grid +Descr: A grid layout based on CSS Grid where the columns are automatically created according to a min-width value +Usage: codyhouse.co/license + +-------------------------------- */ + +.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { + display: grid; + gap: var(--gap-y, 0px) var(--gap-x, 0px); + grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr)); // auto add new cols +} + +.grid-auto-xs { + --col-min-width: 8rem; +} + +.grid-auto-sm { + --col-min-width: 10rem; +} + +.grid-auto-md { + --col-min-width: 15rem; +} + +.grid-auto-lg { + --col-min-width: 20rem; +} + +.grid-auto-xl { + --col-min-width: 25rem; +} + +@each $breakpoint, $value in $breakpoints { + @include breakpoint(#{$breakpoint}) { + .grid-auto-xs\@#{$breakpoint} { + --col-min-width: 8rem; + } + .grid-auto-sm\@#{$breakpoint} { + --col-min-width: 10rem; + } + .grid-auto-md\@#{$breakpoint} { + --col-min-width: 15rem; + } + .grid-auto-lg\@#{$breakpoint} { + --col-min-width: 20rem; + } + .grid-auto-xl\@#{$breakpoint} { + --col-min-width: 25rem; + } + } +} diff --git a/apps/web-shared/src/styles/components/breadcrumbs.scss b/apps/web-shared/src/styles/components/breadcrumbs.scss new file mode 100644 index 0000000..45bf7c6 --- /dev/null +++ b/apps/web-shared/src/styles/components/breadcrumbs.scss @@ -0,0 +1,18 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_breadcrumbs +Title: Breadcrumbs +Descr: List of links to help the user move within website structure +Usage: codyhouse.co/license + +-------------------------------- */ + +.breadcrumbs {} + +.breadcrumbs__item { + display: inline-block; // flex fallback + display: inline-flex; + align-items: center; +} diff --git a/apps/web-shared/src/styles/components/link-card.scss b/apps/web-shared/src/styles/components/link-card.scss new file mode 100644 index 0000000..dad4f98 --- /dev/null +++ b/apps/web-shared/src/styles/components/link-card.scss @@ -0,0 +1,56 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_link-card +Title: Link Card +Descr: Link card for app UI +Usage: codyhouse.co/license + +-------------------------------- */ + +.link-card { + text-decoration: none; + color: inherit; + box-shadow: var(--inner-glow), var(--shadow-xs); + + &:hover { + box-shadow: var(--inner-glow), var(--shadow-sm); + } +} + +.link-card__footer { + position: relative; + overflow: hidden; + height: 60px; + + > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + > *:last-child { + transform: translateY(100%); + opacity: 0; + } +} + +.link-card:hover { + .link-card__footer { + > *:first-child { + transform: translateY(-100%); + opacity: 0; + } + + > *:last-child { + transform: translateY(0); + opacity: 1; + } + } +} diff --git a/apps/web-shared/src/styles/components/user-menu.scss b/apps/web-shared/src/styles/components/user-menu.scss index 1b5c1d5..416655f 100644 --- a/apps/web-shared/src/styles/components/user-menu.scss +++ b/apps/web-shared/src/styles/components/user-menu.scss @@ -42,7 +42,7 @@ Usage: codyhouse.co/license width: var(--profile-figure-size); height: var(--profile-figure-size); position: relative; - transition: opacity 0.2s; + //transition: opacity 0.2s; &::after { content: ''; @@ -61,7 +61,7 @@ Usage: codyhouse.co/license opacity: 0; transform: scale(0.8); - transition: all 0.2s; + //transition: all 0.2s; } } @@ -73,9 +73,9 @@ Usage: codyhouse.co/license } .user-menu__meta { - max-width: 100px; + //max-width: 100px; } .user-menu__meta-title { - transition: color 0.2s; + //transition: color 0.2s; } -- cgit v1.3