bootstrap improvements, fixes #1392

- remove unused styles (no IDs called preview or comments)
- replace margins & paddings with bootstrap utility classes
- apply min body height to placeholder, plaintext & prettymessage, to move footer to end of viewport

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 1.7.5 (not yet released)
 * ADDED: Allow non persistent SQL connections, if configured (#1394)
+* CHANGED: Various tweaks of the `bootstrap` & `bootstrap5` templates (#1392)
 * CHANGED: Simpler PostgreSQL table lookup query (#1361)
 * CHANGED: SRI hashes are now configurable, no longer hardcoded in templates (#1365)
 * CHANGED: Upgrading libraries to: DOMpurify 3.1.6

css/bootstrap/privatebin.css

@@ -87,8 +87,8 @@ body.loading {
 	word-wrap: break-word;
 }
 
-#preview {
-	margin-bottom: 10px;
+#message, #placeholder, #plaintext, #prettymessage {
+	height: 70vh;
 }
 
 #message, .replymessage {
@@ -100,10 +100,6 @@ body.loading {
 	margin: 5px 0;
 }
 
-#comments, #comments button {
-	margin-bottom: 10px;
-}
-
 .comment {
 	border-left: 1px solid #ccc;
 	padding: 5px 0 5px 10px;

css/bootstrap5/privatebin.css

@@ -32,11 +32,7 @@
 	word-wrap: break-word;
 }
 
-#preview {
-	margin-bottom: 10px;
-}
-
-#message {
+#message, #placeholder, #plaintext, #prettymessage {
 	height: 70vh;
 }
 
@@ -45,17 +41,8 @@
 	resize: vertical;
 }
 
-#nickname {
-	margin: 5px 0;
-}
-
-#comments, #comments button {
-	margin-bottom: 10px;
-}
-
 .comment {
 	border-left: 1px solid #ccc;
-	padding: 5px 0 5px 10px;
 	transition: background-color 0.75s ease-out;
 }
 

tpl/bootstrap5.php

@@ -467,7 +467,7 @@ if ($DISCUSSION) :
 ?>
 		<div id="serverdata" class="hidden" aria-hidden="true">
 			<div id="templates">
-				<article id="commenttemplate" class="comment">
+				<article id="commenttemplate" class="comment px-2 pb-3">
 					<div class="commentmeta">
 						<span class="nickname">name</span>
 						<span class="commentdate">0000-00-00</span>
@@ -475,11 +475,11 @@ if ($DISCUSSION) :
 					<div class="commentdata">c</div>
 					<button class="btn btn-secondary btn-sm"><?php echo I18n::_('Reply'); ?></button>
 				</article>
-				<p id="commenttailtemplate" class="comment">
+				<p id="commenttailtemplate" class="comment px-2 pb-3">
 					<button class="btn btn-secondary btn-sm"><?php echo I18n::_('Add comment'); ?></button>
 				</p>
 				<div id="replytemplate" class="reply hidden">
-					<input type="text" id="nickname" class="form-control" title="<?php echo I18n::_('Optional nickname…'); ?>" placeholder="<?php echo I18n::_('Optional nickname…'); ?>" />
+					<input type="text" id="nickname" class="form-control my-2" title="<?php echo I18n::_('Optional nickname…'); ?>" placeholder="<?php echo I18n::_('Optional nickname…'); ?>" />
 					<textarea id="replymessage" class="replymessage form-control" cols="80" rows="7"></textarea><br />
 					<div id="replystatus" role="alert" class="statusmessage hidden alert">
 						<svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#info-circle" /></svg>