Implement shared collapse partial

app/assets/stylesheets/application.sass.scss

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

app/assets/stylesheets/components/_collapse.scss

@@ -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);
+}

app/views/shared/_collapse.html.haml

@@ -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")

config/locales/views.en.yml

@@ -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>