forked from CGM_Public/pretix_original
d103d8782b
* [A11y] fix calendar nav dropdown * update organizer calender * keep cal-nav on one line * simplify html * unify calendar layouts * fix rounding issue with .input-group select+button * add comment to explain complex css * fix calendar dropdown due to too broad css-selector * reduce spacing of top-nav * fix input-group-btn double line through rounding issue
513 lines
13 KiB
SCSS
513 lines
13 KiB
SCSS
.table-calendar, .week-calendar, .day-calendar {
|
|
td, th {
|
|
width: 14.29%;
|
|
}
|
|
h3 {
|
|
font-size: 0.875rem;
|
|
color: $text-muted;
|
|
border-bottom: 2px solid $table-border-color;
|
|
}
|
|
p {
|
|
margin-bottom: 3px;
|
|
}
|
|
.events {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
a.event {
|
|
--status-bg-color: var(--pretix-brand-primary-tint-90);
|
|
--status-text-color: var(--pretix-brand-primary-shade-42);
|
|
--status-border-color: #{$brand-primary};
|
|
position: relative;
|
|
display: block;
|
|
background: var(--status-bg-color);
|
|
color: var(--status-text-color);
|
|
border: 1px solid var(--status-border-color);
|
|
border-radius: $border-radius-base;
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 11px;
|
|
height: 100%;
|
|
background: var(--status-border-color);
|
|
}
|
|
|
|
padding: 3px 5px 3px 17px;
|
|
margin-bottom: 3px;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
outline: 1px solid var(--status-border-color);
|
|
outline-offset: 0;
|
|
}
|
|
&:focus {
|
|
outline: 2px solid var(--status-border-color);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
&.continued, &.over {
|
|
--status-bg-color: #{$table-bg-accent};
|
|
--status-text-color: #{$text-muted};
|
|
--status-border-color: #{tint($text-muted, 50%)};
|
|
}
|
|
|
|
&.available {
|
|
--status-bg-color: #{$alert-success-bg};
|
|
--status-text-color: #{$alert-success-text};
|
|
--status-border-color: #{$alert-success-border};
|
|
|
|
&.low:before {
|
|
background: linear-gradient(to bottom, var(--pretix-brand-warning) 1em, var(--status-border-color) 2.5em);
|
|
}
|
|
}
|
|
|
|
&.waitinglist {
|
|
--status-bg-color: #{$alert-warning-bg};
|
|
--status-text-color: #{$alert-warning-text};
|
|
--status-border-color: #{$alert-warning-border};
|
|
}
|
|
|
|
&.reserved, &.soldout, {
|
|
--status-bg-color: #{$alert-danger-bg};
|
|
--status-text-color: #{$alert-danger-text};
|
|
--status-border-color: #{$alert-danger-border};
|
|
}
|
|
|
|
&.available > *:first-child,
|
|
&.continued > *:first-child,
|
|
&.soon > *:first-child {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.event-name {
|
|
display: block;
|
|
}
|
|
.event-name-continued {
|
|
font-weight: normal;
|
|
}
|
|
.event-time, .event-status {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
.week-calendar {
|
|
.weekday {
|
|
margin-bottom: 15px;
|
|
}
|
|
h3 {
|
|
margin-top: 0;
|
|
padding-top: 10px;
|
|
padding-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
}
|
|
h3 .fa::before {
|
|
content: $fa-var-caret-right;
|
|
}
|
|
details[open] h3 .fa::before {
|
|
content: $fa-var-caret-down;
|
|
}
|
|
.no-events {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.table-calendar .day:nth-child(even) {
|
|
background-color: $table-bg-accent;
|
|
}
|
|
|
|
.event-list-filter-form {
|
|
.event-list-filter-form-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: end;
|
|
.form-group {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0 15px 0 0;
|
|
}
|
|
|
|
button {
|
|
flex: 0;
|
|
white-space: nowrap;
|
|
/* Visual alignment with the selects */
|
|
padding-top: 7px;
|
|
padding-bottom: 7px;
|
|
}
|
|
}
|
|
margin-bottom: 15px;
|
|
}
|
|
@media (max-width: $screen-xs-max) {
|
|
.event-list-filter-form {
|
|
.event-list-filter-form-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
.form-group {
|
|
display: block;
|
|
width: 100%;
|
|
margin: 0 0 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.day-calendar {
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: 1fr 7fr;
|
|
gap: 0;
|
|
overflow-x: auto;
|
|
margin-bottom: 10px;
|
|
padding-bottom: 16px; /* use padding to make space for link focus-outline and overlayed scrollbar */
|
|
}
|
|
.cal-size-8 {--col-min-size: 9em}
|
|
.cal-size-7 {--col-min-size: 7.8em}
|
|
.cal-size-6 {--col-min-size: 6.6em}
|
|
.cal-size-5 {--col-min-size: 5.4em}
|
|
.cal-size-4 {--col-min-size: 4.2em}
|
|
.cal-size-3 {--col-min-size: 3em}
|
|
.cal-size-2 {--col-min-size: 1.8em}
|
|
.cal-size-1 {--col-min-size: 0.6em}
|
|
.cal-size-0 {--col-min-size: 0.6em}
|
|
|
|
.day-calendar .current-time-bar {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: -2px;
|
|
height: calc(100% - 10px); /* remove 5px padding for link focus-outline */
|
|
width: 1px;
|
|
background-color: $brand-primary;
|
|
outline: 1px solid #fff;
|
|
transform: translateX(var(--current-time-offset, 0));
|
|
}
|
|
[dir=rtl] .day-calendar .current-time-bar {
|
|
left: auto;
|
|
right: -2px;
|
|
transform: translateX(calc(-1 * var(--current-time-offset, 0)));
|
|
}
|
|
.day-calendar .current-time-bar time {
|
|
background: $brand-primary;
|
|
position: absolute;
|
|
top: 0;
|
|
color: #fff;
|
|
padding: 1px 3px;
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
}
|
|
.day-calendar .current-time-bar time,
|
|
[dir=rtl] .day-calendar .current-time-bar.swap-side time {
|
|
left: 0;
|
|
}
|
|
.day-calendar .current-time-bar.swap-side time,
|
|
[dir=rtl] .day-calendar .current-time-bar time {
|
|
left: auto;
|
|
right: 0;
|
|
}
|
|
|
|
|
|
.day-calendar.no-headlines {
|
|
display: block;
|
|
}
|
|
.day-calendar.no-headlines h3 {
|
|
display: none;
|
|
}
|
|
|
|
|
|
.day-calendar .current-time-bar time span:nth-child(2) {
|
|
animation: watch-blinker 2s step-end infinite;
|
|
}
|
|
@-webkit-keyframes watch-blinker {
|
|
0% { visibility: visible; }
|
|
75% { visibility: hidden; }
|
|
}
|
|
|
|
@-moz-keyframes watch-blinker {
|
|
0% { visibility: visible; }
|
|
75% { visibility: hidden; }
|
|
}
|
|
|
|
@keyframes watch-blinker {
|
|
0% { visibility: visible; }
|
|
75% { visibility: hidden; }
|
|
}
|
|
|
|
.day-row-name {
|
|
position: sticky;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 3px 8px 3px 0;
|
|
background-color: rgba(255,255,255,.9);
|
|
z-index: 10;
|
|
width: 20vw;/* % in a grid context scales to the width of this element in grid => vw with max-width */
|
|
max-width: 15em;
|
|
min-width: 8em;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.day-calendar a.event {
|
|
margin: 0;
|
|
}
|
|
.day-calendar a.event .event-time {
|
|
display: inline;
|
|
}
|
|
|
|
[data-raster-size="5"] {--raster-size: 5}
|
|
[data-raster-size="10"] {--raster-size: 10}
|
|
[data-raster-size="15"] {--raster-size: 15}
|
|
[data-raster-size="30"] {--raster-size: 30}
|
|
[data-raster-size="60"] {--raster-size: 60}
|
|
|
|
/*
|
|
concurrency has two meanings:
|
|
on .day-timeline it means total nummber concurrently running events at any given time
|
|
on .day-timeline>li it means the current concurrency of this li-element
|
|
if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/main.js) sets --concurrency accordingly
|
|
*/
|
|
[data-concurrency="1"] {--concurrency: 1}
|
|
[data-concurrency="2"] {--concurrency: 2}
|
|
[data-concurrency="3"] {--concurrency: 3}
|
|
[data-concurrency="4"] {--concurrency: 4}
|
|
[data-concurrency="5"] {--concurrency: 5}
|
|
[data-concurrency="6"] {--concurrency: 6}
|
|
[data-concurrency="7"] {--concurrency: 7}
|
|
[data-concurrency="8"] {--concurrency: 8}
|
|
[data-concurrency="9"] {--concurrency: 9}
|
|
|
|
|
|
[data-offset^="01"] {--offset-hour: 1}
|
|
[data-offset^="02"] {--offset-hour: 2}
|
|
[data-offset^="03"] {--offset-hour: 3}
|
|
[data-offset^="04"] {--offset-hour: 4}
|
|
[data-offset^="05"] {--offset-hour: 5}
|
|
[data-offset^="06"] {--offset-hour: 6}
|
|
[data-offset^="07"] {--offset-hour: 7}
|
|
[data-offset^="08"] {--offset-hour: 8}
|
|
[data-offset^="09"] {--offset-hour: 9}
|
|
[data-offset^="10"] {--offset-hour: 10}
|
|
[data-offset^="11"] {--offset-hour: 11}
|
|
[data-offset^="12"] {--offset-hour: 12}
|
|
[data-offset^="13"] {--offset-hour: 13}
|
|
[data-offset^="14"] {--offset-hour: 14}
|
|
[data-offset^="15"] {--offset-hour: 15}
|
|
[data-offset^="16"] {--offset-hour: 16}
|
|
[data-offset^="17"] {--offset-hour: 17}
|
|
[data-offset^="18"] {--offset-hour: 18}
|
|
[data-offset^="19"] {--offset-hour: 19}
|
|
[data-offset^="20"] {--offset-hour: 20}
|
|
[data-offset^="21"] {--offset-hour: 21}
|
|
[data-offset^="22"] {--offset-hour: 22}
|
|
[data-offset^="23"] {--offset-hour: 23}
|
|
[data-offset^="24"] {--offset-hour: 24}
|
|
|
|
[data-offset$="05"] {--offset-minute: 5}
|
|
[data-offset$="10"] {--offset-minute: 10}
|
|
[data-offset$="15"] {--offset-minute: 15}
|
|
[data-offset$="20"] {--offset-minute: 20}
|
|
[data-offset$="25"] {--offset-minute: 25}
|
|
[data-offset$="30"] {--offset-minute: 30}
|
|
[data-offset$="35"] {--offset-minute: 35}
|
|
[data-offset$="40"] {--offset-minute: 40}
|
|
[data-offset$="45"] {--offset-minute: 45}
|
|
[data-offset$="50"] {--offset-minute: 50}
|
|
[data-offset$="55"] {--offset-minute: 55}
|
|
|
|
/* minute based micro adjustment offset from 5-minute raster */
|
|
[data-offset-shift^="1"] {--offset-start: 1}
|
|
[data-offset-shift^="2"] {--offset-start: 2}
|
|
[data-offset-shift^="3"] {--offset-start: 3}
|
|
[data-offset-shift^="4"] {--offset-start: 4}
|
|
|
|
[data-offset-shift$="1"] {--offset-end: 1}
|
|
[data-offset-shift$="2"] {--offset-end: 2}
|
|
[data-offset-shift$="3"] {--offset-end: 3}
|
|
[data-offset-shift$="4"] {--offset-end: 4}
|
|
|
|
|
|
[data-duration^="00"] {--duration-hour: 0}
|
|
[data-duration^="01"] {--duration-hour: 1}
|
|
[data-duration^="02"] {--duration-hour: 2}
|
|
[data-duration^="03"] {--duration-hour: 3}
|
|
[data-duration^="04"] {--duration-hour: 4}
|
|
[data-duration^="05"] {--duration-hour: 5}
|
|
[data-duration^="06"] {--duration-hour: 6}
|
|
[data-duration^="07"] {--duration-hour: 7}
|
|
[data-duration^="08"] {--duration-hour: 8}
|
|
[data-duration^="09"] {--duration-hour: 9}
|
|
[data-duration^="10"] {--duration-hour: 10}
|
|
[data-duration^="11"] {--duration-hour: 11}
|
|
[data-duration^="12"] {--duration-hour: 12}
|
|
[data-duration^="13"] {--duration-hour: 13}
|
|
[data-duration^="14"] {--duration-hour: 14}
|
|
[data-duration^="15"] {--duration-hour: 15}
|
|
[data-duration^="16"] {--duration-hour: 16}
|
|
[data-duration^="17"] {--duration-hour: 17}
|
|
[data-duration^="18"] {--duration-hour: 18}
|
|
[data-duration^="19"] {--duration-hour: 19}
|
|
[data-duration^="20"] {--duration-hour: 20}
|
|
[data-duration^="21"] {--duration-hour: 21}
|
|
[data-duration^="22"] {--duration-hour: 22}
|
|
[data-duration^="23"] {--duration-hour: 23}
|
|
[data-duration^="24"] {--duration-hour: 24}
|
|
|
|
[data-duration$="00"] {--duration-minute: 0}
|
|
[data-duration$="05"] {--duration-minute: 5}
|
|
[data-duration$="10"] {--duration-minute: 10}
|
|
[data-duration$="15"] {--duration-minute: 15}
|
|
[data-duration$="20"] {--duration-minute: 20}
|
|
[data-duration$="25"] {--duration-minute: 25}
|
|
[data-duration$="30"] {--duration-minute: 30}
|
|
[data-duration$="35"] {--duration-minute: 35}
|
|
[data-duration$="40"] {--duration-minute: 40}
|
|
[data-duration$="45"] {--duration-minute: 45}
|
|
[data-duration$="50"] {--duration-minute: 50}
|
|
[data-duration$="55"] {--duration-minute: 55}
|
|
|
|
.day-timeline {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
display: grid;
|
|
gap: 0;
|
|
--grid-cols: calc(var(--duration-hour, 0) * 60/var(--raster-size, 5) + var(--duration-minute, 0) / var(--raster-size, 5));
|
|
grid-template-columns: repeat(var(--grid-cols), minmax(var(--col-min-size, 3em), 1fr));
|
|
grid-template-rows: repeat(var(--concurrency, 1), auto);
|
|
}
|
|
|
|
|
|
.day-timeline {
|
|
--total-concurrency: var(--concurrency);
|
|
}
|
|
.day-timeline > li {
|
|
grid-column: calc(1 + var(--offset-hour, 0)*60/var(--raster-size, 5) + var(--offset-minute, 0)/var(--raster-size, 5)) / span calc(var(--duration-hour, 0)*60/var(--raster-size, 5) + var(--duration-minute, 0)/var(--raster-size, 5));
|
|
grid-row: var(--concurrency, 1) / span 1;
|
|
padding: 3px 8px 0;
|
|
/* add 11px of padding-bottom to the events with --concurrency being the same as --total-concurrency, otherwise 0px */
|
|
padding-bottom: #{'round(down, calc(11px * var(--concurrency)/var(--total-concurrency)), 11px)'};
|
|
}
|
|
|
|
.day-timeline > li[data-concurrency="1"] {
|
|
padding-top: 8px;
|
|
}
|
|
.day-timeline > li:focus-within {
|
|
z-index: 2; /* move to front so focus-outline overlays other elements */
|
|
}
|
|
|
|
.ticks li, .tick {
|
|
grid-row: 1 / span var(--concurrency, 1) !important;
|
|
}
|
|
.ticks li {
|
|
padding: 11px 8px 8px;
|
|
line-height: 1;
|
|
border-top-left-radius: $border-radius-base;
|
|
border-top-right-radius: $border-radius-base;
|
|
border-bottom: 2px solid $table-border-color;
|
|
font-weight: bold;
|
|
}
|
|
.tick {
|
|
background-color: $table-bg-accent;
|
|
}
|
|
.day-timeline:nth-last-of-type(1) li {
|
|
border-bottom-left-radius: $border-radius-base;
|
|
border-bottom-right-radius: $border-radius-base;
|
|
}
|
|
|
|
|
|
|
|
.day-calendar a.event {
|
|
--duration: calc(var(--duration-hour, 0)*60 + var(--duration-minute));
|
|
margin-left: calc(var(--offset-start, 0) / var(--duration) * 100%);
|
|
margin-right: calc(var(--offset-end, 0) / var(--duration) * 100%);
|
|
}
|
|
|
|
|
|
@media (min-width: $screen-md-min) {
|
|
.week-calendar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
details[open] summary {
|
|
cursor: default;
|
|
pointer-events: none;
|
|
h3 .fa {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.weekday {
|
|
flex: 1;
|
|
padding: 0 8px 8px;
|
|
}
|
|
.weekday:nth-child(even) {
|
|
background-color: $table-bg-accent;
|
|
}
|
|
.weekday h3 {
|
|
margin-left: -8px;
|
|
margin-right: -8px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
}
|
|
.weekday:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.weekday:last-child {
|
|
margin-right: 0;
|
|
}
|
|
.no-events {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
@media (max-width: $screen-xs-max) {
|
|
.table-calendar {
|
|
.day, .no-day {
|
|
padding: 3px 2px;
|
|
}
|
|
p {
|
|
margin-bottom: 0;
|
|
}
|
|
.day .events {
|
|
display: none;
|
|
}
|
|
a.day-label, .day-label {
|
|
--status-text-color: #{$text-muted};
|
|
display: block;
|
|
padding: 3px 3px 15px 12px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: var(--status-text-color);
|
|
margin-bottom: 0;
|
|
}
|
|
.no-events .day-label {
|
|
padding-left: 12px;
|
|
}
|
|
a.day-label:before {
|
|
width: 8px;
|
|
}
|
|
}
|
|
#selected-day:has(*) {
|
|
padding: $table-cell-padding;
|
|
}
|
|
}
|
|
#monthselform .row {
|
|
margin: 0 -15px;
|
|
}
|
|
#monthselform .row > div {
|
|
margin-bottom: 15px;
|
|
}
|
|
@media(min-width: $screen-sm-min) {
|
|
.select-calendar-week-short {
|
|
max-width: 50%;
|
|
}
|
|
}
|