Skip to content
Snippets Groups Projects
Commit 76c68b92 authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

implement design requirements

parent 09bece19
No related branches found
No related tags found
1 merge request!22Feat/redesign
Show whitespace changes
Inline Side-by-side
Showing
with 244 additions and 161 deletions
majak_uistyleguide/templates/patterns/atoms/buttons/round_button.html
+ 1
− 1
View file @ 76c68b92
<a
href="#"
class="
flex items-center group rounded-full font-condensed uppercase font-semibold tracking-tight
flex items-center group rounded-full font-condensed uppercase font-semibold tracking-normal
hover:no-underline
{% if not classes %}
......
majak_uistyleguide/templates/patterns/molecules/articles/article_richtext_content_with_image.html
+ 1
− 1
View file @ 76c68b92
......@@ -3,7 +3,7 @@
class="
{{ classes }}
font-condensed text-justify
font-condensed lg:text-justify
[&_p]:leading-7 [&_p]:text-black [&_p]:text-lg
"
......
majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html
+ 3
− 2
View file @ 76c68b92
......@@ -7,8 +7,9 @@
>
<a href="#">
<img
src="../../../../static/images/person-table.png" alt=""
class="w-full"
src="../../../../static/images/person-table.png"
alt=""
class="w-full object-cover object-center h-[20rem]"
>
</a>
......
majak_uistyleguide/templates/patterns/molecules/blocks/icon_title_text_block.html
+ 1
− 1
View file @ 76c68b92
......@@ -8,7 +8,7 @@
>
{% if icon %}
<i class="{{ icon }} mr-6 text-6xl xl:justify-self-end"></i>
<i class="{{ icon }} hidden mr-6 text-6xl lg:shown xl:justify-self-end"></i>
{% endif %}
<div class="flex flex-col">
......
majak_uistyleguide/templates/patterns/molecules/boxes/card_box.html
+ 4
− 2
View file @ 76c68b92
<article class="min-w-96 flex flex-col min-h-[600px] {{ classes }}">
<article
class="min-w-[calc(100vw_-_2.5rem)] lg:min-w-[24rem] flex flex-col min-h-[600px] {{ classes }}"
>
<a href="#">
<img src="{{ image }}" alt="{{ header }}" draggable="false" class="w-full h-80 object-cover">
</a>
......@@ -17,7 +19,7 @@
</a>
</h2>
<p class="text-black text-lg leading-[1.8rem] font-condensed">
<p class="text-black text-lg font-condensed">
{{ content }}
</p>
</div>
......
majak_uistyleguide/templates/patterns/molecules/boxes/image_with_button_box.html
+ 1
− 1
View file @ 76c68b92
<div class="flex flex-col">
<div class="flex flex-col min-w-[calc(100vw_-_2.5rem)] lg:min-w-[15rem] flex flex-col {{ classes }}">
<img
class="w-74 h-74 object-cover"
src="../../../../static/images/person-table.png"
......
majak_uistyleguide/templates/patterns/molecules/contact/contact_footer_box.html
+ 1
− 1
View file @ 76c68b92
......@@ -12,7 +12,7 @@
<div class="flex flex-col justify-between py-4 pr-4 h-full">
<div class="flex flex-col">
<a
class="hover:no-underline block font-bold font-alt leading-8 text-xl md:text-2xl xl:text-3xl"
class="hover:no-underline block font-bold font-alt leading-8 tracking-wide text-xl md:text-2xl xl:text-3xl"
href="#"
><h4>{{ name }}</h4></a>
......
majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html
+ 9
− 3
View file @ 76c68b92
<div class="bg-black text-white">
<div class="container--medium">
<div class="container--medium __js-root">
<div
class="
flex gap-2 items-start py-16 flex-col
......@@ -15,11 +15,17 @@
</p>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
<ui-horizontal-scrollable
classes="
flex gap-8 overflow-x-scroll mt-4 mb-8
lg:mt-0 lg:grid lg:grid-cols-2
xl:grid-cols-3
"
>
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
</div>
</ui-horizontal-scrollable>
<div
class="
......
majak_uistyleguide/templates/patterns/organisms/articles/europarl_articles_section.html
+ 11
− 4
View file @ 76c68b92
<div class="bg-pirati-yellow">
<div class="container--medium">
<div class="container--medium __js-root">
<div class="py-16 xl:py-24">
<div class="__js-root">
<h2
......@@ -8,7 +8,7 @@
xl:flex xl:gap-6 xl:text-14xl
"
>
<div class="hidden xl:block">
<div class="hidden xl:block mr-[-2rem]">
<ui-animated-arrow
desktop-width="142.8"
desktop-height="150"
......@@ -26,11 +26,18 @@
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
<ui-horizontal-scrollable
classes="
flex gap-8 overflow-x-scroll mt-4 mb-8
lg:mt-0 lg:grid lg:grid-cols-2
xl:grid-cols-3
"
scroller-classes="!text-black"
>
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
{% include 'patterns/molecules/boxes/card_box.html' %}
</div>
</ui-horizontal-scrollable>
<div
class="
......
majak_uistyleguide/templates/patterns/organisms/header/people_header.html
+ 2
− 2
View file @ 76c68b92
......@@ -5,8 +5,8 @@
{% block description %}
<div
class="
grid gap-4 py-4 font-bold pr-4 grid-cols-1 [&_p]:!text-lg
md:grid-cols-2 md:pr-0
hidden gap-10 py-4 font-bold pr-4 grid-cols-1 whitespace-pre-line [&_p]:!text-lg
md:grid md:grid-cols-2 md:pr-0
"
>
<p>
......
majak_uistyleguide/templates/patterns/organisms/header/photo_header.html
+ 11
− 2
View file @ 76c68b92
<header
class="bg-[#00000088] flex items-center py-52 mb-4 xl:mb-20 w-full bg-no-repeat bg-cover bg-center bg-blend-darken"
class="
flex items-center mb-4 w-full pt-96 pb-16
bg-no-repeat bg-cover bg-center bg-blend-darken bg-[top_right_-7rem] bg-[#00000088]
xl:mb-20 xl:bg-center xl:py-52
"
style="background-image: url('../../../../static/images/background-images/bg-bartos.jpg')"
>
<div class="container--wide w-full">
<h1 class="text-white flex flex-col">
{% include 'patterns/atoms/header/navigation.html' with classes='mb-10' first_text='Lidé' second_text='Sněmovna' %}
<span class="text-xl sm:text-4xl font-alt leading-3">{{ degree_before }}</span>
<span
class="
text-xl font-alt
sm:text-4xl
"
>{{ degree_before }}</span>
<div class="flex items-baseline flex-col xl:flex-row font-alt">
<span class="font-alt text-6xl xl:text-9xl grow xl:grow-0">{{ name }}</span>
......
majak_uistyleguide/templates/patterns/organisms/header/simple_header_with_ui_switch.html
+ 14
− 13
View file @ 76c68b92
......@@ -3,12 +3,14 @@
{% block after_description %}
<div
class="
container--medium flex justify-center ml-[unset] mr-[unset]
container--medium flex justify-start pl-[unset] pr-[unset] ml-[unset] mr-[unset]
xl:mb-12 mb-4
"
>
<ui-horizontal-scrollable>
<div class="switch">
<ui-horizontal-scrollable
classes="switch overflow-x-scroll flex gap-2 w-[calc(100vw_-_3rem)] lg:w-[unset]"
arrow-position="bottom"
>
{% block switch %}
{% for switch in ui_switch_iterable %}
<a
......@@ -18,7 +20,6 @@
>{{ switch.name }}</a>
{% endfor %}
{% endblock %}
</div>
</ui-horizontal-scrollable>
</div>
{% endblock %}
majak_uistyleguide/templates/patterns/organisms/main_section/representatives_section.html
+ 9
− 3
View file @ 76c68b92
<div class="bg-black text-white">
<div class="container--medium">
<div class="container--medium __js-root">
<div class="xl:block hidden py-16 xl:py-24">
<h2>
......@@ -24,12 +24,18 @@
</p>
</div>
<div class="grid grid-cols-1 gap-12 xl:grid-cols-4 xl:gap-4">
<ui-horizontal-scrollable
classes="
flex gap-8 overflow-x-scroll mt-4 mb-8
lg:mt-0 lg:grid lg:grid-cols-2
xl:grid-cols-4
"
>
{% include 'patterns/molecules/boxes/image_with_button_box.html' %}
{% include 'patterns/molecules/boxes/image_with_button_box.html' %}
{% include 'patterns/molecules/boxes/image_with_button_box.html' %}
{% include 'patterns/molecules/boxes/image_with_button_box.html' %}
</div>
</ui-horizontal-scrollable>
<div
class="
......
majak_uistyleguide/templates/patterns/templates/contact/contact.html
+ 93
− 71
View file @ 76c68b92
......@@ -4,82 +4,103 @@
<main role="main">
<section class="container--wide mb-4 xl:mb-20">
<div class="flex flex-col flex-wrap mb-10 xl:mb-20">
<div class="w-full max-w-xl mb-10 xl:mb-20">
<div
class="
flex gap-10 flex-wrap
lg:flex-nowrap
"
>
<div class="w-full max-w-xl">
<h2 class="head-6xl mb-5">
{{ contact_title }}
</h2>
<div class="flex flex-wrap justify-between">
<div class="leading-5 w-5/6 sm:w-6/12">
<span class="font-bold">{{ contact_label_1 }}</span><br><br>
<div class="leading-5 w-5/6 sm:w-6/12 leading-">
<p>
<span class="font-bold">{{ contact_label_1 }}</span>
<br>
{% for content in contact_content_1 %}
<div class="mb-1">{{ content.text }}</div>
{{ content.text }}<br>
{% endfor %}
<br/>
<span class="font-bold">{{ contact_label_2 }}</span><br><br>
<br>
<span class="font-bold">{{ contact_label_2 }}</span>
<br>
{% for content in contact_content_2 %}
<div class="mb-1">{{ content.text }}</div>
{% endfor %}
<br/>
<span class="font-bold">{{ contact_label_3 }}</span><br><br>
<br>
<span class="font-bold">{{ contact_label_3 }}</span>
<br>
{% for content in contact_content_3 %}
<a href="{{ content.url }}" class="text-turquoise-500 underline">
<div class="mb-1">{{ content.text }}</div>
</a>
{% endfor %}
<br>
<span class="font-bold">{{ contact_label_4 }}</span><br><br>
<span class="font-bold">{{ contact_label_4 }}</span>
<br>
{% for content in contact_content_4 %}
<a href="{{ content.url }}" class="text-turquoise-500 underline">
<div class="mb-1">{{ content.text }}</div>
</a><br>
{{ content.text }}
</a>
{% endfor %}
<br>
</p>
</div>
<div class="leading-5 w-5/6 sm:w-5/12">
<span class="font-bold">{{ contact_label_5 }}</span><br><br>
<p>
<span class="font-bold">{{ contact_label_1 }}</span>
{% for content in contact_content_5 %}
<div class="mb-1">{{ content.text }}</div>
<br>
{% for content in contact_content_1 %}
{{ content.text }}<br>
{% endfor %}
<br/>
<br>
<span class="font-bold">{{ contact_label_2 }}</span>
<span class="font-bold">{{ contact_label_6 }}</span><br><br>
<br>
{% for content in contact_content_6 %}
{% for content in contact_content_2 %}
<div class="mb-1">{{ content.text }}</div>
{% endfor %}
<br/>
<br>
<span class="font-bold">{{ contact_label_7 }}</span><br><br>
<span class="font-bold">{{ contact_label_3 }}</span>
<br>
{% for content in contact_content_7 %}
<a href="mailto:info@pirati.cz{{ content.url }}" class="text-turquoise-500 underline">
{% for content in contact_content_3 %}
<div class="mb-1">{{ content.text }}</div>
</a>
{% endfor %}
<br>
<span class="font-bold">{{ contact_label_8 }}</span><br><br>
<span class="font-bold">{{ contact_label_4 }}</span>
{% for content in contact_content_8 %}
<div class="mb-1">{{ content.text }}</div>
{% endfor %}
<br>
<a href="" class="text-turquoise-500 underline">
<div class="mb-1">{{ contact_link_8 }}</div>
</a><br>
{% for content in contact_content_4 %}
<a href="{{ content.url }}" class="text-turquoise-500 underline">
{{ content.text }}
</a>
{% endfor %}
</p>
</div>
</div>
</div>
......@@ -94,6 +115,7 @@
</div>
</div>
</div>
</div>
<h2 class="head-6xl mb-5 xl:mb-8">
{{ contact_label_10 }}
......
majak_uistyleguide/templates/patterns/templates/contact/contact.yaml
+ 0
− 17
View file @ 76c68b92
......@@ -33,20 +33,3 @@ context:
contact_content_4:
- url: 'mailto:international@pirati.cz'
text: 'international@pirati.cz'
contact_content_5:
- text: '+420 703 681 682'
- text: '+420 608 963 111'
contact_content_6:
- text: 'Po, St, Pá: 8-16:30'
- text: 'Út, Čt: 11-19:30'
contact_content_7:
- url: 'mailto:info@pirati.cz'
text: 'info@pirati.cz'
contact_content_8:
- text: '24190421219/3190 (Fio banka)'
majak_uistyleguide/templates/patterns/templates/people/person.html
+ 3
− 2
View file @ 76c68b92
......@@ -99,7 +99,7 @@
</div>
<div class="grid-container person-grid-container !ml-0">
<div class="grid-left-side-with-content !ml-0">
<div class="grid-full !ml-0">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-8">
{% for related_article in person_related_articles %}
{% include 'patterns/molecules/boxes/card_box.html' with header=related_article.name content=related_article.description description_classes='!bg-grey-180' date=related_article.date %}
......@@ -119,7 +119,7 @@
</div>
<div class="grid-container person-grid-container !ml-0">
<div class="grid-left-side-with-content">
<div class="grid-full">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 content-stretch gap-8">
{% for content in person_simple_block %}
{% include 'patterns/molecules/boxes/card_box.html' with header=content.name content=content.function description_classes='!bg-grey-180' %}
......@@ -131,4 +131,5 @@
{% include 'patterns/organisms/main_section/newsletter_section.html' %}
</main>
{% include 'patterns/organisms/layout/footer.html' %}
src/css/molecules/carousels.pcss
+ 1
− 1
View file @ 76c68b92
......@@ -11,7 +11,7 @@
width: 100vw;
@screen xl {
bottom: 42%;
bottom: 33%;
}
}
......
src/css/molecules/switch.pcss
+ 1
− 1
View file @ 76c68b92
......@@ -3,7 +3,7 @@
}
.switch__item {
@apply bg-yellow-500 cursor-pointer px-5 py-2 mb-2 font-normal text-black text-center;
@apply whitespace-nowrap bg-yellow-500 cursor-pointer px-5 py-2 mb-2 font-normal text-black text-center;
&:not(:last-child) {
@apply mr-2;
......
src/js/components/CardScroll.vue 0 → 100644
+ 35
− 0
View file @ 76c68b92
<template>
<div>
<div :class="'flex gap-4 justify-end text-white text-4xl pt-2 cursor-pointer lg:hidden ' + scrollerClasses">
<i class="ico--chevron-left" @click="moveLeft"></i>
<i class="ico--chevron-right" @click="moveRight"></i>
</div>
<div
ref="scrollable"
:class="'flex gap-8 overflow-x-scroll mt-4 mb-8 lg:mt-0 lg:grid ' + classes"
>
<slot>
</slot>
</div>
</div>
</template>
<script>
export default {
name: "CardScroll",
methods: {
moveLeft: function(event) {
const rect = this.$refs.scrollable.getBoundingClientRect()
this.$refs.scrollable.scrollBy({left: -this.$refs.scrollable.offsetWidth - 32, behavior: 'smooth'})
},
moveRight: function(event) {
const rect = this.$refs.scrollable.getBoundingClientRect()
this.$refs.scrollable.scrollBy({left: this.$refs.scrollable.offsetWidth + 32, behavior: 'smooth'})
},
},
props: ["classes", "scrollerClasses"],
}
</script>
src/js/components/HorizontalScrollable.vue
+ 43
− 33
View file @ 76c68b92
<template>
<div ref="slider"
class="horizontal-scrolling draggable no-scrollbars"
:class="{'active': isDown}"
v-on:mousedown="mousedown"
v-on:mouseleave="mouseleave"
v-on:mouseup="mouseup"
v-on:mousemove="mousemove"
<div>
<div
:class="'flex gap-4 justify-end text-white text-4xl pt-2 cursor-pointer lg:hidden ' + scrollerClasses"
v-if="realArrowPosition === 'top'"
>
<slot></slot>
<i class="ico--chevron-left" @click="moveLeft"></i>
<i class="ico--chevron-right" @click="moveRight"></i>
</div>
<div
ref="scrollable"
:class="classes"
>
<slot>
</slot>
</div>
<div
:class="'flex gap-4 justify-end text-white text-4xl pt-2 cursor-pointer lg:hidden ' + scrollerClasses"
v-if="realArrowPosition === 'bottom'"
>
<i class="ico--chevron-left" @click="moveLeft"></i>
<i class="ico--chevron-right" @click="moveRight"></i>
</div>
</div>
</template>
<script>
export default {
data: () => ({
isDown: false,
startX: null,
scrollLeft: null
}),
name: "CardScroll",
data () {
return {
realArrowPosition: (
(this.arrowPosition !== undefined) ?
this.arrowPosition : "top"
)
}
},
methods: {
mousemove: function (e){
if (!this.isDown) return
e.preventDefault()
const distance = this.$refs.slider.getBoundingClientRect().left | null
const x = e.pageX - distance
const walk = x - this.startX
this.$refs.slider.scrollLeft = this.scrollLeft - walk
moveLeft: function(event) {
const rect = this.$refs.scrollable.getBoundingClientRect()
this.$refs.scrollable.scrollBy({left: -this.$refs.scrollable.offsetWidth - 32, behavior: 'smooth'})
},
mouseleave: function (){
this.isDown = false
moveRight: function(event) {
const rect = this.$refs.scrollable.getBoundingClientRect()
this.$refs.scrollable.scrollBy({left: this.$refs.scrollable.offsetWidth + 32, behavior: 'smooth'})
},
mouseup: function (){
this.isDown = false
},
mousedown: function (e){
this.isDown = true;
const distance = this.$refs.slider.getBoundingClientRect().left | null
this.startX = e.pageX - distance
this.scrollLeft = this.$refs.slider.scrollLeft
}
}
props: ["classes", "scrollerClasses", "arrowPosition"],
}
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft