commit e6faaf8419f4e43fc92f307fee9b647659b9055f
parent fdb7d28880a0f89e781b4cca220531d2c8f411fb
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Mon, 27 Apr 2020 12:31:36 -0700
Improve style and enforce conventions.
Diffstat:
2 files changed, 47 insertions(+), 14 deletions(-)
diff --git a/Songs2Slides/static/index.css b/Songs2Slides/static/index.css
@@ -15,13 +15,33 @@ button {
#title {
font-size: 25px;
font-weight: bold;
+ margin-bottom: 20px;
+ display: inline-block;
}
/******** Songs styles ********/
+#songsButtons {
+ margin-bottom: 15px;
+}
+
+.song {
+ width: fit-content;
+ width: -moz-fit-content;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ padding: 8px;
+ background: #E0E0E0;
+ border-radius: 5px;
+}
+
.songRemove {
cursor: pointer;
+ margin-left: 3px;
+ margin-right: 3px;
}
@@ -34,11 +54,22 @@ button {
text-align: left;
}
+#lyricsContainer p {
+ margin-top: 0px;
+}
+
#lyrics {
width: 100%;
resize: none;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
}
-#lyricsBack {
+#submitLyricsButton {
float: right;
+}
+
+#lyricsBack {
+ float: left;
}
\ No newline at end of file
diff --git a/Songs2Slides/templates/index.html b/Songs2Slides/templates/index.html
@@ -9,14 +9,13 @@
</head>
<body onload="AddSong()">
<label id="title">Songs2Slides</label>
- <br/>
- <label>Create a lyrics powerpoints from a list of songs.</label>
- <br/><br/>
<div id="songs">
- <button onclick="AddSong();">Add song</button>
- <button onclick="SubmitSongs();">Create Powerpoint</button>
- <button onclick="ReviewLyrics();">Review Lyrics</button><br/><br/>
+ <div id="songsButtons">
+ <button onclick="AddSong();">Add song</button>
+ <button onclick="SubmitSongs();">Create Powerpoint</button>
+ <button onclick="ReviewLyrics();">Review Lyrics</button>
+ </div>
<template id="songTemplate">
<div class="song">
@@ -28,17 +27,20 @@
</div>
<div id="lyricsContainer" hidden>
- 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.<br/><br/>
+ <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>
- <textarea rows="10" id="lyrics">Loading lyrics...</textarea><br/>
- <button id="submitLyricsButton" onclick="SubmitLyrics();">Create Powerpoint</button>
- <a id="lyricsBack" href="javascript:Back()">Back</a>
+ <textarea rows="15" id="lyrics">Loading lyrics...</textarea>
+
+ <div>
+ <a id="lyricsBack" href="javascript:Back()">Back</a>
+ <button id="submitLyricsButton" onclick="SubmitLyrics();">Create Powerpoint</button>
+ </div>
</div>
<div id="thankyou" hidden>
- Thankyou for using Songs2Slides<br/><br/>
- Click <a href="javascript:Reset()">here</a> to create another PowerPoint.
+ <p>Thankyou for using Songs2Slides</p>
+ <p>Click <a href="javascript:Reset()">here</a> to create another PowerPoint.</p>
</div>
</body>
</html>
\ No newline at end of file
