Refine CSS to support dark mode #25

Signed-off-by: tdruez <[email protected]>
aboutcode-org · Feb 13, 2024 · 5835d34 · 5835d34
1 parent c573449
commit 5835d34
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 5 deletions.
diff --git a/component_catalog/templates/component_catalog/includes/add_to_modal.html b/component_catalog/templates/component_catalog/includes/add_to_modal.html
@@ -11,7 +11,7 @@ <h5 class="modal-title">{{ form.helper.modal_title }}</h5>
           {# Only displayed on list views #}
           {% if request.resolver_match.url_name|default:""|slice:"-4:" == "list" %}
             <h6>Selected objects:</h6>
-            <ul id="object-repe-list"></ul>
+            <ul id="object-repe-list" style="word-break: break-word;"></ul>
             <hr>
           {% endif %}
           {% crispy form %}

diff --git a/dejacode/static/css/dejacode_bootstrap.css b/dejacode/static/css/dejacode_bootstrap.css
@@ -480,6 +480,10 @@ div.awesomplete {
   max-height: 50vh;
   overflow-y: auto;
 }
+[data-bs-theme=dark] .awesomplete > ul {
+  background: var(--bs-black);
+}
+
 #div_id_component .awesomplete {
   display: inline-block !important;
 }

diff --git a/dje/templates/object_details_base.html b/dje/templates/object_details_base.html
@@ -179,7 +179,13 @@ <h1 class="header-title text-break">
     $('.toggle-details')
       .tooltip({container: 'body', placement: 'top'})
       .on('click', function() {
-          $('.extra-details').toggle();
+        if ($(this).data('enabled')) {
+          $('.extra-details').css("display", "none");
+          $(this).data('enabled', false);
+        } else {
+          $('.extra-details').css("display", "table-row");
+          $(this).data('enabled', true);
+        }
       });
 
     // clipboard.js

diff --git a/product_portfolio/templates/product_portfolio/product_tree_comparison.html b/product_portfolio/templates/product_portfolio/product_tree_comparison.html
@@ -15,7 +15,7 @@
             <a href="{% inject_preserved_filters 'product_portfolio:product_list' %}">{% trans "Products" %}</a>
           </div>
           <h1 class="header-title">
-            Comparison: {{ left_product }} <i class="fas fa-exchange-alt"></i> {{ right_product }}
+            Comparison: {{ left_product }} <i class="fas fa-exchange-alt mx-2"></i> {{ right_product }}
           </h1>
         </div>
       </div>
@@ -31,7 +31,7 @@ <h1 class="header-title">
   <div id="show-only-box" class="card bg-body-tertiary mb-3">
     <div class="card-body p-2">
       <strong>Show:</strong>
-      <div class="form-check form-check-inline">
+      <div class="form-check-inline">
         {% for filter in action_filters %}
           <label class="form-label form-check-inline mb-0">
             <input type="checkbox" class="form-check-input" value="{{ filter.value }}"{% if filter.checked %} checked="checked"{% endif %}> {{ filter.value|title }} ({{ filter.count }})

diff --git a/product_portfolio/templates/product_portfolio/tabs/tab_codebase.html b/product_portfolio/templates/product_portfolio/tabs/tab_codebase.html
@@ -112,6 +112,12 @@
    $('.toggle-details')
       .tooltip({container: 'body', placement: 'top'})
       .on('click', function() {
-          $('.extra-details').toggle();
+        if ($(this).data('enabled')) {
+          $('.extra-details').css("display", "none");
+          $(this).data('enabled', false);
+        } else {
+          $('.extra-details').css("display", "table-row");
+          $(this).data('enabled', true);
+        }
       });
 </script>