Skip to content
Snippets Groups Projects
Commit 9d1ff719 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

Merge branch 'feat/redesign' into 'master' 

Feat/redesign

See merge request !29
parents 1fb615d1 b8e332f9
No related branches found
No related tags found
1 merge request!29Feat/redesign
Pipeline #19907 passed
Stage: build
Show whitespace changes
Inline Side-by-side
Showing
with 441 additions and 16 deletions
majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.html 0 → 100644
+ 17
− 0
View file @ 9d1ff719
<div class="flex flex-col items-start gap-2 {{ classes }}">
<label for="{{ id }}">
{{ label }}
{% if is_required %}
<span class="text-red-600">*</span>
{% endif %}
</label>
<textarea
class="
form__text-input resize-none
w-full lg:w-96
"
id="{{ id }}"
></textarea>
</div>
majak_uistyleguide/templates/patterns/atoms/form_fields/form_textarea.yaml 0 → 100644
+ 4
− 0
View file @ 9d1ff719
context:
classes: ''
label: 'Smluvní podmínky'
id: 'textarea_1'
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/grids/grids.html
+ 12
− 1
View file @ 9d1ff719
......@@ -110,3 +110,14 @@
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-8 py-4">
<div class="space-y-4">A</div>
<div class="space-y-4">B</div>
</div>
<div class="grid md:grid-cols-3 gap-8 py-4">
<div class="space-y-4">A</div>
<div class="space-y-4">B</div>
<div class="space-y-4">C</div>
</div>
majak_uistyleguide/templates/patterns/atoms/images/images.html 0 → 100644
+ 19
− 0
View file @ 9d1ff719
<div class="w-full mx-auto my-6 object-contain h-max lg:h-max lg:w-auto">
<img src="/static/ivan1.png">
</div>
<div class="float-left mr-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain">
<img src="/static/ivan1.png">
</div>
<div class="float-left mr-4 mb-6 mt-0 object-contain">
<img src="/static/ivan1.png">
</div>
<div class="float-right ml-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain">
<img src="/static/ivan1.png">
</div>
<div class="float-right ml-4 mb-6 mt-0 object-contain">
<img src="/static/ivan1.png">
</div>
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.html 0 → 100644
+ 10
− 0
View file @ 9d1ff719
<li class="flex gap-2 items-center">
<img
width="30"
height="30"
src="{{ image_src }}"
>
<div>
{{ text }}
</div>
</li>
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/lists/image_list_item.yaml 0 → 100644
+ 3
− 0
View file @ 9d1ff719
context:
image_src: '/static/images/person-table.png'
text: 'Lorem ipsum dolor sit amet'
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/table/popout_table.html 0 → 100644
+ 60
− 0
View file @ 9d1ff719
<div class="__js-root">
<ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
<template slot="head">
<tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
<th>
<p>
Company
</p>
</th>
<th>
<p>
Contact
</p>
</th>
<th>
<p>
Country
</p>
</th>
</tr>
</template>
<template slot="body">
<tr>
<td>
<p>
Alfreds Futterkiste
</p>
</td>
<td>
<p>
Maria Anders
</p>
</td>
<td>
<p>
Germany
</p>
</td>
</tr>
<tr>
<td>
<p>
Centro comercial Moctezuma
</p>
</td>
<td>
<p>
Francisco Chang
</p>
</td>
<td>
<p>
Mexico
</p>
</td>
</tr>
</template>
</ui-popout-table>
</div>
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/table/table.html 0 → 100644
+ 33
− 0
View file @ 9d1ff719
<div class="my-6 prose max-w-[100ch]">
<table>
<thead>
<tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody
class="
w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
[&_tr:nth-child(even)]:bg-grey-50
"
>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>
A<br>
B<br>
C<br>
</td>
</tr>
</tbody>
</table>
</div>
majak_uistyleguide/templates/patterns/atoms/tags/tag.html
+ 1
− 1
View file @ 9d1ff719
......@@ -4,7 +4,7 @@
{% if color_classes %}
{{ color_classes }}
{% else %}
text-black bg-yellow-500 hover:bg-yellow-600
text-black bg-white hover:bg-pirati-yellow
{% endif %}
px-4 py-2 duration-200 hover:no-underline
......
majak_uistyleguide/templates/patterns/atoms/text/colors.html 0 → 100644
+ 95
− 0
View file @ 9d1ff719
<div
class="
bg-black text-white
[&_p]:!text-white
[&_h1]:!text-white
[&_h2]:!text-white
[&_h3]:!text-white
[&_h4]:!text-white
[&_h5]:!text-white
[&_h6]:!text-white
"
>
{% include "patterns/atoms/text/paragraph.html" %}
</div>
<div
class="
bg-pirati-yellow text-black
[&_p]:!text-black
[&_h1]:!text-black
[&_h2]:!text-black
[&_h3]:!text-black
[&_h4]:!text-black
[&_h5]:!text-black
[&_h6]:!text-black
"
>
{% include "patterns/atoms/text/paragraph.html" %}
</div>
<div
class="
bg-white text-black
[&_p]:!text-black
[&_h1]:!text-black
[&_h2]:!text-black
[&_h3]:!text-black
[&_h4]:!text-black
[&_h5]:!text-black
[&_h6]:!text-black
"
>
{% include "patterns/atoms/text/paragraph.html" %}
</div>
<div
class="
bg-black text-white
[&_p]:!text-white
[&_h1]:!text-white
[&_h2]:!text-white
[&_h3]:!text-white
[&_h4]:!text-white
[&_h5]:!text-white
[&_h6]:!text-white
"
>
<div class="prose">
{% include "patterns/atoms/text/headings.html" %}
</div>
</div>
<div
class="
bg-pirati-yellow text-black
[&_p]:!text-black
[&_h1]:!text-black
[&_h2]:!text-black
[&_h3]:!text-black
[&_h4]:!text-black
[&_h5]:!text-black
[&_h6]:!text-black
"
>
<div class="prose">
{% include "patterns/atoms/text/headings.html" %}
</div>
</div>
<div
class="
bg-white text-black
[&_p]:!text-black
[&_h1]:!text-black
[&_h2]:!text-black
[&_h3]:!text-black
[&_h4]:!text-black
[&_h5]:!text-black
[&_h6]:!text-black
"
>
<div class="prose">
{% include "patterns/atoms/text/headings.html" %}
</div>
</div>
majak_uistyleguide/templates/patterns/atoms/text/colors.yaml 0 → 100644
+ 3
− 0
View file @ 9d1ff719
context:
color_classes:
- ""
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/text/heading_with_image.html 0 → 100644
+ 7
− 0
View file @ 9d1ff719
<div class="flex justify-between items-center gap-4">
<h1 class="head-xl">Nadpis velikosti XL</h1>
<img
class="max-w-[75px] max-h-[75px]"
src="/static/images/person-table.png"
>
</div>
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/text/headings.html
+ 43
− 13
View file @ 9d1ff719
<div class="space-y-12">
<div>
<h1 class="head-9xl">{{ title }}</h1>
<h1 class="head-8xl">{{ title }}</h1>
<h1 class="head-7xl">{{ title }}</h1>
<h1 class="head-6xl">{{ title }}</h1>
<h1 class="head-5xl">{{ title }}</h1>
<h1 class="head-4xl">{{ title }}</h1>
<h1 class="head-3xl">{{ title }}</h1>
<h1 class="head-2xl">{{ title }}</h1>
<h1 class="head-xl">{{ title }}</h1>
<h1 class="head-base">{{ title }}</h1>
<h1 class="head-sm">{{ title }}</h1>
<h1 class="head-xs">{{ title }}</h1>
<h1 class="head-9xl">Nadpis velikosti 9XL</h1>
<h1 class="head-8xl">Nadpis velikosti 8XL</h1>
<h1 class="head-7xl">Nadpis velikosti 7XL</h1>
<h1 class="head-6xl">Nadpis velikosti 6XL</h1>
<!-- <h1 class="head-5xl">{{ title }}</h1> -->
<h1 class="head-4xl">Nadpis velikosti 4XL</h1>
<h1 class="head-3xl">Nadpis velikosti 3XL</h1>
<h1 class="head-2xl">Nadpis velikosti 2XL</h1>
<h1 class="head-xl">Nadpis velikosti XL</h1>
<h1 class="head-base">Nadpis velikosti MD</h1>
<h1 class="head-sm">Nadpis velikosti SM</h1>
<h1 class="head-xs">Nadpis velikosti XS</h1>
</div>
<div class="text-center">
<h1 class="head-9xl">Nadpis velikosti 9XL</h1>
<h1 class="head-8xl">Nadpis velikosti 8XL</h1>
<h1 class="head-7xl">Nadpis velikosti 7XL</h1>
<h1 class="head-6xl">Nadpis velikosti 6XL</h1>
<!-- <h1 class="head-5xl">{{ title }}</h1> -->
<h1 class="head-4xl">Nadpis velikosti 4XL</h1>
<h1 class="head-3xl">Nadpis velikosti 3XL</h1>
<h1 class="head-2xl">Nadpis velikosti 2XL</h1>
<h1 class="head-xl">Nadpis velikosti XL</h1>
<h1 class="head-base">Nadpis velikosti MD</h1>
<h1 class="head-sm">Nadpis velikosti SM</h1>
<h1 class="head-xs">Nadpis velikosti XS</h1>
</div>
<div class="text-right">
<h1 class="head-9xl">Nadpis velikosti 9XL</h1>
<h1 class="head-8xl">Nadpis velikosti 8XL</h1>
<h1 class="head-7xl">Nadpis velikosti 7XL</h1>
<h1 class="head-6xl">Nadpis velikosti 6XL</h1>
<!-- <h1 class="head-5xl">{{ title }}</h1> -->
<h1 class="head-4xl">Nadpis velikosti 4XL</h1>
<h1 class="head-3xl">Nadpis velikosti 3XL</h1>
<h1 class="head-2xl">Nadpis velikosti 2XL</h1>
<h1 class="head-xl">Nadpis velikosti XL</h1>
<h1 class="head-base">Nadpis velikosti MD</h1>
<h1 class="head-sm">Nadpis velikosti SM</h1>
<h1 class="head-xs">Nadpis velikosti XS</h1>
</div>
</div>
majak_uistyleguide/templates/patterns/atoms/text/prose.html
+ 5
− 1
View file @ 9d1ff719
<div class="prose">
<div class="prose max-w-[100ch] [&_p]:text-black">
{% include 'patterns/atoms/text/paragraph.html' with text=text %}
</div>
<div class="prose max-w-[100%] [&_p]:text-black">
{% include 'patterns/atoms/text/paragraph.html' with text=text %}
</div>
majak_uistyleguide/templates/patterns/atoms/text/prose_aligned.html 0 → 100644
+ 11
− 0
View file @ 9d1ff719
<div class="w-full [&_*]:mr-auto text-left">
{% include "patterns/atoms/text/prose.html" %}
</div>
<div class="w-full [&_*]:mx-auto text-center">
{% include "patterns/atoms/text/prose.html" %}
</div>
<div class="w-full [&_*]:ml-auto text-right">
{% include "patterns/atoms/text/prose.html" %}
</div>
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.html 0 → 100644
+ 23
− 0
View file @ 9d1ff719
<div
class="
flex gap-4 w-full flex-col
lg:flex-row
"
>
<div
class="
w-full max-w-[unset] shrink-0 grow-1 prose
lg:w-1/2
"
>
{{ first_column }}
</div>
<div
class="
w-full max-w-[unset] shrink-0 grow-1 prose
lg:w-1/2
"
>
{{ second_column }}
</div>
</div>
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/text/two_columns_richtext.yaml 0 → 100644
+ 4
− 0
View file @ 9d1ff719
context:
first_column: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna fringilla urna porttitor. Risus nullam eget felis eget. Duis at tellus at urna condimentum mattis pellentesque id. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut. At elementum eu facilisis sed odio morbi. Ut diam quam nulla porttitor massa. Lacus laoreet non curabitur gravida arcu ac. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Porttitor massa id neque aliquam vestibulum. Vulputate ut pharetra sit amet aliquam id. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Est lorem ipsum dolor sit. Consequat mauris nunc congue nisi vitae suscipit tellus. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Enim ut tellus elementum sagittis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.'
second_column: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet luctus venenatis lectus magna fringilla urna porttitor. Risus nullam eget felis eget. Duis at tellus at urna condimentum mattis pellentesque id. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Ultrices eros in cursus turpis. Elementum curabitur vitae nunc sed velit dignissim sodales ut. At elementum eu facilisis sed odio morbi. Ut diam quam nulla porttitor massa. Lacus laoreet non curabitur gravida arcu ac. Ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Porttitor massa id neque aliquam vestibulum. Vulputate ut pharetra sit amet aliquam id. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Est lorem ipsum dolor sit. Consequat mauris nunc congue nisi vitae suscipit tellus. Nisl condimentum id venenatis a condimentum vitae sapien pellentesque. Enim ut tellus elementum sagittis. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim.'
\ No newline at end of file
majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.html 0 → 100644
+ 66
− 0
View file @ 9d1ff719
<div
class="
flex flex-col gap-2 mb-10
relative max-w-[600px]
group
text-center rounded cursor-pointer
"
id="ytVideo{{ video_id }}PosterContainer"
>
<img
src="{{ image_source }}"
alt="{{ image_alt }}"
class="
object-cover mb-2 aspect-video rounded opacity-50 duration-200
group-hover:blur-sm
"
>
<div
class="absolute top-0 left-0 flex justify-center items-center w-full h-full"
>
<div class="relative">
<i
class="
relative text-red-600 ico--youtube text-7xl z-10 duration-200
group-hover:text-8xl
"
></i>
<div class="absolute top-[30%] left-[30%] w-10 h-8 bg-white z-0"></div>
</div>
</div>
<small class="font-bold">
Spuštěním videa dojde k načtení obsahu třetích stran z portálu YouTube.
</small>
</div>
<div
class="content-block aspect-video mb-10 max-w-[600px]"
id="ytVideo{{ video_id }}IframeContainer"
style="display: none"
>
</div>
{# Script, který při kliknutí na poster načte iframe s YouTube videem (v Enhanced Privacy Mode) #}
{# Záměrně je přímo na bloku, protože málokterý článek bude mít více videí a naopak většina článků YT videa nemá #}
<script>
(function () {
const posterContainer = document.getElementById('ytVideo{{ video_id }}PosterContainer')
const videoContainer = document.getElementById('ytVideo{{ video_id }}IframeContainer')
posterContainer.onclick = function () {
videoContainer.innerHTML = '<iframe class="rounded w-full h-full !border-0" src="https://www.youtube-nocookie.com/embed/{{ video_id }}?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>'
videoContainer.style.display = 'block'
posterContainer.style.display = 'none'
}
})()
</script>
majak_uistyleguide/templates/patterns/atoms/youtube_video/youtube_video.yaml 0 → 100644
+ 4
− 0
View file @ 9d1ff719
context:
video_id: 'G6N943NlCbw'
image_source: 'https://picsum.photos/536/354'
image_alt: 'Image alt'
majak_uistyleguide/templates/patterns/molecules/articles/article_title_preview.html 0 → 100644
+ 21
− 0
View file @ 9d1ff719
<div
class="
flex flex-col bg-grey-180 drop-shadow
{{ classes }}
"
>
<div class="flex flex-col px-8 pb-6 pt-6 h-full">
<div class="text-xl text-grey-350 mb-2">
{{ date }}
</div>
<a href="{{ url }}" class="underline-offset-4">
<h2 class="font-alt text-4xl">{{ title }}</h2>
</a>
<div class="mt-2">
{% include 'patterns/molecules/tags/inline_tags.html' %}
</div>
</div>
</div>
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