From faa3f10328d50e8d94abae168900333238500898 Mon Sep 17 00:00:00 2001
From: "michael.danielczok" <michael@pcsg.de>
Date: Sun, 20 Sep 2020 13:06:54 +0200
Subject: [PATCH] feat: Use images in timeline. quiqqer/timeline#1
---
.../Controls/Timeline.VerticalBothSides.css | 21 +++++++++++++++++--
.../Controls/Timeline.VerticalBothSides.html | 5 +++--
2 files changed, 22 insertions(+), 4 deletions(-)
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
index 4aee19b..b9e8844 100644
--- a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
+++ b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.css
@@ -33,7 +33,6 @@
justify-content: center;
align-items: center;
border-radius: 50%;
- padding: 20px;
position: relative;
margin-top: 12px;
}
@@ -45,13 +44,31 @@
top: calc(50% - 20px);
background: none;
width: 0;
- height: 0px;
+ height: 0;
border-right: none;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
border-left: 30px solid #aaa;
}
+/* image */
+.timeline-entry-icon-wrapper picture {
+ overflow: hidden;
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.timeline-entry-icon-wrapper picture img.fill-image {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+
+}
+
/* line - middle */
.timeline-entry-line {
width: 60px;
diff --git a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
index 3c412a4..3e422c2 100644
--- a/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
+++ b/src/QUI/Timeline/Controls/Timeline.VerticalBothSides.html
@@ -31,8 +31,9 @@
<div class="timeline-entry-icon">
{if $Child->getAttribute('image_site')}
<div class="timeline-entry-icon-wrapper">
- {image src=$Child->getAttribute('image_site') width="500" type="resize"
- title="{$Child->getAttribute('title')}"}
+ {image src=$Child->getAttribute('image_site') max-width="500" max-height="500" type="resize"
+ title="{$Child->getAttribute('title')}"
+ class="fill-image"}
</div>
{/if}
</div>
--
GitLab