From 7368c5f37749eac22890b1138a6ba3871e96f4fe Mon Sep 17 00:00:00 2001
From: Killy
Date: Sun, 5 Nov 2017 19:11:32 +0300
Subject: www: responsive layout

---
 juick-www/src/main/static/scripts.js |  73 ++++++-
 juick-www/src/main/static/style.css  | 378 +++++++++++++++++++++++++++--------
 2 files changed, 366 insertions(+), 85 deletions(-)

(limited to 'juick-www/src/main/static')

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 6bea2ea3..5c435536 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -30,6 +30,54 @@ Element.prototype.selectText = function () {
     }
 };
 
+function once(el, eventType, callback) {
+    function eventHandler(e) {
+        el.removeEventListener(eventType, eventHandler);
+        callback(e);
+    }
+    el.addEventListener(eventType, eventHandler);
+}
+function nextClick(callback) {
+    setTimeout(() => once(document, 'click', callback), 0);
+}
+function nextClickWithCondition(predicate, callback) {
+    function clickCheck(e) {
+        if (predicate(e)) {
+            callback();
+        } else {
+            nextClick(clickCheck);
+        }
+    }
+    nextClick(clickCheck);
+}
+
+function keyboardClickable(el) {
+    el.addEventListener('keydown', e => {
+        if ((e.which === 13) || (e.which === 32)) { // 13 = Return, 32 = Space
+            e.preventDefault();
+            el.click();
+        }
+    });
+}
+
+function makeMenu(target, dropdown) {
+    target.addEventListener('click', e => {
+        if (!dropdown.contains(e.target)) {
+            target.classList.toggle('expanded');
+        }
+        nextClickWithCondition(
+            e => !target.contains(e.target),
+            () => target.classList.remove('expanded')
+        );
+    });
+    keyboardClickable(target);
+    dropdown.addEventListener('blur', e => {
+        if (!dropdown.contains(e.relatedTarget)) {
+            target.classList.remove('expanded');
+        }
+    }, true);
+}
+
 function autosize(el) {
     let offset = (!window.opera)
         ? (el.offsetHeight - el.clientHeight)
@@ -643,9 +691,30 @@ ready(function () {
         });
     });
 
-    var content = document.getElementById('content');
+    makeMenu(
+        document.querySelector('#user-menu'),
+        document.querySelector('#user-menu-dropdown')
+    );
+
+    let column = document.querySelector('#column');
+    if (column && column.querySelector('#ctitle') && column.querySelector('#column-expander')) {
+        let columnExpander = column.querySelector('#column-expander');
+        keyboardClickable(columnExpander);
+        columnExpander.addEventListener('click', () => {
+            column.classList.toggle('expanded');
+        });
+    } else {
+        column.classList.add('expanded');
+    }
+
+    let tagsColumn = document.querySelector('#column > .tags');
+    if (tagsColumn) {
+        document.querySelector('#column').classList.add('bottom');
+    }
+
+    let content = document.getElementById('content');
     if (content) {
-        var pageMID = content.getAttribute('data-mid');
+        let pageMID = content.getAttribute('data-mid');
         if (pageMID > 0) {
             document.querySelectorAll('li.msg').forEach(li => {
                 let showMoreBtn = li.querySelector('.msg-comments');
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 080a179e..cd6861d1 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -22,6 +22,14 @@ textarea {
     font-size: 12pt;
     -webkit-font-smoothing: subpixel-antialiased;
 }
+html {
+    box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
 h1,
 h2 {
     font-weight: normal;
@@ -60,6 +68,9 @@ pre::-moz-selection {
 .u {
     text-decoration: underline;
 }
+.flex-spacer {
+    flex-grow: 1;
+}
 
 /* #endregion */
 
@@ -70,20 +81,24 @@ html {
     color: #222;
 }
 #wrapper {
-    margin: 0 auto;
+    align-items: flex-start;
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    margin: 55px auto 0 auto;
+    max-width: 100%;
     width: 1000px;
-    margin-top: 50px;
 }
 #column {
-    float: left;
-    margin-left: 10px;
+    margin: 12px 0 0 10px;
+    order: 0;
     overflow: hidden;
-    padding-top: 10px;
     width: 240px;
 }
 #content {
-    float: right;
     margin: 12px 0 0 0;
+    max-width: 100%;
+    order: 1;
     width: 728px;
 }
 body > header {
@@ -92,22 +107,32 @@ body > header {
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 10;
+    z-index: 9;
 }
 #header_wrapper {
     margin: 0 auto;
+    max-width: 100%;
+    min-height: 55px;
     width: 1000px;
-    display: flex;
 }
 #footer {
-    clear: both;
     color: #999;
     font-size: 10pt;
-    margin: 40px;
-    padding: 10px 0;
+    height: 32px;
+    margin: 20px auto;
+    max-width: 100%;
+    padding: 0 12px;
+    width: 1000px;
+}
+.announcement {
+    background: #f2f2ec;
+    margin-top: 12px;
+    padding: 6px;
+    text-align: center;
+    width: 100%;
 }
 
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 1000px) {
     body {
         -moz-text-size-adjust: 100%;
         -webkit-text-size-adjust: 100%;
@@ -116,24 +141,31 @@ body > header {
     body,
     #wrapper,
     #topwrapper,
-    #content,
     #footer {
-        float: none;
         margin: 0 auto;
-        min-width: 310px;
         width: auto;
     }
     #wrapper {
-        margin-top: 50px;
+        align-items: center;
+        flex-direction: column;
+        margin: 55px auto 0 auto;
     }
     body > header {
         margin-bottom: 15px;
     }
     #column {
-        float: none;
-        margin: 0 10px;
-        padding-top: 0;
-        width: auto;
+        margin: 12px 0 0 0;
+        max-width: 100%;
+        padding: 0 8px;
+        width: 728px;
+    }
+    #column.bottom {
+        order: 3;
+    }
+    #content {
+        max-width: 100%;
+        padding: 0 8px;
+        width: 728px;
     }
 }
 
