From 6c93779babacc15c13f14aa8a62382c51350a975 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Thu, 18 Aug 2022 15:07:56 +0200
Subject: [PATCH] [ADD] Article detail page
---
.../molecules/blocks/block-download.mustache | 16 +-
.../molecules/blocks/block-image.mustache | 11 ++
.../molecules/blocks/block-quote.mustache | 13 +-
.../templates/article-detail.mustache | 167 ++++++++++--------
.../source/css/atoms/container.pcss | 8 +-
main/styleguide/source/css/atoms/heading.pcss | 14 ++
main/styleguide/tailwind.config.js | 4 +-
7 files changed, 148 insertions(+), 85 deletions(-)
create mode 100644 main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
index d7847714..633819bd 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
@@ -1,8 +1,12 @@
-<div class="bg-grey-200 py-4 flex items-center w-full mb-20">
- <i class="ico--download text-5xl mr-6 ml-32"></i>
- <div class="flex items-center bg-white p-4 mr-2">
- <span class="font-bold mr-1">Stáhnout soubor: </span>
- <span>prehled-tabulka.pdf</span>
+<div class="grid-container bg-grey-200 py-4 mb-20 bg-grey-150">
+ <div class="col-start-1 col-end-4 flex justify-end">
+ <i class="ico--download text-6xl mr-12 pt-5 pb-5"></i>
+ </div>
+ <div class="col-start-4 col-end-13 flex items-center">
+ <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>
+ </div>
+ {{> atoms-button-animated(btn-text: "Stáhnout", classes: "h-11 p-0") }}
</div>
- {{> atoms-button-animated(btn-text: "Stáhnout", classes: "h-full") }}
</div>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
new file mode 100644
index 00000000..457f0a91
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
@@ -0,0 +1,11 @@
+<div class="grid-container bg-grey-200 mb-20 bg-grey-150">
+ <div class="col-start-4 col-end-13 flex">
+ <img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="max-w-md mr-10">
+ <div class="flex flex-col justify-between">
+ <a href="" class="mt-8 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>
+ </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 5e5d5bb0..aef2765e 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-quote.mustache
@@ -1,7 +1,10 @@
-<div class="bg-grey-200 py-4 flex w-full mb-20">
- <i class="ico--code text-7xl mr-6 ml-32"></i>
- <div class="flex flex-col">
- <span class="font-alt mb-4 text-4xl max-w-md">Senát chce v souvislosti s ruskou agresí zabránit některým firmám</span>
- <span class="font-alt text-turquoise-500">– ADÉLA ŠÍPOVÁ, SENÁTORKA ZA PIRÁTY</span>
+<div class="grid-container bg-grey-200 py-4 mb-20 bg-grey-150 pt-10">
+ <div class="col-start-1 col-end-4 flex justify-end">
+ <i class="ico--code text-7xl mr-12"></i>
</div>
+ <div class="flex flex-col col-start-4 col-end-12">
+ <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>
+ <div class="col-start-12 col-end-13 h-full bg-grey-200 right-tab"></div>
</div>
diff --git a/main/styleguide/source/_patterns/templates/article-detail.mustache b/main/styleguide/source/_patterns/templates/article-detail.mustache
index e6f6274b..8dfaf7cd 100644
--- a/main/styleguide/source/_patterns/templates/article-detail.mustache
+++ b/main/styleguide/source/_patterns/templates/article-detail.mustache
@@ -2,32 +2,53 @@
{{> molecules-article-photo-header }}
-<main role="main">
- <div class="grid-container">
- <div class="col-start-1 col-end-4 h-44 bg-grey-200">
- <div class="p-2">
+<main role="main" class="mb-32">
+ <div class="grid-container mb-12">
+ <div class="col-start-1 col-end-4 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-4 col-end-12 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.
+ Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných prostředků k urychlené tvorbě zákona,
+ který zamezí poskytování dotací, pobídek, úvěrů a veřejných zakázek z rozpočtu ČR firmám a občanům Ruské federace a Běloruska,
+ kteří neodsoudí akt vojenské agrese vůči Ukrajině.
+ </h2>
+ </div>
+ <div class="col-start-12 col-end-13 h-full bg-grey-150 right-tab"></div>
+ </div>
+ <div class="grid-container mb-12">
+ <div class="col-start-4 col-end-12">
<p class="mb-12">
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. Nemo
- enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
- qui
- ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
- adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
- voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
- aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam
- nihil
- molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et
- iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et
- quas
- molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt
- mollitia
- animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+ aperiam,
+ eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. id est laborum
+ et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 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. Nemo enim ipsam voluptatem quia voluptas sit
+ aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+ eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+ nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+ vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
+ eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
+ praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
+ non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
+ harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
+ voluptatem accusantium doloremque laudantium…
</p>
- <p class="mb-12">
+ </div>
+ </div>
+ {{> molecules-block-quote }}
+ <div class="grid-container mb-12">
+ <div class="col-start-4 col-end-12">
+ <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>
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
@@ -52,61 +73,67 @@
voluptatem accusantium doloremque laudantium…
</p>
</div>
- <div class="col-start-12 col-end-13 h-44 bg-grey-200"></div>
</div>
- <div class="grid-container">
- <div class="col-start-1 col-end-13">
- {{> molecules-block-quote }}
+ {{> molecules-block-download }}
+ <div class="grid-container mb-12">
+ <div class="col-start-4 col-end-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
+ et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 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. Nemo enim ipsam voluptatem quia voluptas sit
+ aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+ numquam
+ eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+ nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+ vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
+ dolorem
+ eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui
+ blanditiis
+ praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+ cupiditate
+ non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
+ harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
+ voluptatem accusantium doloremque laudantium…
+ </p>
</div>
</div>
- <div class="container--narrow leading-6">
- <h2 class="font-alt mb-7 text-4xl leading-10">
- 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">
- 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
- et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 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. Nemo enim ipsam voluptatem quia voluptas sit
- aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
- eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
- nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
- vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
- eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
- praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
- non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
- harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
- voluptatem accusantium doloremque laudantium…
- </p>
- </div>
- <div class="container--medium">
- {{> molecules-block-download }}
- </div>
- <div class="container--narrow leading-6">
- <p class="mb-12">
- 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
- et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 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. Nemo enim ipsam voluptatem quia voluptas sit
- aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
- eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
- nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
- vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem
- eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
- praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate
- non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
- harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
- voluptatem accusantium doloremque laudantium…
- </p>
+ {{> molecules-block-image }}
+ <div class="grid-container mb-12">
+ <div class="col-start-4 col-end-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
+ et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. 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. Nemo enim ipsam voluptatem quia voluptas sit
+ aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non
+ numquam
+ eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
+ nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
+ vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
+ dolorem
+ eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui
+ blanditiis
+ praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+ cupiditate
+ non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et
+ harum quidem rerum facilis est et expedita distinctio. Sed ut perspiciatis unde omnis iste natus error sit
+ voluptatem accusantium doloremque laudantium…
+ </p>
+ </div>
</div>
- {{> organisms-newsletter-section }}
</main>
+{{> organisms-newsletter-section }}
+
{{> organisms-footer }}
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index 90fff43a..2b7f60ea 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -24,10 +24,14 @@
.grid-container {
@apply grid grid-cols-12;
margin-left: 10%;
- max-width: 1200px;
- > div {
+ max-width: 1300px;
+
+ .left-tab {
margin-right: 1.5rem;
}
+ .right-tab {
+ margin-left: 1.5rem;
+ }
}
@responsive {
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 66dc246b..5ac9895f 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -138,3 +138,17 @@
.header-clip {
clip-path: polygon(0 0, 100% 0, 100% 88%, 0% 100%);
}
+
+
+
+.head-xl {
+ @apply text-xl font-bold leading-7 uppercase;
+}
+
+.head-4xl {
+ @apply text-4xl font-bold leading-10 uppercase mb-5;
+}
+
+p {
+ @apply leading-6;
+}
diff --git a/main/styleguide/tailwind.config.js b/main/styleguide/tailwind.config.js
index 359b3220..ce4ce109 100644
--- a/main/styleguide/tailwind.config.js
+++ b/main/styleguide/tailwind.config.js
@@ -71,8 +71,8 @@ module.exports = {
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',
- '150': '#CDCDCD',
- '200': '#ECECEC',
+ '150': '#ECECEC',
+ '200': '#ADADAD',
'300': '#4c4c4c',
'400': '#343434',
'500': '#303132',
--
GitLab