octo
/
mastoradio-fork
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add designed layout

This commit is contained in:
Tixie 2020-02-15 20:13:33 +01:00
parent baa0951409
commit 2ff9ba0e89
20 changed files with 219 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
package-lock.json generated
View File

@ -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",

7
package.json
View File

@ -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": "**"
}
}

BIN
src/assets/fonts/roboto-bold.woff2 Executable file
View File

Binary file not shown.

BIN
src/assets/fonts/roboto-medium.woff2 Executable file
View File

Binary file not shown.

BIN
src/assets/fonts/roboto-regular.woff2 Executable file
View File

Binary file not shown.

3
src/assets/img/eldritch-sky.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

3
src/assets/img/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

24
src/assets/scss/4-base/_01-fonts.scss
View File

@ -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");
}

4
src/assets/scss/4-base/_04-main.scss
View File

@ -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

35
src/assets/scss/4-base/_06-header.scss
View File

@ -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;
}

27
src/assets/scss/4-base/_09-footer.scss
View File

@ -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;
}

20
src/assets/scss/5-modules/player-big.scss Normal file
View File

@ -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;
}

4
src/assets/scss/_colors.scss
View File

@ -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
// --------------------------------------------------------------

2
src/assets/scss/_config.scss
View File

@ -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

2
src/assets/scss/style.scss
View File

@ -61,7 +61,7 @@
// == modules */
// --------------------------------------------------------------
//@import '5-modules/...';
@import "5-modules/player-big";
// --------------------------------------------------------------

22
src/components/App.svelte
View File

@ -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>

4
src/components/Controls.svelte
View File

@ -56,12 +56,14 @@
<style>
.controls {
display: flex;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.controls-group {
margin: 0 1rem;
}
.cant {

23
src/components/Viewer.svelte
View File

@ -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>

8
src/components/layout/Footer.svelte Normal file
View File

@ -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>

15
src/components/layout/Header.svelte Normal file
View File

@ -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>