aboutsummaryrefslogtreecommitdiff
path: root/juick-www/src
diff options
context:
space:
mode:
Diffstat (limited to 'juick-www/src')
-rw-r--r--juick-www/src/main/resources/messages.properties1
-rw-r--r--juick-www/src/main/resources/messages_ru.properties1
-rw-r--r--juick-www/src/main/static/scripts.js73
-rw-r--r--juick-www/src/main/static/style.css378
-rw-r--r--juick-www/src/main/webapp/WEB-INF/layouts/content.html2
-rw-r--r--juick-www/src/main/webapp/WEB-INF/views/partial/message.html14
-rw-r--r--juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html42
-rw-r--r--juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html22
-rw-r--r--juick-www/src/main/webapp/WEB-INF/views/thread.html19
9 files changed, 427 insertions, 125 deletions
diff --git a/juick-www/src/main/resources/messages.properties b/juick-www/src/main/resources/messages.properties
index 5911e3b4..8bf51837 100644
--- a/juick-www/src/main/resources/messages.properties
+++ b/juick-www/src/main/resources/messages.properties
@@ -15,6 +15,7 @@ link.discuss=Discuss
link.recommended=Recommended
link.postMessage=Post
link.logout=Logout
+link.login=Login
link.settings.main=Main
link.settings.password=Password
diff --git a/juick-www/src/main/resources/messages_ru.properties b/juick-www/src/main/resources/messages_ru.properties
index 105b3505..7c948bc5 100644
--- a/juick-www/src/main/resources/messages_ru.properties
+++ b/juick-www/src/main/resources/messages_ru.properties
@@ -15,6 +15,7 @@ link.discuss=Обсуждения
link.recommended=Рекомендации
link.postMessage=Написать
link.logout=Выйти
+link.login=Войти
link.settings.main=Главная
link.settings.password=Пароль
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%;
diff --git a/juick-www/src/main/webapp/WEB-INF/layouts/content.html b/juick-www/src/main/webapp/WEB-INF/layouts/content.html
index f4ca0d84..d3260acf 100644
--- a/juick-www/src/main/webapp/WEB-INF/layouts/content.html
+++ b/juick-www/src/main/webapp/WEB-INF/layouts/content.html
@@ -47,7 +47,7 @@
{% include "views/partial/navigation" %}
<div id="wrapper">
{% if visitor.uid == 0 %}
- <div class="page">
+ <div class="announcement">
<p>{{ i18n("messages","message.loginForSending", "/login") | raw }}.</p>
</div>
{% endif %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/message.html b/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
index 5950ac7d..a3ce959a 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/message.html
@@ -27,35 +27,35 @@
<nav class="l">
{% if visitor.uid == msg.user.uid %}
<a href="/{{ msg.mid }}">
- <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+ <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
{% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
</a>
{% elseif visitor.uid > 0 %}
<a href="/post?body=!+%23{{ msg.mid }}" class="a-like">
- <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+ <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
{% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
</a>
{% else %}
<a href="/login" class="a-login">
- <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+ <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
{% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
</a>
{% endif %}
{% if (visitor.uid > 0 and not msg.ReadOnly) or (visitor.uid == msg.user.uid) %}
<a href="/{{ msg.mid }}" class="a-comment">
- <i data-icon="ei-comment" data-size="s"></i>&nbsp;{{ i18n("messages","message.comment") }}
+ <i data-icon="ei-comment" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.comment") }}</span>
{% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
</a>
<a href="#" class="msg-menu">
- <i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}
+ <i data-icon="ei-link" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.share") }}</span>
</a>
{% elseif visitor.uid == 0 and not msg.ReadOnly %}
<a href="/login" class="a-login">
- <i data-icon="ei-comment" data-size="s"></i>&nbsp;{{ i18n("messages","message.comment") }}
+ <i data-icon="ei-comment" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.comment") }}</span>
{% if msg.Replies > 0 %}&nbsp;({{ msg.Replies }}){% endif %}
</a>
<a href="#" class="msg-menu">
- <i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}
+ <i data-icon="ei-link" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.share") }}</span>
</a>
{% endif %}
{% if msg.FriendsOnly %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html b/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
index cabdca02..ff845ce9 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/navigation.html
@@ -4,17 +4,47 @@
<nav id="global">
<ul>
<li><a href="/?show=all" rel="nofollow"><i data-icon="ei-search" data-size="s"></i>{{ i18n("messages","link.allMessages") }}</a></li>
- <li><a href="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","link.withPhotos") }}</a></li>
- <li><a id="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>{{
- i18n("messages","link.postMessage") }}</a>
- </li>
+ <li id="menu-photos-1"><a href="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","link.withPhotos") }}</a></li>
+ {% if visitor.uid > 0 %}
+ <li><a id="post" href="/post"><i data-icon="ei-pencil" data-size="s"></i>{{ i18n("messages","link.postMessage") }}</a></li>
+ {% else %}
+ <li><a href="/login" class="a-login"><i data-icon="ei-pencil" data-size="s"></i>{{ i18n("messages","link.postMessage") }}</a></li>
+ {% endif %}
</ul>
</nav>
+ <div id="menu-spacer-2" class="flex-spacer"></div>
<div id="search">
<form action="/">
- <input name="search" class="text"
- placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
+ <input name="search" class="text" placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}"/>
</form>
</div>
+ <div id="user-menu" tabindex="0">
+ <div id="menu-expander"><i data-icon="ei-chevron-down" data-size="s"></i></div>
+ <div id="menu-spacer-1" class="flex-spacer"></div>
+ <img src="//i.juick.com/a/{{ visitor.uid }}.png" alt="{{ visitor.name }}"/>
+ <div id="user-menu-dropdown">
+ <ul class="right-column">
+ {% if visitor.uid > 0 %}
+ <li><a href="/{{ visitor.name }}"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","blog.blog") }}</a></li>
+ <li><a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>{{ i18n("messages","link.my") }}</a></li>
+ <li><a href="/?show=discuss"><i data-icon="ei-comment" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a></li>
+ <li><a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>{{ i18n("messages","link.privateMessages") }}</a></li>
+ <li><a href="/settings" rel="nofollow"><i data-icon="ei-gear" data-size="s"></i>{{ i18n("messages","link.settings") }}</a></li>
+ <li class="next-section"><a href="/logout"><i data-icon="ei-share-apple" data-size="s"></i>{{ i18n("messages","link.logout") }}</a></li>
+ {% else %}
+ <li><a href="/login"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.login") }}</a></li>
+ {% endif %}
+ </ul>
+ <ul class="left-column">
+ <li id="menu-popular-2"><a href="/"><i data-icon="ei-star" data-size="s"></i>{{ i18n("messages","link.popular") }}</a></li>
+ <li id="menu-photos-2"><a href="/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","link.withPhotos") }}</a></li>
+ <li>
+ <form action="/">
+ <input name="search" class="text" placeholder="{{ i18n('messages','label.search') }}" value="{{ search | default('') }}" size="1"/>
+ </form>
+ </li>
+ </ul>
+ </div>
+ </div>
</div>
</header>
diff --git a/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html b/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html
index edf218a1..0906218a 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/partial/usercolumn.html
@@ -2,6 +2,7 @@
<a href="/{{ user.name }}">
<img src="//i.juick.com/a/{{ user.uid }}.png" alt=""/>{{ user.name }}
</a>
+ <div id="column-expander" tabindex="0"><i data-icon="ei-chevron-down" data-size="s"></i></div>
</div>
{% if visitor is not empty and visitor.uid > 0 and visitor.uid != user.uid %}
<ul class="toolbar">
@@ -43,21 +44,8 @@
<hr/>
{% endif %}
<ul>
- {% if visitor is not empty and visitor.uid == user.uid %}
- <li><a href="/?show=my"><i data-icon="ei-clock" data-size="s"></i>{{ i18n("messages","link.my") }}</a></li>
- <li><a href="/pm/inbox"><i data-icon="ei-envelope" data-size="s"></i>{{ i18n("messages","link.privateMessages") }}</a></li>
- <li><a href="/?show=discuss"><i data-icon="ei-comment" data-size="s"></i>{{ i18n("messages","link.discuss") }}</a></li>
- {% endif %}
<li><a href="/{{ user.name }}/?show=recomm" rel="nofollow"><i data-icon="ei-heart" data-size="s"></i>{{ i18n("messages","blog.recommendations") }}</a></li>
<li><a href="/{{ user.name }}/?show=photos" rel="nofollow"><i data-icon="ei-camera" data-size="s"></i>{{ i18n("messages","blog.photos") }}</a></li>
- {% if visitor is not empty and visitor.uid == user.uid and false %}
- <li><a href="/?show=mycomments" rel="nofollow">{{ i18n("messages","blog.comments") }}</a></li>
- <li><a href="/?show=unanswered" rel="nofollow">Неотвеченные</a></li>
- {% endif %}
- {% if visitor is not empty and visitor.uid == user.uid %}
- <li><a href="/settings" rel="nofollow"><i data-icon="ei-gear" data-size="s"></i>{{ i18n("messages","link.settings") }}</a></li>
- <li><a href="/logout"><i data-icon="ei-user" data-size="s"></i>{{ i18n("messages","link.logout") }}</a></li>
- {% endif %}
</ul>
<hr/>
<form action="/{{ user.name }}/">
@@ -79,10 +67,10 @@
<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 %}
diff --git a/juick-www/src/main/webapp/WEB-INF/views/thread.html b/juick-www/src/main/webapp/WEB-INF/views/thread.html
index 8e30fafa..254c61f0 100644
--- a/juick-www/src/main/webapp/WEB-INF/views/thread.html
+++ b/juick-www/src/main/webapp/WEB-INF/views/thread.html
@@ -17,7 +17,7 @@
</div>
<div class="msg-header">
<span itemprop="author" itemscope="" itemtype="http://schema.org/Person">
- <a itemprop="url" rel="author" href="/{{ msg.user.name }}/"><span itemprop="name">{{ msg.user.name }}</span></a>
+ <a itemprop="url" rel="author" href="/{{ msg.user.name }}/"><span itemprop="name">{{ msg.user.name }}</span></a>
</span>
<div class="msg-tags" itemprop="headline">
{{ tags(msg.user.name, msg.tags | tagsList) }}
@@ -34,36 +34,37 @@
<nav class="l">
{% if visitor.uid == msg.user.uid %}
<a href="/{{ msg.mid }}">
- <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+ <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
{% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
</a>
{% elseif visitor.uid > 0 %}
<a href="/post?body=!+%23{{ msg.mid }}" class="a-like">
- <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+ <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
{% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
</a>
{% else %}
<a href="/login" class="a-login">
- <i data-icon="ei-heart" data-size="s"></i>&nbsp;{{ i18n("messages","message.recommend") }}
+ <i data-icon="ei-heart" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.recommend") }}</span>
{% if msg.Likes > 0 %}&nbsp;({{ msg.Likes }}){% endif %}
</a>
{% endif %}
- <a href="#" class="msg-menu"><i data-icon="ei-link" data-size="s"></i>&nbsp;{{ i18n("messages","message.share") }}</a>
+ <a href="#" class="msg-menu">
+ <i data-icon="ei-link" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.share") }}</span>
+ </a>
{% if visitor.uid > 0 %}
{% if visitor.uid != msg.user.uid %}
{% if visitorSubscribed %}
<a href="/post?body=U+%23{{ msg.mid }}">
- <i data-icon="ei-check" data-size="s"></i>&nbsp;{{ i18n("messages","message.subscribed") }}
+ <i data-icon="ei-check" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.subscribed") }}</span>
</a>
{% else %}
<a href="/post?body=S+%23{{ msg.mid }}">
- <i data-icon="ei-eye" data-size="s"></i>
- &nbsp;{{ i18n("messages","message.subscribe") }}
+ <i data-icon="ei-eye" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.subscribe") }}</span>
</a>
{% endif %}
{% else %}
<a href="/post?body=D+%23{{ msg.mid }}">
- <i data-icon="ei-close" data-size="s"></i>&nbsp;{{ i18n("messages","message.delete") }}
+ <i data-icon="ei-close" data-size="s"></i><span>&nbsp;{{ i18n("messages","message.delete") }}</span>
</a>
{% endif %}
{% endif %}