commit eaeea9f0d2121012ec4815818883c055b8605c2d
parent 42219c50af76449f14724891799a1e5d68757c1c
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Thu, 14 May 2020 08:52:15 -0700
Improve web interface layout.
Diffstat:
3 files changed, 68 insertions(+), 46 deletions(-)
diff --git a/Songs2Slides/static/index.css b/Songs2Slides/static/index.css
@@ -1,23 +1,16 @@
-/******** Body styles ********/
+/******** Other styles ********/
body {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
touch-action: manipulation;
- margin-bottom: 50px;
}
-#footer {
- position: fixed;
- bottom: 0px;
- padding-bottom: 5px;
- padding-top: 5px;
- width: 100%;
- background-color: #FFFFFF;
+.container {
+ margin: auto;
+ padding: 10px;
+ background-color: #F0F0F0;
}
-
-
-/******** Element styles ********/
button {
height: 25px;
}
@@ -25,8 +18,9 @@ button {
/******** Songs styles ********/
-#songsButtons {
- margin-bottom: 15px;
+#songsContainer {
+ width: fit-content;
+ width: -moz-fit-content;
}
.song {
@@ -37,7 +31,7 @@ button {
margin-top: 10px;
margin-bottom: 10px;
padding: 8px;
- background: #E0E0E0;
+ background: #C0C0C0;
border-radius: 5px;
}
@@ -47,18 +41,41 @@ button {
margin-right: 3px;
}
+#addSong {
+ display: inline-block;
+ padding: 0px;
+ height: 40px;
+ width: 40px;
+ line-height: 40px;
+ font-size: 40px;
+ background-color: #C0C0C0;
+ border: none;
+ border-radius: 50%;
+ cursor: pointer
+}
+
+#songsButtons {
+ margin-top: 15px;
+ height: 25px;
+}
+
+#settingsLink {
+ float: left;
+}
+
+#reviewButton {
+ float: right;
+}
+
/******** Lyrics styles ********/
#lyricsContainer {
- width: 100%;
max-width: 500px;
- margin: auto;
- text-align: left;
}
#lyricsContainer p {
- margin-top: 0px;
+ text-align: left;
}
#lyrics {
@@ -69,12 +86,15 @@ button {
box-sizing: border-box;
}
-#submitLyricsButton {
- float: right;
+#lyricsButtons {
+ margin-top: 15px;
+ text-align: left;
+ height: 25px;
}
-#lyricsBack {
- float: left;
+#submitLyricsButton {
+ float: right;
+ font-size: 15px;
}
@@ -82,11 +102,8 @@ button {
/******** Settings styles ********/
#settings {
max-width: 300px;
- margin: auto;
text-align: left;
line-height: 30px;
- background-color: #F0F0F0;
- padding: 10px;
}
h3:first-child {
diff --git a/Songs2Slides/static/index.js b/Songs2Slides/static/index.js
@@ -21,7 +21,7 @@ function onLoad() {
// Shows settings interface
function showSettings() {
- document.getElementById("songs").hidden = true;
+ document.getElementById("songsContainer").hidden = true;
document.getElementById("lyricsContainer").hidden = true;
document.getElementById("thankyou").hidden = true;
document.getElementById("settings").hidden = false;
@@ -180,7 +180,7 @@ async function SubmitSongs() {
download(await rawResponse.blob());
// Show and hide elements
- document.getElementById("songs").hidden = true;
+ document.getElementById("songsContainer").hidden = true;
document.getElementById("thankyou").hidden = false;
}
@@ -205,7 +205,7 @@ async function ReviewLyrics() {
document.getElementById("lyrics").value = json["lyrics"].join("\n\n")
// Show and hide elements
- document.getElementById("songs").hidden = true;
+ document.getElementById("songsContainer").hidden = true;
document.getElementById("lyricsContainer").hidden = false;
}
@@ -237,7 +237,7 @@ async function SubmitLyrics() {
// Makes the songs div visible
function Back() {
- document.getElementById("songs").hidden = false;
+ document.getElementById("songsContainer").hidden = false;
document.getElementById("lyricsContainer").hidden = true;
document.getElementById("thankyou").hidden = true;
document.getElementById("settings").hidden = true;
diff --git a/Songs2Slides/templates/index.html b/Songs2Slides/templates/index.html
@@ -10,13 +10,9 @@
<body onload="onLoad();">
<h1>Songs2Slides</h1>
- <div id="songs">
- <div id="songsButtons">
- <button onclick="AddSong();">Add song</button>
- <button onclick="SubmitSongs();">Create Powerpoint</button>
- <button onclick="ReviewLyrics();">Review Lyrics</button>
- </div>
-
+ <div id="songsContainer" class="container">
+ <h3>Choose your songs</h3>
+
<template id="songTemplate">
<div class="song">
<input type="text" class="title" placeholder="Song Title"/>
@@ -24,15 +20,28 @@
<a id="remove" class="songRemove">╳</a>
</div>
</template>
+ <div id="songs"></div>
+
+ <div>
+ <span id="addSong" onclick="AddSong();">+</span>
+ </div>
+
+ <div id="songsButtons">
+ <a id="settingsLink" href="javascript:showSettings();">Settings</a>
+ <button id="submitSongsButton" onclick="SubmitSongs();">Create Powerpoint</button>
+ <button id="reviewButton" onclick="ReviewLyrics();">Review Lyrics</button>
+ </div>
</div>
- <div id="lyricsContainer" hidden>
- <p>Review and edit the parsed lyrics below and then click the create PowerPoint button.
- One blank line signifies a new slide and three blank lines signifies a blank slide.</p>
+ <div id="lyricsContainer" class="container" hidden>
+ <h3>Review your PowerPoint</h3>
+
+ <p>Review and edit the parsed lyrics below and then click the create PowerPoint button. One blank
+ line represents the start of a new slide and three blank lines represent a blank slide.</p>
<textarea rows="15" id="lyrics">Loading lyrics...</textarea>
- <div>
+ <div id="lyricsButtons">
<a id="lyricsBack" href="javascript:Back()">Back</a>
<button id="submitLyricsButton" onclick="SubmitLyrics();">Create Powerpoint</button>
</div>
@@ -43,7 +52,7 @@
<p>Click <a href="javascript:Reset()">here</a> to create another PowerPoint.</p>
</div>
- <div id="settings" hidden>
+ <div id="settings" class="container" hidden>
<h3>Parsing:</h3>
<div>
Add title slides:
@@ -137,9 +146,5 @@
<button id="resetButton" onclick="resetSettings();">Reset</button>
</div>
</div>
-
- <div id="footer">
- <a href="javascript:showSettings();">Settings</a>
- </div>
</body>
</html>
\ No newline at end of file
