commit 64b894a78cbdad2299f35825da224e196bc1afeb
parent 025c3e78ca4338a59078db3198b9dac882542241
Author: Asher Morgan <59518073+ashermorgan@users.noreply.github.com>
Date: Sun, 7 Apr 2024 14:46:54 -0700
Improve appearance
Diffstat:
11 files changed, 53 insertions(+), 22 deletions(-)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -26,8 +26,8 @@
</td>
<td>
<button class="icon" type="button" title="Remove">
- <img src="{{ url_for('static', filename='trash.svg') }}"
- alt="Remove icon"/>
+ <img src="{{ url_for('static', filename='trash.svg') }}"
+ alt="Remove icon"/>
</button>
</td>
</tr>
@@ -62,10 +62,16 @@
</td>
</tr>
</tbody>
+ <tfoot>
+ <tr>
+ <td colspan="4">
+ <input type="button" value="Add song" onclick="add_song()"/>
+ </td>
+ </tr>
+ </tfoot>
</table>
<div id="actions">
- <input type="button" value="Add song" onclick="add_song()"/>
<button type="submit">
Next
</button>
diff --git 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 %}
<form id="step-2" method="POST" action="{{ url_for('.slides') }}">
- <h1>Step 2: Preview Slides</h1>
+ <h1>Step 2: Review Lyrics</h1>
<p>
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
@@ -5,6 +5,14 @@
{% endblock head %}
{% block main %}
-<p>Create lyric slide shows easily and quickly</p>
-<a href="{{ url_for('.create_step_1') }} ">Get Started</a>
+<h1>Simplify lyric slideshow creation</h1>
+<p>
+ Songs2Slides is a easy-to-use tool that automatically finds song lyrics and
+ creates beautiful lyric slideshows.
+</p>
+<p>
+ <a class="button primary" href="{{ url_for('.create_step_1') }} ">
+ Create a Slideshow
+ </a>
+</p>
{% endblock main %}
diff --git a/songs2slides/templates/layout.html b/songs2slides/templates/layout.html
@@ -1,8 +1,10 @@
<!DOCTYPE html>
<html>
<head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
<title>SongsSlides</title>
- <meta name="description" content="Automatically creates lyric slide shows from a list of songs">
+ <meta name="description" content="Automatically creates lyric slideshows from a list of songs">
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icon-32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icon-32.png') }}">
<link rel="apple-touch-icon" href="{{ url_for('static', filename='icon-180.png') }}">
diff --git a/songs2slides/templates/post-download.html b/songs2slides/templates/post-download.html
@@ -9,6 +9,6 @@
Thank you for using Songs2Slides
</p>
<p>
- <a href="{{ url_for('.create_step_1') }}">Create another slide show</a>
+ <a href="{{ url_for('.create_step_1') }}">Create another slideshow</a>
</p>
{% endblock main %}
