Implement shared collapse partial
This commit is contained in:
parent
e8657891a9
commit
3258ea4f0b
|
@ -103,6 +103,7 @@ $unicodeRangeValues in Lexend.$unicodeMap {
|
|||
"components/answerbox",
|
||||
"components/avatars",
|
||||
"components/buttons",
|
||||
"components/collapse",
|
||||
"components/comments",
|
||||
"components/container",
|
||||
"components/entry",
|
||||
|
|
|
@ -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);
|
||||
}
|
|
@ -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")
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue