CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

UI: Improve panel collapse visibility (Z#23132549) (#3709)

Browse Source 
* Move collapse indicator in panels before label

* only hide collapse indicator in panel titles

* remove unneeded collapse-indicators in pretix-control

* remove unneeded collapse-indicators in presale

* move collapse-indicator to left in variants-toggle-button

* remove chevron and use default collapse-indicator in control-variants
This commit is contained in:
Richard Schreiber
2023-11-13 14:23:28 +01:00
committed by GitHub
parent c2ababb9d6
commit 69c2a1b3c2
13 changed files with 75 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pretix/static/pretixcontrol/scss/main.scss
View File

@@ -482,7 +482,7 @@ td > .dl-horizontal {
transform: rotate(180deg);
}
.panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
.panel-title a[data-toggle="collapse"], details .panel-title {
display: flex;
padding: 10px 15px;
margin: -10px -15px;
@@ -490,6 +490,37 @@ td > .dl-horizontal {
justify-content: space-between;
outline: 0;
text-decoration: none;
position: relative;
padding-left: 30px;
}
details strong.panel-title {
display: inline-block;
}
.panel-title a[data-toggle="collapse"] .collapse-indicator,
details .panel-title .collapse-indicator {
/* hide old collapse indicators until they are all removed from HTML */
display: none;
}
.panel-title a[data-toggle="collapse"]::before,
details .panel-title::before {
position: absolute;
top: 50%;
left: 10px;
margin-top: -.5em;
content: "";
width: 1em;
height: 1em;
font: normal normal normal 14px/1 FontAwesome;
display: inline-block;
text-align: center;
transform: rotate(-90deg);
transition: transform 150ms ease-in 0s;
}
.panel-title a:not(.collapsed)::before,
details.details-open .panel-title::before {
transform: rotate(0deg);
}
.panel-title a[data-toggle="collapse"]:hover {

48
src/pretix/static/pretixpresale/scss/main.scss
View File

@@ -342,13 +342,6 @@ body.loading .container {
transition: all 150ms ease-in 0s;
}
.panel-title a:not(.collapsed) .collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.panel-title a[data-toggle="collapse"], details .panel-title {
display: flex;
padding: 0.75*$line-height-computed;
@@ -357,6 +350,34 @@ body.loading .container {
justify-content: space-between;
outline: 0;
text-decoration: none;
position: relative;
padding-left: 30px;
}
.panel-title a[data-toggle="collapse"] .collapse-indicator,
details .panel-title .collapse-indicator {
/* hide old collapse indicators until they are all removed from HTML */
display: none;
}
.panel-title a[data-toggle="collapse"]::before,
details .panel-title::before {
position: absolute;
top: 50%;
left: 10px;
margin-top: -.5em;
content: "";
width: 1em;
height: 1em;
font: normal normal normal 14px/1 FontAwesome;
display: inline-block;
text-align: center;
transform: rotate(-90deg);
transition: transform 150ms ease-in 0s;
}
.panel-title a:not(.collapsed)::before,
details.details-open .panel-title::before {
transform: rotate(0deg);
}
.panel-default .panel-title a[data-toggle="collapse"]:hover {
@@ -389,13 +410,12 @@ details summary {
-webkit-user-select: none;
user-select: none;
}
.nojs details[open] .panel-heading .collapse-indicator,
details.details-open .panel-heading .collapse-indicator,
[aria-expanded=true]>.collapse-indicator {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
.nojs details:not([open], .details-open) .panel-heading .collapse-indicator,
[aria-expanded=false]>.collapse-indicator {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}
details.sneak-peek {