Mastodon
/
mastoradio-la-radio-di-mastodon
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

add settings page

This commit is contained in:
Tixie 2020-02-29 01:06:27 +01:00
parent 07f6c4dae6
commit 9ca2b42cfc
10 changed files with 165 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -7245,6 +7245,11 @@
"resolved": "https://registry.npmjs.org/svelte-routing/-/svelte-routing-1.4.0.tgz",
"integrity": "sha512-09ypn0/vD2PcuyZEEocUHFgi7kvLOxSoUUuJZ4j3p4Y4sT/kMIWtHIRpnLdsr8bQ+sGo77sbEkO+av6yd1RjPg=="
},
"svelte-tags-input": {
"version": "1.0.16",
"resolved": "https://registry.npmjs.org/svelte-tags-input/-/svelte-tags-input-1.0.16.tgz",
"integrity": "sha512-g9buRdhoQaIW9wFPeRDSIZnyYT1tzvizb7EU8Ayqi+8P4yAJ7EHDwteQ+/5q3HjNiqkgn3HZqqZjQmV9ZLdqhw=="
},
"svgo": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",

3
package.json
View File

@ -34,7 +34,8 @@
"route-parser": "0.0.5",
"svelte-pipeable-store": "^1.0.3",
"svelte-portal": "^0.1.0",
"svelte-routing": "^1.4.0"
"svelte-routing": "^1.4.0",
"svelte-tags-input": "^1.0.16"
},
"staticFiles": {
"staticPath": "public",

4
src/assets/scss/3-components/_forms.scss
View File

@ -10,7 +10,7 @@
$input-border-radius: .3rem;
$input-border: .1rem solid #d8d8d8;
$input-background-color: #fff;
$input-background-color: #f1f1f1;
$input-hover: 5%;
$input-placeholder-color: #c4c1be;
$input-error: #ff3860;
@ -109,6 +109,8 @@ input {
border: $input-border;
border-radius: $input-border-radius;
background: $input-background-color;
color: $color-secondary;
line-height: 1.3em;
}
input[readonly] {

15
src/assets/scss/3-components/_radiobox.scss
View File

@ -14,6 +14,7 @@
width: 100%;
border: $input-border;
border-radius: $input-border-radius;
background: $input-background-color;
}
.radiobox--full {
@ -32,21 +33,17 @@
align-items: center;
flex-grow: 1;
margin: 0;
padding: 1rem 1.8rem;
padding: .5rem 1rem;
min-height: 4rem;
width: 50%;
border-radius: $input-border-radius;
text-align: center;
white-space: nowrap;
font-weight: normal;
transition: all .05s ease-in;
line-height: 1.1em;
transition: all .1s ease-in;
}
.radiobox input:first-child + label {
border-radius: ($input-border-radius - .2rem) 0 0 ($input-border-radius - .2rem);
}
.radiobox label:last-child {
border-radius: 0 ($input-border-radius - .2rem) ($input-border-radius - .2rem) 0;
}
/* Checked state */

1
src/assets/scss/6-pages/context.scss
View File

@ -47,6 +47,7 @@
.context-close {
margin-right: -.2rem;
margin-left: 1rem;
padding: .2rem;
border: none;
border-radius: .3rem;

41
src/assets/scss/6-pages/settings.scss Normal file
View File

@ -0,0 +1,41 @@
/* ----------------------------------------------------------- */
/* == Settings page */
/* ----------------------------------------------------------- */
.settings {
padding-bottom: 4rem;
}
.settings-line {
display: flex;
margin-bottom: 4rem;
min-width: 0;
}
.settings-main {
flex-grow: 1;
font-size: 1.4rem;
}
/* Side
-------------------------------------------------------------- */
.settings-side {
flex-shrink: 0;
margin-right: 2rem;
width: 16rem;
}
.settings-side__title {
margin-bottom: .5rem;
color: $color-secondary;
font-weight: 600;
font-size: 1.6rem;
line-height: 1.55em;
}
.settings-side__subtitle {
color: rgba($color-primary, .8);
font-size: 1.3rem;
line-height: 1.38em;
}

42
src/assets/scss/7-vendors/o-tags.scss Normal file
View File

@ -0,0 +1,42 @@
/* ----------------------------------------------------------- */
/* == tags input override */
/* ----------------------------------------------------------- */
div.svelte-tags-input-layout:nth-child(n) {
padding-right: 2rem;
padding-left: 1.5rem;
border: $input-border;
border-radius: $input-border-radius;
background: $input-background-color;
}
div.svelte-tags-input-layout:nth-child(n):hover {
border: $input-border;
}
input.svelte-tags-input:nth-child(n) {
padding: .35rem .5rem;
min-width: 0;
box-shadow: none;
font-family: inherit;
line-height: 1.5em;
}
span.svelte-tags-input-tag:nth-child(n) {
padding: 0;
padding-left: .9rem;
background-color: $color-primary;
font-size: 1.3rem;
font-family: inherit;
}
span.svelte-tags-input-tag-remove:nth-child(n) {
margin-left: .3rem;
padding: .5rem;
padding-left: .5rem;
font-size: 1.6rem;
line-height: 1em;
}
span.svelte-tags-input-tag-remove:hover {
background-color: rgba(#000, .3);
}

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

@ -82,6 +82,7 @@
// --------------------------------------------------------------
@import "6-pages/context";
@import "6-pages/settings";
// --------------------------------------------------------------
@ -91,7 +92,7 @@
// Tips: load vendor from your package manager and override CSS here (e.g. o-vendor-name.scss)
// In this context, "o" means "override" and you can use it as a convention.
// @import "7-vendors/o-vendor.scss";
@import "7-vendors/o-tags.scss";
// --------------------------------------------------------------

61
src/components/Settings.svelte Normal file
View File

@ -0,0 +1,61 @@
<button class="header__sideBtn" on:click={() => openPage()}>Settings</button>
<Portal target="{document.body}">
<ContextPage name="Settings" open={open} on:close={closePage}>
<div class="settings">
<div class="settings-line">
<div class="settings-side">
<div class="settings-side__title">Instance</div>
<div class="settings-side__subtitle">The mastodon instance from the toods are fetched</div>
</div>
<div class="settings-main">
<input class="f-size-full" type="text" value="https://eldritch.cafe">
</div>
</div>
<div class="settings-line">
<div class="settings-side">
<div class="settings-side__title">Tags</div>
<div class="settings-side__subtitle">What hashtags are fetched</div>
</div>
<div class="settings-main">
<Tags
allowPaste={true}
/>
</div>
</div>
<div class="settings-line">
<div class="settings-side">
<div class="settings-side__title">Max duration</div>
<div class="settings-side__subtitle">Hide tracks above this duration</div>
</div>
<div class="settings-main">
<div class="radiobox radiobox--full">
<input type="radio" id="10min" name="drone" value="10">
<label for="10min">10 min</label>
<input type="radio" id="20min" name="drone" value="20" checked>
<label for="20min">20 min</label>
<input type="radio" id="1hour" name="drone" value="60">
<label for="1hour">1 hour</label>
<input type="radio" id="nolimit" name="drone" value="null">
<label for="nolimit">No limit</label>
</div>
</div>
</div>
</div>
</ContextPage>
</Portal>
<script>
import Portal from 'svelte-portal'
import ContextPage from '/components/ContextPage'
import Tags from "svelte-tags-input";
let open = true
let openPage = () => {
open = true
}
let closePage = () => {
open = false
}
</script>

3
src/components/layout/Header.svelte
View File

@ -6,11 +6,12 @@
<a class="header__titleLink" href="/"><img src="{ logo }" alt="Eldritch Radio"></a>
</h1>
<div class="header__side txtright">
<button class="header__sideBtn">Settings</button>
<Settings></Settings>
</div>
</header>
<script>
import logo from '/assets/img/logo.svg'
import About from '/components/About'
import Settings from '/components/Settings'
</script>