@@ -141,13 +173,18 @@ body > header {
 
 /* #region header internals */
 
-body > header a {
+#header_wrapper {
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+}
+#header_wrapper a {
     color: #069;
     font-size: 13pt;
 }
 #logo {
     height: 36px;
-    margin: 7px 25px 0 20px;
+    margin: 0 25px 0 20px;
     width: 110px;
 }
 #logo a {
@@ -161,48 +198,175 @@ body > header a {
     white-space: nowrap;
     width: 110px;
 }
-#global {
-    flex-grow: 1;
+#global > ul {
+    display: flex;
 }
 #global li {
-    display: inline-block;
-    margin: 14px 12px 0 0;
+    margin: 0 10px;
 }
 #search {
-    margin: 12px 20px 12px 0;
+    margin: 0;
 }
-#search input {
+#search input,
+#user-menu-dropdown input {
     background: #FFF;
     border: 1px solid #DDDDD5;
     padding: 4px;
 }
-body > header nav li:after {
-    color: #AAA;
-    content: "|";
-    display: inline-block;
-    margin-left: 12px;
+
+#menu-spacer-1,
+#menu-expander {
+    display: none;
 }
-body > header nav li:last-child:after {
+#menu-expander {
+    align-self: center;
+    cursor: pointer;
+    padding: 10px;
+}
+#user-menu {
+    align-self: stretch;
+    display: flex;
+    min-width: 10px;
+    position: relative;
+}
+#user-menu.expanded {
+    outline: none;
+}
+#user-menu > img {
+    cursor: pointer;
+    display: block;
+    height: 36px;
+    margin: 10px;
+    user-select: none;
+}
+body:not([data-hash]) #user-menu > img {
+    display: none;
+}
+body:not([data-hash]) #user-menu > #menu-expander {
+    display: block;
+    order: 3;
+}
+#user-menu-dropdown {
+    background: #f2f2ec;
+    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.28);
+    display: flex;
+    flex-flow: row wrap;
+    min-width: 160px;
+    position: absolute;
+    right: 0;
+    top: 100%;
+}
+#user-menu:not(.expanded) > #user-menu-dropdown {
+    display: none;
+}
+#user-menu-dropdown > ul {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    margin: -1px 0 1px 0;
+}
+#user-menu-dropdown > ul.right-column {
+    min-width: 9em;
+    order: 1;
+}
+#user-menu-dropdown > ul.left-column {
+    display: none;
+    flex-grow: 100;
+    min-width: 11em;
+    order: 0;
+}
+#user-menu-dropdown > ul.left-column input {
+    max-width: 12em;
+    width: 100%;
+}
+#user-menu-dropdown li {
+    padding: 6px;
+}
+#user-menu-dropdown li > a {
+    display: block;
+}
+#user-menu-dropdown li > a .icon {
+    margin-right: 0.25em;
+}
+#user-menu-dropdown li:first-child,
+#user-menu-dropdown li.next-section {
+    border-top: 1px solid #ccc;
+}
+#user-menu-dropdown .icon--ei-share-apple {
+    transform: rotate(90deg);
+}
+#menu-photos-2,
+#menu-popular-2 {
     display: none;
 }
 
