Implement shared collapse partial

This commit is contained in:
Andreas Nedbal 2023-01-12 18:25:46 +01:00 committed by Andreas Nedbal
parent e8657891a9
commit 3258ea4f0b
4 changed files with 106 additions and 0 deletions

View File

@ -103,6 +103,7 @@ $unicodeRangeValues in Lexend.$unicodeMap {
"components/answerbox",
"components/avatars",
"components/buttons",
"components/collapse",
"components/comments",
"components/container",
"components/entry",

View File

@ -0,0 +1,94 @@
@use "sass:map";
.collapsed {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
&.answerbox__answer-text {
-webkit-line-clamp: 12;
@include media-breakpoint-up('sm') {
-webkit-line-clamp: 7;
}
}
&.answerbox__question-text {
-webkit-line-clamp: 10;
@include media-breakpoint-up('sm') {
-webkit-line-clamp: 5;
}
}
}
.collapser {
$this: &;
display: flex;
position: sticky;
justify-content: center;
width: 100%;
padding: map.get($spacers, 2);
bottom: calc($nav-link-height + 10px);
z-index: 0;
@include media-breakpoint-up('sm') {
bottom: 10px;
}
& .collapsed-text {
display: none;
}
& .shown-text {
display: inline-block;
}
.collapsed ~ & {
position: absolute;
bottom: 0;
&:before {
content: "";
}
& .collapsed-text {
display: inline-block;
}
& .shown-text {
display: none;
}
}
&:before {
position: absolute;
background: linear-gradient(0deg, rgba(var(--gradient-base),1) 0%, rgba(var(--gradient-base),0) 100%);
width: 100%;
height: 100%;
}
.btn {
@extend .btn-primary;
z-index: 1;
}
}
.inbox-entry--new .collapser .btn {
@extend .btn-light;
}
.inbox-entry .card-header .collapser,
.answerbox .card-header .collapser {
--gradient-base: var(--raised-accent-rgb);
}
.question--fixed .card-body .collapser,
.answerbox .card-body .collapser {
--gradient-base: var(--raised-bg-rgb);
}
.inbox-entry--new .card-header .collapser {
--gradient-base: var(--primary-rgb);
}

View File

@ -0,0 +1,4 @@
.collapser
%button.btn.btn-primary.btn-sm.shadow{ data: { collapse_target: "action" } }
%span.shown-text= t(".#{type}.hide")
%span.collapsed-text= t(".#{type}.show")

View File

@ -551,6 +551,13 @@ en:
unsubscribe_all: "Disable on all devices"
description: "Here you can set up or disable push notifications for new questions in your inbox."
shared:
collapse:
answer:
show: "Show full answer"
hide: "Hide full answer"
question:
show: "Show full question"
hide: "Hide full question"
formatting:
body_html: |
<p>%{app_name} uses <b>Markdown</b> for formatting</p>