share display fix

This commit is contained in:
Joey Kimsey
2025-02-06 02:53:49 -05:00
parent 2ac64e5c49
commit 4dd66c6f56
4 changed files with 49 additions and 5 deletions

View File

@ -8,6 +8,14 @@
* @link https://TheTempusProject.com
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
*/
.context-popover {
background-color: #383838;
color: white;
}
.context-popover .popover-header {
background-color: #2c2c2c;
}
.context-main-border {
border-color: #f5f5f5!important;

View File

@ -8,6 +8,40 @@
* @link https://TheTempusProject.com
* @license https://opensource.org/licenses/MIT [MIT LICENSE]
*/
.facebook {
border-color: #1877F2 !important; /* Facebook Blue */
color: #1877F2 !important;
}
.x-black {
border-color: #000000 !important; /* X (formerly Twitter) Black */
color: #000000 !important;
}
.reddit {
border-color: #FF4500 !important; /* Reddit Orange */
color: #FF4500 !important;
}
.opera {
border-color: #FF1B2D !important; /* Opera Red */
color: #FF1B2D !important;
}
.firefox {
border-color: #FF7139 !important; /* Firefox Orange */
color: #FF7139 !important;
}
.edge {
border-color: #0078D7 !important; /* Microsoft Edge Blue */
color: #0078D7 !important;
}
.safari {
border-color: #0B78E3 !important; /* Safari Blue */
color: #0B78E3 !important;
}
.context-main-border {
border-color: #1e1e1e!important;

View File

@ -272,6 +272,8 @@ document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(button => {
document.addEventListener("DOMContentLoaded", function () {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
return new bootstrap.Popover(popoverTriggerEl, {
customClass: 'context-popover',
});
});
});

View File

@ -3,13 +3,13 @@
<div class="px-4 mt-2">
<!-- Share Button (visible only on medium+ screens) -->
<button type="button" class="btn btn-outline-primary"
data-bs-toggle="popover" data-bs-html="true" title="Share"
data-bs-toggle="popover" data-bs-html="true" title="Share" data-bs-placement="top" data-bs-trigger="focus"
data-bs-content='
{QR_CODE}
<div class="d-flex justify-content-between">
<a href="https://www.reddit.com/submit?type=LINK&url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-sm btn-outline-danger"><i class="fa-brands fa-fw fa-reddit"></i></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-sm btn-outline-primary"><i class="fa-brands fa-fw fa-facebook"></i></a>
<a href="https://twitter.com/intent/tweet?url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-sm btn-outline-info"><i class="fa-brands fa-fw fa-x"></i></a>
<a href="https://www.reddit.com/submit?type=LINK&url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg reddit"><i class="fa-brands fa-fw fa-reddit"></i></a>
<a href="https://www.facebook.com/sharer/sharer.php?u={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg facebook"><i class="fa-brands fa-fw fa-facebook"></i></a>
<a href="https://x.com/intent/tweet?url={CURRENT_URL_SAFE}" target="_blank" class="mx-1 btn btn-lg x-black"><i class="fa-brands fa-fw fa-x"></i></a>
</div>'>
Share
</button>