mirror of
https://github.com/thelounge/thelounge.git
synced 2024-06-03 06:12:22 +02:00
7355db94d6
- Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall - Increase preview body contrast just enough to pass AA standards - Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary - Use a zoom-in cursor on hover for thumbnails - Improve preview message errors
84 lines
2.1 KiB
Smarty
84 lines
2.1 KiB
Smarty
{{#preview}}
|
|
<div class="toggle-content toggle-type-{{type}}{{#if shown}} show{{/if}}">
|
|
{{#equal type "image"}}
|
|
<a class="toggle-thumbnail" href="{{link}}" target="_blank" rel="noopener">
|
|
<img src="{{thumb}}" decoding="async" alt="">
|
|
</a>
|
|
{{/equal}}
|
|
{{#equal type "audio"}}
|
|
<audio controls preload="metadata">
|
|
<source src="{{media}}" type="{{mediaType}}">
|
|
Your browser does not support the audio element.
|
|
</audio>
|
|
{{/equal}}
|
|
{{#equal type "video"}}
|
|
<video preload="metadata" controls>
|
|
<source src="{{media}}" type="{{mediaType}}">
|
|
Your browser does not support the video element.
|
|
</video>
|
|
{{/equal}}
|
|
{{#equal type "link"}}
|
|
{{#if thumb}}
|
|
<a class="toggle-thumbnail" href="{{link}}" target="_blank" rel="noopener">
|
|
<img src="{{thumb}}" decoding="async" alt="" class="thumb">
|
|
</a>
|
|
{{/if}}
|
|
<div class="toggle-text">
|
|
<div class="head">
|
|
<div class="overflowable">
|
|
<a href="{{link}}" target="_blank" rel="noopener" title="{{head}}">
|
|
{{head}}
|
|
</a>
|
|
</div>
|
|
|
|
<button class="more"
|
|
aria-expanded="false"
|
|
aria-label="More"
|
|
data-closed-text="More"
|
|
data-opened-text="Less"
|
|
>
|
|
<span class="more-caret"></span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="body overflowable">
|
|
<a href="{{link}}" target="_blank" rel="noopener" title="{{body}}">
|
|
{{body}}
|
|
</a>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{{/equal}}
|
|
{{#equal type "error"}}
|
|
{{#equal error "image-too-big"}}
|
|
<em>
|
|
This image is larger than {{friendlysize maxSize}} and cannot be
|
|
previewed.
|
|
<a href="{{link}}" target="_blank" rel="noopener">Click here</a>
|
|
to open it in a new window.
|
|
</em>
|
|
{{/equal}}
|
|
{{#equal error "message"}}
|
|
<div>
|
|
<em>
|
|
A preview could not be loaded.
|
|
<a href="{{link}}" target="_blank" rel="noopener">Click here</a>
|
|
to open it in a new window.
|
|
</em>
|
|
<br>
|
|
<pre class="prefetch-error">{{message}}</pre>
|
|
</div>
|
|
|
|
<button class="more"
|
|
aria-expanded="false"
|
|
aria-label="More"
|
|
data-closed-text="More"
|
|
data-opened-text="Less"
|
|
>
|
|
<span class="more-caret"></span>
|
|
</button>
|
|
{{/equal}}
|
|
{{/equal}}
|
|
</div>
|
|
{{/preview}}
|