From 7b2b6f4ddf80c6d1fa2e9b654ac7d9755860e171 Mon Sep 17 00:00:00 2001
From: kek7198 <grayboy99@protonmail.com>
Date: Sat, 4 Dec 2021 10:38:17 -0600
Subject: [PATCH] fix

---
 files/templates/submit.html | 246 ++++++++++++++++--------------------
 1 file changed, 106 insertions(+), 140 deletions(-)

diff --git a/files/templates/submit.html b/files/templates/submit.html
index a3e47c923..e4f84d0e2 100644
--- a/files/templates/submit.html
+++ b/files/templates/submit.html
@@ -28,157 +28,123 @@
 
 	<form id="submitform" action="/submit" method="post" enctype="multipart/form-data" class="flex flex-col space-y-6">
 
-		<div class="container">
+		<!-- User form key (required) -->
+		<input type="hidden" name="formkey" value="{{v.formkey}}">
 
-			<div class="row justify-content-center mb-5">
-
-				<div class="col p-3 py-md-0">
-
-					
-
-					<div class="body">
-
-						<input type="hidden" name="formkey" value="{{v.formkey}}">
-
-						<!-- <label for="title">Post Title</label>
-
-
-						<input class="form-control" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="Required" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()">
-
-						<label class="btn btn-secondary format d-inline-block m-0" for="emoji-reply-btn-2">
-							<div id="emoji-reply-btn-2" onclick="loadEmojis('post-title')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
-						</label> -->
-
-						<!-- Post title field section -->
-						<div class="flex flex-col">
-							<label for="title" class="font-bold text-lg font-heading leading-normal mb-2">Title</label>
-							<div>
-								<!-- Input field -->
-								<input class="form-input" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="rdrama.net is one of the most malevolent, cruel, coldhearted online communities you'll ever find" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()">
-								<!-- Add emoji button -->
-								<button type="button" class="mt-1 text-sm text-gray-500 hover:text-gray-600" onclick="loadEmojis('post-title')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji">
-									Add emoji
-								</button>
-							</div>
-						</div>
-
-						<div id="urlblock">
-							<label for="URL" class="mt-3">URL</label>
-							<input class="form-control" id="post-URL" aria-describedby="URLHelp" name="url" placeholder="Optional if you have text." value="{{request.values.get('url','')}}" required oninput="checkForRequired();autoSuggestTitle();hide_image()">
-							<small class="form-text text-muted">To post an image, use a direct image link such as i.imgur.com</small>
-						</div>
-						<div id="image-upload-block">
-							<div><label class="mt-3">Attachment Upload</label></div>
-
-							<img loading="lazy" id="image-preview" class="w-100">
-							<label class="btn btn-secondary m-0" for="file-upload">
-								<div id="filename-show">Select File</div>
-								<input id="file-upload" type="file" name="file" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} accept="image/*, video/*" hidden>
-							</label>
-							<small class="form-text text-muted">Optional if you have text.</small>
-							<small class="form-text text-muted">You can upload images or videos up to 1 minute long.</small>
-						</div>
-					</div>
-
-					<label for="body" class="mt-3">Text<i class="fas fa-info-circle text-gray-400 ml-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Uses markdown. Limited to 10000 characters."></i></label>
-
-					<div>
-						<textarea form="submitform" id="post-text" class="form-control rounded" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown();charLimit('post-text','character-count-submit-text-form');checkForRequired()" {% if v.longpost %}minlength="280"{% endif %} maxlength="{% if v.bird %}140{% else %}10000{% endif %}" required></textarea>
-
-						<div class="btn btn-secondary fl-r mt-3" onclick="document.getElementById('preview').classList.toggle('d-none');">
-							Toggle preview
-						</div>
-
-						<div class="text-small font-weight-bold mt-1" id="character-count-submit-text-form" style="right: 1rem; bottom: 0.5rem; z-index: 3;"></div>
-
-						<div id="preview" class="my-3"></div>
-					</div>
-
-					<p></p>
-					<small class="btn btn-secondary format d-inline-block m-0">
-						<i class="fas fa-bold" aria-hidden="true" onclick="makeBold('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Bold"></i>
-					</small>
-					&nbsp; 
-					<small class="btn btn-secondary format d-inline-block m-0">
-						<i class="fas fa-italic" aria-hidden="true" onclick="makeItalics('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Italicize"></i>
-					</small>
-					&nbsp; 
-					<small class="btn btn-secondary format d-inline-block m-0">
-						<i class="fas fa-quote-right" aria-hidden="true" onclick="makeQuote('post-text')" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Quote"></i>
-					</small>
-					&nbsp;
-					<small class="btn btn-secondary format d-inline-block m-0"><span class="font-weight-bolder text-uppercase" aria-hidden="true" onclick="getGif();commentForm('post-text')" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom"  data-bs-original-title="Add GIF">GIF</span></small>
-					&nbsp;
-					<label class="btn btn-secondary format d-inline-block m-0" for="emoji-reply-btn">
-						<div id="emoji-reply-btn" onclick="loadEmojis('post-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-original-title="Add Emoji"><i class="fas fa-smile-beam"></i></div>
-					</label>
-
-					<label class="format btn btn-secondary m-0 ml-1 {% if v %}d-inline-block{% else %}d-none{% endif %}" for="file-upload-submit">
-						<div id="filename-show-submit"><i class="far fa-image"></i></div>
-						<input id="file-upload-submit" type="file" name="file2" accept="image/*" {% if request.headers.get('cf-ipcountry')=="T1" %}disabled{% endif %} onchange="document.getElementById('filename-show-submit').innerHTML='image';" hidden>
-					</label>		
-
-					<pre></pre>
-					<div class="form-text text-small"><a href="/formatting" target="_blank">Formatting help</a></div>
-					<pre></pre>
-
-					<div class="custom-control custom-checkbox">
-						<input type="checkbox" class="custom-control-input" id="nsfwCheck" name="over_18">
-						<label class="custom-control-label" for="nsfwCheck">+18</label>
-					</div>
-					<div class="custom-control custom-checkbox">
-						<input type="checkbox" class="custom-control-input" id="privateCheck" name="private">
-						<label class="custom-control-label" for="privateCheck">Draft</label>
-					</div>
-
-					{% if v.paid_dues %}
-					<div class="custom-control custom-checkbox">
-						<input type="checkbox" class="custom-control-input" id="clubCheck" name="club">
-						<label class="custom-control-label" for="clubCheck">{{cc}} thread</label>
-					</div>
-					{% endif %}
-					<pre>
-
-
-
-
-
-
-					</pre>
-				</div>
-
-			</div>
-
-		</div>
-
-		<div class="container">
-			<div class="row fixed-bottom bg-white border-top p-3" id="" style="z-index: 100; bottom: 0px; transition: bottom 220ms cubic-bezier(0, 0, 0.2, 1) 0s;">
-				<div class="col">
-					<a href="/" class="btn btn-secondary">Cancel</a>
-				</div>
-				<div class="col text-right">
-					{% if error %}<span class="text-danger mr-2">{{error}}</span>{% endif %}
-					<button class="btn btn-outline-purple" id="create_button" type="submit" disabled>Post</button>
-				</div>
+		<!-- Post title field section -->
+		<div class="flex flex-col">
+			<label for="post-title" class="font-bold text-lg font-heading leading-normal mb-2">Title</label>
+			<div>
+				<!-- Input field -->
+				<input class="rounded shadow-inner w-full px-2 py-1.5 text-gray-700 bg-gray-900 border border-gray-900 focus:bg-white focus:text-gray-900" id="post-title" aria-describedby="titleHelpRegister" type="text" name="title" placeholder="rdrama.net is one of the most malevolent, cruel, coldhearted online communities you'll ever find" value="{{title}}" minlength="1" maxlength="500" required oninput="checkForRequired()">
+				<!-- Add emoji button -->
+				<button type="button" class="mt-1 text-sm text-gray-500 hover:text-gray-200" onclick="loadEmojis('post-title')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji">
+					Add emoji
+				</button>
 			</div>
 		</div>
 
