diff --git a/package-lock.json b/package-lock.json index b4c1859..f746642 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index a442706..d5a656a 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/scss/3-components/_forms.scss b/src/assets/scss/3-components/_forms.scss index f3d1e81..2afded0 100755 --- a/src/assets/scss/3-components/_forms.scss +++ b/src/assets/scss/3-components/_forms.scss @@ -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] { diff --git a/src/assets/scss/3-components/_radiobox.scss b/src/assets/scss/3-components/_radiobox.scss index 751ffe4..50e9463 100755 --- a/src/assets/scss/3-components/_radiobox.scss +++ b/src/assets/scss/3-components/_radiobox.scss @@ -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 */ diff --git a/src/assets/scss/6-pages/context.scss b/src/assets/scss/6-pages/context.scss index e0a3d95..0a98dec 100644 --- a/src/assets/scss/6-pages/context.scss +++ b/src/assets/scss/6-pages/context.scss @@ -47,6 +47,7 @@ .context-close { margin-right: -.2rem; + margin-left: 1rem; padding: .2rem; border: none; border-radius: .3rem; diff --git a/src/assets/scss/6-pages/settings.scss b/src/assets/scss/6-pages/settings.scss new file mode 100644 index 0000000..88cea42 --- /dev/null +++ b/src/assets/scss/6-pages/settings.scss @@ -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; +} diff --git a/src/assets/scss/7-vendors/o-tags.scss b/src/assets/scss/7-vendors/o-tags.scss new file mode 100644 index 0000000..2d22fde --- /dev/null +++ b/src/assets/scss/7-vendors/o-tags.scss @@ -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); +} diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 8329491..390c01b 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -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"; // -------------------------------------------------------------- diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte new file mode 100644 index 0000000..9777a3b --- /dev/null +++ b/src/components/Settings.svelte @@ -0,0 +1,61 @@ + + + +
+
+
+
Instance
+
The mastodon instance from the toods are fetched
+
+
+ +
+
+
+
+
Tags
+
What hashtags are fetched
+
+
+ +
+
+
+
+
Max duration
+
Hide tracks above this duration
+
+
+
+ + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/src/components/layout/Header.svelte b/src/components/layout/Header.svelte index 8ff9022..c4c3459 100644 --- a/src/components/layout/Header.svelte +++ b/src/components/layout/Header.svelte @@ -6,11 +6,12 @@ Eldritch Radio
- +
\ No newline at end of file