Timeline template logic updates

public/style.css

@@ -493,11 +493,11 @@ input[type="url"],
  * </div>
  *
  * */
-.aspect-ratio {
+.aspect-ratio, .timeline-item .timeline-content-box.embed {
   height: 0;
   position: relative; }
 
-.aspect-ratio--16x9 {
+.aspect-ratio--16x9, .timeline-item .timeline-content-box.embed {
   padding-bottom: 56.25%; }
 
 .aspect-ratio--9x16 {
@@ -530,7 +530,7 @@ input[type="url"],
 .aspect-ratio--1x1 {
   padding-bottom: 100%; }
 
-.aspect-ratio--object {
+.aspect-ratio--object, .timeline-item .timeline-content-box.embed > iframe {
   position: absolute;
   top: 0;
   right: 0;
@@ -9329,52 +9329,24 @@ span.icon-rss::before {
       .streams-container .twitch-embed-container.open {
         padding-bottom: 40.6%; } }
 
-.timeline.no-forums .forums {
+.timeline-item {
-  display: none; }
-
-.timeline.no-blogs .blogs {
-  display: none; }
-
-.timeline.no-library .library {
-  display: none; }
-
-.timeline.no-snippets .snippets {
-  display: none; }
-
-.timeline .timeline-item {
   background-color: #e8e8e8;
   background-color: var(--card-background);
+  --fade-color: #e8e8e8;
+  --fade-color: var(--card-background);
   color: black;
   color: var(--main-color); }
-
-.timeline-item {
-  /*
-    &:hover {
-        @include usevar(background-color, card-background-hover);
-    }
-    */ }
   .timeline-item .avatar-icon {
     border: 2px solid;
     border-color: #666;
     border-color: var(--theme-color); }
     .timeline-item .avatar-icon.big {
-      width: 62px;
+      width: 3.875rem;
-      height: 62px; }
+      height: 3.875rem; }
   .timeline-item .timeline-content-box > * {
     display: block;
     max-width: 100%;
     max-height: 80vh; }
-  .timeline-item .timeline-content-box.embed {
-    position: relative;
-    width: 100%;
-    height: 0;
-    padding-bottom: 56.25%; }
-    .timeline-item .timeline-content-box.embed > iframe {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%; }
 
 .timeline-modal .container {
   max-height: 100vh; }

src/rawdata/scss/_timeline.scss

@@ -1,24 +1,15 @@
-.timeline {
-    .timeline-item {
-        @include usevar(background-color, card-background);
-        @include usevar(color, main-color);
-    }
-}
-
 .timeline-item {
-    /*
+    @include usevar(background-color, card-background);
-    &:hover {
+    @include usevar(--fade-color, card-background);
-        @include usevar(background-color, card-background-hover);
+    @include usevar(color, main-color);
-    }
-    */
 
     .avatar-icon {
         border: 2px solid;
         @include usevar(border-color, theme-color);
 
         &.big {
-            width: 62px;
+            width: px2rem(62px);
-            height: 62px;
+            height: px2rem(62px);
         }
     }
 
@@ -29,18 +20,10 @@
     }
 
     .timeline-content-box.embed {
-        // NOTE(asaf): CSS trick to get an iframe to auto resize
+        @extend .aspect-ratio, .aspect-ratio--16x9;
-        position: relative;
-        width: 100%;
-        height: 0;
-        padding-bottom: 56.25%; // NOTE(asaf): As percentage of width. Ensures 16:9 aspect ratio.
 
-        & > iframe {
+        > iframe {
-            position: absolute;
+            @extend .aspect-ratio--object;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
         }
     }
 }

src/templates/src/include/timeline_item.html

@@ -1,39 +1,57 @@
-{{/*
+{{ $small := or .Description .EmbedMedia }}
-TODO: The logic in here for how to present various types of timeline items needs to be more robust.
-*/}}
 
-{{ if or .Description .EmbedMedia }}
+<div class="timeline-item flex flex-column pa3 mb2 br3" {{ with .FilterTitle }}data-filter-title="{{ . }}"{{ end }}>
-	<div class="timeline-item flex flex-column pa3 mb2 br3" data-filter-title="{{ .FilterTitle }}">
+	{{/* top bar - avatar, info, date */}}
-		<div class="timeline-user-info mb2 flex items-center">
+	<div class="flex items-center">
-			<img class="avatar-icon lite mr2" src="{{ .OwnerAvatarUrl }}"/>
+		<a class="flex-shrink-0" href="{{ .OwnerUrl }}">
-			<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
+			<img class="avatar-icon lite {{ if not $small }}big{{ end }} {{ if $small }}mr2{{ else }}mr3{{ end }}" src="{{ .OwnerAvatarUrl }}" />
-			<a class="datetime tr" style="flex: 1 1 auto;" href="{{ .Url }}">{{ timehtml (relativedate .Date) .Date }}</a>
+		</a>
-		</div>
+
-		<div class="mb2">{{ .Description }}</div>
+		<div class="overflow-hidden flex-grow-1 flex flex-column justify-center">
-		{{ range .EmbedMedia }}
+			{{ if .Breadcrumbs }}
-			<div class="timeline-content-box {{ if eq .Type mediaembed }}embed{{ end }}">
+				{{ template "breadcrumbs.html" .Breadcrumbs }}
-				{{ if eq .Type mediaimage }}
+			{{ end }}
-					<img src="{{ .AssetUrl }}">
+			{{ if .Title }}
-				{{ else if eq .Type mediavideo }}
+				<div class="f5 nowrap truncate">
-					<video src="{{ .AssetUrl }}" preload="metadata" controls>
+					{{ with .TypeTitle }}<b>{{ . }}:</b>{{ end }}
-				{{ else if eq .Type mediaaudio }}
+					<a href="{{ .Url }}">{{ .Title }}</a>
-					<audio src="{{ .AssetUrl }}" controls>
+				</div>
-				{{ else if eq .Type mediaembed }}
+			{{ end }}
-					{{ .EmbedHTML }}
+			<div class="details">
+				<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
+				{{ if not $small }}
+					&mdash; {{ timehtml (relativedate .Date) .Date }}
 				{{ end }}
 			</div>
+		</div>
+
+		{{ if $small }}
+			<a href="{{ .Url }}">{{ timehtml (relativedate .Date) .Date }}</a>
 		{{ end }}
 	</div>
-{{ else }}
-	<div class="timeline-item flex pa3 mb2 br3" data-filter-title="{{ .FilterTitle }}">
-		<img class="avatar-icon big lite mr3" src="{{ .OwnerAvatarUrl }}"/>
-		<div class="timeline-info overflow-hidden">
-			{{ template "breadcrumbs.html" .Breadcrumbs }}
-			<div class="title f5 b nowrap truncate"><span>{{ .TypeTitle }}</span>: <a href="{{ .Url }}" class="title-text normal">{{ .Title }}</a></div>
-			<div class="details">
-				<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a> &mdash; {{ timehtml (relativedate .Date) .Date }}
-			</div>
-		</div>
-	</div>
-{{ end }}
 
+	{{/* content */}}
+
+	{{ if .Description }}
+		<div class="mt3 overflow-hidden relative {{ if .TruncateDescription }}mh-5{{ end }}">
+			<div class="post-content">{{ .Description }}</div>
+			{{ if .TruncateDescription }}
+				<div class="excerpt-fade absolute w-100 h4 bottom-0 z-999"></div>
+			{{ end }}
+		</div>
+	{{ end }}
+
+	{{ range .EmbedMedia }}
+		<div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }}">
+			{{ if eq .Type mediaimage }}
+				<img src="{{ .AssetUrl }}">
+			{{ else if eq .Type mediavideo }}
+				<video src="{{ .AssetUrl }}" preload="metadata" controls>
+			{{ else if eq .Type mediaaudio }}
+				<audio src="{{ .AssetUrl }}" controls>
+			{{ else if eq .Type mediaembed }}
+				{{ .EmbedHTML }}
+			{{ end }}
+		</div>
+	{{ end }}
+</div>