From 2f7338229d0ad0469802a1a0188dfd09e41411d1 Mon Sep 17 00:00:00 2001 From: Oskar Rough Date: Fri, 28 Jun 2024 13:01:04 +0200 Subject: [PATCH] Styling with tabs --- bun.lockb | Bin 63725 -> 3575 bytes index.html | 49 +++++++++++++++++++----- package.json | 1 + src/index.css | 36 +++++++++++++----- src/main.js | 1 + src/tabs.css | 83 +++++++++++++++++++++++++++++++++++++++++ src/text-to-youtube.js | 17 ++++----- 7 files changed, 159 insertions(+), 28 deletions(-) create mode 100644 src/tabs.css diff --git a/bun.lockb b/bun.lockb index a5b6a5b83af37ed5a4d9b4de0a3b9118db2e95f6..5b786f5cf35b3b94cf3f85c6f4139a58c28063d4 100755 GIT binary patch delta 792 zcmaF+k@>sy1U*f$Z@IG%M5nHBdZ9nn^y61^g{LcR)s-!GxGy-SJ9A@PcRDWv7;sDs zmuJf0m{_5px)mrO!obi_1f;ovbS#h-1=0bG3=CpGS_sIOoxGOSn&Y|8K0Qx)RolrA zxI7s3Cu?%sGuBSd1d=BwujIC85@MYEirbDcZL%hhJ>%xdnLPHqe}QI10nK0mn!z!- zkjJ>53CLmwVpbpqN;0qkF$jQYkT@q0gT%Rj7zAK6hz-(9zW#sw{}>rIAGa%Ga*T58 zd6fR zt!vpC*+u$$Q#QPGVVu0M;?m|HEfI`d8#q8NV_-PKF?q%k8wD_%;opA<0P)y?_ybfC z59j2(diEAOWm&@|5KoToa%|Q@AFltyVJy#|JP>VX?sk zG6oECGE2a8N8LPkKZ9dSm>A=X^$hh)7#LzFC$5oXESmgtwK3z?$+~MKrD3rf$E&2~ ze{`n@P_3b!k)8oWt+5Jj`FqePxyLoxMaoLnw*eMt)6lYeY=BMcZ zS&2EB>3R8ST*U?XC7EfJx+VF#mHDM5rAes{>6s-NrAhiFiAlQ2`FSOYnR%&2lLd~d qZGLfN1LNfBkEE@!D$z~NNzF~oE78|Q)d~~WHPN%sGnyRuV-5h1YQ~-b literal 63725 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 diff --git a/index.html b/index.html index 8dfce0d..2b26a10 100644 --- a/index.html +++ b/index.html @@ -4,27 +4,56 @@ - Spotify to YouTube + Spotify to YouTube to Text/CSV & Radio4000
-

Convert Spotify playlist →
YouTube videos →
Radio4000 tracks

-

Did you just find a good Spotify playlist, but don't want to listen on Spotify?

-

- This tool helps you create a matching list of YouTube videos. Save as .txt and pipe it to - yt-dlp, or copy/paste as text or .csv, or even import directly into beta.radio4000.com. -

+

+ Convert music playlists →
Text, CSV, Spotify, YouTube + & Radio4000. +

+
    +
  • Convert Spotify playlists to YouTube videos
  • +
  • Find matching YouTube videos from text playlists
  • +
+

And then you could

+
    +
  • Save as .txt or .csv files for easy storage and sharing
  • +
  • Pipe to yt-dlp to download audio locally
  • +
  • Import your results to Radio4000
  • +
