From a0d6852ce2f9879e46d969b6c179606dd0988d7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20Farka?= <stepanfarka11@gmail.com>
Date: Wed, 7 Sep 2022 09:45:34 +0200
Subject: [PATCH] [FIX] image&download block overflow
---
main/static/main/css/styles.css | 8 ++++++++
.../_patterns/molecules/blocks/block-download.mustache | 6 +++---
.../_patterns/molecules/blocks/block-image.mustache | 6 +++---
main/templates/main/blocks/article_download_block.html | 8 ++++----
main/templates/main/blocks/article_image_block.html | 8 ++++----
5 files changed, 22 insertions(+), 14 deletions(-)
diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index fe577019..373bd22c 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -3801,6 +3801,14 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
overflow: auto;
}
+.overflow-hidden{
+ overflow: hidden;
+}
+
+.text-ellipsis{
+ text-overflow: ellipsis;
+}
+
.rounded-full{
border-radius: 9999px;
}
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
index 3d209869..cca58b7d 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-download.mustache
@@ -2,10 +2,10 @@
<div class="flex justify-start xl:justify-end grid-left-side">
<i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
</div>
- <div class="grid-content flex items-center flex-wrap gap-3">
- <div class="flex items-center bg-white h-11 p-1 mr-3">
+ <div class="grid-content flex items-center flex-wrap gap-3 overflow-hidden">
+ <div class="flex items-center bg-white h-11 p-1 mr-3 overflow-hidden">
<span class="font-bold mr-1">Stáhnout soubor: </span>
- <span>prehled-tabulka.pdf</span>
+ <span class="overflow-hidden text-ellipsis">prehledasdfasndfjansdjkfnkjasndkjfajsdnfkjtabulka.pdf</span>
</div>
{{> atoms-button-animated(btn-text: "Stáhnout", classes: "h-11 p-0") }}
</div>
diff --git a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
index fc71e801..232d2529 100644
--- a/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
+++ b/main/styleguide/source/_patterns/molecules/blocks/block-image.mustache
@@ -1,11 +1,11 @@
<div class="grid-container px-3 py-3 mb-4 bg-grey-150 xl:py-0 xl:mb-20">
- <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
+ <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5 overflow-hidden">
<img src="https://i.picsum.photos/id/547/480/300.jpg?hmac=Y7cmYUqM4jIvrQzzO8VTM0oiedlqvSPOzXH_iRSK87w" alt="" class="w-full max-w-sm">
- <div class="flex flex-col justify-between">
+ <div class="flex flex-col justify-between overflow-hidden">
<a href="" class="mt-4 xl:mt-8 mb-2 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-4 xl:mb-6">zdroj: www.internet.cz</span>
+ <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6 overflow-hidden text-ellipsis">zdroj: www.internet.cz</span>
</div>
</div>
</div>
diff --git a/main/templates/main/blocks/article_download_block.html b/main/templates/main/blocks/article_download_block.html
index fcc2be01..7f61e04f 100644
--- a/main/templates/main/blocks/article_download_block.html
+++ b/main/templates/main/blocks/article_download_block.html
@@ -2,14 +2,14 @@
<div class="flex justify-start xl:justify-end grid-left-side">
<i class="ico--download p-2 text-3xl md:text-4xl xl:text-7xl xl:mr-12"></i>
</div>
- <div class="grid-content flex items-center flex-wrap gap-3">
- <div class="flex items-center bg-white h-11 p-1 mr-3">
+ <div class="grid-content flex items-center flex-wrap gap-3 overflow-hidden">
+ <div class="flex items-center bg-white h-11 p-1 mr-3 overflow-hidden">
<span class="font-bold mr-1">Stáhnout soubor: </span>
- <span>{{ self.file }}</span>
+ <span class="overflow-hidden text-ellipsis">{{ self.file }}</span>
</div>
<a href="{{ self.file.url }}" class="btn btn__slide__wrap h-11 p-0" download>
<span class="btn text-lg bg-black text-white w-32 lg:text-base">Stáhnout</span>
<span class="btn text-lg bg-white text-black w-32 lg:text-base">Stáhnout</span>
</a>
</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/main/templates/main/blocks/article_image_block.html b/main/templates/main/blocks/article_image_block.html
index 6c19f20a..6ad3cd79 100644
--- a/main/templates/main/blocks/article_image_block.html
+++ b/main/templates/main/blocks/article_image_block.html
@@ -1,15 +1,15 @@
{% load wagtailimages_tags %}
<div class="grid-container px-3 py-3 mb-4 bg-grey-150 xl:py-0 xl:mb-20">
- <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5">
+ <div class="grid-content-with-right-side flex flex-wrap gap-3 xl:gap-5 overflow-hidden">
{% image self.image max-500x500 as image %}
<img src="{{ image.url }}"
alt="" class="w-full max-w-sm">
- <div class="flex flex-col justify-between">
+ <div class="flex flex-col justify-between overflow-hidden">
<a href="{{ self.href }}" class="mt-4 xl:mt-8 mb-2 font-bold hover:no-underline leading-5">
{{ self.text }}
</a>
- <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6">zdroj: {{ self.href }}</span>
+ <span class="text-sm text-grey-200 uppercase mb-4 xl:mb-6 overflow-hidden text-ellipsis">zdroj: {{ self.href }}</span>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
--
GitLab