Timeline template logic updates
This commit is contained in:
Ben Visness
parent
09e6a15085
commit
7d422cb533
|
|
@ -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 {
|
||||
display: none; }
|
||||
|
||||
.timeline.no-blogs .blogs {
|
||||
display: none; }
|
||||
|
||||
.timeline.no-library .library {
|
||||
display: none; }
|
||||
|
||||
.timeline.no-snippets .snippets {
|
||||
display: none; }
|
||||
|
||||
.timeline .timeline-item {
|
||||
.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;
|
||||
height: 62px; }
|
||||
width: 3.875rem;
|
||||
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; }
|
||||
|
|
|
|||
|
|
@ -1,24 +1,15 @@
|
|||
.timeline {
|
||||
.timeline-item {
|
||||
@include usevar(background-color, card-background);
|
||||
@include usevar(color, main-color);
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
/*
|
||||
&:hover {
|
||||
@include usevar(background-color, card-background-hover);
|
||||
}
|
||||
*/
|
||||
@include usevar(background-color, card-background);
|
||||
@include usevar(--fade-color, card-background);
|
||||
@include usevar(color, main-color);
|
||||
|
||||
.avatar-icon {
|
||||
border: 2px solid;
|
||||
@include usevar(border-color, theme-color);
|
||||
|
||||
&.big {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
width: px2rem(62px);
|
||||
height: px2rem(62px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -29,18 +20,10 @@
|
|||
}
|
||||
|
||||
.timeline-content-box.embed {
|
||||
// NOTE(asaf): CSS trick to get an iframe to auto resize
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%; // NOTE(asaf): As percentage of width. Ensures 16:9 aspect ratio.
|
||||
@extend .aspect-ratio, .aspect-ratio--16x9;
|
||||
|
||||
& > iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> iframe {
|
||||
@extend .aspect-ratio--object;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,57 @@
|
|||
{{/*
|
||||
TODO: The logic in here for how to present various types of timeline items needs to be more robust.
|
||||
*/}}
|
||||
{{ $small := or .Description .EmbedMedia }}
|
||||
|
||||
{{ if or .Description .EmbedMedia }}
|
||||
<div class="timeline-item flex flex-column pa3 mb2 br3" data-filter-title="{{ .FilterTitle }}">
|
||||
<div class="timeline-user-info mb2 flex items-center">
|
||||
<img class="avatar-icon lite mr2" src="{{ .OwnerAvatarUrl }}"/>
|
||||
<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
|
||||
<a class="datetime tr" style="flex: 1 1 auto;" href="{{ .Url }}">{{ timehtml (relativedate .Date) .Date }}</a>
|
||||
</div>
|
||||
<div class="mb2">{{ .Description }}</div>
|
||||
{{ range .EmbedMedia }}
|
||||
<div class="timeline-content-box {{ 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 }}
|
||||
<div class="timeline-item flex flex-column pa3 mb2 br3" {{ with .FilterTitle }}data-filter-title="{{ . }}"{{ end }}>
|
||||
{{/* top bar - avatar, info, date */}}
|
||||
<div class="flex items-center">
|
||||
<a class="flex-shrink-0" href="{{ .OwnerUrl }}">
|
||||
<img class="avatar-icon lite {{ if not $small }}big{{ end }} {{ if $small }}mr2{{ else }}mr3{{ end }}" src="{{ .OwnerAvatarUrl }}" />
|
||||
</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>
|
||||
{{ end }}
|
||||
<div class="details">
|
||||
<a class="user" href="{{ .OwnerUrl }}">{{ .OwnerName }}</a>
|
||||
{{ if not $small }}
|
||||
— {{ 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> — {{ 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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue