From cac30992a656598b0e357e8c24778d7223548c9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Sun, 21 Aug 2022 16:18:14 +0200
Subject: [PATCH] [ADD] responsive article detail
---
.../molecules/articles/article-perex.mustache | 8 ++--
.../article-richtext-content.mustache | 6 +--
.../molecules/blocks/block-download.mustache | 6 +--
.../molecules/blocks/block-image.mustache | 10 ++---
.../molecules/blocks/block-quote.mustache | 6 +--
.../templates/article-detail.mustache | 2 +-
.../source/css/atoms/container.pcss | 42 +++++++++++++++----
main/styleguide/source/css/atoms/heading.pcss | 2 +-
8 files changed, 53 insertions(+), 29 deletions(-)
diff --git a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
index 5d344bf5..4fad5b13 100644
--- a/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/article-perex.mustache
@@ -1,10 +1,10 @@
-<div class="grid-container mb-12">
- <div class="col-start-1 col-end-2 h-full bg-grey-150 left-tab">
+<div class="grid-container mb-2 lg:mb-12">
+ <div class="grid-left-side h-full bg-grey-150 left-tab">
<div class="p-6">
<span class="font-bold">AUTOR ČLÁNKU: <br> KAREL KOMÁREK</span><br>
</div>
</div>
- <div class="col-start-2 col-end-3 leading-6">
+ <div class="grid-content leading-6">
<h2 class="head-xl">
Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z prostředků
rozpočtu České republiky.
@@ -15,5 +15,5 @@
kteří neodsoudí akt vojenské agrese vůči Ukrajině.
</h2>
</div>
- <div class="col-start-3 col-end-3 h-full bg-grey-150 right-tab"></div>
+ <div class="hidden grid-right-side h-full bg-grey-150 right-tab xl:block"></div>
</div>
diff --git a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
index 88128eee..5ad0f6db 100644
--- a/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/article-richtext-content.mustache
@@ -1,10 +1,10 @@
-<div class="grid-container mb-12">
- <div class="col-start-2 col-end-3">
+<div class="grid-container mb-2 lg:mb-12">
+ <div class="grid-content">
<h2 class="head-4xl">
Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z prostředků
rozpočtu České republiky.
</h2>
- <p class="mb-12">
+ <p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
index f39ede73..f5237e53 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
@@ -1,8 +1,8 @@
-<div class="grid-container py-4 mb-20 bg-grey-150">
- <div class="col-start-1 col-end-2 flex justify-end">
+<div class="grid-container px-4 mb-4 bg-grey-150 xl:mb-20">
+ <div class="flex justify-start xl:justify-end grid-left-side">
<i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
</div>
- <div class="col-start-2 col-end-4 flex items-center">
+ <div class="grid-content flex items-center flex-wrap gap-3">
<div class="flex items-center bg-white p-3 h-11 mr-3">
<span class="font-bold mr-1">Stáhnout soubor: </span>
<span>prehled-tabulka.pdf</span>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
index 51ecb075..821168c2 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
@@ -1,11 +1,11 @@
-<div class="grid-container mb-20 bg-grey-150">
- <div class="col-start-2 col-end-4 flex">
- <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="max-w-md mr-10">
+<div class="grid-container px-3 pt-3 mb-4 bg-grey-150 xl:pt-0 xl:mb-20">
+ <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
+ <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="w-full max-w-sm">
<div class="flex flex-col justify-between">
- <a href="" class="mt-8 font-bold hover:no-underline leading-5">
+ <a href="" class="mt-0 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
Et harum quidem rerum facilis est et expedita distinctio.
</a>
- <span class="text-sm text-grey-200 uppercase mb-6">zdroj: www.internet.cz</span>
+ <span class="text-sm text-grey-200 uppercase mb-0 xl:mb-6">zdroj: www.internet.cz</span>
</div>
</div>
</div>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
index 83a20ac7..c3c07e46 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
@@ -1,8 +1,8 @@
-<div class="grid-container py-4 mb-20 bg-grey-150 pt-10">
- <div class="col-start-1 col-end-2 flex justify-end">
+<div class="grid-container px-4 mb-4 bg-grey-150 pt-10 lg:mb-20">
+ <div class="grid-left-side flex justify-start xl:justify-end">
<i class="ico--code text-7xl mr-12"></i>
</div>
- <div class="flex flex-col col-start-2 col-end-4">
+ <div class="flex flex-col grid-content">
<span class="head-4xl">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
<span class="font-alt text-turquoise-500 mb-6">– ADÉLA ŠÍPOVÁ, SENÁTORKA ZA PIRÁTY</span>
</div>
diff --git a/main/styleguide/source/_patterns/templates/article-detail.mustache b/main/styleguide/source/_patterns/templates/article-detail.mustache
index 64a7d564..cd8e962a 100644
--- a/main/styleguide/source/_patterns/templates/article-detail.mustache
+++ b/main/styleguide/source/_patterns/templates/article-detail.mustache
@@ -2,7 +2,7 @@
{{> molecules-article-photo-header }}
-<main role="main" class="mb-32">
+<main role="main" class="mb-10 xl:mb-32">
{{> molecules-article-perex }}
{{> molecules-article-richtext-content }}
{{> molecules-block-quote }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 2d81e61d..d05b5fa0 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -35,19 +35,43 @@
}
.grid-container {
- @apply grid;
- grid-template-columns: 240px 1fr 102px;
- margin-left: 10%;
+ @apply grid mx-5;
+ grid-template-columns: 1fr;
+ grid-template-areas:
+ "left-side"
+ "content"
+ "right-side";
+ gap: 1rem;
max-width: 1150px;
-
- .left-tab {
- margin-right: 1.5rem;
- }
- .right-tab {
- margin-left: 1.5rem;
+}
+@responsive {
+ .grid-container {
+ @screen xl {
+ grid-template-columns: 240px 1fr 102px;
+ grid-template-areas:
+ "left-side content right-side";
+ margin-left: 10%;
+ }
}
}
+.grid-content {
+ grid-area: content;
+}
+
+.grid-left-side {
+ grid-area: left-side;
+}
+
+.grid-right-side {
+ grid-area: right-side;
+}
+
+.grid-content-with-right-side {
+ grid-column-start: content;
+ grid-column-end: right-side;
+}
+
@responsive {
/* Removes default container padding from the element. */
/* @note: needs to be kept in sync with tailwind configuration */
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 7b08cd44..97bfa548 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -146,7 +146,7 @@
.head-xl {
- @apply text-xl font-bold leading-7 uppercase;
+ @apply text-base lg:text-xl font-bold leading-7 uppercase;
}
.head-2xl {
--
GitLab