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

public/style.css

@@ -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;
 }

public/utils.js

@@ -30,7 +30,34 @@ 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) 

templates/comment.html

@@ -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 -}}

templates/post.html

@@ -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 class="image" loading="lazy" src="{{ .Post.URL }}">
-            <img loading="lazy" src="{{ .Post.URL }}">
-          </div>
 {{ end }}
             <div class="embed"></div>
           </div>
         </div>
+          <div class="clearleft"></div>
+      </div>
 {{ end }}