Skip to content

Commit

Permalink
Refine CSS to support dark mode #25
Browse files Browse the repository at this point in the history
Signed-off-by: tdruez <[email protected]>
  • Loading branch information
tdruez committed Dec 21, 2023
2 parents dd6c031 + 01cf3b0 commit bb49b53
Show file tree
Hide file tree
Showing 8 changed files with 101 additions and 72 deletions.
29 changes: 12 additions & 17 deletions dejacode/static/css/dejacode_bootstrap.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
}
Expand All @@ -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,
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
82 changes: 82 additions & 0 deletions dejacode/static/js/dejacode_main.js
Original file line number Diff line number Diff line change
@@ -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);
});

});
2 changes: 0 additions & 2 deletions dje/templates/admin/object_import.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
{{ block.super }} Administration - {{ importer.verbose_name|title }} Import
{% endblock %}

{% block main_class %}container{% endblock %}

{% block content %}
<div class="header container">
<div class="header-body py-0" style="border-bottom: 0;">
Expand Down
3 changes: 2 additions & 1 deletion dje/templates/bootstrap_base.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% load i18n static %}
<!doctype html>
<html lang="en">
<html lang="en" data-bs-theme="auto">
<head>
<title>{% block page_title %}{{ SITE_TITLE }}{% endblock %}</title>
<meta charset="utf-8">
Expand All @@ -26,6 +26,7 @@
{% endblock %}
<div id="back-to-top" class="btn btn-dark"><i class="fas fa-chevron-up"></i></div>
<script src="{% static 'bootstrap-5.3.2/js/bootstrap.bundle.min.js' %}" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="{% static 'js/dejacode_main.js' %}" crossorigin="anonymous"></script>
<script defer src="{% static 'js/htmx-1.9.8.min.js' %}" integrity="sha384-rgjA7mptc2ETQqXoYC3/zJvkU7K/aP44Y+z7xQuJiVnB/422P/Ak+F/AqFR7E4Wr" crossorigin="anonymous"></script>
{% include 'bootstrap_base_js.html' %}
{% block javascripts %}{% endblock %}
Expand Down
45 changes: 0 additions & 45 deletions dje/templates/bootstrap_base_js.html
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

});
</script>
6 changes: 3 additions & 3 deletions dje/templates/includes/footer.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% load i18n %}
<footer class="footer">
<footer class="footer bg-body-tertiary text-body-secondary">
<div class="container-fluid p-3 p-md-5">
<ul class="list-unstyled">
<li><a href="/">Home</a></li>{# No trans for Home on purpose #}
Expand All @@ -9,7 +9,7 @@
<li><a href="https://github.com/nexB/dejacode/releases" target="_blank" rel="noreferrer">{% trans 'Releases' %}</a></li>
<li><a href="https://scancode-licensedb.aboutcode.org/agpl-3.0.html" target="_blank" rel="noreferrer">{% trans 'License' %}</a></li>
</ul>
<p class="text-muted mb-0">Copyright nexB Inc. DejaCode is a trademark of nexB Inc.</p>
<p class="text-muted mb-0">No content on DejaCode should be considered or used as legal advice. Consult an Attorney for any legal advice.</p>
<p class="mb-0">Copyright nexB Inc. DejaCode is a trademark of nexB Inc.</p>
<p class="mb-0">No content on DejaCode should be considered or used as legal advice. Consult an Attorney for any legal advice.</p>
</div>
</footer>
2 changes: 0 additions & 2 deletions dje/templates/object_details_base.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@

{% block page_title %}{% trans verbose_name_plural|title %}: {{ object }}{% endblock %}

{% block main_class %}bg-white{% endblock %}

{% block content %}
<div class="header container">
<div class="header-body py-0 border-bottom-0">
Expand Down
4 changes: 2 additions & 2 deletions workflow/templates/workflow/includes/comments_section.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div id="comments_section" class="mt-3">
{% for event in comments_and_events %}
{% if not event.event_type %}
<div class="card bg-light mb-3 {% if event.user == request.user %}border-highlight{% endif %}" id="comment-{{ event.uuid }}">
<div class="card mb-3 {% if event.user == request.user %}border-highlight{% endif %}" id="comment-{{ event.uuid }}">
<div class="card-header">
<div class="float-end">
{% if event.user == request_instance.requester %}
Expand Down Expand Up @@ -33,7 +33,7 @@
{% endfor %}
</div>

<div class="card bg-light mt-3" id="add_comment_section">
<div class="card mt-3" id="add_comment_section">
<div class="card-body p-2">
<form id="add-comment" method="post">{% csrf_token %}
<div class="mb-2">
Expand Down

0 comments on commit bb49b53

Please sign in to comment.