diff --git a/scipost_django/production/templates/production/_hx_productionstream_details.html b/scipost_django/production/templates/production/_hx_productionstream_details.html index 2e51ab633cda7337e6d7b40ba0bcd0f0b1c63399..80295f9a893b2e1225b482eda2a325974bdd732e 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 b78a7d3a9c7299683be86e541735cacea5ca191f..6f2c4b9bad5602a074e658aa8c0590a7bef9894b 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 56124499ce0e1c769f7be5d798e68acf7c3e6052..75c460daa87e3cec1694b07b4980e818a7a02481 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