diff --git a/src/pretix/presale/templates/pretixpresale/fragment_calendar.html b/src/pretix/presale/templates/pretixpresale/fragment_calendar.html index c4b32e461..a843b09ae 100644 --- a/src/pretix/presale/templates/pretixpresale/fragment_calendar.html +++ b/src/pretix/presale/templates/pretixpresale/fragment_calendar.html @@ -2,7 +2,7 @@ {% load date_fast %} {% load calendarhead %}
- +
@@ -18,7 +18,26 @@ {% if day %} -
{% trans "Calendar" %}
-

+

+ {% if day.events %} + + + {% else %} + + {% endif %} +

    {% for event in day.events %}
  • -
+
diff --git a/src/pretix/static/pretixbase/scss/_theme_variables.scss b/src/pretix/static/pretixbase/scss/_theme_variables.scss index fd6c5b25d..3d3564ce1 100644 --- a/src/pretix/static/pretixbase/scss/_theme_variables.scss +++ b/src/pretix/static/pretixbase/scss/_theme_variables.scss @@ -53,7 +53,9 @@ $in-border-radius-small: 2px !default; --pretix-brand-primary-darken-17: #{darken($in-brand-primary, 17%)}; --pretix-brand-primary-darken-20: #{darken($in-brand-primary, 20%)}; --pretix-brand-primary-darken-30: #{darken($in-brand-primary, 30%)}; + --pretix-brand-primary-tint-90: #{tint($in-brand-primary, 90%)}; --pretix-brand-primary-shade-25: #{shade($in-brand-primary, 25%)}; + --pretix-brand-primary-shade-42: #{shade($in-brand-primary, 42%)}; --pretix-brand-primary-lighten-28-saturate-20: #{saturate(lighten($in-brand-primary, 28%), 20%)}; --pretix-brand-primary-lighten-23-saturate-2: #{saturate(lighten($in-brand-primary, 23%), 2%)}; diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js index 68d68cdea..72d74a970 100644 --- a/src/pretix/static/pretixpresale/js/ui/main.js +++ b/src/pretix/static/pretixpresale/js/ui/main.js @@ -459,10 +459,26 @@ $(function () { .on("change mouseup keyup", update_cart_form); $(".table-calendar td.has-events").click(function () { - var $tr = $(this).closest(".table-calendar").find(".selected-day"); - $tr.find("td").html($(this).find(".events").clone()); - $tr.find("td").prepend($("

").text($(this).attr("data-date"))); - $tr.removeClass("hidden"); + var $grid = $(this).closest("[role='grid']"); + $grid.find("[aria-selected]").attr("aria-selected", false); + $(this).attr("aria-selected", true); + $("#selected-day") + .html($(this).find(".events").clone()) + .prepend($("

