Adjusting public display of statuses to look similar to logged-in UI,

fix #361 with rich OEmbed display via iframe, fix #237 by hiding sensitive
content behind a spoiler on public pages

1 files changed, 206 insertions, 157 deletions

diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss
index 4df03b794..5cd140aac 100644
--- a/app/assets/stylesheets/stream_entries.scss
+++ b/app/assets/stylesheets/stream_entries.scss
@@ -3,232 +3,281 @@
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
 
   .entry {
-    border-bottom: 1px solid #d9e1e8;
-    background: #fff;
-    border-left: 2px solid #fff;
+    .status.light, .detailed-status.light {
+      border-bottom: 1px solid #d9e1e8;
+    }
 
-    &.entry-reblog {
-      border-left-color: #2b90d9;
+    &:last-child {
+      .status.light, .detailed-status.light {
+        border-bottom: 0;
+        border-radius: 0 0 4px 4px;
+      }
     }
 
-    &.entry-predecessor, &.entry-successor {
-      background: #d9e1e8;
-      border-left-color: #d9e1e8;
-      border-bottom-color: darken(#d9e1e8, 10%);
+    &:first-child {
+      .status.light, .detailed-status.light {
+        border-radius: 4px 4px 0 0;
+      }
 
-      .header {
-        .header__right {
-          .counter-btn {
-            color: darken(#d9e1e8, 15%);
-          }
+      &:last-child {
+        .status.light, .detailed-status.light {
+          border-radius: 4px;
         }
       }
     }
+  }
 
-    &.entry-center {
-      border-bottom-color: darken(#d9e1e8, 10%);
-    }
+  .status.light {
+    padding: 14px 14px 14px (48px + 14px*2);
+    position: relative;
+    min-height: 48px;
+    cursor: default;
+    background: lighten(#d9e1e8, 8%);
 
-    &.entry-follow, &.entry-favourite {
-      .content {
-        padding-top: 10px;
-        padding-bottom: 10px;
+    .status__header {
+      font-size: 15px;
 
-        strong {
-          font-weight: 500;
+      .status__meta {
+        float: right;
+        font-size: 14px;
+
+        .status__relative-time {
+          color: #9baec8;
         }
       }
     }
 
-    &:last-child {
-      border-bottom: 0;
-      border-radius: 0 0 4px 4px;
+    .status__display-name {
+      display: block;
+      max-width: 100%;
+      padding-right: 25px;
+      color: #282c37;
     }
-  }
 
-  .entry:first-child {
-    border-radius: 4px 4px 0 0;
+    .status__avatar {
+      position: absolute;
+      left: 14px;
+      top: 14px;
+      width: 48px;
+      height: 48px;
 
-    &:last-child {
-      border-radius: 4px;
+      & > div {
+        width: 48px;
+        height: 48px;
+      }
+
+      img {
+        display: block;
+        border-radius: 4px;
+      }
     }
-  }
 
-  @media screen and (max-width: 700px) {
-    border-radius: 0;
-    box-shadow: none;
+    .display-name {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
 
-    .entry {
-      &:last-child {
-        border-radius: 0;
+      strong {
+        font-weight: 500;
+        color: #282c37;
       }
 
-      &:first-child {
-        border-radius: 0;
+      span {
+        font-size: 14px;
+        color: #9baec8;
+      }
+    }
 
-        &:last-child {
-          border-radius: 0;
-        }
+    .status__content {
+      color: #282c37;
+
+      a {
+        color: #2b90d9;
       }
     }
-  }
 
-  .entry__container {
-    overflow: hidden;
+    .status__attachments {
+      margin-top: 8px;
+      overflow: hidden;
+      width: 100%;
+      box-sizing: border-box;
+      height: 110px;
+      display: flex;
+    }
   }
 
-  .avatar {
-    width: 56px;
-    padding: 15px 10px;
-    padding-right: 5px;
-    float: left;
+  .detailed-status.light {
+    padding: 14px;
+    background: #fff;
+    cursor: default;
 
-    img {
-      width: 56px;
-      height: 56px;
+    .detailed-status__display-name {
       display: block;
-      border-radius: 4px;
-    }
-  }
+      overflow: hidden;
+      margin-bottom: 15px;
 
-  .entry__container__container {
-    margin-left: 71px;
-  }
+      & > div {
+        float: left;
+        margin-right: 10px;
+      }
 
-  .header {
-    margin-bottom: 10px;
-    padding: 15px;
-    padding-bottom: 0;
-    padding-left: 8px;
-    display: flex;
+      .display-name {
+        display: block;
+        max-width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        strong {
+          font-weight: 500;
+          color: #282c37;
+        }
 
-    .header__left {
-      flex: 1;
+        span {
+          font-size: 14px;
+          color: #9baec8;
+        }
+      }
     }
 
-    .header__right {
+    .avatar {
+      width: 48px;
+      height: 48px;
 
+      img {
+        display: block;
+        border-radius: 4px;
+      }
     }
 
-    .name {
-      text-decoration: none;
+    .status__content {
+      color: #282c37;
+
+      a {
+        color: #2b90d9;
+      }
+    }
+
+    .detailed-status__meta {
+      margin-top: 15px;
       color: #9baec8;
+      font-size: 14px;
+      line-height: 18px;
 
-      strong {
-        color: #282c37;
-        font-weight: 500;
+      a {
+        color: inherit;
       }
 
-      &:hover {
-        strong {
-          text-decoration: underline;
-        }
+      span > span {
+        font-weight: 500;
+        font-size: 12px;
+        margin-left: 6px;
+        display: inline-block;
       }
     }
-  }
-
-  .pre-header {
-    border-bottom: 1px solid #d9e1e8;
-    color: #2b90d9;
-    padding: 5px 10px;
-    padding-left: 8px;
-    clear: both;
 
-    .name {
-      color: #2b90d9;
-      font-weight: 500;
-      text-decoration: none;
+    .detailed-status__attachments {
+      margin-top: 8px;
+      overflow: hidden;
+      width: 100%;
+      box-sizing: border-box;
+      height: 300px;
+      display: flex;
+    }
 
-      &:hover {
-        text-decoration: underline;
+    .video-player {
+      margin-top: 8px;
+      height: 300px;
+      overflow: hidden;
+
+      video {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        top: 50%;
+        transform: translateY(-50%);
       }
     }
   }
 
-  .content {
-    font-size: 14px;
-    padding: 0 15px;
-    padding-left: 8px;
-    padding-bottom: 15px;
-    color: #282c37;
-    word-wrap: break-word;
-    overflow: hidden;
-    white-space: pre-wrap;
-
-    p {
-      margin-bottom: 18px;
+  .media-item, .video-item {
+    box-sizing: border-box;
+    position: relative;
+    left: auto;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    float: left;
+    border: medium none;
+    display: block;
+    flex: 1 1 auto;
+    height: 100%;
+    margin-right: 2px;
 
-      &:last-child {
-        margin-bottom: 0;
-      }
+    &:last-child {
+      margin-right: 0;
     }
 
     a {
-      color: #2b90d9;
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: no-repeat scroll center center / cover;
       text-decoration: none;
+      cursor: zoom-in;
+    }
+  }
 
-      &:hover {
-        text-decoration: underline;
-      }
+  .video-item {
+    max-width: 196px;
 
-      &.mention {
-        &:hover {
-          text-decoration: none;
+    a {
+      cursor: pointer;
+    }
 
-          span {
-            text-decoration: underline;
-          }
-        }
-      }
+    .video-item__play {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-size: 36px;
+      transform: translate(-50%, -50%);
+      padding: 5px;
+      border-radius: 100px;
+      color: rgba(255, 255, 255, 0.8);
     }
   }
 
-  .time {
-    text-decoration: none;
-    color: #9baec8;
+  .media-spoiler {
+    background: #9baec8;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+    transition: all 100ms linear;
 
     &:hover {
-      text-decoration: underline;
+      background: darken(#9baec8, 5%);
     }
-  }
-
-  .media-attachments {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: block;
-    overflow: hidden;
-    padding-left: 10px;
-    margin-bottom: 15px;
 
-    li {
+    span {
       display: block;
-      float: left;
-      width: 120px;
-      height: 100px;
-      border-radius: 4px;
-      margin-right: 4px;
-      margin-bottom: 4px;
 
-      a {
-        display: block;
-        width: 120px;
-        height: 100px;
-        border-radius: 4px;
-        background-position: center;
-        background-repeat: none;
-        background-size: cover;
+      &:first-child {
+        font-size: 14px;
       }
-    }
-  }
 
-  @media screen and (max-width: 360px) {
-    .avatar {
-      display: none;
-    }
-
-    .entry__container__container {
-      margin-left: 7px;
+      &:last-child {
+        font-size: 11px;
+        font-weight: 500;
+      }
     }
   }
 }