grid and mobile

This commit is contained in:
bkfox 2024-02-12 14:41:09 +01:00
parent df41885cca
commit bba4935791
4 changed files with 33 additions and 5 deletions

View File

@ -13,6 +13,7 @@ class AircoxMiddleware(object):
"""Middleware used to get default info for the given website.
It provide following request attributes:
- ``mobile``: set to True if mobile device is detected
- ``station``: current Station
This middleware must be set after the middleware
@ -24,6 +25,11 @@ class AircoxMiddleware(object):
def __init__(self, get_response):
self.get_response = get_response
def is_mobile(self, request):
if agent := request.META.get("HTTP_USER_AGENT"):
return " Mobi" in agent
return False
def get_station(self, request):
"""Return station for the provided request."""
host = request.get_host()
@ -45,6 +51,7 @@ class AircoxMiddleware(object):
def __call__(self, request):
self.init_timezone(request)
request.station = self.get_station(request)
request.is_mobile = self.is_mobile(request)
try:
return self.get_response(request)
except Redirect:

View File

@ -40,7 +40,7 @@ Usefull context:
{% block head_extra %}{% endblock %}
</head>
<body>
<body {% if request.is_mobile %}class="mobile"{% endif %}>
<script id="init-script">
window.addEventListener('load', function() {
{% block init-scripts %}

View File

@ -7,7 +7,7 @@ Context:
- url_label: label of url button
{% endcomment %}
<a-carousel section-class="card-grid">
<a-carousel>
{% for object in objects %}
{% page_widget "card" object %}
{% endfor %}

View File

@ -465,18 +465,39 @@
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
gap: v.$mp-4;
// .grid-wide { grid-column: 1 / 3; }
}
@media screen and (max-width: v.$screen-smaller) {
@mixin list-grid-1 {
.list-grid {
grid-template-columns: 1fr;
// .grid-wide { grid-column: 1; }
}
}
@mixin list-grid-2 {
.list-grid {
grid-template-columns: 1fr;
// .grid-wide { grid-column: 1; }
}
}
@mixin list-grid-3 {
.list-grid {
grid-template-columns: 1fr;
// .grid-wide { grid-column: 1; }
}
}
.mobile {
@include list-grid-1;
}
@media screen and (max-width: v.$screen-smaller) {
@include list-grid-1;
}
// ---- ---- Carousel
.a-carousel {