aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/main/assets/style.css400
m---------src/main/resources/help0
-rw-r--r--src/main/resources/templates/layouts/default.html73
-rw-r--r--src/main/resources/templates/views/help.html2
-rw-r--r--src/main/resources/templates/views/partial/footer.html16
-rw-r--r--src/main/resources/templates/views/partial/homecolumn.html16
-rw-r--r--src/main/resources/templates/views/partial/navigation.html14
-rw-r--r--src/main/resources/templates/views/partial/settings_tabs.html5
-rw-r--r--src/main/resources/templates/views/partial/tagcolumn.html3
-rw-r--r--src/main/resources/templates/views/partial/usercolumn.html104
-rw-r--r--webpack.config.js2
11 files changed, 347 insertions, 288 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
-Subproject ce103cd9a2a8a200c6ebb3b41525e7c8f639d98
+Subproject eb9734e24867c70a9cf7309786ebc1db058bea3
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 @@
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
+
<head>
- <meta charset="utf-8"/>
- <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="{{ beans.webApp.scriptsUrl }}"></script>
- <link rel="stylesheet" type="text/css" href="{{ beans.webApp.styleUrl }}"/>
+ <link rel="stylesheet" type="text/css" href="{{ beans.webApp.styleUrl }}" />
{% block headers %}
{{ headers | default('') | raw }}
{% endblock %}
<title>{{ title | default('Juick') }}</title>
<meta property="og:type" content="{{ ogtype | default('website') }}" />
<meta property="fb:app_id" content="130568668304" />
- <meta name="viewport" content="width=device-width,initial-scale=1"/>
- <meta name="msapplication-config" content="//i.juick.com/browserconfig.xml"/>
- <meta name="msapplication-TileColor" content="#ffffff"/>
- <meta name="msapplication-TileImage" content="//i.juick.com/ms-icon-144x144.png"/>
- <meta name="theme-color" content="#ffffff"/>
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <meta name="msapplication-config" content="//i.juick.com/browserconfig.xml" />
+ <meta name="msapplication-TileColor" content="#ffffff" />
+ <meta name="msapplication-TileImage" content="//i.juick.com/ms-icon-144x144.png" />
+ <meta name="theme-color" content="#ffffff" />
<meta name="apple-mobile-web-app-capable" content="yes" />
- <link rel="apple-touch-icon" sizes="57x57" href="//i.juick.com/apple-icon-57x57.png"/>
- <link rel="apple-touch-icon" sizes="60x60" href="//i.juick.com/apple-icon-60x60.png"/>
- <link rel="apple-touch-icon" sizes="72x72" href="//i.juick.com/apple-icon-72x72.png"/>
- <link rel="apple-touch-icon" sizes="76x76" href="//i.juick.com/apple-icon-76x76.png"/>
- <link rel="apple-touch-icon" sizes="114x114" href="//i.juick.com/apple-icon-114x114.png"/>
- <link rel="apple-touch-icon" sizes="120x120" href="//i.juick.com/apple-icon-120x120.png"/>
- <link rel="apple-touch-icon" sizes="144x144" href="//i.juick.com/apple-icon-144x144.png"/>
- <link rel="apple-touch-icon" sizes="152x152" href="//i.juick.com/apple-icon-152x152.png"/>
- <link rel="apple-touch-icon" sizes="180x180" href="//i.juick.com/apple-icon-180x180.png"/>
- <link rel="icon" type="image/png" sizes="32x32" href="//i.juick.com/favicon-32x32.png"/>
- <link rel="icon" type="image/png" sizes="96x96" href="//i.juick.com/favicon-96x96.png"/>
- <link rel="icon" type="image/png" sizes="16x16" href="//i.juick.com/favicon-16x16.png"/>
- <link rel="manifest" href="//i.juick.com/manifest.json"/>
+ <link rel="apple-touch-icon" sizes="57x57" href="//i.juick.com/apple-icon-57x57.png" />
+ <link rel="apple-touch-icon" sizes="60x60" href="//i.juick.com/apple-icon-60x60.png" />
+ <link rel="apple-touch-icon" sizes="72x72" href="//i.juick.com/apple-icon-72x72.png" />
+ <link rel="apple-touch-icon" sizes="76x76" href="//i.juick.com/apple-icon-76x76.png" />
+ <link rel="apple-touch-icon" sizes="114x114" href="//i.juick.com/apple-icon-114x114.png" />
+ <link rel="apple-touch-icon" sizes="120x120" href="//i.juick.com/apple-icon-120x120.png" />
+ <link rel="apple-touch-icon" sizes="144x144" href="//i.juick.com/apple-icon-144x144.png" />
+ <link rel="apple-touch-icon" sizes="152x152" href="//i.juick.com/apple-icon-152x152.png" />
+ <link rel="apple-touch-icon" sizes="180x180" href="//i.juick.com/apple-icon-180x180.png" />
+ <link rel="icon" type="image/png" sizes="32x32" href="//i.juick.com/favicon-32x32.png" />
+ <link rel="icon" type="image/png" sizes="96x96" href="//i.juick.com/favicon-96x96.png" />
+ <link rel="icon" type="image/png" sizes="16x16" href="//i.juick.com/favicon-16x16.png" />
+ <link rel="manifest" href="//i.juick.com/manifest.json" />
</head>
-<body id="body" {% if visitor.uid > 0 %}data-hash="{{visitor.authHash}}"{% endif %}>
-{% include "views/partial/navigation" %}
-<div id="wrapper">
- <section id="content"
- {% if msg | default('') is not empty %}data-mid="{{ msg.mid }}"{% endif %}>
- {% block content %}
- {% endblock %}
- </section>
- <aside id="column">
- {% block column %}
- {% endblock %}
- </aside>
-</div>
-{% include "views/partial/footer" %}
+
+<body id="body" {% if visitor.uid > 0 %}data-hash="{{visitor.authHash}}" {% endif %}>
+ <div id="app">
+ {% include "views/partial/navigation" %}
+ <div id="wrapper">
+ <section id="content" {% if msg | default('') is not empty %}data-mid="{{ msg.mid }}" {% endif %} class="content--top">
+ {% block content %}
+ {% endblock %}
+ </section>
+ <aside id="column">
+ {% block column %}
+ {% endblock %}
+ </aside>
+ </div>
+ </div>
</body>
+
</html> \ 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" %}
+<div class="toolbar">
{{ navigation | raw }}
+</div>
{% 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 @@
<div id="footer">
- <div id="footer-right"> &middot;
- <a href="/help/contacts" rel="nofollow">{{ i18n("messages","link.contacts") }}</a> &middot;
- <a href="/help/tos" rel="nofollow">{{ i18n("messages","link.tos") }}</a>
- </div>
+ <div id="footer-left">juick.com &copy; 2008-2020
+ {% if links | default ('') is not empty %}
+ <br/>{{ i18n("messages","label.sponsors") }}: {{ links | raw }}
+ {% endif %}
+ </div>
<div id="footer-social">
<a href="https://twitter.com/Juick" rel="nofollow"><i data-icon="ei-sc-twitter" data-size="m"></i></a>
<a href="https://vk.com/juick" rel="nofollow"><i data-icon="ei-sc-vk" data-size="m"></i></a>
<a href="https://www.facebook.com/JuickCom" rel="nofollow"><i data-icon="ei-sc-facebook" data-size="m"></i></a>
</div>
- <div id="footer-left">juick.com &copy; 2008-2020
- {% if links | default ('') is not empty %}
- <br/>{{ i18n("messages","label.sponsors") }}: {{ links | raw }}
- {% endif %}
+ <div id="footer-right"> &middot;
+ <a href="/help/contacts" rel="nofollow">{{ i18n("messages","link.contacts") }}</a> &middot;
+ <a href="/help/tos" rel="nofollow">{{ i18n("messages","link.tos") }}</a>
</div>
</div>
diff --git a/src/main/resources/templates/views/partial/homecolumn.html b/src/main/resources/templates/views/partial/homecolumn.html
index 5b13dd66..6f92f8ba 100644
--- a/src/main/resources/templates/views/partial/homecolumn.html
+++ b/src/main/resources/templates/views/partial/homecolumn.html
@@ -1,15 +1,18 @@
<div class="toolbar">
<a href="/?show=top" title="Top">
- <i data-icon="ei-heart" data-size="s"></i>Top
+ <i data-icon="ei-heart" data-size="s"></i>
+ <span class="desktop">Top</span>
</a>
<a href="/?show=all" title="{{ i18n("messages", "link.allMessages") }}">
- <i data-icon="ei-search" data-size="s"></i>{{ i18n("messages","link.allMessages") }}
+ <i data-icon="ei-search" data-size="s"></i>
+ <span class="desktop">{{ i18n("messages","link.allMessages") }}</span>
</a>
<a href="/?show=photos" title="{{ i18n("messages", "link.withPhotos") }}">
- <i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages", "link.withPhotos") }}
+ <i data-icon="ei-camera" data-size="s"></i>
+ <span class="desktop">{{ i18n("messages", "link.withPhotos") }}</span>
</a>
</div>
-<div class="tags">
+<div class="tags desktop">
<h4>{{ i18n("messages","link.trends") }}</h4>
{% include "views/partial/tags" %}
{% if showAdv | default(false) %}
@@ -18,4 +21,7 @@
<img src="https://ru.jooble.org/css/images/logos/jooble_80x30.png" alt="Работа в России"/>
</a>
{% endif %}
-</div> \ No newline at end of file
+</div>
+<span class="desktop">
+ {% include "views/partial/footer" %}
+</span> \ No newline at end of file
diff --git a/src/main/resources/templates/views/partial/navigation.html b/src/main/resources/templates/views/partial/navigation.html
index a3621bef..f3d43641 100644
--- a/src/main/resources/templates/views/partial/navigation.html
+++ b/src/main/resources/templates/views/partial/navigation.html
@@ -1,4 +1,4 @@
-<header>
+<div id="header">
<div id="header_wrapper">
{% if visitor.uid > 0 %}
<div id="ctitle">
@@ -12,7 +12,7 @@
{% else %}
<div id="logo"><a href="/{% if visitor.uid > 0 %}?show=my{% endif %}">Juick</a></div>
{% endif %}
- <div id="search">
+ <div id="search" class="desktop">
<form action="/">
<input name="search" class="text"
placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
@@ -21,23 +21,23 @@
<nav id="global">
<a href="/">
<i data-icon="ei-bell" data-size="s"></i>
- <span class="icon-title">{{ i18n("messages","link.discuss") }}</span>{% if visitor.unreadCount > 0 %}<span class="badge">{{ visitor.unreadCount }}</span>{% endif %}
+ <span class="icon-title desktop">{{ i18n("messages","link.discuss") }}</span>{% if visitor.unreadCount > 0 %}<span class="badge">{{ visitor.unreadCount }}</span>{% endif %}
</a>
<a href="/?show=all" rel="nofollow">
<i data-icon="ei-search" data-size="s"></i>
- <span class="icon-title">{{ i18n("messages","link.allMessages") }}</span>
+ <span class="icon-title desktop">{{ i18n("messages","link.allMessages") }}</span>
</a>
{% if visitor.uid > 0 %}
<a id="post" href="/post">
<i data-icon="ei-pencil" data-size="s"></i>
- <span class="icon-title">{{ i18n("messages","link.postMessage") }}</span>
+ <span class="icon-title desktop">{{ i18n("messages","link.postMessage") }}</span>
</a>
{% else %}
<a class="a-login" href="/login" rel="nofollow">
<i data-icon="ei-user" data-size="s"></i>
- <span class="icon-title">{{ i18n("messages", "link.Login") }}</span>
+ <span class="icon-title desktop">{{ i18n("messages", "link.Login") }}</span>
</a>
{% endif %}
</nav>
</div>
-</header>
+</div>
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 @@
<a href="/settings?page=about">{{ i18n("messages","link.settings.about") }}</a>
<a href="/logout"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.logout") }}</a>
</div>
-</div> \ No newline at end of file
+</div>
+<span class="desktop">
+ {% include "views/partial/footer" %}
+</span> \ 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 %}
</div>
{% endif %}
+<span class="desktop">
+ {% include "views/partial/footer" %}
+</span> \ 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 %}
-<div id="ctitle">
- <a href="/{{ user.name }}">
- <img src="{{ user.avatar }}" alt=""/>{{ user.name }}
- </a>
-</div>
<div class="toolbar">
- {% if isSubscribed %}
- <a href="/post?body=U+%40{{ user.name }}" title="Подписан">
- <i data-icon="ei-check" data-size="s"></i>Subscribed
- </a>
- {% else %}
- <a href="/post?body=S+%40{{ user.name }}" title="Подписаться">
- <i data-icon="ei-plus" data-size="s"></i>Subscribe
- </a>
+ {% if visitor is not empty and visitor.uid > 0 and visitor.uid != user.uid %}
+ <div id="ctitle">
+ <a href="/{{ user.name }}">
+ <img src="{{ user.avatar }}" alt="" />{{ user.name }}
+ </a>
+ </div>
+ <div class="toolbar">
+ {% if isSubscribed %}
+ <a href="/post?body=U+%40{{ user.name }}" title="Подписан">
+ <i data-icon="ei-check" data-size="s"></i>Subscribed
+ </a>
+ {% else %}
+ <a href="/post?body=S+%40{{ user.name }}" title="Подписаться">
+ <i data-icon="ei-plus" data-size="s"></i>Subscribe
+ </a>
+ {% endif %}
+ {% if isInBL %}
+ <a href="/post?body=BL+%40{{ user.name }}" title="Разблокировать">
+ <i data-icon="ei-close-o" data-size="s"></i>Unblock
+ </a>
+ {% else %}
+ <a href="/post?body=BL+%40{{ user.name }}" title="Заблокировать">
+ <i data-icon="ei-close" data-size="s"></i>Block
+ </a>
+ {% endif %}
+ {% if not isInBLAny %}
+ <a href="/pm/sent?uname={{ user.name }}" title="Написать приватное сообщение">
+ <i data-icon="ei-envelope" data-size="s"></i>PM
+ </a>
+ {% endif %}
+ </div>
{% endif %}
- {% if isInBL %}
- <a href="/post?body=BL+%40{{ user.name }}" title="Разблокировать">
- <i data-icon="ei-close-o" data-size="s"></i>Unblock
+ {% if visitor is not empty and visitor.uid == user.uid %}
+ <a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>
+ <span class="desktop">{{ i18n("messages","link.my") }}</span>
</a>
- {% else %}
- <a href="/post?body=BL+%40{{ user.name }}" title="Заблокировать">
- <i data-icon="ei-close" data-size="s"></i>Block
+ <a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>
+ <span class="desktop">{{ i18n("messages","link.privateMessages") }}</span>
</a>
- {% endif %}
- {% if not isInBLAny %}
- <a href="/pm/sent?uname={{ user.name }}" title="Написать приватное сообщение">
- <i data-icon="ei-envelope" data-size="s"></i>PM
+ <a href="/?show=discuss"><i data-icon="ei-bell" data-size="s"></i>
+ <span class="desktop">{{ i18n("messages","link.discuss") }}</span>
</a>
{% endif %}
-</div>
-{% endif %}
-<div class="toolbar">
- {% if visitor is not empty and visitor.uid == user.uid %}
- <a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>{{ i18n("messages","link.my") }}</a>
- <a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>{{ i18n("messages","link.privateMessages") }}</a>
- <a href="/?show=discuss"><i data-icon="ei-bell" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a>
- {% endif %}
{% if visitor is not empty and visitor.uid == user.uid and false %}
<a href="/?show=mycomments" rel="nofollow">{{ i18n("messages","blog.comments") }}</a>
<a href="/?show=unanswered" rel="nofollow">Неотвеченные</a>
{% endif %}
{% if visitor is not empty and visitor.uid == user.uid %}
- <a href="/settings" rel="nofollow">
- <i data-icon="ei-gear" data-size="s"></i>{{ i18n("messages","link.settings") }}
- {% if not visitor.verified %}
- <span style="color:red;"><i data-icon="ei-exclamation" data-size="s"></i></span>
- {% endif %}
- </a>
+ <a href="/settings" rel="nofollow">
+ <i data-icon="ei-gear" data-size="s"></i>
+ <span class="desktop">{{ i18n("messages","link.settings") }}</span>
+ {% if not visitor.verified %}
+ <span style="color:red;"><i data-icon="ei-exclamation" data-size="s"></i></span>
+ {% endif %}
+ </a>
{% endif %}
</div>
-<form action="/{{ user.name }}/">
- <p><input type="text" name="search" class="inp" placeholder="{{ i18n('messages','label.search') }}"/></p>
+<form action="/{{ user.name }}/" class="desktop" style="padding: 6px;">
+ <p><input type="text" name="search" class="inp" placeholder="{{ i18n('messages','label.search') }}" /></p>
</form>
-{% include "views/partial/usertags" %}
-<div id="ustats">
+<span class="desktop" style="padding: 6px;">
+ {% include "views/partial/usertags" %}
+</span>
+<div id="ustats" class="desktop" style="padding: 6px;">
<ul>
<li><a href="/{{ user.name }}/friends">{{ i18n("messages","blog.iread") }}: {{ statsIRead }}</a></li>
<li><a href="/{{ user.name }}/readers">{{ i18n("messages","blog.readers") }}: {{ statsMyReaders }}</a></li>
@@ -68,12 +77,15 @@
<div class="iread">
{% for u in iread %}
<span>
- <a href="/{{ u.name }}/">
- <img src="//i.juick.com/as/{{ u.uid }}.png" alt="{{ u.name }}"/>
- </a>
- </span>
+ <a href="/{{ u.name }}/">
+ <img src="//i.juick.com/as/{{ u.uid }}.png" alt="{{ u.name }}" />
+ </a>
+ </span>
{% endfor %}
</div>
{% endif %}
</div>
+<span class="desktop">
+ {% include "views/partial/footer" %}
+</span> \ 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 } })
]
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 09:28:34 +0000