fedi/mlmym
1
0
Fork 0
mirror of https://github.com/rystaf/mlmym.git synced 2024-11-05 06:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

expando image resizing

Browse source
This commit is contained in:
Ryan Stafford 2023-07-05 16:20:34 -04:00
parent 88457d0818
commit 834d8170d1
4 changed files with 25 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
public/style.css
View file

@ -447,13 +447,24 @@ form.nsfw div {
.expando { .expando {
display: none; display: none;
max-width: 587px; max-width: 587px;
position: relative;
color: #000; color: #000;
} }
.expando.open{ .expando.open{
display: block; display: block;
} }
.expando img { .expando .image {
max-width: 100%; display: inline-block;
overflow: hidden;
resize: both;
width: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: top left;
}
.expando .image img {
visibility: hidden;
width: 100%;
} }
.expando .md { .expando .md {
background-color: #fafafa; background-color: #fafafa;

10
templates/frontpage.html
View file

@ -2,17 +2,19 @@
<head> <head>
<title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title> <title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?3"> <link rel="stylesheet" href="/_/static/style.css?v=4">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
</head> </head>
<body {{ if .Dark }}class="dark"{{end}}> <body {{ if .Dark }}class="dark"{{end}}>
<noscript> <noscript>
<style> <style>
.expando-button { .expando-button,
.minimize,
.hidechildren {
display: none; display: none;
} }
.comment .meta a.minimize { .post .expando .image img {
display: none; visibility: visible;
} }
</style> </style>
</noscript> </noscript>

5
templates/main.html
View file

@ -3,7 +3,7 @@
<title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title> <title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg"> <link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?3"> <link rel="stylesheet" href="/_/static/style.css?v=4">
</head> </head>
<body{{ if .Dark }} class="dark"{{end}}> <body{{ if .Dark }} class="dark"{{end}}>
<noscript> <noscript>
@ -13,6 +13,9 @@
.hidechildren { .hidechildren {
display: none; display: none;
} }
.post .expando .image img {
visibility: visible;
}
</style> </style>
</noscript> </noscript>

2
templates/post.html
View file

@ -75,7 +75,9 @@
<div class="md">{{ markdown .State.Host .Post.Body.String }}</div> <div class="md">{{ markdown .State.Host .Post.Body.String }}</div>
{{ end }} {{ end }}
{{ if isImage .Post.URL.String}} {{ if isImage .Post.URL.String}}
<div class="image" style="background-image: url({{.Post.URL}})">
<img loading="lazy" src="{{ .Post.URL }}"> <img loading="lazy" src="{{ .Post.URL }}">
</div>
{{ end }} {{ end }}
<div class="embed"></div> <div class="embed"></div>
</div> </div>