expando image resizing

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

View file

@ -447,13 +447,24 @@ form.nsfw div {
.expando {
display: none;
max-width: 587px;
position: relative;
color: #000;
}
.expando.open{
display: block;
}
.expando img {
max-width: 100%;
.expando .image {
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 {
background-color: #fafafa;

View file

@ -2,17 +2,19 @@
<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>
<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" />
</head>
<body {{ if .Dark }}class="dark"{{end}}>
<noscript>
<style>
.expando-button {
.expando-button,
.minimize,
.hidechildren {
display: none;
}
.comment .meta a.minimize {
display: none;
.post .expando .image img {
visibility: visible;
}
</style>
</noscript>

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>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<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>
<body{{ if .Dark }} class="dark"{{end}}>
<noscript>
@ -13,6 +13,9 @@
.hidechildren {
display: none;
}
.post .expando .image img {
visibility: visible;
}
</style>
</noscript>

View file

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