From 254a700142fa1de3b84fe1921e17216b8be9544c Mon Sep 17 00:00:00 2001 From: OndraRehounek <ondra.rehounek@seznam.cz> Date: Fri, 11 Nov 2022 14:24:28 +0100 Subject: [PATCH] november updates vol 1 --- README.md | 6 +++- .../{local-example.py => local.py.example} | 0 .../atoms/buttons/button_animated.html | 4 --- .../atoms/buttons/form_button_animated.html | 4 --- .../patterns/atoms/buttons/href_button.html | 7 +++++ ...{button_animated.yaml => href_button.yaml} | 0 .../atoms/buttons/href_button_secondary.html | 7 +++++ ...imated.yaml => href_button_secondary.yaml} | 0 .../patterns/atoms/buttons/plain_button.html | 7 +++++ .../patterns/atoms/buttons/plain_button.yaml | 4 +++ .../atoms/buttons/plain_button_animated.html | 8 ------ .../atoms/buttons/plain_button_secondary.html | 7 +++++ .../atoms/buttons/plain_button_secondary.yaml | 4 +++ .../patterns/atoms/buttons/submit_button.html | 7 +++++ ...utton_animated.yaml => submit_button.yaml} | 0 .../buttons/submit_button_secondary.html | 7 +++++ .../buttons/submit_button_secondary.yaml | 3 ++ .../articles/article_carousel_item.html | 4 +-- .../articles/article_timeline_preview.html | 2 +- .../molecules/articles/autor_perex.html | 28 +++++++++---------- .../articles/main_article_preview.html | 7 ++--- .../articles/person_article_preview.html | 2 +- .../articles/small_article_preview.html | 2 +- .../molecules/blocks/download_block.html | 2 +- .../molecules/boxes/bg_image_box.html | 2 +- .../molecules/boxes/small_image_box.html | 2 +- .../patterns/molecules/boxes/twitter_box.html | 13 +++++---- .../molecules/contact/contact_box.html | 2 +- .../contact/contact_person_large_box.html | 2 +- .../molecules/contact/contact_simple_box.html | 2 +- .../patterns/molecules/menus/carousel.html | 15 +++++----- .../patterns/molecules/menus/carousel.yaml | 12 ++++---- .../organisms/articles/articles_section.html | 14 +++++----- .../articles/main_articles_article_list.html | 2 +- .../articles/main_articles_timeline.html | 2 +- .../patterns/organisms/layout/navbar.html | 11 ++++---- .../main_section/newsletter_section.html | 12 ++++---- .../main_section/twitter_section.html | 2 +- .../templates/article/article_list.html | 16 +++++------ .../patterns/templates/people/people.html | 2 +- .../patterns/templates/people/person.html | 2 +- .../patterns/templates/program/program.html | 2 +- src/css/atoms/heading.pcss | 2 -- src/css/molecules/carousels.pcss | 9 ++++-- src/css/molecules/sliding_button.pcss | 4 ++- src/css/organisms/footer.pcss | 2 +- tailwind.config.js | 17 ++++++++++- 47 files changed, 167 insertions(+), 104 deletions(-) rename majak_uistyleguide/settings/{local-example.py => local.py.example} (100%) delete mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html delete mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html rename majak_uistyleguide/templates/patterns/atoms/buttons/{button_animated.yaml => href_button.yaml} (100%) create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html rename majak_uistyleguide/templates/patterns/atoms/buttons/{plain_button_animated.yaml => href_button_secondary.yaml} (100%) create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml delete mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html rename majak_uistyleguide/templates/patterns/atoms/buttons/{form_button_animated.yaml => submit_button.yaml} (100%) create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html create mode 100644 majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml diff --git a/README.md b/README.md index bf21502..655746e 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,6 @@ python manage.py migrate --settings=majak_uistyleguide.settings.dev python manage.py runserver --settings=majak_uistyleguide.settings.dev ``` - ### Setup Vite #### Install requirements @@ -57,6 +56,11 @@ python manage.py runserver --settings=majak_uistyleguide.settings.dev npm i ``` +### Dev mode (with setting DJANGO_VITE_DEV_MODE = True) +cp majak_uistyleguide/settings/local.py.example majak_uistyleguide/settings/local.py +npm run dev +python manage.py runserver --settings=majak_uistyleguide.settings.local + ### Build The build command compiles the styleguide CSS To build, run: diff --git a/majak_uistyleguide/settings/local-example.py b/majak_uistyleguide/settings/local.py.example similarity index 100% rename from majak_uistyleguide/settings/local-example.py rename to majak_uistyleguide/settings/local.py.example diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html deleted file mode 100644 index 56f76e8..0000000 --- a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html +++ /dev/null @@ -1,4 +0,0 @@ -<a href="{{ target_url }}" class="btn btn__slide__wrap {{ classes }}"> - <span class="btn text-lg bg-black px-1 text-white lg:text-base">{{ btn_text }}</span> - <span class="btn text-lg bg-white px-1 text-black lg:text-base">{{ btn_text }}</span> -</a> \ No newline at end of file diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html deleted file mode 100644 index f0202a9..0000000 --- a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html +++ /dev/null @@ -1,4 +0,0 @@ -<button type="submit" class="btn btn__slide__wrap {{ classes }}"> - <span class="btn text-base bg-black px-1 text-white"> {{ btn_text_form }} </span> - <span class="btn text-base bg-white px-1 text-black"> {{ btn_text_form }} </span> -</button> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html new file mode 100644 index 0000000..a645a05 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html @@ -0,0 +1,7 @@ +<a href="{{ target_url }}" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase"> + <span class="btn__body-wrap w-36 h-11"> + <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11"> + {{ btn_text }} + </span> + </span> +</a> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.yaml similarity index 100% rename from majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.yaml rename to majak_uistyleguide/templates/patterns/atoms/buttons/href_button.yaml diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html new file mode 100644 index 0000000..330e383 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html @@ -0,0 +1,7 @@ +<a href="{{ target_url }}" class="btn btn--white btn--to-black btn--hoveractive uppercase"> + <span class="btn__body-wrap w-36 h-11"> + <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11"> + {{ btn_text }} + </span> + </span> +</a> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.yaml similarity index 100% rename from majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.yaml rename to majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.yaml diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html new file mode 100644 index 0000000..9dcb21c --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html @@ -0,0 +1,7 @@ +<button type="button" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase"> + <span class="btn__body-wrap w-36 h-11"> + <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11"> + {{ btn_text }} + </span> + </span> +</button> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml new file mode 100644 index 0000000..9a02f75 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml @@ -0,0 +1,4 @@ +context: + target_url: 'https://example.com' + btn_text: 'Zobrazit další' + classes: '' \ No newline at end of file diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html deleted file mode 100644 index a4cd4ac..0000000 --- a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html +++ /dev/null @@ -1,8 +0,0 @@ -<button type="button" class="btn btn__slide__wrap {{ classes }}"> - <span class="btn text-base bg-black px-1 text-white"> - {{ btn_text }} - </span> - <span class="btn text-base bg-white px-1 text-black"> - {{ btn_text }} - </span> -</button> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html new file mode 100644 index 0000000..79c31a4 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html @@ -0,0 +1,7 @@ +<button type="button" class="btn btn--white btn--to-black btn--hoveractive uppercase"> + <span class="btn__body-wrap w-36 h-11"> + <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11"> + {{ btn_text }} + </span> + </span> +</button> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml new file mode 100644 index 0000000..9a02f75 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml @@ -0,0 +1,4 @@ +context: + target_url: 'https://example.com' + btn_text: 'Zobrazit další' + classes: '' \ No newline at end of file diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html new file mode 100644 index 0000000..a00dcd9 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html @@ -0,0 +1,7 @@ +<button type="submit" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase"> + <span class="btn__body-wrap w-36 h-11"> + <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11"> + {{ btn_text_form }} + </span> + </span> +</button> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.yaml similarity index 100% rename from majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.yaml rename to majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.yaml diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html new file mode 100644 index 0000000..53edd45 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html @@ -0,0 +1,7 @@ +<button type="submit" class="btn btn--white btn--to-black btn--hoveractive uppercase"> + <span class="btn__body-wrap w-36 h-11"> + <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11"> + {{ btn_text_form }} + </span> + </span> +</button> diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml new file mode 100644 index 0000000..ed4c7f7 --- /dev/null +++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml @@ -0,0 +1,3 @@ +context: + btn_text_form: 'Zobrazit další' + classes: '' \ No newline at end of file diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html index 73684af..5b76cc4 100644 --- a/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html +++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html @@ -11,7 +11,7 @@ {{ text_carousel }} </h4> </a> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zjistit více' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zjistit více' %} </div> </div> -</div> \ No newline at end of file +</div> diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html index be1fc7a..f8393fb 100644 --- a/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html +++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html @@ -14,6 +14,6 @@ {{ work_article_text }} </p> <div> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %} </div> </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html b/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html index 754e51d..cc77b94 100644 --- a/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html +++ b/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html @@ -1,26 +1,26 @@ <div class="grid-container mb-2 lg:mb-12 relative"> <div class="grid-left-side h-full bg-grey-150 left-tab"> <div class="p-6 flex flex-wrap flex-row items-center justify-between xl:items-start xl:flex-col"> - <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br>{{ autor_perex }}</span> - <span> + <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br>{{ autor_perex }}</span> + <div> <div class="flex flex-row static bottom-0 xl:absolute sm:bottom-5"> - <a href="" class="flex hover:no-underline"> - <i class="ico--facebook mx-1"></i> - </a> - <a href="" class="flex hover:no-underline"> - <i class="ico--twitter mx-2"></i> - </a> - <a href="" class="flex hover:no-underline"> - <i class="ico--instagram mx-1"></i> - </a> + <a href="" class="flex hover:no-underline"> + <i class="ico--facebook mx-1"></i> + </a> + <a href="" class="flex hover:no-underline"> + <i class="ico--twitter mx-2"></i> + </a> + <a href="" class="flex hover:no-underline"> + <i class="ico--instagram mx-1"></i> + </a> </div> - </span> + </div> </div> </div> <div class="grid-content leading-6"> - <h2 class="head-xl"> + <p class="font-condensed text-xl leading-7 mb-5"> {{ text_perex }} - </h2> + </p> </div> <div class="hidden grid-right-side h-full bg-grey-150 right-tab xl:block"></div> </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html index 7167167..2872ebc 100644 --- a/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html +++ b/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html @@ -1,14 +1,13 @@ <div class="flex flex-wrap mb-5 lg:mb-10"> <a href="#"> - <img src="../../../../static/images/person-table.png" alt="" - class="lg:max-w-lg lg:mr-11"> + <img src="../../../../static/images/person-table.png" alt="" class="lg:max-w-lg lg:mr-11"> </a> <div class="flex flex-col max-w-xl items-start"> - <span class="text-green-500 head-3xl mt-10 mb-4 lg:mb-8"> {{ main_article_date }} </span> + <span class="text-green-500 head-3xl mb-4 lg:mb-8"> {{ main_article_date }} </span> <a href="#" class="head-4xl mb-5 lg:mb-10"> {{ main_article_title }} </a> <p class="leading-6 mb-4 lg:mb-8"> {{ main_article_text }} </p> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %} </div> </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html index 76eb79f..f0053b9 100644 --- a/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html +++ b/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html @@ -11,5 +11,5 @@ <p class="mb-6"> {{ perston_article_text }} </p> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %} </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html index 6a5b144..f9d1d28 100644 --- a/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html +++ b/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html @@ -9,6 +9,6 @@ <h4 class="font-alt leading-5 text-base uppercase lg:text-base mb-2"> {{ small_article_text }} </h4> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %} </div> </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html b/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html index b947c28..c5c4eac 100644 --- a/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html +++ b/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html @@ -7,6 +7,6 @@ <span class="font-bold mr-1">Stáhnout soubor:</span> <span class="overflow-hidden text-ellipsis">{{ block_dowload_file_title }}</span> </div> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Stáhnout' classes='h-11 p-0' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Stáhnout' classes='h-11 p-0' %} </div> </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html index 4b51345..fcb15f6 100644 --- a/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html @@ -1,5 +1,5 @@ <div class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80 hover:no-underline" style="background-image: url('../../../../static/images/person-table.png')"> <h5 class="head-alt-md text-white mt-24 mb-8">{{ representative_title }}</h5> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Poslanecký klub' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Poslanecký klub' %} </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html index 8a35689..d298be8 100644 --- a/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html @@ -2,5 +2,5 @@ <img src="../../../../static/images/person-table.png" alt="" class="mb-8 max-w-20 max-h-20"> <h5 class="head-4xl mb-8">{{ box_link_title }}</h5> - {% include 'patterns/atoms/buttons/plain_button_animated.html' with btn_text='Přidat se k nám' classes='shrink-0' %} + {% include 'patterns/atoms/buttons/plain_button.html' with btn_text='Přidat se k nám' classes='shrink-0' %} </a> diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html index 1cefb01..9e34b2f 100644 --- a/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html @@ -1,11 +1,14 @@ <a href="#" class="mb-5 p-4 w-full flex flex-col items-center justify-between text-center border border-grey-100 sm:mb-0 hover:no-underline"> <div> - <div class="flex flex-row sm:flex-col items-center"> - <img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2" src="../../../../static/images/person-table.png" - alt="user image"/> + <div class="flex flex-row sm:flex-col items-start sm:items-center"> + <img + class="rounded-full shadow-sm w-12 mr-2 sm:mr-0 mb-0 sm:mb-2" + src="../../../../static/images/person-table.png" + alt="user image" + /> <div class="flex flex-col sm:flex-col"> - <h5 class="font-alt text-xl mb-2 sm:text-base">{{ twitter_person }}</h5> - <small class="mb-4 text-turquoise-400">{{ twitter_mail }}</small> + <h5 class="font-alt text-xl mb-2 sm:text-base text-left sm:text-center">{{ twitter_person }}</h5> + <small class="mb-4 text-turquoise-400 text-left sm:text-center">{{ twitter_mail }}</small> </div> </div> <p class="text-small sm:text-base leading-6 mb-2"> diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html index 7dd4d24..2fc3269 100644 --- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html @@ -9,5 +9,5 @@ {{ address_more }} </p> </div> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Lidé' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Lidé' %} </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html index fbb6492..248e39f 100644 --- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html @@ -22,7 +22,7 @@ </span> </div> <div> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Detail' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %} </div> </div> </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html index 7d3aa27..78c0044 100644 --- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html +++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html @@ -16,7 +16,7 @@ </span> </div> <div> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Detail' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %} </div> </div> </div> diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html index 015ef2b..fccf70f 100644 --- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html +++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html @@ -1,19 +1,20 @@ <div class="__js-root"> <ui-header-carousel> {% for content in carousel_content %} - <div class="xl:h-screen relative"> + <div class="xl:min-h-screen relative"> <img src="../../../../static/images/background-images/bg-bartos-newsletter.jpg" draggable="false"> <div class="header-carousel--text grid-container"> - <div class="grid-content-with-right-side h-fit"> + <div class="h-fit"> <h1 class="text-white">{{ content.label_first }}</h1> - <h1 class="text-orange-250 mb-2">{{ content.label_second }}</h1> - <a href="" class="btn btn__slide__wrap btn-carousel"> - <span class="btn text-lg bg-white px-1 lg:text-base">{{ content.button_text }}</span> - <span class="btn text-lg bg-black text-white px-1 lg:text-base">{{ content.button_text }}</span> + <h1 class="text-yellow-500 mb-2">{{ content.label_second }}</h1> + <a href="#" class="btn btn--white btn--to-grey-175 btn--hoveractive uppercase"> + <div class="btn__body-wrap w-32 h-11"> + <div class="btn__body w-32 h-11 text-lg xl:text-base xl:w-auto">{{ content.button_text }}</div> + </div> </a> </div> </div> </div> {% endfor %} </ui-header-carousel> -</div> \ No newline at end of file +</div> diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml index 155dcd8..1de0dff 100644 --- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml +++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml @@ -2,12 +2,12 @@ context: carousel_content: - label_first: '+72% domácností bylo' label_second: 'násilně digitalizováno' - button_text: 'Zjistit více1' - - label_first: '+72% domácností bylo' - label_second: 'násilně digitalizováno' - button_text: 'Zjistit více1' - - label_first: 'Pokud si tady' - label_second: 'Tak si na konci' + button_text: 'Zjistit více' + - label_first: '+52% domácností bylo' + label_second: 'násilně zachráněno' + button_text: 'Zjistit vícero' + - label_first: 'Pokud jsi tady' + label_second: 'Tak jsi na konci' button_text: 'Díky' diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html b/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html index 6e51358..4cb7922 100644 --- a/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html +++ b/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html @@ -4,15 +4,15 @@ <h2 class="head-7xl xl:text-center mb-6 xl:mb-28"> {{ articles_section_title }} </h2> - {% include 'patterns/molecules/articles/main_article_preview.html' %} + {% include 'patterns/molecules/articles/main_article_preview.html' %} <div class="__js-root"> <ui-article-carousel> - {% include 'patterns/molecules/articles/article_carousel_item.html' %} - {% include 'patterns/molecules/articles/article_carousel_item.html' %} - {% include 'patterns/molecules/articles/article_carousel_item.html' %} - {% include 'patterns/molecules/articles/article_carousel_item.html' %} - {% include 'patterns/molecules/articles/article_carousel_item.html' %} - {% include 'patterns/molecules/articles/article_carousel_item.html' %} + {% include 'patterns/molecules/articles/article_carousel_item.html' %} + {% include 'patterns/molecules/articles/article_carousel_item.html' %} + {% include 'patterns/molecules/articles/article_carousel_item.html' %} + {% include 'patterns/molecules/articles/article_carousel_item.html' %} + {% include 'patterns/molecules/articles/article_carousel_item.html' %} + {% include 'patterns/molecules/articles/article_carousel_item.html' %} </ui-article-carousel> </div> </div> diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html index 6fc9646..2b7591a 100644 --- a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html +++ b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html @@ -8,7 +8,7 @@ {% include 'patterns/molecules/articles/person_article_preview.html' %} </div> <div class="flex justify-center"> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %} </div> </div> </section> diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html index f63aca9..63438d5 100644 --- a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html +++ b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html @@ -37,7 +37,7 @@ </div> </div> <div class="flex justify-center"> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %} </div> </div> </div> diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html index 033fd04..8cb6501 100644 --- a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html +++ b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html @@ -11,7 +11,7 @@ class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6"> <!-- Hamburger Icon --> <input class="hidden" type="checkbox" id="menuToggle"/> - <label class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle"> + <label class="pl-3 py-3 z-50 hamb mr-1 mr-sm-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle"> <span class="container"> <span class="bar1"></span> <span class="bar2"></span> @@ -42,15 +42,14 @@ </div> <div class="flex-row flex pb-8 xl:pb-0 gap-4 xl:pr-5"> <a href="#" - class="btn btn--green-500 btn--hoveractive font-condensed uppercase"> + class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive xl:w-auto uppercase"> <div class="btn__body-wrap w-32 h-11"> - <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_1 }}</div> + <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_2 }}</div> </div> </a> - <a href="#" - class="btn btn--violet-700 btn--hoveractive font-condensed xl:w-auto uppercase"> + <a href="#" class="btn btn--white btn--to-grey-175 btn--hoveractive uppercase"> <div class="btn__body-wrap w-32 h-11"> - <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_2 }}</div> + <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_1 }}</div> </div> </a> </div> diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html index 77c2d9b..d7ea844 100644 --- a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html +++ b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html @@ -9,15 +9,17 @@ <div class="grid-container mt-20 xl:mt-0 xl:items-center z-10"> <div class="grid-full newsletter-grid"> <i class="newsletter-grid__icon ico--anchor text-7xl xl:text-9xl xl:w-full"></i> - <span class="newsletter-grid__additional-text uppercase text-xl xl:text-base font-bold mb-2 xl:w-full"> - {{ newsletter_section_label }} - </span> - <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">{{ newsletter_section_text }}</h5> + <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase"> + {{ newsletter_section_text }}<br> + <span class="uppercase text-sm xl:text-base leading-1 mb-2 xl:w-full"> + {{ newsletter_section_label }} + </span> + </h5> <div class="newsletter-grid__input flex flex-col items-start"> <form method="post" class="w-full max-w-md" action="."> {% include 'patterns/atoms/form_fields/form_input.html' with form_placeholder='Tvůj email' classes='mb-3 w-full' %} {% include 'patterns/atoms/form_fields/form_checkbox.html' with label='Souhlasím se zpracováním osobních údajů' classes='mb-3' %} - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Odebírat' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Odebírat' %} </form> </div> </div> diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html index ae51314..841c0dc 100644 --- a/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html +++ b/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html @@ -23,6 +23,6 @@ </div> </div> <div class="flex justify-center mt-8 lg:mt-24"> - {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %} + {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %} </div> </div> diff --git a/majak_uistyleguide/templates/patterns/templates/article/article_list.html b/majak_uistyleguide/templates/patterns/templates/article/article_list.html index ca908ea..900ee07 100644 --- a/majak_uistyleguide/templates/patterns/templates/article/article_list.html +++ b/majak_uistyleguide/templates/patterns/templates/article/article_list.html @@ -1,14 +1,14 @@ - {% include 'patterns/organisms/layout/navbar.html' %} - {% include 'patterns/molecules/header/simple_header.html' with simple_header_title='Jak piráti pracují' %} +{% include 'patterns/organisms/layout/navbar.html' %} +{% include 'patterns/molecules/header/simple_header.html' with simple_header_title='Jak piráti pracují' %} <main role="main"> - <div class="grid-container mb-2 xl:mb-12"> - <div class="grid-content leading-6"> - <h2 class="head-xl mb-2"> + <div class="grid-container"> + <div class="grid-content"> + <p class="font-condensed text-xl leading-7 mb-5"> {{ how_we_works_text_1 }} - </h2> - <h2 class="head-xl mb-2"> + </p> + <p class="font-condensed text-xl leading-7 mb-5"> {{ how_we_works_text_2 }} - </h2> + </p> </div> </div> <div class="__js-root"> diff --git a/majak_uistyleguide/templates/patterns/templates/people/people.html b/majak_uistyleguide/templates/patterns/templates/people/people.html index 256e30f..9f902b2 100644 --- a/majak_uistyleguide/templates/patterns/templates/people/people.html +++ b/majak_uistyleguide/templates/patterns/templates/people/people.html @@ -3,7 +3,7 @@ <main role="main" class="mb-4 xl:mb-20"> <div class="grid-container"> <div class="grid-content"> - <p class="font-alt text-xl leading-7 mb-5"> + <p class="font-condensed text-xl leading-7 mb-5"> {{ people_text }} </p> </div> diff --git a/majak_uistyleguide/templates/patterns/templates/people/person.html b/majak_uistyleguide/templates/patterns/templates/people/person.html index 1ebdf04..dbbac53 100644 --- a/majak_uistyleguide/templates/patterns/templates/people/person.html +++ b/majak_uistyleguide/templates/patterns/templates/people/person.html @@ -6,7 +6,7 @@ <section class="grid-container person-grid-container"> <div class="grid-content leading-6"> <article class="mb-4 xl:mb-24 xl:mr-2"> - <p class="font-alt text-xl leading-7 mb-5"> + <p class="font-condensed text-xl leading-7 mb-5"> {{ person_text_1 }} </p> <p class="mb-5"> diff --git a/majak_uistyleguide/templates/patterns/templates/program/program.html b/majak_uistyleguide/templates/patterns/templates/program/program.html index 95548b9..df37e72 100644 --- a/majak_uistyleguide/templates/patterns/templates/program/program.html +++ b/majak_uistyleguide/templates/patterns/templates/program/program.html @@ -4,7 +4,7 @@ <main role="main" class="mb-4 xl:mb-20"> <div class="grid-container"> <div class="grid-content"> - <p class="font-alt text-xl leading-7 mb-5 program-perex"> + <p class="font-condensed text-xl leading-7 mb-5 program-perex"> {{ program_text }} </p> </div> diff --git a/src/css/atoms/heading.pcss b/src/css/atoms/heading.pcss index 43114d5..5ae0d99 100644 --- a/src/css/atoms/heading.pcss +++ b/src/css/atoms/heading.pcss @@ -143,8 +143,6 @@ clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%); } - - .head-xl { @apply font-alt text-base lg:text-xl font-medium leading-7 uppercase; } diff --git a/src/css/molecules/carousels.pcss b/src/css/molecules/carousels.pcss index 5fdb49d..828e23a 100644 --- a/src/css/molecules/carousels.pcss +++ b/src/css/molecules/carousels.pcss @@ -36,14 +36,16 @@ .header-carousel--text { @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl; max-width: 1200px; - white-space: nowrap; position: absolute; - top: 50%; - margin-left: 10%; + top: 20%; + @screen sm { margin-left: 10%; top: 35%; } + @screen md { + white-space: nowrap; + } @screen lg { top: 25%; } @@ -51,6 +53,7 @@ top: 30%; } @screen 2xl { + margin-left: 15%; top: 40%; } } diff --git a/src/css/molecules/sliding_button.pcss b/src/css/molecules/sliding_button.pcss index 03ce560..d1f78c0 100644 --- a/src/css/molecules/sliding_button.pcss +++ b/src/css/molecules/sliding_button.pcss @@ -3,7 +3,8 @@ min-width: 8rem; } -.btn__slide__wrap { +/* +.btn__slide__wrap { // removed on request of MO in 2022/11 overflow: hidden; position: relative; @@ -28,3 +29,4 @@ } } } +*/ diff --git a/src/css/organisms/footer.pcss b/src/css/organisms/footer.pcss index b34783c..4a51164 100644 --- a/src/css/organisms/footer.pcss +++ b/src/css/organisms/footer.pcss @@ -28,7 +28,7 @@ display: block; height: 40px; line-height: 40px; - min-width: 150px; + min-width: 200px; } } } diff --git a/tailwind.config.js b/tailwind.config.js index f20bc87..f62a769 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -74,6 +74,7 @@ module.exports = { '100': '#f3f3f3', '125': '#f0f0f0', '150': '#ECECEC', + '175': '#d0d0d0', '200': '#ADADAD', '300': '#4c4c4c', '350': '#4F4F4F', @@ -97,6 +98,8 @@ module.exports = { '200': '#f7f38a', '300': '#ffea5a', '400': '#fde119', + '500': '#f9ce05', + '600': '#d7b103', }, 'red': { '600': '#d60d53' @@ -186,6 +189,10 @@ module.exports = { text: 'black', background: 'grey.125', }, + 'grey-175': { + text: 'black', + background: 'grey.175', + }, 'white': { text: 'black', background: 'white', @@ -211,6 +218,14 @@ module.exports = { text: 'black', background: 'green.500', }, + 'yellow-500': { + text: 'black', + background: 'yellow.500', + }, + 'yellow-600': { + text: 'black', + background: 'yellow.600', + }, 'orange-300': { text: 'white', background: 'orange.300', @@ -223,7 +238,7 @@ module.exports = { text: 'black', background: 'violet.500', }, - 'violet-700': { + 'violet-700': { text: 'black', background: 'violet.700', }, -- GitLab