eff2698664
* Slightly improve the media experience - Use a grid to display the list of media - Add icons for non-image media preview - Paginate the gallery - Add links to the gallery in the editor and in the profile settings to make it more discoverable when you need it Fixes #432 * Allow video and audio tags in SafeString Otherwise we can't display their preview, nor show them in articles Also show controls by default for these two elements * Show fallback images for audio and unknown files, to make them more visible * Add a new constructor to SafeString when the input is trusted and doesn't need to be escaped. And use it to generate media previews. * Make it possible to insert video/audio in articles
44 lines
1.5 KiB
HTML
44 lines
1.5 KiB
HTML
@use plume_models::medias::*;
|
|
@use templates::base;
|
|
@use template_utils::*;
|
|
@use routes::*;
|
|
|
|
@(ctx: BaseContext, medias: Vec<Media>, page: i32, n_pages: i32)
|
|
|
|
@:base(ctx, i18n!(ctx.1, "Your media"), {}, {}, {
|
|
<h1>@i18n!(ctx.1, "Your media")</h1>
|
|
<div>
|
|
<a href="@uri!(medias::new)" class="inline-block button">@i18n!(ctx.1, "Upload")</a>
|
|
</div>
|
|
|
|
@if medias.is_empty() {
|
|
<p>@i18n!(ctx.1, "You don't have any media yet.")</p>
|
|
}
|
|
|
|
<div class="cards spaced">
|
|
@for media in medias {
|
|
<div class="card">
|
|
<div class="cover media-preview @media.category().to_string()"
|
|
@if media.category() == MediaCategory::Image {
|
|
style="background-image: url('@media.url(ctx.0).unwrap_or_default()')"
|
|
}
|
|
></div>
|
|
<main>
|
|
<p class="p-summary">@media.alt_text</p>
|
|
@if let Some(cw) = media.content_warning {
|
|
<p>@i18n!(ctx.1, "Content warning: {0}"; cw)</p>
|
|
}
|
|
</main>
|
|
<footer>
|
|
<form action="@uri!(medias::delete: id = media.id)" class="inline" method="POST">
|
|
<input type="submit" value="@i18n!(ctx.1, "Delete")"/>
|
|
</form>
|
|
—
|
|
<a href="@uri!(medias::details: id = media.id)">@i18n!(ctx.1, "Details")</a>
|
|
</footer>
|
|
</div>
|
|
}
|
|
</div>
|
|
@paginate(ctx.1, page, n_pages)
|
|
})
|