add designed layout

2020-02-15 20:13:33 +01:00 · 2020-02-15 20:13:33 +01:00 · 2ff9ba0e89
parent baa0951409
commit 2ff9ba0e89
20 changed files with 219 additions and 47 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -4673,6 +4673,25 @@
      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
      "dev": true
    },
+    "file-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/file-match/-/file-match-1.0.2.tgz",
+      "integrity": "sha1-ycrSZdLIrfOoFHWw30dYWQafrvc=",
+      "dev": true,
+      "requires": {
+        "utils-extend": "^1.0.6"
+      }
+    },
+    "file-system": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/file-system/-/file-system-2.2.2.tgz",
+      "integrity": "sha1-fWWDPjojR9zZVqgTxncVPtPt2Yc=",
+      "dev": true,
+      "requires": {
+        "file-match": "^1.0.1",
+        "utils-extend": "^1.0.4"
+      }
+    },
    "file-uri-to-path": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@ -6928,6 +6947,17 @@
        "ws": "^5.1.1"
      }
    },
+    "parcel-plugin-static-files-copy": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/parcel-plugin-static-files-copy/-/parcel-plugin-static-files-copy-2.3.1.tgz",
+      "integrity": "sha512-yqB1bhSK+hbfxSjc1y/gBc+Fm6bedNrofx75wgnI0sP+6oEBqjyN51tlJVLu6pZhBLi11ZFwAM2XubCUh2G0+A==",
+      "dev": true,
+      "requires": {
+        "file-system": "2.2.2",
+        "minimatch": "3.0.4",
+        "path": "0.12.7"
+      }
+    },
    "parcel-plugin-svelte": {
      "version": "4.0.5",
      "resolved": "https://registry.npmjs.org/parcel-plugin-svelte/-/parcel-plugin-svelte-4.0.5.tgz",
@ -6979,6 +7009,33 @@
      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
      "dev": true
    },
+    "path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=",
+      "dev": true,
+      "requires": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        },
+        "util": {
+          "version": "0.10.4",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+          "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        }
+      }
+    },
    "path-browserify": {
      "version": "0.0.1",
      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
@ -9035,6 +9092,12 @@
        "object.getownpropertydescriptors": "^2.0.3"
      }
    },
+    "utils-extend": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/utils-extend/-/utils-extend-1.0.8.tgz",
+      "integrity": "sha1-zP17ZFQPjpDuIe7Fd2nQZRyril8=",
+      "dev": true
+    },
    "uuid": {
      "version": "3.3.3",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "@babel/preset-env": "^7.8.3",
    "autoprefixer": "^9.7.4",
    "parcel": "^1.12.4",
+    "parcel-plugin-static-files-copy": "^2.3.1",
    "parcel-plugin-svelte": "^4.0.5",
    "sass": "^1.25.0",
    "svelte": "^3.16.7"
@ -28,5 +29,9 @@
  },
  "browserslist": [
    "last 1 chrome versions"
-  ]
+  ],
+  "staticFiles": {
+    "staticPath": "public",
+    "watcherGlob": "**"
+  }
 }
--- a/src/assets/fonts/roboto-bold.woff2
+++ b/src/assets/fonts/roboto-bold.woff2
--- a/src/assets/fonts/roboto-medium.woff2
+++ b/src/assets/fonts/roboto-medium.woff2
--- a/src/assets/fonts/roboto-regular.woff2
+++ b/src/assets/fonts/roboto-regular.woff2
--- a/src/assets/img/eldritch-sky.svg
+++ b/src/assets/img/eldritch-sky.svg
--- a/src/assets/img/logo.svg
+++ b/src/assets/img/logo.svg
--- a/src/assets/scss/4-base/_01-fonts.scss
+++ b/src/assets/scss/4-base/_01-fonts.scss
@ -1,3 +1,27 @@
 /* ----------------------------------------------------------- */
 /* == custom fonts */
 /* ----------------------------------------------------------- */
