feat: improved layout

seleb · Jul 3, 2023 · dea4691 · dea4691
1 parent d8f2488
commit dea4691
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 25 deletions.
diff --git a/src/index.html b/src/index.html
@@ -40,11 +40,6 @@ <h2>schedule new post</h2>
 			<input required id="token" name="token" autocomplete="current-password" type="password" />
 		</label>
 
-		<label>
-			scheduled at
-			<input id="scheduledAt" name="scheduledAt" type="datetime-local" />
-		</label>
-
 		<label>
 			content warning
 			<textarea id="cw" name="cw" autocomplete="off"></textarea>
@@ -55,25 +50,35 @@ <h2>schedule new post</h2>
 			<textarea id="post" name="post" autocomplete="off"></textarea>
 		</label>
 
-		<label for="media">attachments</label>
-		<ol id="listMedia"></ol>
-		<input id="media" name="media" type="file" accept="image/*, video/*, audio/*" multiple />
+		<label>
+			scheduled at
+			<input id="scheduledAt" name="scheduledAt" type="datetime-local" />
+		</label>
+
+		<div class="wide">
+			<label for="media">attachments</label>
+			<ol id="listMedia"></ol>
+			<input id="media" name="media" type="file" accept="image/*, video/*, audio/*" multiple />
+		</div>
 
 
 		<input type="submit" name="submit" value="schedule new post" />
 		<input type="submit" name="submit" value="refresh posts" />
 	</form>
 
+	<hr />
+
 	<h2>scheduled posts</h2>
 	<ul id="scheduledPosts">
 		<li>not loaded</li>
 	</ul>
 
 	<footer>
-		<div>mastodon-post-scheduler v<span id="version">?</span></div>
-		<div>made by <a href="https://seans.site" target="_blank" rel="noopener noreferrer">sean</a></div>
-		<div><a href="https://github.com/seleb/mastodon-post-scheduler" target="_blank"
-				rel="noopener noreferrer">source</a></div>
+		<span>mastodon-post-scheduler <a href="https://github.com/seleb/mastodon-post-scheduler/blob/main/CHANGELOG.md"
+				target="_blank" rel="noopener noreferrer">v<span id="version">?</span></a></span>
+		<span><a href="https://github.com/seleb/mastodon-post-scheduler" target="_blank"
+				rel="noopener noreferrer">source</a></span>
+		<span>made by <a href="https://seans.site" target="_blank" rel="noopener noreferrer">sean</a></span>
 	</footer>
 
 	<script type="module" src="./index.js"></script>

diff --git a/src/index.js b/src/index.js
@@ -149,7 +149,7 @@ const elFile = document.querySelector('#media');
 elFile.addEventListener('change', event => {
 	Array.from(event.currentTarget.files).forEach(i => {
 		const elLi = document.createElement('li');
-		elLi.innerHTML = `${i.name} (${i.type}) <div></div> <label>description <textarea></textarea></label> <button type="button">remove</button>`;
+		elLi.innerHTML = `<span>${i.name} (${i.type})</span> <div></div> <label>description <textarea></textarea></label> <button type="button">remove</button>`;
 		elLi.file = i;
 		elLi.querySelector('button').addEventListener('click', () => {
 			elLi.remove();

diff --git a/src/style.scss b/src/style.scss
@@ -24,6 +24,15 @@ body {
 	margin: 0;
 	padding: 1rem;
 	background-color: var(--light-gray);
+	max-width: 40rem;
+	margin-inline: auto;
+}
+
+button,
+input[type="submit"],
+input[type="file"],
+label {
+	cursor: pointer;
 }
 
 p,
@@ -47,7 +56,9 @@ div#preloader {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	position: absolute;
+	position: fixed;
+	top: 0;
+	left: 0;
 	width: 100vw;
 	height: 100vh;
 	flex-direction: column;
@@ -63,13 +74,25 @@ footer {
 }
 
 form {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+
+	@media screen and (min-width: 30rem) {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+	}
+
 	font-weight: 300;
 
+	> .wide {
+		grid-column: span 2;
+	}
+
 	label {
 		display: block;
 		margin: 0;
 		line-height: 2;
-		margin-top: 0.5rem;
 
 		input,
 		textarea {
@@ -79,6 +102,7 @@ form {
 			min-height: 2em;
 			min-width: 2em;
 			max-width: 100%;
+			width: 100%;
 			padding: 0.5rem;
 			font-size: 1em;
 			font-family: monospace;
@@ -93,20 +117,121 @@ form {
 	}
 }
 
-#listMedia,
+#listMedia:empty {
+	display: none;
+}
+
+#listMedia {
+	padding: 0;
+	margin: 0;
+
+	> li {
+		display: grid;
+		grid-template-areas: 
+			"preview title btn"
+			"preview description btn";
+		grid-template-columns: 2rem 1fr auto;
+		gap: 0 0.5rem;
+		margin-bottom: 0.5rem;
+
+		> * {
+			min-width: 0;
+		}
+
+		span {
+			grid-area: title;
+		}
+
+		img,video,audio {
+			grid-area: preview;
+			display: block;
+			width: 100%;
+			height: 100%;
+			object-fit: contain;
+			object-position: center top;
+		}
+
+		label {
+			grid-area: description;
+		}
+
+		button {
+			grid-area: btn;
+		}
+	}
+}
+
 #scheduledPosts {
-	img,
-	video {
-		display: block;
-		width: 2rem;
-		height: 2rem;
-		object-fit: contain;
-		object-position: center;
+	padding: 0;
+	margin: 0;
+
+	> li {
+		display: grid;
+		grid-template-areas: 
+			"time btn"
+			"post btn"
+			"media btn";
+		grid-template-columns: 1fr auto;
+		gap: 0 0.5rem;
+		margin-bottom: 0.5rem;
+		border-bottom: solid 1px var(--dark-glass);
+
+		> * {
+			min-width: 0;
+		}
+
+		> time {
+			grid-area: time;
+			font-size: 0.9em;
+		}
+
+		> div,
+		> details {
+			grid-area: post;
+		}
+
+		> ul {
+			margin: 0;
+			padding: 0;
+			list-style: none;
+			grid-area: media;
+			display: flex;
+			flex-wrap: wrap;
+			gap: 1px;
+
+			> * {
+				flex: 1;
+			}
+
+			img,video,audio {
+				display: block;
+				width: 100%;
+				height: 100%;
+				max-width: 4rem;
+				max-height: 4rem;
+				object-fit: contain;
+				object-position: center top;
+			}
+		}
+
+		label {
+			grid-area: description;
+		}
+
+		button {
+			grid-area: btn;
+		}
 	}
 }
 
 footer {
-	p {
-		font-size: 0.75em;
+	font-size: 0.9em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	>*:not(:first-child)::before {
+		content: '•';
+		margin-inline: 0.5rem;
 	}
 }