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
This commit is contained in:
El RIDO 2024-09-12 07:50:52 +02:00
parent c1333e5831
commit 1a51c0973d
No known key found for this signature in database
GPG Key ID: 0F5C940A6BD81F92
4 changed files with 7 additions and 23 deletions

View File

@ -2,6 +2,7 @@
## 1.7.5 (not yet released) ## 1.7.5 (not yet released)
* ADDED: Allow non persistent SQL connections, if configured (#1394) * 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: Simpler PostgreSQL table lookup query (#1361)
* CHANGED: SRI hashes are now configurable, no longer hardcoded in templates (#1365) * CHANGED: SRI hashes are now configurable, no longer hardcoded in templates (#1365)
* CHANGED: Upgrading libraries to: DOMpurify 3.1.6 * CHANGED: Upgrading libraries to: DOMpurify 3.1.6

View File

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

View File

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

View File

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