From 9dcfebb1ed2d72dcd7c43c0f49735572684724cc Mon Sep 17 00:00:00 2001
From: George Katsikas <giorgakis.katsikas@gmail.com>
Date: Wed, 5 Jul 2023 11:19:36 +0200
Subject: [PATCH] fix summary triangle overriden by flexbox
---
.../_hx_productionstream_details.html | 2 +-
.../templates/production/production_new.html | 6 +--
.../scipost/assets/config/preconfig.scss | 41 +++++++++++++++----
3 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/scipost_django/production/templates/production/_hx_productionstream_details.html b/scipost_django/production/templates/production/_hx_productionstream_details.html
index 2e51ab633..80295f9a8 100644
--- a/scipost_django/production/templates/production/_hx_productionstream_details.html
+++ b/scipost_django/production/templates/production/_hx_productionstream_details.html
@@ -1,6 +1,6 @@
<details id="productionstream-{{ productionstream.id }}-details"
class="border border-2 mx-3 p-2 bg-primary bg-opacity-10">
- <summary class="summary-unstyled p-2">
+ <summary class="list-none">
{% include "production/_productionstream_details_summary_contents.html" with productionstream=productionstream %}
</summary>
diff --git a/scipost_django/production/templates/production/production_new.html b/scipost_django/production/templates/production/production_new.html
index b78a7d3a9..6f2c4b9ba 100644
--- a/scipost_django/production/templates/production/production_new.html
+++ b/scipost_django/production/templates/production/production_new.html
@@ -25,9 +25,9 @@
</div>
<details id="productionstreams-filter-details" class="card my-4">
- <summary class="card-header fs-6 d-inline-flex align-items-center">
- Search / Filter / Bulk Actions
- <div class="d-none d-sm-inline-flex ms-auto align-items-center">
+ <summary class="card-header fs-6 d-flex flex-row align-items-center justify-content-between list-triangle">
+ <div>Search / Filter / Bulk Actions</div>
+ <div class="d-none d-md-flex align-items-center">
<div id="indicator-search-productionstreams" class="htmx-indicator">
<button class="btn btn-warning text-white d-none d-md-block me-2"
diff --git a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
index 56124499c..75c460daa 100644
--- a/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
+++ b/scipost_django/scipost/static/scipost/assets/config/preconfig.scss
@@ -202,15 +202,6 @@ $theme-colors: (
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-// Browser specific fixes
-// Select summary in details with list-style: none and remove triangle for safari
-.summary-unstyled {
- list-style: none;
- &::-webkit-details-marker {
- display: none;
- }
-}
-
// Utilities for common display issues
// Hide div
.d-none-empty:empty {
@@ -220,4 +211,36 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
.checkbox-lg {
width: 1.5em !important;
height: 1.5em !important;
+}
+
+summary {
+ // Remove triangle for webkit browsers causing problems with flexbox
+ &::-webkit-details-marker {
+ display: none;
+ }
+
+ // Remove all list styles
+ &.list-none {
+ list-style: none;
+ }
+
+ // List triangle for summary element (necessary with display: flex)
+ &.list-triangle {
+ position: relative;
+ padding-left: 2em !important;
+
+ // Styling the equilateral triangle
+ &::before {
+ content: "â–¶";
+ position: absolute;
+ left: 0.75em;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+}
+
+// Rotate the equilateral triangle when summary is open
+details[open] summary.list-triangle::before {
+ content: "â–¼";
}
\ No newline at end of file
--
GitLab