www: comment form fixes

sticky buttons
move submit button down in mobile layout

1 files changed, 26 insertions, 14 deletions

diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index e90169d9..73ea7d8c 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -370,6 +370,9 @@ article .tags > a,
     padding: 20px;
     width: 640px;
 }
+.reply-new .msg-cont {
+    border-right: 5px solid #0C0;
+}
 .msg-ts {
     float: right;
     font-size: small;
@@ -406,20 +409,21 @@ article .tags > a,
     display: flex;
     flex-grow: 1;
 }
-.msg-comment textarea {
-    border: 0;
-    flex-grow: 1;
-    padding: 2px;
-    resize: vertical;
-    vertical-align: top;
-}
 .msg-comment {
     display: flex;
     width: 100%;
+    margin-top: 10px;
 }
 .msg-comment-hidden {
     display: none;
 }
+.msg-comment textarea {
+    border: 0;
+    flex-grow: 1;
+    padding: 2px;
+    resize: vertical;
+    vertical-align: top;
+}
 .attach-photo {
     background: url("photo-attachment.png") no-repeat 3px 4px;
     cursor: pointer;
@@ -427,6 +431,9 @@ article .tags > a,
     height: 16px;
     overflow: hidden;
     padding: 2px 4px;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 70px;
     width: 16px;
 }
 .attach-photo-active {
@@ -437,7 +444,10 @@ article .tags > a,
     background: #EEE;
     border: 1px solid #CCC;
     color: #999;
-    margin-left: 6px;
+    margin: 0 0 0 6px;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 70px;
     vertical-align: top;
     width: 50px;
 }
@@ -448,16 +458,10 @@ article .tags > a,
     overflow: hidden;
     text-indent: 10px;
 }
-.reply-new .msg-cont {
-    border-right: 5px solid #0C0;
-}
 #replies .msg-txt,
 #private-messages .msg-txt {
     margin: 0;
 }
-.msg-comment {
-    margin-top: 10px;
-}
 .title2 {
     background: #DDDDD0;
     margin: 20px 0;
@@ -502,6 +506,14 @@ article .tags > a,
     .title2 h2 {
         font-size: large;
     }
+    .msg-comment {
+        flex-direction: column;
+    }
+    .msg-comment input {
+        align-self: flex-end;
+        margin: 6px 0 0 0;
+        width: 100px;
+    }
 }
 
 @media screen and (max-width: 480px) {