diff options
Diffstat (limited to 'apps/web-shared/src')
7 files changed, 341 insertions, 16 deletions
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 @@ +<script> + export let message; + export let status; +</script> + +<h1>{status}</h1> +<p>{message}</p> 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 @@ +<style> + .fof__animation svg { + display: block; + max-width: 520px; + margin-left: auto; + margin-right: auto; + } + + #i-fof-browser { + -webkit-transform-origin: 260px 304px; + transform-origin: 260px 304px; + -webkit-animation: i-fof-browser 4s infinite; + animation: i-fof-browser 4s infinite; + } + + #i-fof-shadow { + -webkit-transform-origin: 282px 410px; + transform-origin: 282px 410px; + -webkit-animation: i-fof-shadow 4s infinite; + animation: i-fof-shadow 4s infinite; + } + + @-webkit-keyframes i-fof-browser { + 0%, 100% { + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + } + 50% { + -webkit-transform: translateY(-10%) scale(0.9); + transform: translateY(-10%) scale(0.9); + } + } + + @keyframes i-fof-browser { + 0%, 100% { + -webkit-transform: translateY(0) scale(1); + transform: translateY(0) scale(1); + } + 50% { + -webkit-transform: translateY(-10%) scale(0.9); + transform: translateY(-10%) scale(0.9); + } + } + + @-webkit-keyframes i-fof-shadow { + 0%, 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + } + + @keyframes i-fof-shadow { + 0%, 100% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(0.8); + transform: scale(0.8); + } + } +</style> + +<section class="fof"> + <div class="container max-width-sm"> + <div class="text-component text-center margin-bottom-lg"> + <h1>Page not found</h1> + <p>Sorry, but the page you were looking for could not be found.</p> + <p><a href="/">Go to homepage</a>.</p> + </div> + + <div class="fof__animation" + aria-lable="404 animation"> + <svg id="i-fof" + viewBox="0 0 520 450"> + <g id="i-fof-ship"> + <path id="i-fof-capsule" + d="M260,9a53,53,0,0,0-53,53H313A53,53,0,0,0,260,9Z" + fill="var(--color-contrast-lower)"/> + <path id="i-fof-ship-top" + d="M448,73H72s78-37,188-37S448,73,448,73Z" + fill="var(--color-contrast-low)"/> + <path id="i-fof-ship-bottom" + d="M448,73A1185.633,1185.633,0,0,0,72,73c80.173,34.484,144.2,37,188,37C370,110,448,73,448,73Z" + fill="var(--color-contrast-high)"/> + </g> + <g id="i-fof-browser"> + <rect id="i-fof-browser-canvas" + x="179" + y="243" + width="160" + height="109" + rx="6" + transform="translate(131.361 -75.723) rotate(22.162)" + fill="var(--color-contrast-higher)"/> + <g id="i-fof-browser-dots" + fill="var(--color-bg)"> + <circle cx="211.713" + cy="228.029" + r="3"/> + <circle cx="221.9" + cy="232.179" + r="3"/> + <circle cx="232.088" + cy="236.328" + r="3"/> + </g> + <rect id="i-fof-browser-body" + x="180.737" + y="258.557" + width="152" + height="89" + rx="2" + transform="translate(133.29 -74.459) rotate(22.162)" + fill="var(--color-bg)"/> + <g id="i-fof-emoji"> + <path d="M248.626,322.968A22,22,0,1,1,277.3,310.893,22,22,0,0,1,248.626,322.968Z" + fill="#ffd764"/> + <path d="M264.3,311a7,7,0,1,1,9.124-3.843A7,7,0,0,1,264.3,311Z" + fill="#fff"/> + <path d="M245.778,303.452a7,7,0,1,1,9.123-3.842A7,7,0,0,1,245.778,303.452Z" + fill="#fff"/> + <path d="M258.5,317.274l-12.966-5.281a1,1,0,0,1,.755-1.853l12.966,5.282a1,1,0,0,1-.755,1.852Z" + fill="#444"/> + <path d="M247.287,299.747a3,3,0,1,1,3.91-1.646A3,3,0,0,1,247.287,299.747Z" + fill="#444"/> + <path d="M265.809,307.292a3,3,0,1,1,3.91-1.647A3,3,0,0,1,265.809,307.292Z" + fill="#444"/> + </g> + </g> + <polygon id="i-fof-radar-body" + points="415 410 105 410 196 106 324 106 415 410" + fill="#4ad36b" + opacity="0.5"/> + <ellipse id="i-fof-radar-bottom" + cx="260" + cy="410" + rx="155" + ry="28" + fill="#4ad36b"/> + <ellipse id="i-fof-shadow" + cx="282" + cy="410" + rx="72" + ry="10" + opacity="0.4" + fill="var(--color-black)"/> + <ellipse id="i-fof-radar-top" + cx="260" + cy="106" + rx="64" + ry="6" + fill="#4ad36b"/> + </svg> + </div> + </div> +</section> 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); + } +} |