UI cleanup and changes

This commit is contained in:
video-prize-ranch 2022-10-13 17:29:05 -04:00
parent 7cad41e11d
commit 50d71ad321
No known key found for this signature in database
9 changed files with 57 additions and 35 deletions

View File

@ -5,6 +5,7 @@ import (
"time"
"codeberg.org/video-prize-ranch/rimgo/utils"
"github.com/microcosm-cc/bluemonday"
"github.com/patrickmn/go-cache"
"github.com/tidwall/gjson"
)
@ -103,13 +104,17 @@ func ParseAlbum(data gjson.Result) (Album, error) {
url := value.Get("url").String()
url = strings.ReplaceAll(url, "https://i.imgur.com", "")
description := value.Get("metadata.description").String()
description = strings.ReplaceAll(description, "\n", "<br>")
description = bluemonday.UGCPolicy().Sanitize(description)
media = append(media, Media{
Id: value.Get("id").String(),
Name: value.Get("name").String(),
MimeType: value.Get("mime_type").String(),
Type: value.Get("type").String(),
Title: value.Get("metadata.title").String(),
Description: value.Get("metadata.description").String(),
Description: description,
Url: url,
})

View File

@ -92,6 +92,8 @@ func ParseComment(data gjson.Result) Comment {
comment := data.Get("comment").String()
comment = strings.ReplaceAll(comment, "\n", "<br>")
for _, match := range imgRe.FindAllString(comment, -1) {
img := iImgurRe.ReplaceAllString(match, "")
img = `<img src="` + img + `" class="comment__media" loading="lazy"/>`

2
go.mod
View File

@ -3,6 +3,7 @@ module codeberg.org/video-prize-ranch/rimgo
go 1.17
require (
github.com/aymerick/raymond v2.0.2+incompatible
github.com/dustin/go-humanize v1.0.0
github.com/gofiber/fiber/v2 v2.36.0
github.com/gofiber/template v1.6.30
@ -16,7 +17,6 @@ require (
require (
github.com/andybalholm/brotli v1.0.4 // indirect
github.com/aymerick/douceur v0.2.0 // indirect
github.com/aymerick/raymond v2.0.2+incompatible // indirect
github.com/gorilla/css v1.0.0 // indirect
github.com/klauspost/compress v1.15.9 // indirect
github.com/tidwall/match v1.1.1 // indirect

View File

@ -13,6 +13,7 @@ import (
"codeberg.org/video-prize-ranch/rimgo/static"
"codeberg.org/video-prize-ranch/rimgo/utils"
"codeberg.org/video-prize-ranch/rimgo/views"
"github.com/aymerick/raymond"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/filesystem"
"github.com/gofiber/fiber/v2/middleware/recover"
@ -41,6 +42,14 @@ func main() {
}
engine := handlebars.NewFileSystem(http.FS(views.GetFiles()), ".hbs")
engine.AddFunc("noteq", func(a interface{}, b interface{}, options *raymond.Options) interface{} {
if raymond.Str(a) != raymond.Str(b) {
return options.Fn()
}
return ""
})
app := fiber.New(fiber.Config{
Views: engine,
Prefork: utils.Config.FiberPrefork,

View File

@ -2,19 +2,26 @@ h1 {
margin: 0;
}
main p, h4 {
text-align: center;
.pfp {
border-radius: 100%;
}
main video,
main img {
.post__media {
display: flex;
align-items: center;
flex-direction: column;
}
.post__media video,
.post__media img {
margin: 1em 0;
max-width: 100%;
max-height: 85vh;
}
.pfp {
border-radius: 100%;
.post__media p {
margin-left: 1rem;
align-self: flex-start;
}
.imageMeta__wrapper,
@ -31,6 +38,7 @@ main img {
.imageMeta__wrapper {
gap: 1rem;
margin-top: 0.5em;
}
.user {
@ -44,6 +52,7 @@ main img {
display: flex;
gap: 10px;
flex-flow: wrap;
margin-top: 1em;
}
.tag {

View File

@ -24,11 +24,6 @@ nav {
align-items: center;
}
.center {
display: flex;
justify-content: center;
}
.logo {
filter: invert(1) hue-rotate(180deg);
}

View File

@ -5,6 +5,7 @@
}
.comments {
margin-top: 1em;
gap: 0.25em;
display: flex;
flex-direction: column;
@ -49,7 +50,8 @@
.comment__media {
height: 10em;
display: block
display: block;
margin: 0.5em 0;
}
.comment__updatedDate {

View File

@ -1,9 +1,14 @@
<div class="comment">
<div class="comment__user">
{{#noteq this.User.Username "[deleted]"}}
<img src="{{this.User.Avatar}}" class="pfp" width="24" height="24" loading="lazy">
<a href="/user/{{this.User.Username}}">
<p class="comment__user__username"><b>{{this.User.Username}}</b></p>
</a>
{{/noteq}}
{{#equal this.User.Username "[deleted]"}}
<p class="comment__user__username"><b>[deleted]</b></p>
{{/equal}}
</div>
<div>
{{{this.Comment}}}

View File

@ -28,16 +28,12 @@
<main>
<div class="imageMeta__wrapper">
{{#if post.User.Username}}
<div class="user">
<a href="/user/{{post.User.Username}}">
<img src="{{post.User.Avatar}}" class="pfp" width="36" height="36" loading="lazy" />
</a>
<a href="/user/{{post.User.Username}}">
<p>
<b>{{post.User.Username}}</b>
</p>
</a>
</div>
<a href="/user/{{post.User.Username}}" class="user">
<img src="{{post.User.Avatar}}" class="pfp" width="36" height="36" />
<p>
<b>{{post.User.Username}}</b>
</p>
</a>
{{/if}}
<div class="imageMeta">
<div class="imageMeta__item">
@ -51,12 +47,12 @@
</div>
</div>
{{#each post.Media}}
{{#if this.Title}}
<h4>{{this.Title}}</h4>
{{/if}}
<div class="post__media">
{{#each post.Media}}
{{#if this.Title}}
<h4>{{this.Title}}</h4>
{{/if}}
<div class="center">
{{#equal this.Type "image"}}
<img src="{{this.Url}}" loading="lazy">
{{/equal}}
@ -65,12 +61,12 @@
<source type="{{this.MimeType}}" src="{{this.Url}}" />
</video>
{{/equal}}
</div>
{{#if this.Description}}
<p>{{this.Description}}</p>
{{/if}}
{{#if this.Description}}
<p>{{{this.Description}}}</p>
{{/if}}
{{/each}}
</div>
{{#if post.tags}}
<div class="tags">
@ -105,7 +101,6 @@
{{/each}}
</div>
</div>
<hr>
{{/if}}
</section>