Make correspondence headers sticky.

mysociety · Jul 13, 2023 · a62a326 · a62a326
1 parent 079d872
commit a62a326
Showing 1 changed file with 61 additions and 3 deletions.
diff --git a/app/assets/stylesheets/responsive/custom.scss b/app/assets/stylesheets/responsive/custom.scss
@@ -829,17 +829,17 @@ div.correspondence {
   box-shadow: 0 1px 2px rgba(0,0,0,0.25);
   border-radius: 5px;
   margin-bottom: 2.5em;
+  position: relative; // So we can position the rounded corners below
 
   &.collapsed {
     .correspondence__header {
-      border-radius: 0 0 5px 5px;
+      border-radius: 5px;
     }
   }
 }
 
 .incoming.correspondence {
   border: none;
-  border-top: 8px solid $incoming-correspondence-color;
   background-color: $incoming-correspondence-background;
   a.link_to_this {
     background-color: $incoming-correspondence-color;
@@ -848,13 +848,71 @@ div.correspondence {
 
 .outgoing.correspondence {
   border: none;
-  border-top: 8px solid $outgoing-correspondence-color;
   background-color: $outgoing-correspondence-background;
   a.link_to_this {
     background-color: $outgoing-correspondence-color;
   }
 }
 
+/* Make the header sticky so it's always visible as you scroll through a
+ * message. */
+.correspondence__header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-radius: 5px 5px 0 0;
+  .incoming & {
+    border-top: 8px solid $incoming-correspondence-color;
+  }
+  .outgoing & {
+    border-top: 8px solid $outgoing-correspondence-color;
+  }
+
+  /* This is so you can't see the text box under the rounded corners of the
+   * sticky header. Can all be removed if you don't have rounded corners. */
+  &::before, &::after {
+    background-position: top left;
+    background-size: 7px 8px;
+    background-repeat: no-repeat;
+    width: 7px;
+    height: 8px;
+    content: "";
+    display: block;
+    position: absolute;
+    top: -8px;
+  }
+  &::before {
+    left: -2px;
+  }
+  &::after {
+    right: -2px;
+  }
+  .incoming &::before {
+    background-image:
+      linear-gradient(to right, $body-bg 2px, transparent 0),
+      linear-gradient(to bottom, transparent 5px, $incoming-correspondence-color 0),
+      radial-gradient(circle at 7px 5px, $incoming-correspondence-color 5px, $body-bg 0);
+  }
+  .outgoing &::before {
+    background-image:
+      linear-gradient(to right, $body-bg 2px, transparent 0),
+      linear-gradient(to bottom, transparent 5px, $outgoing-correspondence-color 0),
+      radial-gradient(circle at 7px 5px, $outgoing-correspondence-color 5px, $body-bg 0);
+  }
+  .incoming &::after {
+    background-image:
+      linear-gradient(to left, $body-bg 2px, transparent 0),
+      linear-gradient(to bottom, transparent 5px, $incoming-correspondence-color 0),
+      radial-gradient(circle at 0 5px, $incoming-correspondence-color 5px, $body-bg 0);
+  }
+  .outgoing &::after {
+    background-image:
+      linear-gradient(to left, $body-bg 2px, transparent 0),
+      linear-gradient(to bottom, transparent 5px, $outgoing-correspondence-color 0),
+      radial-gradient(circle at 0 5px, $outgoing-correspondence-color 5px, $body-bg 0);
+  }
+}
+
 .js-loaded .js-collapsable {
   .correspondence__header {
     &.hover {