-@media screen and (max-width: 850px) {
-    body > header a {
-        font-size: 12pt;
+@media screen and (min-width: 710px) {
+    #user-menu:hover > #user-menu-dropdown {
+        display: flex;
     }
+}
+
+@media screen and (max-width: 850px) {
     #logo {
-        display: none;
+        margin: 0 10px 0 10px;
+    }
+}
+
+@media screen and (max-width: 710px) {
+    #user-menu {
+        flex-grow: 1;
+    }
+    #user-menu-dropdown {
+        border: 10px solid #f2f2ec;
+        overflow: hidden;
+        width: 100vw;
+    }
+    #user-menu-dropdown > ul.left-column {
+        display: flex;
     }
-    #global {
-        margin-left: 10px;
+    #menu-expander,
+    #menu-spacer-1 {
+        display: block;
     }
+    #search,
+    #menu-spacer-2 {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 600px) {
     #global li {
-        margin-right: 10px;
+        margin: 0 10px;
     }
-    #search {
+    #menu-photos-1 {
+        display: none;
+    }
+    #menu-photos-2 {
         display: inline-block;
-        float: none;
-        margin: 10px 10px;
+    }
+}
+
+@media screen and (max-width: 470px) {
+    #logo {
+        display: none;
+    }
+    #menu-popular-2 {
+        display: inline-block;
+    }
+    #user-menu > img {
+        margin: 6px;
+    }
+    #header_wrapper {
+        min-height: 48px;
+    }
+    #header_wrapper a {
+        font-size: 12pt;
+    }
+}
+
+@media screen and (max-width: 350px) {
+    #user-menu-dropdown > ul.left-column input {
+        max-width: 100%;
     }
 }
 
@@ -219,12 +383,12 @@ body > header nav li:last-child:after {
 #column hr {
     margin: 10px 0;
 }
-#column li > a {
+#column > *:not(#ustats) li > a {
     display: block;
     height: 100%;
     padding: 6px;
 }
-#column li > a:hover {
+#column > *:not(#ustats) li > a:hover {
     background-color: #f2f2ec;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     transition: background-color 0.2s ease-in;
@@ -247,12 +411,15 @@ body > header nav li:last-child:after {
     width: 222px;
 }
 #ctitle {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
     font-size: 14pt;
 }
 #ctitle img {
     margin-right: 5px;
+    max-width: 48px;
     vertical-align: middle;
-    width: 48px;
 }
 #ustats li {
     font-size: 10pt;
@@ -269,6 +436,51 @@ body > header nav li:last-child:after {
     width: 48px;
 }
 
+#column-expander {
+    cursor: pointer;
+    display: none;
+    flex-grow: 1;
+    text-align: end;
+}
+
+@media screen and (min-width: 1001px) {
+    #column {
+        position: sticky;
+        top: 60px;
+    }
+}
+
+@media screen and (max-width: 1000px) {
+    #column-expander {
+        display: block;
+    }
+    #column:not(.expanded) > *:not(#ctitle) {
+        display: none;
+    }
+    ul.toolbar {
+        display: flex;
+        justify-content: space-around;
+        padding-top: 10px;
+    }
+    #ustats ul {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+    }
+    #ustats li {
+        margin: 3px 6px;
+    }
+}
+
+@media screen and (max-width: 470px) {
+    #column .inp {
+        width: 100%;
+    }
+    #ustats li {
+        width: 45%;
+    }
+}
+
 /* #endregion */
 
 /* #region main content */
