Improve margins of sidebar labels

This commit is contained in:
Björn Fromme
2021-12-21 17:27:21 +01:00
parent 6115777576
commit b2b981ef14
3 changed files with 22 additions and 17 deletions
@@ -1,6 +1,6 @@
<f:if condition="{region.webcam.available}">
<div class="bg-gray-50 p-4 mb-8">
<p class="font-bold">
<p class="font-bold mb-2">
Webcam
</p>
<a href="{region.webcam.url}"
@@ -1,7 +1,7 @@
<f:if condition="{region.regionMaps}">
<div class="bg-gray-50 p-4 mb-4"
data-controller="lightbox">
<p class="font-bold mb-1">
<p class="font-bold mb-2">
Pistenplan
</p>
<f:for each="{region.regionMaps}" as="regionMap" iteration="iteration">
@@ -205,7 +205,7 @@
</div>
</f:if>
<div class="bg-gray-50 p-4 mb-4">
<p class="font-bold">
<p class="font-bold mb-2">
Lage
</p>
<div class="w-full aspect-w-16 aspect-h-9"
@@ -354,20 +354,25 @@
<f:section name="SidebarGallery">
<f:if condition="{product.images}">
<div class="bg-gray-50 p-4 mb-4 grid grid-cols-4 gap-2"
data-controller="lightbox">
<f:for each="{product.images}" as="image" iteration="iteration">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-lightbox-target="thumb"
data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="{image.originalResource.description}"
data-action="lightbox#open">
<img data-src="{f:uri.image(image: image, width: '160', height: '160c+100')}"
class="block w-full h-auto lazyload"
alt="{image.alternative}"
title="{image.title}">
</a>
</f:for>
<div class="bg-gray-50 p-4 mb-4">
<p class="font-bold mb-2">
Galerie
</p>
<div class="grid grid-cols-4 gap-2"
data-controller="lightbox">
<f:for each="{product.images}" as="image" iteration="iteration">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-lightbox-target="thumb"
data-lightbox-index="{iteration.cycle}"
data-lightbox-caption="{image.originalResource.description}"
data-action="lightbox#open">
<img data-src="{f:uri.image(image: image, width: '160', height: '160c+100')}"
class="block w-full h-auto lazyload"
alt="{image.alternative}"
title="{image.title}">
</a>
</f:for>
</div>
</div>
</f:if>
</f:section>