From 1a51c0973dcd92bed25eaba5d055881e0715c3a3 Mon Sep 17 00:00:00 2001
From: El RIDO <elrido@gmx.net>
Date: Thu, 12 Sep 2024 07:50:52 +0200
Subject: [PATCH 1/3] 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                  |  1 +
 css/bootstrap/privatebin.css  |  8 ++------
 css/bootstrap5/privatebin.css | 15 +--------------
 tpl/bootstrap5.php            |  6 +++---
 4 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 45316680..2455d1f2 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/css/bootstrap/privatebin.css b/css/bootstrap/privatebin.css
index a7c0f188..84b704e8 100644
--- a/css/bootstrap/privatebin.css
+++ b/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;
diff --git a/css/bootstrap5/privatebin.css b/css/bootstrap5/privatebin.css
index b14768a1..9a726bb5 100644
--- a/css/bootstrap5/privatebin.css
+++ b/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;
 }
 
diff --git a/tpl/bootstrap5.php b/tpl/bootstrap5.php
index 298c1684..0f7b5708 100644
--- a/tpl/bootstrap5.php
+++ b/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>

From 57080eb7cc9cdb86d923ee7d55ca1cd3a89a1bd3 Mon Sep 17 00:00:00 2001
From: El RIDO <elrido@gmx.net>
Date: Sat, 14 Sep 2024 08:43:19 +0200
Subject: [PATCH 2/3] use recommended bootstrap sticky footer solutions

---
 CHANGELOG.md                  |  2 +-
 css/bootstrap/privatebin.css  |  2 +-
 css/bootstrap5/privatebin.css |  2 +-
 tpl/bootstrap.php             |  2 +-
 tpl/bootstrap5.php            | 34 +++++++++++++++++-----------------
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2455d1f2..e792c73b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +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: Tweaked page footer 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
diff --git a/css/bootstrap/privatebin.css b/css/bootstrap/privatebin.css
index 84b704e8..c8073323 100644
--- a/css/bootstrap/privatebin.css
+++ b/css/bootstrap/privatebin.css
@@ -87,7 +87,7 @@ body.loading {
 	word-wrap: break-word;
 }
 
-#message, #placeholder, #plaintext, #prettymessage {
+#message {
 	height: 70vh;
 }
 
diff --git a/css/bootstrap5/privatebin.css b/css/bootstrap5/privatebin.css
index 9a726bb5..66621b93 100644
--- a/css/bootstrap5/privatebin.css
+++ b/css/bootstrap5/privatebin.css
@@ -32,7 +32,7 @@
 	word-wrap: break-word;
 }
 
-#message, #placeholder, #plaintext, #prettymessage {
+#message {
 	height: 70vh;
 }
 
diff --git a/tpl/bootstrap.php b/tpl/bootstrap.php
index 901bced7..f0790d38 100644
--- a/tpl/bootstrap.php
+++ b/tpl/bootstrap.php
@@ -592,7 +592,7 @@ endif;
 					<span class="small"><?php echo I18n::_('In case this message never disappears please have a look at <a href="%s">this FAQ for information to troubleshoot</a>.', 'https://github.com/PrivateBin/PrivateBin/wiki/FAQ#why-does-the-loading-message-not-go-away'); ?></span>
 				</div>
 			</section>
-			<footer class="container">
+			<footer class="container navbar-fixed-bottom">
 				<div class="row">
 					<h4 class="col-md-5 col-xs-8"><?php echo I18n::_($NAME); ?> <small>- <?php echo I18n::_('Because ignorance is bliss'); ?></small></h4>
 					<p class="col-md-1 col-xs-4 text-center"><?php echo $VERSION; ?></p>
diff --git a/tpl/bootstrap5.php b/tpl/bootstrap5.php
index 0f7b5708..029c080d 100644
--- a/tpl/bootstrap5.php
+++ b/tpl/bootstrap5.php
@@ -1,7 +1,7 @@
 <?php
 use PrivateBin\I18n;
 ?><!DOCTYPE html>
-<html lang="<?php echo I18n::getLanguage(); ?>"<?php echo I18n::isRtl() ? ' dir="rtl"' : ''; ?>>
+<html lang="<?php echo I18n::getLanguage(); ?>"<?php echo I18n::isRtl() ? ' dir="rtl"' : ''; ?> class="h-100">
 	<head>
 		<meta charset="utf-8" />
 		<meta http-equiv="Content-Security-Policy" content="<?php echo I18n::encode($CSPHEADER); ?>">
@@ -80,7 +80,7 @@ endif;
 		<meta property="og:image:width" content="180" />
 		<meta property="og:image:height" content="180" />
 	</head>
-	<body role="document" data-compression="<?php echo rawurlencode($COMPRESSION); ?>">
+	<body role="document" data-compression="<?php echo rawurlencode($COMPRESSION); ?>" class="d-flex flex-column h-100">
 		<div id="passwordmodal" tabindex="-1" class="modal fade" role="dialog" aria-hidden="true">
 			<div class="modal-dialog" role="document">
 				<div class="modal-content">
