diff options
author | Killy | 2017-12-27 16:15:57 +0300 |
---|---|---|
committer | Killy | 2017-12-27 16:15:57 +0300 |
commit | b1e6f250e1c9d69f80899e4b877f40ccf8a214df (patch) | |
tree | a7d536a270cf21f7244863535fc40a021616cb20 /juick-www/src/main/static | |
parent | ae16c7b66f8bfc74ef34eddc7d816172a91fe971 (diff) |
www: responsive layout (2)killy-responsive-2
Diffstat (limited to 'juick-www/src/main/static')
-rw-r--r-- | juick-www/src/main/static/scripts.js | 19 | ||||
-rw-r--r-- | juick-www/src/main/static/style.css | 266 |
2 files changed, 137 insertions, 148 deletions
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js index 6a28d96d..a3bff879 100644 --- a/juick-www/src/main/static/scripts.js +++ b/juick-www/src/main/static/scripts.js @@ -1,16 +1,8 @@ require('whatwg-fetch'); require('element-closest'); require('classlist.js'); -let killy = require('killy'); let Awesomplete = require('awesomplete'); - -if (!('remove' in Element.prototype)) { // Firefox <23 - Element.prototype.remove = function() { - if (this.parentNode) { - this.parentNode.removeChild(this); - } - }; -} +let killy = require('killy'); NodeList.prototype.forEach = Array.prototype.forEach; HTMLCollection.prototype.forEach = Array.prototype.forEach; @@ -691,10 +683,11 @@ ready(function () { }); }); - makeMenu( - document.querySelector('#user-menu'), - document.querySelector('#user-menu-dropdown') - ); + let userMenu = document.querySelector('#user-menu'); + let userMenuDropDown = document.querySelector('#user-menu-dropdown'); + if (userMenu) { + makeMenu(userMenu, userMenuDropDown); + } let column = document.querySelector('#column'); if (column && column.querySelector('#ctitle') && column.querySelector('#column-expander')) { diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css index 2320b6e3..05175d7a 100644 --- a/juick-www/src/main/static/style.css +++ b/juick-www/src/main/static/style.css @@ -149,6 +149,7 @@ body > header { align-items: center; flex-direction: column; margin: 55px auto 0 auto; + padding: 0 8px; } body > header { margin-bottom: 15px; @@ -164,7 +165,7 @@ body > header { } #content { max-width: 100%; - padding: 0 8px; + /* padding: 0 8px; */ width: 728px; } } @@ -182,9 +183,18 @@ body > header { color: #069; font-size: 13pt; } +#global { + order: 0; +} +#logo { + order: 1; +} +#header-right { + order: 2; +} #logo { height: 36px; - margin: 0 25px 0 20px; + margin: 0 10px 0 10px; width: 110px; } #logo a { @@ -198,31 +208,35 @@ body > header { white-space: nowrap; width: 110px; } +#global { + flex-grow: 1; +} #global > ul { display: flex; } +#header-right > .a-login, +#site-search, +#post, #global li { margin: 0 10px; } -#search { - margin: 0; -} -#search input, -#user-menu-dropdown input { - background: #FFF; - border: 1px solid #DDDDD5; - padding: 4px; +#header-right { + align-items: center; + display: flex; + flex-grow: 1; } - -#menu-spacer-1, -#menu-expander { - display: none; +#site-search { + color: #069; + display: flex; } -#menu-expander { - align-self: center; - cursor: pointer; - padding: 10px; +#site-search input { + background: #f2f2ec; + border: 0; + border-bottom: 1px solid rgba(0, 104, 153, 0.5); /* #069 + alpha */ + margin: 0; + width: 120px; } + #user-menu { align-self: stretch; display: flex; @@ -239,13 +253,6 @@ body > header { 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); @@ -264,145 +271,125 @@ body:not([data-hash]) #user-menu > #menu-expander { 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 > form, #user-menu-dropdown li > a { display: block; + padding: 6px; +} +#user-menu-dropdown li > a:hover { + background-color: #fff; + transition: background-color 0.2s ease-in; } #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 { +.show-1, +.show-2, +.show-3, +.show-4 { display: none; } -@media screen and (min-width: 710px) { - #user-menu:hover > #user-menu-dropdown { - display: flex; +@media screen and (max-width: 49.375em /* 790/16 */) { + #site-search, + .only-icon-1 span, + .hide-1 { + display: none; } -} - -@media screen and (max-width: 850px) { - #logo { - margin: 0 10px 0 10px; + .show-1 { + display: inline-block; } } -@media screen and (max-width: 710px) { - #user-menu { - flex-grow: 1; +@media screen and (max-width: 38.75em /* 620/16 */) { + #header-right > .a-login, + #post, + #global li { + margin: 0 6px; } - #user-menu-dropdown { - border: 10px solid #f2f2ec; - overflow: hidden; - width: 100vw; + #header_wrapper { + min-height: 48px; } - #user-menu-dropdown > ul.left-column { - display: flex; + #header_wrapper a { + font-size: 12pt; } - #menu-expander, - #menu-spacer-1 { - display: block; + #user-menu > img { + margin: 6px; } - #search, - #menu-spacer-2 { + .only-icon-2 span, + .hide-2 { display: none; } + .show-2 { + display: inline-block; + } } -@media screen and (max-width: 600px) { - #global li { - margin: 0 10px; +@media screen and (max-width: 32em /* 512/16 */) { + #user-menu-dropdown { + border: 10px solid #f2f2ec; + overflow: hidden; + width: 100vw; } - #menu-photos-1 { + .only-icon-3 span, + .hide-3 { display: none; } - #menu-photos-2 { + .show-3 { display: inline-block; } } -@media screen and (max-width: 470px) { - #logo { +@media screen and (max-width: 25.625em /* 410/16 */) { + .only-icon-4 span, + .hide-4 { display: none; } - #menu-popular-2 { + .show-4 { 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%; - } } /* #endregion */ /* #region left column internals */ -.toolbar { - border-top: 1px solid #CCC; -} - -#column ul, -#column p, -#column hr { +#column > ul, +#column > hr { margin: 10px 0; } -#column > *:not(#ustats) li > a { +#column li > a, +#column li > p { display: block; - height: 100%; padding: 6px; } -#column > *:not(#ustats) li > a:hover { +#column li > a:hover { background-color: #f2f2ec; box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); transition: background-color 0.2s ease-in; } -#column .margtop { - margin-top: 15px; +#column li span { + float: right; } -#column p { +#column li > p, +#column li span { + color: #999; +} +#column > form { + margin-bottom: 10px; +} +#column > form > p { font-size: 10pt; line-height: 140%; } -#column .tags { - text-align: justify; -} #column .inp { background: #F5F5E9; border: 1px solid #CCC; @@ -411,30 +398,20 @@ body:not([data-hash]) #user-menu > #menu-expander { width: 222px; } #ctitle { - align-items: center; display: flex; - flex-direction: row; font-size: 14pt; + position: relative; } #ctitle img { margin-right: 5px; max-width: 48px; vertical-align: middle; } -#ustats li { - font-size: 10pt; - margin: 3px 0; -} -#column table.iread { - width: 100%; -} -#column table.iread td { +#ctags a { + display: inline-block; + min-width: 25px; text-align: center; } -#column table.iread img { - height: 48px; - width: 48px; -} #column-expander { cursor: pointer; @@ -443,41 +420,59 @@ body:not([data-hash]) #user-menu > #menu-expander { text-align: end; } -@media screen and (min-width: 1001px) { +@media screen and (min-width: 1001px) and (min-height: 750px) { #column { position: sticky; - top: 60px; + top: 67px; /* #wrapper margin-top + #column margin-top */ } } @media screen and (max-width: 1000px) { #column-expander { - display: block; + align-items: center; + display: flex; + height: 100%; + justify-content: flex-end; + position: absolute; + width: 100%; } #column:not(.expanded) > *:not(#ctitle) { display: none; } - ul.toolbar { - display: flex; - justify-content: space-around; - padding-top: 10px; - } - #ustats ul { + + #column { display: flex; flex-flow: row wrap; - justify-content: space-around; + justify-content: space-between; + } + #ctitle, + #ctags, + #column > hr { + width: 100%; } - #ustats li { - margin: 3px 6px; + #column > ul { + flex-grow: 1; + margin: 0; + max-width: 300px; + } + #column > hr + ul:not(.toolbar) { + max-width: 100%; } } @media screen and (max-width: 470px) { + #column > form, #column .inp { width: 100%; } - #ustats li { - width: 45%; + #column > ul { + max-width: 100%; + } + #column > ul.toolbar { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + width: 100%; } } @@ -721,7 +716,7 @@ li.msgthread .msg-cont { } } -@media screen and (max-width: 500px) { +@media screen and (max-width: 32em /* 512/16 */) { article > nav.l > a > span, .msg-cont > nav.l > a > span { display: none; @@ -745,7 +740,8 @@ q:before, q:after { content: ""; } -q, blockquote { +q, +blockquote { border-left: 3px solid #CCC; color: #666; display: block; |