From 01cf3b09b944fa5385db6c84c8baf92a1557ea96 Mon Sep 17 00:00:00 2001 From: tdruez Date: Thu, 21 Dec 2023 08:57:18 -0600 Subject: [PATCH] Refine CSS to support dark mode #25 Signed-off-by: tdruez --- dejacode/static/css/dejacode_bootstrap.css | 29 +++---- dejacode/static/js/dejacode_main.js | 82 +++++++++++++++++++ dje/templates/admin/object_import.html | 2 - dje/templates/bootstrap_base.html | 3 +- dje/templates/bootstrap_base_js.html | 45 ---------- dje/templates/includes/footer.html | 6 +- dje/templates/object_details_base.html | 2 - .../workflow/includes/comments_section.html | 4 +- 8 files changed, 101 insertions(+), 72 deletions(-) create mode 100644 dejacode/static/js/dejacode_main.js diff --git a/dejacode/static/css/dejacode_bootstrap.css b/dejacode/static/css/dejacode_bootstrap.css index c1f15fe5..94690414 100644 --- a/dejacode/static/css/dejacode_bootstrap.css +++ b/dejacode/static/css/dejacode_bootstrap.css @@ -22,8 +22,12 @@ body { color: #12263f; background-color: #fff; } +[data-bs-theme=dark] body { + color: var(--bs-body-color); + background-color: var(--bs-body-bg); +} body.body-background, .bg-light { - background-color: #f9fbfd; + background-color: var(--bs-tertiary-bg); } a { color: #2e73d0; @@ -187,8 +191,6 @@ dd.reduced pre { /* -- Footer -- */ .footer { - font-size: 95%; - background-color: #fff; border-top: 0.0625rem solid #dae1e9; } .footer a, .footer a:hover, @@ -272,7 +274,7 @@ table.owners-table .column-type { /* -- Components List -- */ table.components-table .column-name { - min-width: 150px; + min-width: 155px; } table.components-table .column-version { min-width: 85px; @@ -295,7 +297,7 @@ table.components-table .column-keywords { min-width: 110px; } table.components-table .column-owner { - min-width: 57px; + min-width: 80px; } table.components-table .column-primary_language { min-width: 130px; @@ -434,9 +436,6 @@ table.purldb-table .column-license_expression { .requests-details #comments_section .card-body :last-child { margin-bottom: 0; } -.requests-details #comments_section .bg-light { - background-color: #fcfcfc !important; -} .requests-details #comments_section .border-highlight { border-color: #5872AA; } @@ -513,6 +512,9 @@ body.product-comparison #div_id_exclude { } /* -- Tables -- */ +:not([data-bs-theme="dark"]) .table { + --bs-table-striped-bg: #f9fbfd; +} td.version_grouping { text-align: center; } @@ -532,9 +534,6 @@ td.sub-header { .table-hover tbody tr:hover { background-color: #f9fbfd; } -.table-striped>tbody>tr:nth-of-type(odd)>* { - --bs-table-bg-type: #f9fbfd; -} .table-fixed-layout { table-layout: fixed; } @@ -553,16 +552,12 @@ td.sub-header { .table thead tr th a.sort.active { color: black; } -.table { - background-color: white; -} /* -- Better looks for the popover fake links -- */ .tag_popover, a[data-category-pk], .help_text { cursor: help; - color: #333333; border-bottom: dotted 0.0625rem #cccccc; } .tag_popover:hover, @@ -697,7 +692,7 @@ mark { padding: .15em; } .bg-light { - background-color: #f9fbfd!important; + background-color: var(--bs-tertiary-bg) !important; } .annotation_link, .reverse_annotation_link { @@ -748,7 +743,7 @@ pre.pre-bg-light, border: 0.0625rem solid #dee2e6; border-radius: .25rem; padding: 0.5rem; - background-color: #f9fbfd; + background-color: var(--bs-tertiary-bg); box-shadow: inset 0 .15rem .125rem 0 rgba(222,226,230,0.5); } pre.json-document { diff --git a/dejacode/static/js/dejacode_main.js b/dejacode/static/js/dejacode_main.js new file mode 100644 index 00000000..44db88c9 --- /dev/null +++ b/dejacode/static/js/dejacode_main.js @@ -0,0 +1,82 @@ +/* +# +# Copyright (c) nexB Inc. and others. All rights reserved. +# DejaCode is a trademark of nexB Inc. +# SPDX-License-Identifier: AGPL-3.0-only +# See https://github.com/nexB/dejacode for support or download. +# See https://aboutcode.org for more information about AboutCode FOSS projects. +# +*/ + +document.addEventListener('DOMContentLoaded', () => { + NEXB = {}; + NEXB.client_data = JSON.parse(document.getElementById("client_data").textContent); + + NEXB.displayOverlay = function(text) { + const overlay = document.createElement('div'); + overlay.id = 'overlay'; + overlay.textContent = text; + + Object.assign(overlay.style, { + position: 'fixed', + top: 0, + left: 0, + width: '100%', + height: '100%', + backgroundColor: 'rgba(0, 0, 0, .5)', + zIndex: 10000, + verticalAlign: 'middle', + paddingTop: '300px', + textAlign: 'center', + color: '#fff', + fontSize: '30px', + fontWeight: 'bold', + cursor: 'wait' + }); + + document.body.appendChild(overlay); + } + + // Enables all tooltips + const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); + const tooltips = Array.from(tooltipTriggerList).map(element => { + return new bootstrap.Tooltip(element, { + container: 'body' + }); + }); + + // Enables all popovers + const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]'); + const popovers = Array.from(popoverTriggerList).map(element => { + return new bootstrap.Popover(element, { + container: 'body', + html: true + }); + }); + + // Search selection in the header + $('#search-selector-list a').click(function(event) { + event.preventDefault(); + $('#search-form').attr('action', $(this).attr('href')); + $('#search-selector-content').html($(this).html()); + $('#search-input').focus(); + }); + + // Get the back-to-top button element + const backToTopButton = document.getElementById('back-to-top'); + + // Add a scroll event listener + window.addEventListener('scroll', function () { + if (window.scrollY >= 250) { // Page is scrolled more than 250px + backToTopButton.style.display = 'block'; + } else { + backToTopButton.style.display = 'none'; + } + }); + + // Add a click event listener to scroll back to the top + backToTopButton.addEventListener('click', function () { + window.scrollTo(0, 0); + }); + +}); diff --git a/dje/templates/admin/object_import.html b/dje/templates/admin/object_import.html index 2a516a25..926c17a5 100644 --- a/dje/templates/admin/object_import.html +++ b/dje/templates/admin/object_import.html @@ -5,8 +5,6 @@ {{ block.super }} Administration - {{ importer.verbose_name|title }} Import {% endblock %} -{% block main_class %}container{% endblock %} - {% block content %}
diff --git a/dje/templates/bootstrap_base.html b/dje/templates/bootstrap_base.html index e05ee1a6..a773bd22 100644 --- a/dje/templates/bootstrap_base.html +++ b/dje/templates/bootstrap_base.html @@ -1,6 +1,6 @@ {% load i18n static %} - + {% block page_title %}{{ SITE_TITLE }}{% endblock %} @@ -26,6 +26,7 @@ {% endblock %}
+ {% include 'bootstrap_base_js.html' %} {% block javascripts %}{% endblock %} diff --git a/dje/templates/bootstrap_base_js.html b/dje/templates/bootstrap_base_js.html index 03dfa7fd..85f3afef 100644 --- a/dje/templates/bootstrap_base_js.html +++ b/dje/templates/bootstrap_base_js.html @@ -27,49 +27,4 @@ document.body.appendChild(overlay); } - - document.addEventListener('DOMContentLoaded', () => { - // Enables all tooltips - const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); - const tooltips = Array.from(tooltipTriggerList).map(element => { - return new bootstrap.Tooltip(element, { - container: 'body' - }); - }); - - // Enables all popovers - const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]'); - const popovers = Array.from(popoverTriggerList).map(element => { - return new bootstrap.Popover(element, { - container: 'body', - html: true - }); - }); - - // Search selection in the header - $('#search-selector-list a').click(function(event) { - event.preventDefault(); - $('#search-form').attr('action', $(this).attr('href')); - $('#search-selector-content').html($(this).html()); - $('#search-input').focus(); - }); - - // Get the back-to-top button element - const backToTopButton = document.getElementById('back-to-top'); - - // Add a scroll event listener - window.addEventListener('scroll', function () { - if (window.scrollY >= 250) { // Page is scrolled more than 250px - backToTopButton.style.display = 'block'; - } else { - backToTopButton.style.display = 'none'; - } - }); - - // Add a click event listener to scroll back to the top - backToTopButton.addEventListener('click', function () { - window.scrollTo(0, 0); - }); - - }); \ No newline at end of file diff --git a/dje/templates/includes/footer.html b/dje/templates/includes/footer.html index 9ccfb4fc..6976a41c 100644 --- a/dje/templates/includes/footer.html +++ b/dje/templates/includes/footer.html @@ -1,5 +1,5 @@ {% load i18n %} -