From 64b894a78cbdad2299f35825da224e196bc1afeb Mon Sep 17 00:00:00 2001 From: Asher Morgan <59518073+ashermorgan@users.noreply.github.com> Date: Sun, 7 Apr 2024 14:46:54 -0700 Subject: [PATCH] Improve appearance --- README.md | 2 +- songs2slides/static/create-step-1.js | 2 +- songs2slides/static/create.css | 8 ++++++-- songs2slides/static/global.css | 18 ++++++++++++------ songs2slides/static/home.css | 10 +++++++--- songs2slides/static/post-download.css | 1 + songs2slides/templates/create-step-1.html | 12 +++++++++--- songs2slides/templates/create-step-2.html | 4 ++-- songs2slides/templates/home.html | 12 ++++++++++-- songs2slides/templates/layout.html | 4 +++- songs2slides/templates/post-download.html | 2 +- 11 files changed, 53 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 2176269..b4204e2 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ # Songs2Slides -Creates a lyrics slide show from a list of songs +Creates a lyrics slideshow from a list of songs ## Setup 1. Install python dependencies diff --git a/songs2slides/static/create-step-1.js b/songs2slides/static/create-step-1.js index b971aff..44105d5 100644 --- a/songs2slides/static/create-step-1.js +++ b/songs2slides/static/create-step-1.js @@ -23,7 +23,7 @@ function remove_song(n) { function renumber_songs() { const songs = document.getElementsByTagName('tr') - for (let i = 1; i < songs.length; i++) { + for (let i = 1; i < songs.length - 1; i++) { songs[i].children[0].textContent = `${i}.` songs[i].children[1].children[0].name = `title-${i}` songs[i].children[2].children[0].name = `artist-${i}` diff --git a/songs2slides/static/create.css b/songs2slides/static/create.css index 7303f01..78880e7 100644 --- a/songs2slides/static/create.css +++ b/songs2slides/static/create.css @@ -11,12 +11,16 @@ table { width: 100%; border-collapse: collapse; } -table input { +tbody input { width: 100%; } -table td { +tbody td { padding: 0.2rem; } +tfoot td { + padding-top: 1rem; + text-align: center; +} .loading-modal { position: fixed; diff --git a/songs2slides/static/global.css b/songs2slides/static/global.css index 43db65b..82ff75c 100644 --- a/songs2slides/static/global.css +++ b/songs2slides/static/global.css @@ -45,6 +45,12 @@ p { padding: 0.3rem; } +/* link buttons */ +a.button { + text-decoration: none; + display: inline-block; +} + /* padding */ header { padding: 0.75rem; @@ -52,7 +58,7 @@ header { main { padding: 1rem; } -button, input { +button, a.button, input { padding: 0.3rem 0.5rem; } textarea { @@ -60,11 +66,11 @@ textarea { } /* borders */ -button, input, textarea { +button, a.button, input, textarea { border: 1px solid; border-radius: 5px; } -button[type=submit] { +button[type=submit], a.button.primary { font-weight: bold; border-color: var(--foreground); } @@ -81,17 +87,17 @@ header a { color: #000000; text-decoration: none; } -input, button, textarea { +input, button, a.button, textarea { color: var(--foreground); border-color: var(--background5); background-color: var(--background2); } @media (hover: hover) { - button:hover, input[type=button]:hover { + button:hover, input[type=button]:hover, a.button:hover { background-color: var(--background3); } } -button:active, input[type=button]:active { +button:active, input[type=button]:active, a.button:active { background-color: var(--background4); } a { diff --git a/songs2slides/static/home.css b/songs2slides/static/home.css index 2f15de9..beeca5f 100644 --- a/songs2slides/static/home.css +++ b/songs2slides/static/home.css @@ -1,8 +1,12 @@ main { text-align: center; - padding: 2rem 0rem; + max-width: 620px; } -p { +h1 { + margin-top: 2rem; + margin-bottom: 0.5rem; font-size: 2rem; - font-weight: bold; +} +a.primary { + padding: 0.5rem 1rem; } diff --git a/songs2slides/static/post-download.css b/songs2slides/static/post-download.css index 7bf8276..56ae676 100644 --- a/songs2slides/static/post-download.css +++ b/songs2slides/static/post-download.css @@ -1,3 +1,4 @@ main { + padding-top: 3rem; text-align: center; } diff --git a/songs2slides/templates/create-step-1.html b/songs2slides/templates/create-step-1.html index 5e8fc0b..e8cf0fb 100644 --- a/songs2slides/templates/create-step-1.html +++ b/songs2slides/templates/create-step-1.html @@ -26,8 +26,8 @@

Step 1: Select Songs

@@ -62,10 +62,16 @@

Step 1: Select Songs

+ + + + + + +
- diff --git a/songs2slides/templates/create-step-2.html b/songs2slides/templates/create-step-2.html index 8c0ad36..0efa46e 100644 --- a/songs2slides/templates/create-step-2.html +++ b/songs2slides/templates/create-step-2.html @@ -6,13 +6,13 @@ {% endblock head %} {% set format_hint = -'One blank line represents the start of a new slide and three blank ' + +'A blank line represents the start of a new slide and three blank ' + 'lines represent an empty slide.' %} {% block main %}
-

Step 2: Preview Slides

+

Step 2: Review Lyrics

Review the parsed song lyrics below and make any necessary corrections. {{ format_hint }} diff --git a/songs2slides/templates/home.html b/songs2slides/templates/home.html index 17d9e1e..e1856e4 100644 --- a/songs2slides/templates/home.html +++ b/songs2slides/templates/home.html @@ -5,6 +5,14 @@ {% endblock head %} {% block main %} -

Create lyric slide shows easily and quickly

-Get Started +

Simplify lyric slideshow creation

+

+ Songs2Slides is a easy-to-use tool that automatically finds song lyrics and + creates beautiful lyric slideshows. +

+

+ + Create a Slideshow + +

{% endblock main %} diff --git a/songs2slides/templates/layout.html b/songs2slides/templates/layout.html index d596b6d..619ef46 100644 --- a/songs2slides/templates/layout.html +++ b/songs2slides/templates/layout.html @@ -1,8 +1,10 @@ + + SongsSlides - + diff --git a/songs2slides/templates/post-download.html b/songs2slides/templates/post-download.html index 157f8f3..6aca1c7 100644 --- a/songs2slides/templates/post-download.html +++ b/songs2slides/templates/post-download.html @@ -9,6 +9,6 @@ Thank you for using Songs2Slides

- Create another slide show + Create another slideshow

{% endblock main %}