From 1cb220ef54ddaf635b322d8c24f38613f371285e Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Sun, 5 Jun 2022 15:43:08 +0200 Subject: feat: New frontpage --- .../components/screens/GeneralErrorScreen.svelte | 7 + .../src/components/screens/NotFoundScreen.svelte | 161 +++++++++++++++++++++ apps/web-shared/src/lib/configuration.ts | 14 +- apps/web-shared/src/styles/base/_breakpoints.scss | 20 ++- apps/web-shared/src/styles/base/_util.scss | 2 +- apps/web-shared/src/styles/components/404.scss | 43 ++++++ .../src/styles/components/responsive-sidebar.scss | 110 ++++++++++++++ 7 files changed, 341 insertions(+), 16 deletions(-) create mode 100644 apps/web-shared/src/components/screens/GeneralErrorScreen.svelte create mode 100644 apps/web-shared/src/components/screens/NotFoundScreen.svelte create mode 100644 apps/web-shared/src/styles/components/404.scss create mode 100644 apps/web-shared/src/styles/components/responsive-sidebar.scss (limited to 'apps/web-shared') diff --git a/apps/web-shared/src/components/screens/GeneralErrorScreen.svelte b/apps/web-shared/src/components/screens/GeneralErrorScreen.svelte new file mode 100644 index 0000000..dd4b5bd --- /dev/null +++ b/apps/web-shared/src/components/screens/GeneralErrorScreen.svelte @@ -0,0 +1,7 @@ + + +

{status}

+

{message}

diff --git a/apps/web-shared/src/components/screens/NotFoundScreen.svelte b/apps/web-shared/src/components/screens/NotFoundScreen.svelte new file mode 100644 index 0000000..69d55af --- /dev/null +++ b/apps/web-shared/src/components/screens/NotFoundScreen.svelte @@ -0,0 +1,161 @@ + + +
+
+
+

Page not found

+

Sorry, but the page you were looking for could not be found.

+