+
+@font-face {
+  font-display: swap;
+  font-weight: normal;
+  font-style: normal;
+  font-family: "Roboto";
+  src: local("Roboto Regular"), local("Roboto"), url("/assets/fonts/roboto-regular.woff2") format("woff2"),
+  ;
+}
+
+@font-face {
+  font-display: swap;
+  font-weight: 600;
+  font-style: normal;
+  font-family: "Roboto";
+  src: local("Roboto Medium"), local("Roboto"), url("/assets/fonts/roboto-medium.woff2") format("woff2");
+}
+@font-face {
+  font-display: swap;
+  font-weight: bold;
+  font-style: normal;
+  font-family: "Roboto";
+  src: local("Roboto Bold"), local("Roboto"), url("/assets/fonts/roboto-bold.woff2") format("woff2");
+}
--- a/src/assets/scss/4-base/_04-main.scss
+++ b/src/assets/scss/4-base/_04-main.scss
@ -3,7 +3,7 @@
 /* ----------------------------------------------------------- */

 body {
-  background-color: #fff;
+  background-color: #f9f9f7;
  color: $color-dark-text;
  font-family: $fontstack1;

@ -16,7 +16,7 @@ body {
  margin-left: auto;
  padding-right: 1rem;
  padding-left: 1rem;
-  max-width: 102.4rem;
+  max-width: 54rem;
 }

 /* titles
--- a/src/assets/scss/4-base/_06-header.scss
+++ b/src/assets/scss/4-base/_06-header.scss
@ -3,4 +3,39 @@
 /* ----------------------------------------------------------- */

 .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-top: 5.7rem;
+  padding-bottom: 6rem;
+}
+
+.header__title {
+  margin: 0;
+  text-align: center;
+  font-size: 2rem;
+}
+
+/* Side
+-------------------------------------------------------------- */
+
+.header__side {
+  padding-bottom: .7rem;
+}
+
+.header__sideBtn,
+.header__sideBtn:visited {
+  padding: 0;
+  border: none;
+  background: none;
+  color: $color-primary;
+  font-weight: bold;
+  font-size: 1.4rem;
+  line-height: 1.14em;
+  cursor: pointer;
+}
+
+.header__sideBtn:hover,
+.header__sideBtn:active {
+  text-decoration: underline;
 }
--- a/src/assets/scss/4-base/_09-footer.scss
+++ b/src/assets/scss/4-base/_09-footer.scss
@ -3,17 +3,32 @@
 /* ----------------------------------------------------------- */

 .footer {
-  padding: 2rem 0;
+  position: relative;
+  margin-top: 6rem;
+  padding-top: 2.4rem;
+  padding-bottom: 4rem;
+  color: rgba($color-primary, .4);
+  text-align: center;
+  font-size: 1.3rem;
 }

-.footer ul,
-.footer li {
-  margin: 0;
-  padding: 0;
+.footer::before {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 1rem);
+  width: 2rem;
+  height: .2rem;
+  background-color: rgba($color-primary, .15);
+  content: "";
 }

 .footer a,
 .footer a:hover,
 .footer a:visited {
-  color: $color-link;
+  color: rgba($color-primary, .4);
+  text-decoration: underline;
+}
+
+.footer__illu {
+  margin-bottom: 2rem;
 }
--- a/src/assets/scss/5-modules/player-big.scss
+++ b/src/assets/scss/5-modules/player-big.scss
@ -0,0 +1,20 @@
+/* ----------------------------------------------------------- */
+/* == Big player */
+/* ----------------------------------------------------------- */
+
+.playerBig__player {
+  position: relative;
+  padding-bottom: calc(100% / (16/9));
+}
+
+.playerBig__player > iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.playerBig__overlay {
+  cursor: default;
+}
--- a/src/assets/scss/_colors.scss
+++ b/src/assets/scss/_colors.scss
@ -5,7 +5,7 @@
 // palette
 // --------------------------------------------------------------

-$color-primary: #3498db;
+$color-primary: #635776;
 $color-secondary: #1abc9c;
 $color-tertiary: #34495e;
 $color-info: #2185d0;