").text($(this).attr("data-date"))); + }).each(function() { + // check all events classes and set the "winning" class for the availability of the day-label on mobile + var $dayLabel = $('.day-label', this); + if ($('.available.low', this).length == $('.available', this).length) { + $dayLabel.addClass('low'); + } + var classes = ['available', 'waitinglist', 'soon', 'reserved', 'soldout', 'continued', 'over']; + for (var c of classes) { + if ($('.'+c, this).length) { + $dayLabel.addClass(c); + // CAREFUL: „return“ as „break“ is not supported before ES2015 and breaks e.g. on iOS 15 + return; + } + } }); $(".print-this-page").on("click", function (e) { diff --git a/src/pretix/static/pretixpresale/scss/_calendar.scss b/src/pretix/static/pretixpresale/scss/_calendar.scss index 379967eb5..e3e9ed1c2 100644 --- a/src/pretix/static/pretixpresale/scss/_calendar.scss +++ b/src/pretix/static/pretixpresale/scss/_calendar.scss @@ -13,93 +13,66 @@ padding: 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(--pretix-brand-primary-lighten-48); - color: $brand-primary; + background: var(--status-bg-color); + color: var(--status-text-color); + border: 1px solid var(--status-border-color); border-radius: $border-radius-base; - border-style: solid; - border-color: var(--pretix-brand-primary-lighten-30); - border-width: 1px 1px 1px 12px; - border-left-color: inherit; + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 11px; + height: 100%; + background: var(--status-border-color); + } - padding: 3px 5px; + padding: 3px 5px 3px 17px; margin-bottom: 3px; font-size: 12px; overflow-wrap: anywhere; text-decoration: none; &:hover { - background: var(--pretix-brand-primary-lighten-50); - border-color: $brand-primary; + outline: 1px solid var(--status-border-color); + outline-offset: 0; } &:focus { - outline-color: inherit; + outline: 2px solid var(--status-border-color); + outline-offset: 2px; } &.continued, &.over { - background: lighten(#767676, 54%); - border-color: lighten(#767676, 44%); - border-left-color: lighten(#767676, 44%); - color: #767676; - &:hover { - background: lighten(#767676, 54%); - border-color: lighten(#767676, 40%); - } - } - - &.soon { - background: var(--pretix-brand-primary-lighten-53); - border-color: var(--pretix-brand-primary-lighten-40); - border-left-color: var(--pretix-brand-primary-lighten-20); - color: var(--pretix-brand-primary-lighten-5); - &:hover { - background: var(--pretix-brand-primary-lighten-55); - border-color: var(--pretix-brand-primary-lighten-20); - } + --status-bg-color: #{$table-bg-accent}; + --status-text-color: #{$text-muted}; + --status-border-color: #{tint($text-muted, 50%)}; } &.available { - background: var(--pretix-brand-success-lighten-48); - border-color: var(--pretix-brand-success-lighten-30); - border-left-color: $brand-success; - color: var(--pretix-brand-success-darken-12); + --status-bg-color: #{$alert-success-bg}; + --status-text-color: #{$alert-success-text}; + --status-border-color: #{$alert-success-border}; - &.low { - border-left-color: var(--pretix-brand-warning-lighten-12); - } - - &:hover { - background: var(--pretix-brand-success-lighten-50); - border-color: $brand-success; - - &.low { - border-left-color: $brand-warning; - } + &.low:before { + background: linear-gradient(to bottom, var(--pretix-brand-warning) 1em, var(--status-border-color) 2.5em); } } &.waitinglist { - background: var(--pretix-brand-warning-lighten-41); - border-color: var(--pretix-brand-warning-lighten-31); - border-left-color: var(--pretix-brand-warning-lighten-12); - color: #963; - - &:hover { - background: var(--pretix-brand-warning-lighten-43); - border-color: $brand-warning; - } + --status-bg-color: #{$alert-warning-bg}; + --status-text-color: #{$alert-warning-text}; + --status-border-color: #{$alert-warning-border}; } &.reserved, &.soldout, { - background: var(--pretix-brand-danger-lighten-43); - border-color: var(--pretix-brand-danger-lighten-30); - border-left-color: var(--pretix-brand-danger-lighten-30); - color: var(--pretix-brand-danger-darken-5); - - &:hover { - background: var(--pretix-brand-danger-lighten-45); - border-color: var(--pretix-brand-danger-lighten-25); - } + --status-bg-color: #{$alert-danger-bg}; + --status-text-color: #{$alert-danger-text}; + --status-border-color: #{$alert-danger-border}; } &.available > *:first-child, @@ -434,8 +407,6 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma } - - @media (min-width: $screen-md-min) { .week-calendar { display: flex; @@ -464,24 +435,35 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma } } } -@media (min-width: $screen-sm-min) { - .table-calendar, .week-calendar { - .selected-day { - display: none !important; +@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; } } -} -@media (max-width: $screen-xs-max) { - .table-calendar .day .events { - display: none; - } - .table-calendar td.day.has-events { - background: $brand-primary; - cursor: pointer; - color: white; - } - .table-calendar td.day.has-events:hover { - background: var(--pretix-brand-primary-darken-15); + #selected-day:has(*) { + padding: $table-cell-padding; } } #monthselform .row {