- - + + + +
+ +
+ +
diff --git a/package.json b/package.json index 1d7e083..03ac10f 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "@github/tab-container-element": "^4.8.2", "lit": "^3.1.4" }, "devdependencies": { diff --git a/src/index.css b/src/index.css index d6f8ad9..925f6bb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import url("tabs.css"); + :root { font-family: system-ui, sans-serif; line-height: 1.25; @@ -46,54 +48,65 @@ spotify-to-youtube ul { .tracks { display: flex; flex-direction: column; - /* gap: 1em; */ + padding-left: 2rem; } .results { display: flex; flex-direction: column; - margin: 1rem 0 1rem 1rem; + padding: 0; + margin: 1rem 0 1rem 0.5rem; } .results > li { display: flex; - gap: 1em; + gap: 0.5em; margin-bottom: 1px; + font-size: 14px; } -.results:has(input[type='radio']:checked) li ul { +.results:has(input[type="radio"]:checked) li ul { opacity: 0.25; } .results li ul { - padding: 0.2em; + padding: 0.3em; + margin: auto 0; } -.results li:has(input[type='radio']:checked) ul { +.results li:has(input[type="radio"]:checked) ul { outline: 1px solid darkgreen; opacity: 1; border-radius: 0.3em; } .results img { - width: 5rem; + width: 3rem; + height: 3rem; + object-fit: cover; /* display: none; */ vertical-align: top; } -input:not([type='radio']) { +input:not([type="radio"]) { width: 20rem; max-width: 100%; margin-bottom: 0.5em; + padding: 0.2rem 0.4em; min-height: 1.5em; } +[type="submit"] { + /* font-size: 1em; */ +} + details { margin-bottom: 1rem; } textarea { min-width: 40em; + field-sizing: content; } section summary { @@ -101,7 +114,7 @@ section summary { min-height: 2em; line-height: 2; padding-left: 0.5em; - margin-bottom: 1em; + /* margin-bottom: 1em; */ } section[spotify] summary { background: #1abd55; @@ -118,3 +131,8 @@ section[r4] summary { background: #5e1ae6; color: white; } +details[open] summary { + position: sticky; + top: 0; + margin-bottom: 1rem; +} diff --git a/src/main.js b/src/main.js index 0dee7ca..83420b8 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,6 @@ import 'https://cdn.jsdelivr.net/npm/@radio4000/components/dist/r4.js' import 'https://cdn.jsdelivr.net/gh/oskarrough/rough-spinner/rough-spinner.js' +import '@github/tab-container-element' import SpotifyToYoutube from './spotify-to-youtube.js' import TextToYoutube from './text-to-youtube.js' diff --git a/src/tabs.css b/src/tabs.css new file mode 100644 index 0000000..2ff7bea --- /dev/null +++ b/src/tabs.css @@ -0,0 +1,83 @@ +tab-container { + /* width: 100%; */ + --tab-hover-color: orange; + --tab-selected-color: green; + --tab-border-color: hsl(219, 1%, 72%); + --tab-background-color: hsl(220, 20%, 94%); + --tab-selected-background-color: hsl(220, 43%, 99%); + --tabpanel-background-color: hsl(220, 43%, 99%); + --tabpanel-focus-border-color: hsl(20, 96%, 48%); +} + +tab-container > [role="tablist"][aria-orientation="vertical"] { + display: flex; + flex-direction: column; +} +tab-container:has([aria-orientation="vertical"]) { + display: flex; + flex-direction: row; +} +tab-container:has([aria-orientation="vertical"]) [role="tabpanel"] { + flex: 1; +} + +[role="tab"] { + position: relative; + margin: 0; + padding: 0.3em 0.5em 0.4em; + border: 1px solid var(--tab-border-color); + border-radius: 0.2em 0.2em 0 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + background: var(--tab-background-color); +} + +[role="tab"][aria-selected="true"] { + border-radius: 0; + background: var(--tab-selected-background-color); + outline: 0; +} + +[role="tab"][aria-selected="true"]::after { + position: absolute; + z-index: 3; + bottom: -1px; + right: 0; + left: 0; + height: 0.3em; + background: var(--tab-selected-background-color); + content: ""; +} + +[role="tab"]:hover, +[role="tab"]:focus, +[role="tab"]:active { + outline: 0; + border-radius: 0; + color: inherit; +} + +[role="tabpanel"] { + position: relative; + z-index: 2; + padding: 0.5em 0.5em 0; + border: 1px solid var(--tab-border-color); + border-radius: 0 0.2em 0.2em 0.2em; + background: var(--tabpanel-background-color); +} + +[role="tabpanel"]:focus { + border-color: var(--tabpanel-focus-border-color); + outline: 0; +} + +[role="tabpanel"]:focus::after { + position: absolute; + bottom: 0; + right: -1px; + left: -1px; + border-bottom: 3px solid var(--tabpanel-focus-border-color); + border-radius: 0 0 0.2em 0.2em; + content: ""; +} diff --git a/src/text-to-youtube.js b/src/text-to-youtube.js index 434dbbe..b002e32 100644 --- a/src/text-to-youtube.js +++ b/src/text-to-youtube.js @@ -89,16 +89,16 @@ export default class TextToYoutube extends LitElement { return html`
- Step 1. Write the tracks you want + Step 1. Enter your playlist as text
-
-
- +
${this.error ? html`

Error! Could not fetch this playlist. Is it public?
${this.error}

` @@ -120,9 +120,8 @@ burger ink elvism ${this.inputLines?.map( (track, i) => html`
  • + ${i + 1}. ${track.title} - ${i}. ${track.artist} - ${track.title} - link
      ${track.searchResults.map((video, i) => searchResultTemplate(track, i, video, this.youtubeResults), @@ -154,16 +153,16 @@ burger ink elvism `, )}
    -

    Copy paste as CSV

    +

    CSV

    -

    Copy paste the YouTube IDs

    +

    YouTube IDs

    -

    Copy paste the YouTube URLs

    +

    YouTube URLs