From f216eaa143febe357fb901f4e568e3f0a54cc7ce Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Tue, 14 Apr 2020 16:10:49 +0300 Subject: Initial grid layout --- src/main/assets/style.css | 400 +++++++++++---------- src/main/resources/help | 2 +- src/main/resources/templates/layouts/default.html | 73 ++-- src/main/resources/templates/views/help.html | 2 + .../resources/templates/views/partial/footer.html | 16 +- .../templates/views/partial/homecolumn.html | 16 +- .../templates/views/partial/navigation.html | 14 +- .../templates/views/partial/settings_tabs.html | 5 +- .../templates/views/partial/tagcolumn.html | 3 + .../templates/views/partial/usercolumn.html | 104 +++--- webpack.config.js | 2 +- 11 files changed, 348 insertions(+), 289 deletions(-) diff --git a/src/main/assets/style.css b/src/main/assets/style.css index 81c371a4..648a016c 100644 --- a/src/main/assets/style.css +++ b/src/main/assets/style.css @@ -1,3 +1,32 @@ +@custom-media --viewport-desktop (width >=62.5rem); +@custom-media --viewport-mobile (width < 62.5rem); + +:root { + --main-width: 1000px; + --main-background-color: #fdfdfe; + --background-color: #f8f8f8; + --border-color: #eee; + --text-background-color: #fff; + --text-color: #222; + --link-color: #3c77aa; + --dimmed-link-color: #88958d; +} +@media (prefers-color-scheme: dark) { + :root { + --main-background-color: #222; + --background-color: #333; + --text-background-color: #383838; + --border-color: #4c4c4c; + --text-color: #ccc; + --link-color: #c38855; + --dimmed-link-color: #88958d; + } +} + +* { + box-sizing: border-box; +} + /* #region generic */ html, @@ -19,10 +48,34 @@ textarea { overflow: auto; } html, +body { + width: 100%; + height: 100%; +} + +body { + background: var(--main-background-color); + text-size-adjust: 100%; + word-wrap: break-word; + color: var(--text-color); + line-height: 1.4; + -webkit-overflow-scrolling: touch; +} + +button, input, textarea { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 12pt; + font-size: 1em; + background-color: var(--text-background-color); + color: var(--text-color); +} + +html, +input, +textarea, +button { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + -webkit-font-smoothing: subpixel-antialiased; } h1, h2 { @@ -32,7 +85,7 @@ ul { list-style-type: none; } a { - color: #069; + color: var(--link-color); text-decoration: none; } img, @@ -40,7 +93,7 @@ hr { border: none; } hr { - background: #CCC; + background: var(--border-color); height: 1px; margin: 10px 0; } @@ -67,49 +120,54 @@ pre::-moz-selection { /* #region overall layout */ -html { - background: #fdfdfe; - color: #222; +#app { + height: 100%; + width: 100%; + overflow: hidden; } #wrapper { - margin: 0 auto; - width: 1000px; - margin-top: 52px; + display: grid; + grid-template-areas: "content" "footer"; + grid-template-columns: 100%; + grid-template-rows: 1fr auto; + height: 100%; + width: 100%; + overflow: hidden; } #column { - float: left; - margin-left: 10px; - overflow: hidden; - padding-top: 10px; - width: 240px; + grid-area: footer; } #content { - float: right; - margin: 12px 0 0 0; - width: 728px; + grid-area: content; + margin-top: 0; + overflow: auto; +} +.content--top { + margin-top: 64px !important; } #minimal_content { margin: 0 auto; min-width: 310px; width: auto; } +.desktop { + display: none; +} *::selection { - background: #006699; - color: #fff; + background: var(--link-color); + color: var(--main-background-color); } -body > header { - background: #fff; - border-bottom: 1px solid #eee; +#header { + background: var(--text-background-color); + border-bottom: 1px solid var(--border-color); + transition: transform 0.2s; + z-index: 10; + overflow-x: hidden; position: fixed; - top: 0; width: 100%; - z-index: 10; - transition-duration: 0.5s; - transition-property: transform; + top: 0; } #header_wrapper { - margin: 0 auto; - width: 1000px; display: flex; justify-content: space-between; align-items: center; @@ -119,40 +177,11 @@ body > header { transform: translateY(-100%); } #footer { - background: #f8f8f8; - clear: both; color: #999; font-size: 10pt; - margin: 40px; padding: 10px 0; -} - -@media screen and (max-width: 850px) { - body { - text-size-adjust: 100%; - } - body, - #wrapper, - #topwrapper, - #content, - #footer { - float: none; - margin: 0 auto; - min-width: 310px; - width: auto; - } - #wrapper { - margin-top: 50px; - } - body > header { - margin-bottom: 15px; - } - #column { - float: none; - margin: 0 10px; - padding-top: 0; - width: auto; - } + display: flex; + flex-direction: column; } /* #endregion */ @@ -178,8 +207,7 @@ body > header { display: flex; } #global a { - color: #88958d; - display: inline-block; + color: var(--dimmed-link-color); padding: 14px; border-bottom: 2px solid transparent; } @@ -191,7 +219,7 @@ body > header { border-bottom: 2px solid transparent; } #header_wrapper a.active { - background: #f8f8f8; + background: var(--text-background-color); border-bottom: 2px solid #ff339a; pointer-events: none; } @@ -202,8 +230,8 @@ body > header { cursor: pointer; } #search input { - background: #FFF; - border: 1px solid #ccc; + background: var(--main-background-color); + border: 1px solid var(--border-color); outline: none !important; padding: 4px; -webkit-appearance: none; @@ -216,11 +244,13 @@ body > header { .toolbar { display: flex; - flex-direction: column; + flex-direction: row; justify-content: space-around; } +#global a, .toolbar a { + display: flex; padding: 14px; color: #88959d; align-items: center; @@ -228,7 +258,7 @@ body > header { border-right: 2px solid transparent; } .toolbar > a:hover { - background-color: #f8f8f8; + background-color: var(--background-color); cursor: pointer; border-right: 2px solid #ff339a; } @@ -243,22 +273,20 @@ body > header { } #column .tags { - background: #fff; - border: 1px solid #eee; + background: var(--main-background-color); + border: 1px solid var(--border-color); line-height: 140%; padding: 6px; text-align: justify; } #column .inp { - background: #fff; - border: 1px solid #ddddd5; + background: var(--main-background-color); + border: 1px solid var(--border-color); outline: none !important; padding: 4px; width: 222px; } #column .tags h4 { - background: #eee; - border: 1px solid #eee; color: #88958d; display: block; text-align: center; @@ -314,11 +342,12 @@ body > header { /* #region article, message internals */ article { - background: #fff; - border: 1px solid #eee; + background: var(--text-background-color); + border: 1px solid var(--border-color); line-height: 140%; margin-bottom: 10px; padding: 20px; + overflow: auto; } article time { color: #88958d; @@ -336,7 +365,7 @@ article .ir img { } article > nav.l, .msg-cont > nav.l { - border-top: 1px solid #eee; + border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-around; @@ -396,8 +425,8 @@ article .tags > a::before, max-width: 48px; } .msg-cont { - background: #FFF; - border: 1px solid #eee; + background: var(--text-background-color); + border: 1px solid var(--border-color); line-height: 140%; margin-bottom: 12px; padding: 20px; @@ -463,17 +492,6 @@ article .tags > a::before, .attach-photo-active { color: green; } -.msg-comment input { - align-self: flex-start; - background: #EEE; - border: 1px solid #CCC; - color: #999; - margin: 0 0 0 6px; - position: sticky; - top: 70px; - vertical-align: top; - width: 50px; -} .msg-recomms { color: #AAA; font-size: small; @@ -486,7 +504,7 @@ article .tags > a::before, margin: 0; } .title2 { - background: #fff; + background: var(--text-background-color); margin: 20px 0; padding: 10px 20px; width: 640px; @@ -500,73 +518,6 @@ article .tags > a::before, margin: 0; } -@media screen and (max-width: 850px) { - #header_wrapper { - width: auto; - } - #global { - justify-content: space-around; - flex-grow: 1; - } - #search { - padding: 4px; - } - article { - overflow: auto; - } - article p { - margin: 10px 0 8px 0; - } - .msg, - .msg-cont { - min-width: 280px; - width: auto; - } - .msg-cont { - margin: 8px 0; - } - .msg-media { - overflow: auto; - } - .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) { - #search { - display: none; - } - .msg-cont > nav.l, - article > nav.l { - font-size: 9pt; - } - .msg-txt { - padding-top: 5px; - } - .title2 { - font-size: 11pt; - width: auto; - } - #content .title2 h2 { - font-size: 11pt; - } - .title2-right { - line-height: initial; - } - .icon-title { - display: none; - } -} - /* #endregion */ /* #region user-generated texts */ @@ -687,7 +638,7 @@ blockquote { /* #region popup dialog (lightbox) */ #dialogb { - background: #222; + background: var(--text-color); height: 100%; left: 0; opacity: 0.6; @@ -741,7 +692,7 @@ blockquote { padding-right: 6px; } .dialoglogin { - background: #fff; + background: var(--text-background-color); padding: 25px; width: 300px; } @@ -765,24 +716,24 @@ blockquote { } .signinput, .signsubmit { - border: 1px solid #CCC; + border: 1px solid var(--border-color); margin: 3px 0; padding: 3px; } .signinput { - width: 292px; + width: 100%; } .signsubmit { width: 70px; } .dialogshare { - background: #fff; + background: var(--text-background-color); min-width: 300px; overflow: auto; padding: 20px; } .dialogl { - background: #fff; + background: var(--text-background-color); border: 1px solid #DDD; margin: 3px 0 20px; padding: 5px; @@ -795,7 +746,7 @@ blockquote { display: block; } .dialogtxt { - background: #fff; + background: var(--text-background-color); padding: 20px; } @@ -842,37 +793,17 @@ blockquote { /* #region footer internals */ -#footer-social { - float: left; -} #footer-social a { border: 0; display: inline-block; } -#footer-left { - margin-left: 286px; - margin-right: 350px; -} -#footer-right { - float: right; -} - -@media screen and (max-width: 850px) { - #footer { - margin: 0 10px; - } - #footer div { - float: none; - margin: 10px 0; - } -} /* #endregion */ /* #region settings */ fieldset { - border: 1px dotted #ccc; + border: 1px dotted var(--border-color); margin-top: 25px; } @@ -937,3 +868,102 @@ article.nsfw .ir img:hover { } /* #endregion */ + +article p { + margin: 10px 0 8px 0; +} +.msg, +.msg-cont { + min-width: 280px; + width: auto; +} +.msg-cont { + margin: 8px 0; +} +.msg-media { + overflow: auto; +} +.title2 h2 { + font-size: large; +} +.msg-comment { + flex-direction: column; +} +.msg-comment input { + align-self: flex-end; + margin: 6px 0 0 0; + background: #EEE; + border: 1px solid #CCC; + color: #999; + position: sticky; + top: 70px; + vertical-align: top; + width: 50px; +} + +@media (--viewport-mobile) { + #content { + margin-bottom: 12px; + } + #sidebar { + background: var(--text-background-color); + } +} + +@media (--viewport-desktop) { + #app { + overflow: initial; + } + #wrapper { + grid-template-areas: ". footer content ."; + grid-template-columns: auto 240px 760px auto; + overflow: initial; + } + #header_wrapper, + .footer_container { + margin: 0 auto; + width: var(--main-width); + } + .desktop { + display: block; + } + .mobile { + display: none; + } + #content { + margin-bottom: 12px; + overflow: initial; + } + .toolbar { + flex-direction: column; + justify-content: initial; + border-top: initial; + margin-top: 64px; + } + .toolbar a, + .l a { + border-right: 2px solid transparent; + } + #sidebar > a:hover { + border-top: initial; + border-right: 2px solid #ff339a; + } +} +::-webkit-scrollbar { + width: 12px; +} /* this targets the default scrollbar (compulsory) */ +::-webkit-scrollbar-track { + background-color: var(--main-background-color); +} /* the new scrollbar will have a flat appearance with the set background color */ + +::-webkit-scrollbar-thumb { + background-color: #ff339a; +} /* this will style the thumb, ignoring the track */ + +::-webkit-scrollbar-button { + background-color: var(--border-color); +} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */ + +::-webkit-scrollbar-corner { + background-color: black; +} diff --git a/src/main/resources/help b/src/main/resources/help index ce103cd9..eb9734e2 160000 --- a/src/main/resources/help +++ b/src/main/resources/help @@ -1 +1 @@ -Subproject commit ce103cd9a2a8a200c6ebb3b41525e7c8f639d98c +Subproject commit eb9734e24867c70a9cf7309786ebc1db058bea37 diff --git a/src/main/resources/templates/layouts/default.html b/src/main/resources/templates/layouts/default.html index 575e7707..5974e19b 100644 --- a/src/main/resources/templates/layouts/default.html +++ b/src/main/resources/templates/layouts/default.html @@ -1,49 +1,52 @@ + - - + + - + {% block headers %} {{ headers | default('') | raw }} {% endblock %} {{ title | default('Juick') }} - - - - - + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + - 0 %}data-hash="{{visitor.authHash}}"{% endif %}> -{% include "views/partial/navigation" %} -
-
- {% block content %} - {% endblock %} -
- -
-{% include "views/partial/footer" %} + + 0 %}data-hash="{{visitor.authHash}}" {% endif %}> +
+ {% include "views/partial/navigation" %} +
+
+ {% block content %} + {% endblock %} +
+ +
+
+ \ No newline at end of file diff --git a/src/main/resources/templates/views/help.html b/src/main/resources/templates/views/help.html index 3a022497..169ccb3f 100644 --- a/src/main/resources/templates/views/help.html +++ b/src/main/resources/templates/views/help.html @@ -6,5 +6,7 @@ {% endblock %} {% block "column" %} +
{{ navigation | raw }} +
{% endblock %} \ No newline at end of file diff --git a/src/main/resources/templates/views/partial/footer.html b/src/main/resources/templates/views/partial/footer.html index 785514bf..671b9b6a 100644 --- a/src/main/resources/templates/views/partial/footer.html +++ b/src/main/resources/templates/views/partial/footer.html @@ -1,16 +1,16 @@ diff --git a/src/main/resources/templates/views/partial/settings_tabs.html b/src/main/resources/templates/views/partial/settings_tabs.html index 60337d92..00f7068a 100644 --- a/src/main/resources/templates/views/partial/settings_tabs.html +++ b/src/main/resources/templates/views/partial/settings_tabs.html @@ -5,4 +5,7 @@ {{ i18n("messages","link.settings.about") }} {{ i18n("messages","link.logout") }} - \ No newline at end of file + + + {% include "views/partial/footer" %} + \ No newline at end of file diff --git a/src/main/resources/templates/views/partial/tagcolumn.html b/src/main/resources/templates/views/partial/tagcolumn.html index c411c3c4..4d8ad160 100644 --- a/src/main/resources/templates/views/partial/tagcolumn.html +++ b/src/main/resources/templates/views/partial/tagcolumn.html @@ -23,3 +23,6 @@ {% endif %} {% endif %} + + {% include "views/partial/footer" %} + \ No newline at end of file diff --git a/src/main/resources/templates/views/partial/usercolumn.html b/src/main/resources/templates/views/partial/usercolumn.html index 5d1aaff6..4beefd8a 100644 --- a/src/main/resources/templates/views/partial/usercolumn.html +++ b/src/main/resources/templates/views/partial/usercolumn.html @@ -1,60 +1,69 @@ -{% if visitor is not empty and visitor.uid > 0 and visitor.uid != user.uid %} -
- - {{ user.name }} - -
- {% if isSubscribed %} - - Subscribed - - {% else %} - - Subscribe - + {% if visitor is not empty and visitor.uid > 0 and visitor.uid != user.uid %} +
+ + {{ user.name }} + +
+
+ {% if isSubscribed %} + + Subscribed + + {% else %} + + Subscribe + + {% endif %} + {% if isInBL %} + + Unblock + + {% else %} + + Block + + {% endif %} + {% if not isInBLAny %} + + PM + + {% endif %} +
{% endif %} - {% if isInBL %} - - Unblock + {% if visitor is not empty and visitor.uid == user.uid %} + + {{ i18n("messages","link.my") }} - {% else %} - - Block + + {{ i18n("messages","link.privateMessages") }} - {% endif %} - {% if not isInBLAny %} - - PM + + {{ i18n("messages","link.discuss") }} {% endif %} -
-{% endif %} -
- {% if visitor is not empty and visitor.uid == user.uid %} - {{ i18n("messages","link.my") }} - {{ i18n("messages","link.privateMessages") }} - {{ i18n("messages","link.discuss") }} - {% endif %} {% if visitor is not empty and visitor.uid == user.uid and false %} {{ i18n("messages","blog.comments") }} Неотвеченные {% endif %} {% if visitor is not empty and visitor.uid == user.uid %} - - {{ i18n("messages","link.settings") }} - {% if not visitor.verified %} - - {% endif %} - + + + {{ i18n("messages","link.settings") }} + {% if not visitor.verified %} + + {% endif %} + {% endif %}
- -

+ +

-{% include "views/partial/usertags" %} -
+ + {% include "views/partial/usertags" %} + +
+ + {% include "views/partial/footer" %} + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 5ecc5eb5..f20b9ff0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,7 +48,7 @@ module.exports = (env, argv) => { loader: 'postcss-loader', options: { plugins: () => [ require('stylelint')(), - require('postcss-preset-env')() + require('postcss-preset-env')({ stage: 0, autoprefixer: { grid: true } }) ] } } -- cgit v1.2.3