feat: filebrowser shows only images; info.md moves to a side panel in Libre Baskerville
This commit is contained in:
@@ -4,36 +4,32 @@
|
||||
{{ $images := .Params.images }}
|
||||
{{ $video := .Params.video }}
|
||||
|
||||
{{ if or $images $hasText $video }}
|
||||
{{ if or $images $video $hasText }}
|
||||
<div class="proj-layout">
|
||||
{{ if or $images $video }}
|
||||
<div class="tui tui--files filebrowser">
|
||||
<p class="tui__cmd"><span class="tui__sym">$</span> ls</p>
|
||||
{{ $total := 0 }}{{ if $images }}{{ $total = len $images }}{{ end }}{{ if $hasText }}{{ $total = add $total 1 }}{{ end }}{{ if $video }}{{ $total = add $total 1 }}{{ end }}
|
||||
{{ $total := 0 }}{{ if $images }}{{ $total = len $images }}{{ end }}{{ if $video }}{{ $total = add $total 1 }}{{ end }}
|
||||
<p class="tui__cmd tui__total">total {{ $total }}</p>
|
||||
<ul class="tui__ls">
|
||||
<li><a href="{{ "/portfolio/" | relLangURL }}" data-name="..">
|
||||
<span class="tui__perm">drwxr-xr-x</span><span class="tui__name">..</span>
|
||||
</a></li>
|
||||
{{ if $hasText }}
|
||||
<li><a data-name="info.md" data-text="info.md" class="is-selected">
|
||||
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">info.md</span>
|
||||
</a></li>
|
||||
{{ end }}
|
||||
{{ if $video }}
|
||||
<li><a data-name="video.mp4" data-video="1"{{ if not $hasText }} class="is-selected"{{ end }}>
|
||||
<li><a data-name="video.mp4" data-video="1" class="is-selected">
|
||||
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">video.mp4</span>
|
||||
</a></li>
|
||||
{{ end }}
|
||||
{{ range $i, $im := $images }}
|
||||
<li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $hasText) (not $video) (eq $i 0) }} class="is-selected"{{ end }}>
|
||||
<li><a data-img="{{ $im.src | relURL }}" data-name="{{ $im.name }}"{{ if and (not $video) (eq $i 0) }} class="is-selected"{{ end }}>
|
||||
<span class="tui__perm">-rw-r--r--</span><span class="tui__name">{{ $im.name }}</span>
|
||||
</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
<figure class="tui__preview">
|
||||
{{ if $hasText }}<div class="tui__text" data-text="info.md">{{ .Content }}</div>{{ end }}
|
||||
{{ if $video }}
|
||||
<div class="player"{{ if $hasText }} hidden{{ end }}>
|
||||
<div class="player">
|
||||
<video preload="none" playsinline{{ with .Params.thumbnail }} poster="{{ . }}"{{ end }}>
|
||||
<source src="{{ $video }}" type="video/mp4">
|
||||
</video>
|
||||
@@ -47,11 +43,14 @@
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if $images }}<img{{ if or $hasText $video }} hidden{{ end }} src="{{ (index $images 0).src | relURL }}" alt="{{ .Title }}">{{ end }}
|
||||
<figcaption class="tui__status">{{ if $hasText }}info.md{{ else if $video }}video.mp4{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
|
||||
{{ if $images }}<img{{ if $video }} hidden{{ end }} src="{{ (index $images 0).src | relURL }}" alt="{{ .Title }}">{{ end }}
|
||||
<figcaption class="tui__status">{{ if $video }}video.mp4{{ else if $images }}{{ (index $images 0).name }}{{ end }}</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if $hasText }}<aside class="proj-info">{{ .Content }}</aside>{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ with .Params.studies }}
|
||||
{{ $segs := after 2 (split . "/") }}
|
||||
|
||||
Reference in New Issue
Block a user