@@ -276,7 +488,12 @@ body > header nav li:last-child:after {
 #content > p,
 #content > h1,
 #content > h2 {
-    margin: 1em 0;
+    margin: 10px 0;
+}
+#content > p:first-child,
+#content > h1:first-child,
+#content > h2:first-child {
+    margin-top: 0;
 }
 .page {
     background: #f2f2ec;
@@ -354,7 +571,7 @@ article .tags > a,
 .msg-avatar {
     float: left;
     height: 48px;
-    margin-right: 10px;
+    margin: 0 10px 10px 0;
     width: 48px;
 }
 .msg-avatar img {
@@ -366,10 +583,13 @@ article .tags > a,
     background: #FFF;
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
     line-height: 140%;
-    margin-bottom: 12px;
+    margin: 0 0 12px 0;
     padding: 20px;
     width: 640px;
 }
+li.msgthread .msg-cont {
+    width: 100%;
+}
 .reply-new .msg-cont {
     border-right: 5px solid #0C0;
 }
@@ -463,40 +683,34 @@ article .tags > a,
     line-height: 24px;
 }
 #content .title2 h2 {
-    font-size: x-large;
+    font-size: 12pt;
     margin: 0;
 }
 
-@media screen and (max-width: 850px) {
-    article {
-        margin: 8px;
-        overflow: auto;
+@media screen and (max-width: 1000px) {
+    li.msgthread .msg-cont .msg-avatar,
+    li.msgthread .msg-cont .msg-header > span {
+        display: none;
     }
+}
+
+@media screen and (max-width: 750px) {
     article p {
-        margin: 10px 0 8px 0;
-    }
-    article > nav.l,
-    .msg-cont > nav.l {
-        flex-direction: column;
-    }
-    article > nav.l a,
-    .msg-cont > nav.l a {
-        padding: 6px;
+        margin: 5px 0 10px 0;
     }
     .msg,
     .msg-cont {
-        min-width: 280px;
+        min-width: 240px;
         width: auto;
     }
-    .msg-cont {
-        margin: 8px;
+    article,
+    .msg-cont,
+    .title2 {
+        margin: 0 0 8px 0;
     }
     .msg-media {
         overflow: auto;
     }
-    .title2 h2 {
-        font-size: large;
-    }
     .msg-comment {
         flex-direction: column;
     }
@@ -507,12 +721,12 @@ article .tags > a,
     }
 }
 
-@media screen and (max-width: 480px) {
-    .msg-ts {
-        float: none;
+@media screen and (max-width: 500px) {
+    article > nav.l > a > span,
+    .msg-cont > nav.l > a > span {
+        display: none;
     }
     .msg-tags {
-        margin-top: 10px;
         min-height: 1px;
     }
     .msg-txt {
@@ -521,12 +735,6 @@ article .tags > a,
     .title2 {
         font-size: 11pt;
     }
-    #content .title2 h2 {
-        font-size: 11pt;
-    }
-    .title2-right {
-        line-height: initial;
-    }
 }
 
 /* #endregion */
@@ -556,7 +764,6 @@ q {
 }
 #newmessage textarea {
     border: 1px solid #CCC;
-    box-sizing: border-box;
     margin: 0 0 5px 0;
     margin-top: 20px;
     max-height: 6em;
@@ -643,6 +850,12 @@ q {
     width: 100px;
 }
 
+@media screen and (max-width: 450px) {
+    .newpm {
+        margin: 20px 0 30px 0;
+    }
+}
+
 /* #endregion */
 
 /* #region popup dialog (lightbox) */
@@ -704,7 +917,7 @@ q {
 .dialoglogin {
     background: #EEEEE5;
     padding: 25px;
-    width: 300px;
+    width: 350px;
 }
 .dialog-opened {
     overflow: hidden;
@@ -852,7 +1065,6 @@ fieldset {
     margin: 30px -3px 15px -3px;
 }
 .embedContainer > * {
-    box-sizing: border-box;
     flex-grow: 1;
     margin: 3px;
     min-width: 49%;
-- 
cgit v1.2.3