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

Widget: limit max-width, make mobile overlay bigger (Z#23196339) (#5298)

Browse Source 
* Widget: limit max-width, make mobile overlay bigger

* overlay in fullscreen for small screens

* re-add topbar for close-button on mobile

* tweak close button-top on mobile

* invert color to make close-button a filled circle again
This commit is contained in:
Richard Schreiber
2025-07-10 13:10:30 +02:00
committed by GitHub
parent 13833b05b1
commit 582c6c1771
1 changed files with 47 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pretix/static/pretixpresale/scss/widget.scss
View File

@@ -961,6 +961,7 @@ $table-bg-accent: rgba(128, 128, 128, 0.05);
.pretix-widget-frame-inner { .pretix-widget-frame-inner {
width: 80vw; width: 80vw;
max-width: 1080px;
height: 80vh; height: 80vh;
} }
.pretix-widget-frame-inner iframe { .pretix-widget-frame-inner iframe {
@@ -1087,3 +1088,49 @@ $table-bg-accent: rgba(128, 128, 128, 0.05);
} }
} }
@media (max-width: 800px) {
.pretix-widget-frame-inner {
width: calc(100vw - 50px);
height: calc(100vh - 50px);
}
}
@media (max-width: 480px) {
.pretix-widget-alert-holder,
.pretix-widget-frame-holder:not(.pretix-widget-frame-isloading),
.pretix-widget-lightbox-holder:not(.pretix-widget-lightbox-isloading) {
margin: 0;
padding: 0;
width: 100%;
max-width: 100vw;
}
.pretix-widget-frame-inner,
.pretix-widget-lightbox-inner,
.pretix-widget-alert-box {
width: 100%;
height: 100vh;
border-radius: 0;
-moz-border-radius: 0;
-webkit-border-radius: 0;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-sizing: border-box;
padding: 40px 0 0;
background: var(--pretix-brand-primary);
}
.pretix-widget-frame-close,
.pretix-widget-lightbox-close {
top: 8px;
right: 12px;
button {
background-color: #fff;
path {
fill: var(--pretix-brand-primary) !important;
}
&:focus {
outline-color: #fff;
}
}
}
}