@@ -446,22 +446,22 @@ endif;
 					<span class="small"><?php echo I18n::_('In case this message never disappears please have a look at <a href="%s">this FAQ for information to troubleshoot</a>.', 'https://github.com/PrivateBin/PrivateBin/wiki/FAQ#why-does-the-loading-message-not-go-away'); ?></span>
 				</div>
 			</section>
-			<footer class="container-fluid">
-				<div class="row">
-					<h5 class="col-md-5 col-xs-8"><?php echo I18n::_($NAME); ?> <small>- <?php echo I18n::_('Because ignorance is bliss'); ?></small></h5>
-					<p class="col-md-1 col-xs-4 text-center"><?php echo $VERSION; ?></p>
-					<p id="aboutbox" class="col-md-6 col-xs-12">
-						<?php echo sprintf(
-                            I18n::_('%s is a minimalist, open source online pastebin where the server has zero knowledge of pasted data. Data is encrypted/decrypted %sin the browser%s using 256 bits AES.',
-                                I18n::_($NAME),
-                                '%s', '%s'
-                            ),
-                            '<i>', '</i>'), ' ', $INFO, PHP_EOL;
-                        ?>
-					</p>
-				</div>
-			</footer>
 		</main>
+		<footer class="container-fluid mt-auto">
+			<div class="row">
+				<h5 class="col-md-5 col-xs-8"><?php echo I18n::_($NAME); ?> <small>- <?php echo I18n::_('Because ignorance is bliss'); ?></small></h5>
+				<p class="col-md-1 col-xs-4 text-center"><?php echo $VERSION; ?></p>
+				<p id="aboutbox" class="col-md-6 col-xs-12">
+					<?php echo sprintf(
+                        I18n::_('%s is a minimalist, open source online pastebin where the server has zero knowledge of pasted data. Data is encrypted/decrypted %sin the browser%s using 256 bits AES.',
+                            I18n::_($NAME),
+                            '%s', '%s'
+                        ),
+                        '<i>', '</i>'), ' ', $INFO, PHP_EOL;
+                    ?>
+				</p>
+			</div>
+		</footer>
 <?php
 if ($DISCUSSION) :
 ?>

From cc16dd0165fe7207e968569536c10c6d14bc21b6 Mon Sep 17 00:00:00 2001
From: El RIDO <elrido@gmx.net>
Date: Sun, 15 Sep 2024 10:57:42 +0200
Subject: [PATCH 3/3] undue footer change for bootstrap 3, switch to dvh
 heights, deal with small screens

---
 CHANGELOG.md                  | 2 +-
 css/bootstrap/privatebin.css  | 8 +++++++-
 css/bootstrap5/privatebin.css | 8 +++++++-
 tpl/bootstrap.php             | 2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e792c73b..9a1fe6e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## 1.7.5 (not yet released)
 * ADDED: Allow non persistent SQL connections, if configured (#1394)
-* CHANGED: Tweaked page footer of the `bootstrap` & `bootstrap5` templates (#1392)
+* CHANGED: Tweaked page footer of the `bootstrap5` template (#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
diff --git a/css/bootstrap/privatebin.css b/css/bootstrap/privatebin.css
index c8073323..74ea788a 100644
--- a/css/bootstrap/privatebin.css
+++ b/css/bootstrap/privatebin.css
@@ -88,7 +88,13 @@ body.loading {
 }
 
 #message {
-	height: 70vh;
+	height: 70dvh;
+}
+
+@media ((max-width: 450px) and (max-height: 950px)) {
+	#message {
+		height: 55dvh;
+	}
 }
 
 #message, .replymessage {
diff --git a/css/bootstrap5/privatebin.css b/css/bootstrap5/privatebin.css
index 66621b93..f486869d 100644
--- a/css/bootstrap5/privatebin.css
+++ b/css/bootstrap5/privatebin.css
@@ -33,7 +33,13 @@
 }
 
 #message {
-	height: 70vh;
+	height: 70dvh;
+}
+
+@media ((max-width: 450px) and (max-height: 950px)) {
+	#message {
+		height: 55dvh;
+	}
 }
 
 #message, .replymessage {
diff --git a/tpl/bootstrap.php b/tpl/bootstrap.php
index f0790d38..901bced7 100644
--- a/tpl/bootstrap.php
+++ b/tpl/bootstrap.php
@@ -592,7 +592,7 @@ endif;
 					<span class="small"><?php echo I18n::_('In case this message never disappears please have a look at <a href="%s">this FAQ for information to troubleshoot</a>.', 'https://github.com/PrivateBin/PrivateBin/wiki/FAQ#why-does-the-loading-message-not-go-away'); ?></span>
 				</div>
 			</section>
-			<footer class="container navbar-fixed-bottom">
+			<footer class="container">
 				<div class="row">
 					<h4 class="col-md-5 col-xs-8"><?php echo I18n::_($NAME); ?> <small>- <?php echo I18n::_('Because ignorance is bliss'); ?></small></h4>
 					<p class="col-md-1 col-xs-4 text-center"><?php echo $VERSION; ?></p>