+		<!-- Link field section -->
+		<div id="urlblock" class="flex flex-col">
+			<label for="post-URL" class="font-bold text-lg font-heading leading-normal mb-2">
+				Link
+				<span class="italic text-sm font-normal text-gray-500">(optional if you have text)</span>
+			</label>
+			<div>
+				<!-- Input field -->
+				<input class="rounded shadow-inner w-full px-2 py-1.5 text-gray-700 bg-gray-900 border border-gray-900 focus:bg-white focus:text-gray-900" id="post-URL" aria-describedby="URLHelp" name="url" placeholder="https://www.youtube.com/watch?v=iik25wqIuFo" value="{{request.values.get('url','')}}" required oninput="checkForRequired();autoSuggestTitle();hide_image()">
+				<small class="block mt-1 text-gray-400">
+					To post an image, use a direct image link such as i.imgur.com
+				</small>
+			</div>
+		</div>
+
+		<!-- Attachment field section -->
+		<div class="flex flex-col">
+			<label for="file-upload" class="font-bold text-lg font-heading leading-normal mb-2">
+				Image or Video
+				<span class="italic text-sm font-normal text-gray-500">(optional)</span>
+			</label>
+			<div>
+				<!-- Input field -->
+				<label class="inline-block px-4 py-2 bg-gradient-to-t from-gray-700 to-gray-600 hover:from-red-600 hover:to-red-700 active:shadow-inner border border-gray-800 rounded-lg text-shadow-t shadow-inset-t-white-10 text-sm font-bold text-gray-200 focus:text-gray-400 focus:outline-none" for="file-upload">
+					<i class="fas fa-file fa-fw fa-sm mr-1"></i>
+					<span id="filename-show">Select file</span>
+					<input id="file-upload" type="file" name="file" accept="image/*, video/*" hidden>
+				</label>
+				<small class="block mt-1 text-gray-400">
+					You may upload videos up to 1 minute long.
+				</small>
+			</div>
+			<!-- Image preview QoL-->
+			<!-- <img loading="lazy" id="image-preview" class="shadow-md p-1 bg-white border border-gray-900 w-72"/> -->
+			<div id="image-upload-block">
+				<img loading="lazy" id="image-preview" class="shadow-md w-72"/>
+			</div>
+		</div>
+
+		<!-- Link field section -->
+		<div class="flex flex-col">
+			<label for="body" class="font-bold text-lg font-heading leading-normal mb-2">
+				Post
+				<span class="italic text-sm font-normal text-gray-500">(optional if you have a link)</span>
+			</label>
+			<!-- Input field -->
+			<div class="relative rounded-lg border border-gray-900 bg-gray-900 shadow-inner w-full">
+				<textarea form="submitform" id="post-text" class="w-full rounded-t-md p-3 text-gray-200 focus:text-gray-900 bg-transparent focus:bg-white shadow-inner resize-y focus:outline-none" aria-label="With textarea" placeholder="Optional if you have a link or an image." rows="7" name="body" oninput="markdown();charLimit('post-text','character-count-submit-text-form');checkForRequired()" maxlength="10000" required></textarea>
+				<ul class="-mt-1 flex space-x-4 px-3 py-2 border-t border-dashed border-gray-800">
+					<li>
+						<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeBold('post-text')">
+							<i class="fas fa-bold fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Bold"></i>
+						</button>
+					</li>
+					<li>
+						<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeItalics('post-text')">
+							<i class="fas fa-italic fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Italicize"></i>
+						</button>
+					</li>
+					<li>
+						<button type="button" class="text-gray-500 hover:text-gray-400" onclick="makeQuote('post-text')">
+							<i class="fas fa-quote-right fa-fw fa-sm" data-bs-toggle="tooltip" data-bs-placement="bottom"  title="" data-bs-original-title="Quote"></i>
+						</button>
+					</li>
+					<li>
+						<button type="button" class="text-gray-500 hover:text-gray-400" onclick="commentForm('post-text');getGif()">
+							<span class="font-bold text-sm text-uppercase" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#gifModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add GIF">GIF</span>
+						</button>
+					</li>
+					<li>
+						<button type="button" class="text-gray-500 hover:text-gray-400" onclick="loadEmojis('post-text')" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#emojiModal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" data-bs-original-title="Add Emoji"><i class="fas fa-smile-beam fa-fw fa-sm"></i>
+						</button>
+					</li>
+				</ul>
+				<span class="absolute right-3 bottom-3 z-10 text-xs font-medium text-gray-500" id="character-count-submit-text-form"></span>
+			</div>
+			<a href="/formatting" target="_blank" class="block mt-2 text-xs text-gray-500 hover:text-gray-400">Formatting help</a>
+		</div>
+
+		<div class="btn btn-secondary" onclick="document.getElementById('preview').classList.toggle('d-none');" style="float: right;">
+			Toggle preview
+		</div>
+		<div id="preview" class="my-3"></div>
+
+		{% if error %}<span class="text-danger mr-2">{{error}}</span>{% endif %}
+		<button class="btn btn-outline-purple" id="create_button" type="submit" disabled>Post</button>
 	</form>
 
 </div>
 {% endblock %}
 
+{% block sidebar %}
+	{% include '/sidebars/SubmitSidebar.html' %}
+{% endblock %}
+
 {% block modals %}
-
-{% include "emoji_modal.html" %}
-{% include "gif_modal.html" %}
-
+	{% include "emoji_modal.html" %}
+	{% include "gif_modal.html" %}
 {% endblock %}
 
 {% block scripts %}
-
-<script defer src="https://cdn.jsdelivr.net/npm/marked@3.0.8/lib/marked.min.js"></script>
-
-<script defer src="/assets/js/submit.js?v=72"></script>
-
+	<script defer src="https://cdn.jsdelivr.net/npm/marked@3.0.8/lib/marked.min.js"></script>
+	<script defer src="/assets/js/submit.js?v=72"></script>
 {% endblock %}