浏览代码

Merge pull request #1401 from PrivateBin/b5-message-height

bootstrap footer improvements
El RIDO 1 年之前
父节点
当前提交
d23bb748d4
共有 4 个文件被更改,包括 35 次插入39 次删除
  1. 1 0
      CHANGELOG.md
  2. 8 6
      css/bootstrap/privatebin.css
  3. 6 13
      css/bootstrap5/privatebin.css
  4. 20 20
      tpl/bootstrap5.php

+ 1 - 0
CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 1.7.5 (not yet released)
 * ADDED: Allow non persistent SQL connections, if configured (#1394)
 * ADDED: Show a button (that redirects to the `basepath` URL) inside the alert after a paste is deleted
+* 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.7

+ 8 - 6
css/bootstrap/privatebin.css

@@ -87,8 +87,14 @@ body.loading {
 	word-wrap: break-word;
 }
 
-#preview {
-	margin-bottom: 10px;
+#message {
+	height: 70dvh;
+}
+
+@media ((max-width: 450px) and (max-height: 950px)) {
+	#message {
+		height: 55dvh;
+	}
 }
 
 #message, .replymessage {
@@ -100,10 +106,6 @@ body.loading {
 	margin: 5px 0;
 }
 
-#comments, #comments button {
-	margin-bottom: 10px;
-}
-
 .comment {
 	border-left: 1px solid #ccc;
 	padding: 5px 0 5px 10px;

+ 6 - 13
css/bootstrap5/privatebin.css

@@ -32,12 +32,14 @@
 	word-wrap: break-word;
 }
 
-#preview {
-	margin-bottom: 10px;
+#message {
+	height: 70dvh;
 }
 
-#message {
-	height: 70vh;
+@media ((max-width: 450px) and (max-height: 950px)) {
+	#message {
+		height: 55dvh;
+	}
 }
 
 #message, .replymessage {
@@ -45,17 +47,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;
 }
 

+ 20 - 20
tpl/bootstrap5.php

@@ -1,7 +1,7 @@
 <?php declare(strict_types=1);
 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">
@@ -455,28 +455,28 @@ 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) :
 ?>
 		<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>
@@ -484,11 +484,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>