increase expando width, image click and drag to resize, minor style tweaks

This commit is contained in:
Ryan Stafford 2023-12-22 12:39:25 -05:00
parent b0248cd13b
commit de281c00ee
4 changed files with 38 additions and 25 deletions

View file

@ -59,6 +59,8 @@ summary {
clear:left;
margin-right: 4px;
overflow:hidden;
min-width: 3px;
min-height: 38px;
}
.comment .content {
line-height: 20px;
@ -138,7 +140,7 @@ summary {
}
.comment {
font-size: 14px;
margin: 0px 0px 5px 0px;
margin: 0px 0px 10px 0px;
border: 1px solid #e6e6e6;
border-radius: 3px;
padding: 10px 10px 0px 7px;
@ -230,7 +232,7 @@ form.savecomment {
margin: 0px 0px 10px 20px;
}
.comment .children {
margin: 5px 0px 10px 15px;
margin: 5px 0px 5px 15px;
}
.savecomment textarea {
margin: 5px 0px;
@ -280,9 +282,8 @@ form.savecomment {
.children .morecomments {
}
.morecomments {
height: 20px;
height: 15px;
clear: left;
margin: 0px 0px 10px 0px;
font-size: 10px;
}
.morecomments a {
@ -500,7 +501,7 @@ form.blockpost {
}
.expando {
display: none;
max-width: 870px;
max-width: 900px;
margin-top: 5px;
position: relative;
color: #000;
@ -551,18 +552,7 @@ form.blockpost {
text-align: center;
}
.expando .image {
display: block;
overflow: hidden;
resize: both;
max-width: 578px;
margin: 0 auto;
background-repeat: no-repeat;
background-size: contain;
background-position: top left;
}
.expando .image img {
visibility: hidden;
max-width: 100%;
}
.expando .md {
background-color: #fafafa;
@ -570,7 +560,6 @@ form.blockpost {
border-radius: 7px;
padding: 5px 10px;
margin: 5px auto;
max-width: 578px;
font-size: 14px;
overflow: auto;
}

View file

@ -30,8 +30,35 @@ function postClick(e) {
if (id = parseYoutube(url)) {
targ.getElementsByClassName("embed")[0].innerHTML = youtubeIframe(id)
}
// TODO set image handler
var images = bdy.getElementsByTagName('img')
for (var i = 0; i < images.length; i++) {
images[i].onmousedown = function(e) {
e.preventDefault()
startCoordinates = [e.clientX, e.clientY]
startSize = [e.target.height, e.target.width]
resizeTarget = e.target
return false
}
}
}
}
var resizeTarget
var startCoordinates = [0,0]
var startSize = [0,0]
document.onmousemove = function(e) {
if (resizeTarget) {
resizeTarget.style.maxWidth = 'unset';
let y = startSize[0] + (e.clientY - startCoordinates[1]) * 1.5
let x = startSize[1] + (e.clientX - startCoordinates[0]) * 1.5
let ratio = Math.min(y/startSize[0], x/startSize[1])
resizeTarget.height = startSize[0]*ratio
resizeTarget.width = startSize[1]*ratio
}
}
document.onmouseup = function(e){
resizeTarget = false;
}
function uptil (el, f) {
if (el) return f(el) ? el : uptil(el.parentNode, f)
}

View file

@ -1,6 +1,6 @@
<div class="comment{{if or (lt .P.Counts.Score -5) .P.Comment.Deleted .P.Comment.Removed }} hidden{{end}}" id="c{{.P.Comment.ID}}">
{{ if .State.Session }}
<div class="score">
{{ if .State.Session }}
<form class="link-btn{{ if eq .P.MyVote.String "1"}} like{{ else if eq .P.MyVote.String "-1"}} dislike{{end}}" method="POST">
<input type="submit" name="submit" value="▲">
<div></div>
@ -11,8 +11,8 @@
<input type="hidden" name="commentid" value="{{.P.Comment.ID }}">
<input type="submit" name="submit" value="▼">
</form>
</div>
{{ end }}
</div>
<div class="meta">
<a class="minimize" href="" for="c{{.P.Comment.ID}}">
{{- if or (lt .P.Counts.Score -5) .P.Comment.Deleted -}}

View file

@ -116,19 +116,16 @@
</form>
{{ end }}
</div>
</div>
<div></div>
<div class="clearleft"></div>
<div class="expando{{ if eq .Rank 0 }} open{{ end}}">
{{ if (and .Post.Body.IsValid (ne .Post.Body.String "")) }}
<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>
<img class="image" loading="lazy" src="{{ .Post.URL }}">
{{ end }}
<div class="embed"></div>
</div>
</div>
<div class="clearleft"></div>
</div>
{{ end }}