robocik-webdev · mikolajkazmierczak · Apr 13, 2022 · Apr 19, 2022 · Apr 30, 2022 · May 4, 2022
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
   "singleQuote": true,
   "arrowParens": "avoid",
   "trailingComma": "none",
-  "svelteBracketNewLine": true
+  "svelteBracketNewLine": true,
+  "printWidth": 120
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "www",
   "version": "0.0.1",
   "scripts": {
-    "dev": "svelte-kit dev --host",
+    "dev": "svelte-kit dev --host --port 3000",
     "build": "svelte-kit build",
     "preview": "svelte-kit preview --host",
     "package": "svelte-kit package"
@@ -12,8 +12,10 @@
     "@sveltejs/kit": "next",
     "@tryghost/content-api": "^1.6.0",
     "animejs": "^3.2.1",
+    "luxon": "^2.3.1",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
+    "socket.io-client": "^4.4.1",
     "svelte": "^3.44.0",
     "svelte-meta-tags": "^2.3.0",
     "svelte-scrollto": "^0.2.0"

diff --git a/src/app.html b/src/app.html
@@ -5,12 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <link rel="icon" href="/favicon.png" />
+    <link rel="stylesheet" href="/global.css" />
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&display=swap" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700;900&display=swap"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,1,200"
     />
 
     %svelte.head%

diff --git a/src/lib/Hub/Add.svelte b/src/lib/Hub/Add.svelte
@@ -0,0 +1,26 @@
+<script>
+  import { fly } from 'svelte/transition';
+
+  import { edited } from '$lib/Hub/stores';
+  import Button from '$lib/Hub/Button.svelte';
+
+  export let onclick;
+</script>
+
+{#if !$edited}
+  <div class="wrapper" transition:fly={{ y: 50, duration: 300 }}>
+    <Button square action {onclick} icon="add" />
+  </div>
+{/if}
+
+<style>
+  .wrapper {
+    position: fixed;
+    bottom: calc(var(--h-bar) + 1.5rem);
+    left: 50%;
+    /* width: calc(100% - 1rem);
+    max-width: calc(var(--w) - 2rem);
+    margin: auto; */
+    transform: translateX(-50%);
+  }
+</style>
diff --git a/src/lib/Hub/Box.svelte b/src/lib/Hub/Box.svelte
@@ -0,0 +1,20 @@
+<script>
+  export let fill = false;
+</script>
+
+<div class="glass wrapper" class:fill>
+  <slot />
+</div>
+
+<style>
+  * {
+    color: #fff;
+  }
+  .wrapper {
+    padding: 1rem;
+    border-radius: 1rem;
+  }
+  .fill {
+    height: 100%;
+  }
+</style>
diff --git a/src/lib/Hub/Button.svelte b/src/lib/Hub/Button.svelte
@@ -0,0 +1,60 @@
+<script>
+  export let square = false;
+  export let action = false;
+  export let transparent = false;
+  export let edited = false;
+  export let disabled = false;
+
+  export let icon = null;
+
+  export let onclick;
+</script>
+
+<button
+  on:click|preventDefault={() => (disabled ? {} : onclick())}
+  class="glass"
+  class:square
+  class:action
+  class:transparent
+  class:edited
+  class:disabled
+>
+  {#if icon}<span class="material-symbols-outlined" class:margin={$$slots.default}>{icon}</span>{/if}
+  {#if $$slots.default}<slot />{/if}
+</button>
+
+<style>
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 1rem;
+    border: none;
+    width: 100%;
+    height: var(--h);
+    color: #fff;
+    font-size: 1.1rem;
+  }
+  .square {
+    aspect-ratio: 1 / 1;
+  }
+  .action {
+    background-color: var(--c-action);
+  }
+  .transparent {
+    background-color: rgba(0, 0, 0, 0);
+    backdrop-filter: none;
+    box-shadow: none;
+  }
+  .edited {
+    outline: solid 0.15rem var(--c-action);
+    outline-offset: 0.25rem;
+  }
+  .disabled {
+    background-color: var(--c-input);
+  }
+
+  span.margin {
+    margin-right: 0.5rem;
+  }
+</style>
diff --git a/src/lib/Hub/ButtonGroup.svelte b/src/lib/Hub/ButtonGroup.svelte
@@ -0,0 +1,11 @@
+<div class="columns">
+  <slot />
+</div>
+
+<style>
+  .columns {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 1rem;
+  }
+</style>
diff --git a/src/lib/Hub/ButtonSimple.svelte b/src/lib/Hub/ButtonSimple.svelte
@@ -0,0 +1,40 @@
+<script>
+  export let src = null;
+  export let alt = null;
+
+  export let icon = null;
+
+  export let onclick;
+</script>
+
+<div role="button" class="button" on:click={onclick} class:icon>
+  {#if src}
+    <img {src} {alt} />
+  {:else if icon}
+    <span class="material-symbols-outlined">{icon}</span>
+  {:else if $$slots.default}
+    <slot />
+  {/if}
+</div>
+
+<style>
+  .material-symbols-outlined {
+    color: #000;
+  }
+
+  .button {
+    user-select: none;
+    cursor: pointer;
+    display: grid;
+    place-items: center;
+    aspect-ratio: 1 / 1;
+    cursor: pointer;
+    overflow: hidden;
+    height: 100%;
+    border-radius: 50%;
+    background-color: #fff;
+  }
+  .button.icon {
+    padding: 0.25rem;
+  }
+</style>
diff --git a/src/lib/Hub/Header.svelte b/src/lib/Hub/Header.svelte
@@ -0,0 +1,107 @@
+<script>
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import { edited } from '$lib/Hub/stores';
+
+  import Menu from '$lib/Hub/Menu.svelte';
+  import User from '$lib/Hub/User.svelte';
+  import UserButton from '$lib/Hub/UserButton.svelte';
+
+  $: pathname = $page.url.pathname;
+
+  export let title;
+  export let subtitle = null;
+  export let back = false;
+
+  let menuVisible = false;
+  let userVisible = false;
+
+  function handleButtonLeft() {
+    if (back) {
+      // back arrow
+      const prevPathname = pathname.substring(0, pathname.lastIndexOf('/'));
+      goto(prevPathname);
+    } else {
+      // menu
+      menuVisible = true;
+    }
+  }
+</script>
+
+<header class="glass">
+  <div role="button" class="button left" on:click={handleButtonLeft} class:hidden={$edited}>
+    <span class="material-symbols-outlined">{back ? 'arrow_back' : 'menu'}</span>
+  </div>
+  <div class="logo">
+    <img src="/img/logo.svg" alt="logo" />
+    <span class="title">
+      {title}
+      {#if subtitle}<small class="subtitle">{subtitle}</small>{/if}
+    </span>
+  </div>
+  <div role="button" class="button right">
+    <UserButton bind:visible={userVisible} />
+  </div>
+</header>
+
+<User bind:visible={userVisible} />
+
+<Menu bind:visible={menuVisible}>
+  <slot />
+</Menu>
+
+<style>
+  header {
+    z-index: 100;
+    overflow: hidden;
+    position: fixed;
+    top: 0.5rem;
+    left: 50%;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 1rem;
+    width: calc(100% - 1rem);
+    height: var(--h-bar);
+    margin: auto;
+    max-width: calc(var(--w) - 2rem);
+    transform: translateX(-50%);
+  }
+
+  .button {
+    user-select: none;
+    cursor: pointer;
+    aspect-ratio: 1 / 1;
+    display: grid;
+    place-items: center;
+    padding: 0.75rem 1rem;
+    height: 100%;
+    transition: transform 200ms;
+  }
+  .hidden {
+    pointer-events: none;
+    transform: translateX(-100%);
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0;
+    height: 100%;
+  }
+  .logo img {
+    height: 80%;
+    margin-right: 0.5rem;
+  }
+  .title {
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.5rem;
+  }
+  .subtitle {
+    margin-top: -0.2rem;
+    font-weight: normal;
+    font-size: 0.8rem;
+  }
+</style>
diff --git a/src/lib/Hub/HeaderSimple.svelte b/src/lib/Hub/HeaderSimple.svelte
@@ -0,0 +1,78 @@
+<script>
+  import { goto } from '$app/navigation';
+
+  import { me } from '$lib/Hub/stores';
+  import User from '$lib/Hub/User.svelte';
+  import UserButton from '$lib/Hub/UserButton.svelte';
+  import ButtonSimple from '$lib/Hub/ButtonSimple.svelte';
+
+  export let title;
+  export let subtitle = null;
+
+  export let center = false;
+
+  let userVisible = false;
+</script>
+
+<header class:center>
+  <div class="logo">
+    <img src="/img/logo.svg" alt="logo" />
+    <span class="title">
+      {title}
+      {#if subtitle}<small class="subtitle">{subtitle}</small>{/if}
+    </span>
+  </div>
+  {#if $me}
+    <div class="buttons">
+      {#if $me?.admin}
+        <ButtonSimple icon="admin_panel_settings" onclick={() => goto('/hub/apps/votum')} />
+      {/if}
+      <UserButton bind:visible={userVisible} />
+    </div>
+  {/if}
+</header>
+
+{#if $me}
+  <User bind:visible={userVisible} />
+{/if}
+
+<style>
+  header {
+    display: flex;
+    justify-content: space-between;
+    height: 3.5rem;
+  }
+  header.center {
+    justify-content: center;
+  }
+
+  .logo {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+  .buttons {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0;
+    height: 100%;
+  }
+
+  .logo img {
+    height: 100%;
+    margin-right: 1rem;
+  }
+  .title {
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    font-weight: 700;
+    font-size: 2rem;
+  }
+  .subtitle {
+    margin-top: -0.34rem;
+    font-weight: normal;
+    font-size: 1rem;
+  }
+</style>