Skip to content
Snippets Groups Projects
Verified Commit 0b96de53 authored by Alexa Valentová's avatar Alexa Valentová
Browse files

add youtube video, grids

parent d1d62505
No related branches found
No related tags found
1 merge request!29Feat/redesign
Pipeline #18367 passed
Stage: build
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 987 additions and 5 deletions
majak_uistyleguide/templates/patterns/atoms/containers/container__medium.html
+ 1
− 1
View file @ 0b96de53
......@@ -5,4 +5,4 @@
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib
bmpus purus at lorem. Etiam neque. Cras pede lib</p>
</div>
\ No newline at end of file
</div>
majak_uistyleguide/templates/patterns/atoms/containers/container__narrow.html
+ 1
− 1
View file @ 0b96de53
......@@ -6,4 +6,4 @@
mpus purus at lorem. Etiam neque. Cras pede lib
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
</p>
</div>
\ No newline at end of file
</div>
majak_uistyleguide/templates/patterns/atoms/containers/container__wide.html
+ 1
− 1
View file @ 0b96de53
......@@ -6,4 +6,4 @@
mpus purus at lorem. Etiam neque. Cras pede lib
mpus purus at lorem. Etiam neque. Cras pede libmpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib mpus purus at lorem. Etiam neque. Cras pede lib
</p>
</div>
\ No newline at end of file
</div>
majak_uistyleguide/templates/patterns/atoms/figure/figure.html
+ 1
− 1
View file @ 0b96de53
<figure class="flex flex-col gap-2 max-w-max p-4">
<figure class="flex flex-col gap-2 max-w-max py-4">
<img
src="{{ source }}"
alt="{{ alt }}"
......
majak_uistyleguide/templates/patterns/atoms/grids/grids.html
+ 12
− 1
View file @ 0b96de53
......@@ -109,4 +109,15 @@
</div>
</div>
</div>
</div>
\ No newline at end of file
</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/youtube_video/youtube_video.html 0 → 100644
+ 66
− 0
View file @ 0b96de53
<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 @ 0b96de53
context:
video_id: 'G6N943NlCbw'
image_source: 'https://picsum.photos/536/354'
image_alt: 'Image alt'
src/css/atoms/geo_feature_collection.pcss 0 → 100644
+ 162
− 0
View file @ 0b96de53
.marker-cluster {
border-radius: 50%;
background-clip: padding-box;
}
.marker-cluster div {
color: #fff;
font-family: Roboto;
font-weight: bold;
text-align: center;
font-size: 16px;
width: 40px;
height: 40px;
border-radius: 50%;
margin-left:0;
margin-top: 0;
}
.marker-cluster span {
line-height: 40px;
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-small:hover,
.marker-cluster-medium:hover {
background-color: transparent;
}
.marker-cluster-small div,
.marker-cluster-medium div{
background-color: rgba(0, 0, 0, 0.5);
}
.marker-cluster-small:hover div,
.marker-cluster-medium:hover div {
background-color: rgba(0, 0, 0, 0.9);
}
.geo-feature-collection {
position: relative;
}
.geo-feature-collection__map-layer {
width: 100%;
z-index: -1;
}
.geo-feature-collection .modal__overlay {
z-index: 9999;
}
.modal__container-body {
position: relative;
}
.geo-feature-collection .modal__close {
position: absolute;
right: 0;
top: 0;
height: 2rem;
width: 2rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
margin: auto;
color: var(--color-black);
background: var(--color-white);
}
.geo-feature-collection .card__body {
position: relative;
}
.geo-feature-collection-item__category {
position: absolute;
left: 1rem;
top: -2rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 50;
padding: .5rem 1rem 1rem;
background: var(--color-white);
}
.geo-feature-collection__legend {
padding: 1rem;
width: 16rem;
background: var(--color-white);
border-radius: .5rem;
pointer-events: all;
}
.geo-feature-collection__legend-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media only screen and (min-width: 30rem) {
.geo-feature-collection__legend {
width: 20rem;
}
}
.geo-feature-collection-tooltip {
background: none;
border-radius: 0;
border: 0;
padding: 0;
margin: 0;
margin-top: -.25rem;
box-shadow: none;
font-size: .875rem;
font-weight: bold;
color: var(--color-grey-500);
text-align: center;
text-shadow:
-1px -1px 0 white,
1px -1px 0 white,
-1px 1px 0 white,
1px 1px 0 white;
width: 12em;
white-space: normal;
height: 8rem;
display: flex;
align-items: flex-end;
justify-content: center;
line-height: 1;
}
.geo-feature-collection-tooltip:before {
display: none;
}
.geo-feature-collection .leaflet-touch .leaflet-bar {
border: none;
box-shadow: 0 6px 6px -3px rgb(221 221 221 / 43%), 0 10px 14px 1px rgb(221 221 221 / 37%), 0 4px 18px 3px rgb(221 221 221 / 35%)
}
.geo-feature-collection .leaflet-touch .leaflet-control-zoom-in,
.geo-feature-collection .leaflet-touch .leaflet-control-zoom-out {
line-height: 2rem;
height: 2rem;
width: 2rem;
font-weight: bold;
font-size: 24px;
font-family: var(--font-body);
}
.geo-feature-collection .leaflet-touch .leaflet-control-zoom-in:hover,
.geo-feature-collection .leaflet-touch .leaflet-control-zoom-out:hover {
background-color: var(--color-grey-125);
}
.geo-feature-collection .leaflet-touch .leaflet-control-zoom-in {
border-top-left-radius: .5rem !important;
border-top-right-radius: .5rem !important;
border-bottom: 1px var(--color-grey-125) solid !important;
}
.geo-feature-collection .leaflet-touch .leaflet-control-zoom-out {
border-bottom-left-radius: .5rem !important;
border-bottom-right-radius: .5rem !important;
}
src/js/components/geo_feature_collection/GeoFeatureCollection.vue 0 → 100644
+ 739
− 0
View file @ 0b96de53
This diff is collapsed.
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