@ -14,7 +14,7 @@ $color-info: #2185d0;
 // --------------------------------------------------------------

 $color-light-text: #fcfcfc;
-$color-dark-text: #000;
+$color-dark-text: $color-primary;

 // links
 // --------------------------------------------------------------
--- a/src/assets/scss/_config.scss
+++ b/src/assets/scss/_config.scss
@ -7,7 +7,7 @@

 $base-font: 14; // px value (without unit), will be converted in em
 $line-height: 1.5;
-$fontstack1: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$fontstack1: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $fontstack2: Georgia, Times, "Times New Roman", serif;

 // responsive
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@ -61,7 +61,7 @@
 // == modules */
 // --------------------------------------------------------------

-//@import '5-modules/...';
+@import "5-modules/player-big";


 // --------------------------------------------------------------
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@ -2,10 +2,8 @@
    <title>{`${ $current ? `${$current.metadata.title} ∴ ` : ''}Eldritch Radio`}</title>
 </svelte:head>

-<main class="app">
-    <header class="header">
-        <h1>Eldritch Radio</h1>
-    </header>
+<div class="app container">
+    <Header></Header>

    <section class="viewer">
        {#if $current}
@ -17,13 +15,18 @@
    <section class="queue">
        <Queue></Queue>
    </section>
-</main>
+
+    <Footer></Footer>
+</div>


 <script>
+
    import { onMount, onDestroy } from 'svelte'
    import { get } from 'svelte/store'

+    import Header from '/components/layout/Header.svelte'
+    import Footer from '/components/layout/Footer.svelte'
    import Controls from '/components/Controls.svelte'
    import Queue from '/components/Queue.svelte'
    import Viewer from '/components/Viewer.svelte'
@ -86,11 +89,4 @@
            }
        }
    })
-</script>
-
-<style>
-    .app {
-        min-width: 100%;
-        min-height: 100%;
-    }
-</style>
+</script>
--- a/src/components/Controls.svelte
+++ b/src/components/Controls.svelte
@ -56,12 +56,14 @@

 <style>
    .controls {
-        display: flex;
        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
    }

    .controls-group {
        margin: 0 1rem;
+
    }

    .cant {
--- a/src/components/Viewer.svelte
+++ b/src/components/Viewer.svelte
@ -1,7 +1,8 @@
 <div>
-    <div class="embed-container">
+    <div class="playerBig__player">
        <YoutubePlayer
            id={$current ? $current.data.id : null}
+            class="playerBig__iframe"
            paused={$paused}
            muted={$muted}
            volume={$volume}
@ -13,7 +14,7 @@
            bind:seek={seek}
        ></YoutubePlayer>

-        <div class="embed-overlay" on:click={() => $paused = !$paused}></div>
+        <div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
    </div>

    {#if !ready}
@ -63,21 +64,3 @@
        currentTime = seconds
    }
 </script>
-
-<style>
-    .hidden {
-        display: none;
-    }
-
-    .embed-container {
-        position: relative;
-    }
-
-    .embed-overlay {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-    }
-</style>
--- a/src/components/layout/Footer.svelte
+++ b/src/components/layout/Footer.svelte
@ -0,0 +1,8 @@
+<footer class="footer">
+    <img class="footer__illu" src="{ eldritchSky }" alt="">
+    <div>by Eldritch Café - <a href="https://github.com/EldritchCafe/radio" target="_blank">source code</a></div>
+</footer>
+
+<script>
+    import eldritchSky from '/assets/img/eldritch-sky.svg'
+</script>
--- a/src/components/layout/Header.svelte
+++ b/src/components/layout/Header.svelte
@ -0,0 +1,15 @@
+<header class="header">
+    <div class="header__side">
+        <button class="header__sideBtn">About</button>
+    </div>
+    <h1 class="header__title">
+        <img src="{ logo }" alt="Eldritch Radio">
+    </h1>
+    <div class="header__side txtright">
+        <button class="header__sideBtn">Settings</button>
+    </div>
+</header>
+
+<script>
+    import logo from '/assets/img/logo.svg'
+</script>