Timeline template logic updates

This commit is contained in:
Ben Visness 2021-10-24 09:22:37 -05:00
parent 09e6a15085
commit 7d422cb533
3 changed files with 67 additions and 94 deletions

View File

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

View File

@ -1,24 +1,15 @@
.timeline {
.timeline-item {
@include usevar(background-color, card-background);
@include usevar(color, main-color);
}
}
.timeline-item { .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 { .avatar-icon {
border: 2px solid; border: 2px solid;
@include usevar(border-color, theme-color); @include usevar(border-color, theme-color);
&.big { &.big {
width: 62px; width: px2rem(62px);
height: 62px; height: px2rem(62px);
} }
} }
@ -29,18 +20,10 @@
} }
.timeline-content-box.embed { .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%;
} }
} }
} }

View File

@ -1,17 +1,48 @@
{{/* {{ $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 class="overflow-hidden flex-grow-1 flex flex-column justify-center">
{{ if .Breadcrumbs }}
{{ template "breadcrumbs.html" .Breadcrumbs }}
{{ end }}
{{ if .Title }}
<div class="f5 nowrap truncate">
{{ with .TypeTitle }}<b>{{ . }}:</b>{{ end }}
<a href="{{ .Url }}">{{ .Title }}</a>
</div> </div>
<div class="mb2">{{ .Description }}</div> {{ end }}
<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>
{{/* 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 }} {{ range .EmbedMedia }}
<div class="timeline-content-box {{ if eq .Type mediaembed }}embed{{ end }}"> <div class="timeline-content-box mt3 {{ if eq .Type mediaembed }}embed{{ end }}">
{{ if eq .Type mediaimage }} {{ if eq .Type mediaimage }}
<img src="{{ .AssetUrl }}"> <img src="{{ .AssetUrl }}">
{{ else if eq .Type mediavideo }} {{ else if eq .Type mediavideo }}
@ -23,17 +54,4 @@ TODO: The logic in here for how to present various types of timeline items needs
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ end }}
</div> </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 }}