From c40ce19b9ebb73dbbcafe07e4cbc970a5430302a Mon Sep 17 00:00:00 2001
From: reverend <reverend@reverend2048.de>
Date: Thu, 4 Mar 2021 17:39:05 +0100
Subject: [PATCH] Verbessern der Truncation (CSS Grid)

---
 .../truncation/_truncation.styl               | 81 +++++++++++++++++++
 .../truncation/truncation.config.json         | 17 ++++
 .../10_ContentShape/truncation/truncation.hbs |  7 ++
 3 files changed, 105 insertions(+)
 create mode 100644 components/10_ContentShape/truncation/_truncation.styl
 create mode 100644 components/10_ContentShape/truncation/truncation.config.json
 create mode 100644 components/10_ContentShape/truncation/truncation.hbs

diff --git a/components/10_ContentShape/truncation/_truncation.styl b/components/10_ContentShape/truncation/_truncation.styl
new file mode 100644
index 0000000..5b8c6fb
--- /dev/null
+++ b/components/10_ContentShape/truncation/_truncation.styl
@@ -0,0 +1,81 @@
+/**
+ * This mixin is for truncating text. By now, this can only be done by container height.
+ * Because this is actually realy messed up in native CSS, you have to specify the line-height
+ * and container height manualy in Stylues. CSS-Variables can unfortunately not be used in this case.
+ */
+RV-Truncation--fade(background-color=white)
+	+RV-Block__Modifier--name('fade')
+		
+		+RV-Element('Content')
+			&:last-child:after
+				background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
+				display block
+				content '###'
+				color transparent
+				opacity 1
+				position absolute
+				top calc(var(--height) - 40px)
+				width 100%
+				height calc(1.5 * var(--line-height))
+				z-index 10
+
+RV-Truncation--ellipsis(background-color=white)
+	+RV-Block__Modifier--name('ellipsis')
+		
+		+RV-Element('Cutter')
+			&:after
+				position absolute
+				display block
+				right 0
+				content '...'
+				background-color background-color
+				padding-left 5px
+				padding-bottom 10px
+				box-shadow -10px 8px 6px 0px background-color;
+				line-height --line-height
+				top calc(var(--height) - 38px)
+			
+		+RV-Element('Content')
+			&:after
+				display block
+				background-color background-color
+				content ''
+				position relative
+				right 0
+				height --height
+				width 100%
+				bottom -100%
+				z-index 30
+				
+RV-Truncation(line-height=1.3em, height=100%, background-color=white)
+	RV-CSSParameter({
+		line-height: line-height,
+		height: height,
+		background-color: background-color
+	})
+	
+	display grid
+	align-content flex-start
+	height --height
+	grid-template-rows repeat(auto-fill, --line-height)
+
+	height calc_height(--height)
+	width calc_width()
+	
+	position relative
+	
+	*
+		overflow hidden
+		grid-row 1/-1
+		background --background-color
+		line-height --line-height
+		z-index -10
+		
++RV-Block('RV-Truncation')
+	RV-Truncation()
+	
+	+RV-Block__Modifier()
+		RV-Truncation--fade(--background-color)
+	
+	+RV-Block__Modifier()
+		RV-Truncation--ellipsis(--background-color)
\ No newline at end of file
diff --git a/components/10_ContentShape/truncation/truncation.config.json b/components/10_ContentShape/truncation/truncation.config.json
new file mode 100644
index 0000000..a923e83
--- /dev/null
+++ b/components/10_ContentShape/truncation/truncation.config.json
@@ -0,0 +1,17 @@
+{
+	"name": "Truncation",
+	"variants": [
+		{
+			"name": "Fade",
+			"context": {
+				"modifier": "RV-Truncation--fade"
+			}
+		},
+		{
+			"name": "Ellipsis",
+			"context": {
+				"modifier": "RV-Truncation--ellipsis"
+			}
+		}
+	]
+}
\ No newline at end of file
diff --git a/components/10_ContentShape/truncation/truncation.hbs b/components/10_ContentShape/truncation/truncation.hbs
new file mode 100644
index 0000000..b4849fe
--- /dev/null
+++ b/components/10_ContentShape/truncation/truncation.hbs
@@ -0,0 +1,7 @@
+<div class="RV-Truncation {{#if modifier}}{{modifier}}{{/if}}" style="--height: 200px">
+	<div class="RV-Truncation__Cutter">
+		<p class="RV-Truncation__Content">
+			You could see there was text coming out of her eyes, text coming out of her wherever. . Does everybody know that pig named Lorem Ipsum? She's a disgusting pig, right? When other websites give you text, they’re not sending the best. They’re not sending you, they’re sending words that have lots of problems and they’re bringing those problems with us. They’re bringing mistakes. They’re bringing misspellings. They’re typists… And some, I assume, are good words. I'm speaking with myself, number one, because I have a very good brain and I've said a lot of things. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
+		</p>
+	</div>
+</div>
\ No newline at end of file