Go to homepage.

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
diff --git a/apps/web-shared/src/lib/configuration.ts b/apps/web-shared/src/lib/configuration.ts index e4cd1ef..188d615 100644 --- a/apps/web-shared/src/lib/configuration.ts +++ b/apps/web-shared/src/lib/configuration.ts @@ -1,26 +1,26 @@ export const API_ADDRESS = "https://api.dev.greatoffice.life"; export const PROJECTS_ADDRESS = "https://projects.dev.greatoffice.life"; -export const ACCOUNTS_ADDRESS = "https://a.dev.greatoffice.life"; +export const PORTAL_ADDRESS = "https://portal.dev.greatoffice.life"; export const FRONTPAGE_ADDRESS = "https://greatoffice.life"; -export const DEV_ACCOUNTS_ADDRESS = "http://localhost:3001"; +export const DEV_PORTAL_ADDRESS = "http://localhost:3001"; export const DEV_FRONTPAGE_ADDRESS = "http://localhost:3002"; export const DEV_API_ADDRESS = "http://localhost:5000"; export const DEV_PROJECTS_ADDRESS = "http://localhost:3000"; export const SECONDS_BETWEEN_SESSION_CHECK = 600; -export function projects_base(path: string): string { +export function projects_base(path: string = ""): string { return (is_development() ? DEV_PROJECTS_ADDRESS : PROJECTS_ADDRESS) + (path ? "/" + path : "/"); } -export function frontpage_base(path: string): string { +export function frontpage_base(path: string = ""): string { return (is_development() ? DEV_FRONTPAGE_ADDRESS : FRONTPAGE_ADDRESS) + (path ? "/" + path : "/"); } -export function accounts_base(path: string): string { - return (is_development() ? DEV_ACCOUNTS_ADDRESS : ACCOUNTS_ADDRESS) + (path ? "/" + path : "/"); +export function portal_base(path: string = ""): string { + return (is_development() ? DEV_PORTAL_ADDRESS : PORTAL_ADDRESS) + (path ? "/" + path : "/"); } -export function api_base(path: string): string { +export function api_base(path: string = ""): string { return (is_development() ? DEV_API_ADDRESS : API_ADDRESS) + (path ? "/" + path : "/"); } diff --git a/apps/web-shared/src/styles/base/_breakpoints.scss b/apps/web-shared/src/styles/base/_breakpoints.scss index a7f1eda..9b61af3 100644 --- a/apps/web-shared/src/styles/base/_breakpoints.scss +++ b/apps/web-shared/src/styles/base/_breakpoints.scss @@ -1,15 +1,19 @@ $breakpoints: ( - xs: 32rem, // ~512px - sm: 48rem, // ~768px - md: 64rem, // ~1024px - lg: 80rem, // ~1280px - xl: 90rem // ~1440px + xs: "768px", + sm: "768px", + md: "1200px", + lg: "1200px", + xl: "1600px" ) !default; @mixin breakpoint($breakpoint, $logic: false) { - @if( $logic ) { - @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; } + @if ($logic) { + @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { + @content; + } } @else { - @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; } + @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { + @content; + } } } diff --git a/apps/web-shared/src/styles/base/_util.scss b/apps/web-shared/src/styles/base/_util.scss index d688e1c..c384c2c 100644 --- a/apps/web-shared/src/styles/base/_util.scss +++ b/apps/web-shared/src/styles/base/_util.scss @@ -1250,7 +1250,7 @@ $breakpointsNr: length($breakpoints); [class^="translate"], [class*=" translate"], [class^="-scale"], [class*=" -scale"], [class^="scale"], [class*=" scale"], -[class^="-skew"], [class*=" -skew"] +[class^="-skew"], [class*=" -skew"], [class^="skew"], [class*=" skew"] { --translate: 0; --rotate: 0; diff --git a/apps/web-shared/src/styles/components/404.scss b/apps/web-shared/src/styles/components/404.scss new file mode 100644 index 0000000..1a0267a --- /dev/null +++ b/apps/web-shared/src/styles/components/404.scss @@ -0,0 +1,43 @@ +@use '../base' as *; + +.fof { +} + +.fof__animation { + svg { + display: block; + max-width: 520px; + margin-left: auto; + margin-right: auto; + } +} + +#i-fof-browser { + transform-origin: 260px 304px; + animation: i-fof-browser 4s infinite; +} + +#i-fof-shadow { + transform-origin: 282px 410px; + animation: i-fof-shadow 4s infinite; +} + +@keyframes i-fof-browser { + 0%, 100% { + transform: translateY(0) scale(1); + } + + 50% { + transform: translateY(-10%) scale(0.9); + } +} + +@keyframes i-fof-shadow { + 0%, 100% { + transform: scale(1); + } + + 50% { + transform: scale(0.8); + } +} diff --git a/apps/web-shared/src/styles/components/responsive-sidebar.scss b/apps/web-shared/src/styles/components/responsive-sidebar.scss new file mode 100644 index 0000000..29a45f4 --- /dev/null +++ b/apps/web-shared/src/styles/components/responsive-sidebar.scss @@ -0,0 +1,110 @@ +@use '../base' as *; + +/* -------------------------------- +File#: _1_responsive-sidebar +Title: Responsive Sidebar +Descr: Responsive sidebar container +Usage: codyhouse.co/license +-------------------------------- */ + +$maxwidth: 250px; + +.sidebar { + position: fixed; + top: 0; + left: 0; + z-index: var(--z-index-fixed-element, 10); + width: 100%; + height: 100%; + visibility: hidden; + + &::after { /* overlay layer */ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: alpha(var(--color-black), 0); + z-index: 1; + } + + @include breakpoint(sm) { + visibility: visible; + position: relative; + z-index: 1; + width: 100%; + max-width: $maxwidth; + border-right: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1)); + + .sidebar__header { + display: none; + } + + .sidebar__panel { + position: relative !important; + } + } + + .sidebar__panel { + position: absolute; + top: 0; + left: 0; + z-index: 2; + width: 100%; + height: 100%; + overflow: auto; + -webkit-overflow-scrolling: touch; + background-color: var(--color-bg); + } + + &.sidebar--right-on-mobile { + .sidebar__panel { + left: auto; + right: 0; + transform: translateX(100%); + } + } + + &.sidebar--is-visible { + visibility: visible; + + &::after { + background-color: alpha(var(--color-black), 0.55); + } + + .sidebar__panel { + transform: translateX(0); + box-shadow: var(--shadow-md); + } + } +} + +.sidebar__header { + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; +} + +.sidebar__close-btn { + --size: 32px; + width: var(--size); + height: var(--size); + display: flex; + border-radius: 50%; + background-color: var(--color-bg-light); + box-shadow: var(--inner-glow), var(--shadow-sm); + flex-shrink: 0; + + .icon { + display: block; + margin: auto; + } + + &:hover { + background-color: var(--color-bg-lighter); + box-shadow: var(--inner-glow), var(--shadow-md); + } +} -- cgit v1.3