From 6a714f1a2aebb2b01f82dfc18e2bc2a3f47433a7 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sat, 15 Aug 2020 15:26:58 -0600
Subject: [PATCH] Add a character counter to the title

---
 src/components/modals/PlaylistExport.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/modals/PlaylistExport.vue b/src/components/modals/PlaylistExport.vue
index 7091bd9..d9abd25 100644
--- a/src/components/modals/PlaylistExport.vue
+++ b/src/components/modals/PlaylistExport.vue
@@ -16,6 +16,9 @@
 								type="text"
 								name="Playlist Name"
 							>
+							<span class="char_counter">
+								{{ name.length }}/100
+							</span>
 						</div>
 						<div class="input-row">
 							<textarea-autosize
@@ -185,14 +188,26 @@ div.modal-form {
 	display: flex;
 }
 
+input#playlist-name {
+	padding-right: 80px;
+	font-size: 16px;
+}
+
 .input-row {
 	justify-content: space-evenly;
 	margin-bottom: 10px;
+	position: relative;
 	flex-wrap: wrap;
 	display: flex;
 	width: 100%;
 }
 
+.char_counter {
+	position: absolute;
+	bottom: 15px;
+	right: 15px;
+}
+
 button {
 	margin: 10px;
 }