aboutsummaryrefslogtreecommitdiff
path: root/juick-www/src/main
diff options
context:
space:
mode:
authorGravatar Igor Ustyugov2016-09-04 11:30:27 +0500
committerGravatar Vitaly Takmazov2016-09-04 23:43:04 +0300
commitc3422c2c08510dbb7443c63b88adf1587deb8f76 (patch)
tree15b6f448a25f83c4ed05cdf1b8ab392c62230990 /juick-www/src/main
parent26ed351bbc59767be8ce2500cbb5250de63df5c9 (diff)
Fix avatar/timestamp on small display
Diffstat (limited to 'juick-www/src/main')
-rw-r--r--juick-www/src/main/java/com/juick/www/PageTemplates.java7
-rw-r--r--juick-www/src/main/java/com/juick/www/UserThread.java34
-rw-r--r--juick-www/src/main/resources/views/pm_inbox.html19
-rw-r--r--juick-www/src/main/resources/views/pm_sent.html21
-rw-r--r--juick-www/src/main/static/scripts.js6
-rw-r--r--juick-www/src/main/static/style.css34
6 files changed, 60 insertions, 61 deletions
diff --git a/juick-www/src/main/java/com/juick/www/PageTemplates.java b/juick-www/src/main/java/com/juick/www/PageTemplates.java
index a036ecba..ea201b85 100644
--- a/juick-www/src/main/java/com/juick/www/PageTemplates.java
+++ b/juick-www/src/main/java/com/juick/www/PageTemplates.java
@@ -320,11 +320,12 @@ public class PageTemplates {
}
out.println("<article data-mid=\"" + msg.getMID() + "\">");
- out.println(" <aside><a href=\"/" + msg.getUser().getUName() + "/\"><img src=\"//i.juick.com/a/" + msg.getUser().getUID() + ".png\" alt=\"" + msg.getUser().getUName() + "\"/></a></aside>");
out.println(" <header class=\"u\">");
- out.println(" <header class=\"t\"><a href=\"/" + msg.getUser().getUName() + "/" + msg.getMID() + "\"><time datetime=\"" + sdfSQL.format(msg.getDate()) + "Z\" title=\"" + sdfSQL.format(msg.getDate()) + " GMT\">" + formatDate(msg.TimeAgo, msg.getDate()) + "</time></a></header>");
out.println(" @<a href=\"/" + msg.getUser().getUName() + "/\">" + msg.getUser().getUName() + "</a>:");
- out.println(" <div class=\"tags\">" + tagsStr + "</div>");
+ out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.getUser().getUName() + "/\"><img src=\"//i.juick.com/a/" + msg.getUser().getUID() + ".png\" alt=\"" + msg.getUser().getUName() + "\"/></a></div>");
+ out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.getUser().getUName() + "/" + msg.getMID() + "\"><time datetime=\"" + sdfSQL.format(msg.getDate()) + "Z\" title=\"" + sdfSQL.format(msg.getDate()) + " GMT\">" + formatDate(msg.TimeAgo, msg.getDate()) + "</time></a></div>");
+
+ out.println(" <div class=\"msg-tags\">" + tagsStr + "</div>");
out.println(" </header>");
if (msg.AttachmentType != null) {
diff --git a/juick-www/src/main/java/com/juick/www/UserThread.java b/juick-www/src/main/java/com/juick/www/UserThread.java
index c3228e17..8325cf53 100644
--- a/juick-www/src/main/java/com/juick/www/UserThread.java
+++ b/juick-www/src/main/java/com/juick/www/UserThread.java
@@ -279,16 +279,18 @@ public class UserThread {
}
out.println("\">");
out.println(" <div class=\"msg-cont\">");
- out.println(" <div class=\"msg-menu\"><a href=\"#\" class=\"a-thread-links\"></a></div>");
- out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.getMID() + "#" + msg.getRID() + "\" title=\"" + PageTemplates.sdfSQL.format(msg.getDate()) + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "</a></div>");
- if (!msg.getUser().Banned) {
- out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.getUser().getUName() + "/\"><img src=\"//i.juick.com/a/" + msg.getUser().getUID() + ".png\" alt=\"" + msg.getUser().getUName() + "\"/></a></div>");
- out.println(" <div class=\"msg-header\">@<a href=\"/" + msg.getUser().getUName() + "/\">" + msg.getUser().getUName() + "</a>:</div>");
+ out.println(" <div class=\"msg-header\">");
+ if (!msg.getUser().Banned) {
+ out.println(" @<a href=\"/" + msg.getUser().getUName() + "/\">" + msg.getUser().getUName() + "</a>:");
+ out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.getUser().getUName() + "/\"><img src=\"//i.juick.com/a/" + msg.getUser().getUID() + ".png\" alt=\"" + msg.getUser().getUName() + "\"/></a></div>");
} else {
- out.println(" <div class=\"msg-avatar\"><img src=\"//i.juick.com/av-96.png\"/></div>");
- out.println(" <div class=\"msg-header\">[удалено]:</div>");
+ out.println(" [удалено]:");
+ out.println(" <div class=\"msg-avatar\"><img src=\"//i.juick.com/av-96.png\"/></div>");
}
- out.println(" <div class=\"msg-txt\">" + Utils.formatMessage(msg.getText()) + "</div>");
+ out.println(" <div class=\"msg-menu\"><a href=\"#\" class=\"a-thread-links\"></a></div>");
+ out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.getMID() + "#" + msg.getRID() + "\" title=\"" + PageTemplates.sdfSQL.format(msg.getDate()) + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "</a></div>");
+ out.println(" </div>");
+ out.println(" <div class=\"msg-txt\">" + Utils.formatMessage(msg.getText()) + "</div>");
if (msg.AttachmentType != null) {
out.println(" <div class=\"msg-media\"><a href=\"//i.juick.com/p/" + msg.getMID() + "-" + msg.getRID() + "." + msg.AttachmentType + "\"><img src=\"//i.juick.com/photos-512/" + msg.getMID() + "-" + msg.getRID() + "." + msg.AttachmentType + "\" alt=\"\"/></a></div>");
}
@@ -319,16 +321,18 @@ public class UserThread {
for (Message msg : replies) {
out.print(" <li id=\"" + msg.getRID() + "\" class=\"msg\">");
out.println(" <div class=\"msg-cont\">");
- out.println(" <div class=\"msg-menu\"><a href=\"#\" class=\"a-thread-links\"></a></div>");
- out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.getMID() + "#" + msg.getRID() + "\" title=\"" + PageTemplates.sdfSQL.format(msg.getDate()) + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "</a></div>");
+ out.println(" <div class=\"msg-header\">");
if (!msg.getUser().Banned) {
- out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.getUser().getUName() + "/\"><img src=\"//i.juick.com/a/" + msg.getUser().getUID() + ".png\" alt=\"" + msg.getUser().getUName() + "\"/></a></div>");
- out.println(" <div class=\"msg-header\">@<a href=\"/" + msg.getUser().getUName() + "/\">" + msg.getUser().getUName() + "</a>:</div>");
+ out.println(" @<a href=\"/" + msg.getUser().getUName() + "/\">" + msg.getUser().getUName() + "</a>:");
+ out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.getUser().getUName() + "/\"><img src=\"//i.juick.com/a/" + msg.getUser().getUID() + ".png\" alt=\"" + msg.getUser().getUName() + "\"/></a></div>");
} else {
- out.println(" <div class=\"msg-avatar\"><img src=\"//i.juick.com/av-96.png\"/></div>");
- out.println(" <div class=\"msg-header\">[удалено]:</div>");
+ out.println(" [удалено]:");
+ out.println(" <div class=\"msg-avatar\"><img src=\"//i.juick.com/av-96.png\"/></div>");
}
- out.println(" <div class=\"msg-txt\">" + Utils.formatMessage(msg.getText()) + "</div>");
+ out.println(" <div class=\"msg-menu\"><a href=\"#\" class=\"a-thread-links\"></a></div>");
+ out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.getMID() + "#" + msg.getRID() + "\" title=\"" + PageTemplates.sdfSQL.format(msg.getDate()) + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "</a></div>");
+ out.println(" </div>");
+ out.println(" <div class=\"msg-txt\">" + Utils.formatMessage(msg.getText()) + "</div>");
if (msg.AttachmentType != null) {
out.println(" <div class=\"msg-media\"><a href=\"//i.juick.com/p/" + msg.getMID() + "-" + msg.getRID() + "." + msg.AttachmentType + "\"><img src=\"//i.juick.com/photos-512/" + msg.getMID() + "-" + msg.getRID() + "." + msg.AttachmentType + "\" alt=\"\"/></a></div>");
}
diff --git a/juick-www/src/main/resources/views/pm_inbox.html b/juick-www/src/main/resources/views/pm_inbox.html
index d53c81ba..d8fbf4ce 100644
--- a/juick-www/src/main/resources/views/pm_inbox.html
+++ b/juick-www/src/main/resources/views/pm_inbox.html
@@ -5,15 +5,16 @@
{% for msg in msgs %}
<li class="msg">
<div class="msg-cont">
- <div class="msg-ts">{{ msg.getDate() }}</div>
- <div class="msg-avatar">
- <a href="/{{ msg.getUser().getUName() }}/">
- <img src="//i.juick.com/a/{{ msg.getUser().getUID() }}.png" alt="{{ msg.getUser().getUName() }}"/>
- </a>
- </div>
- <div class="msg-header">
- <a href="/{{ msg.getUser().getUName() }}/">@{{ msg.getUser().getUName() }}</a>:
+ <div class="msg-header">
+ @<a href="/{{ msg.getUser().getUName() }}/">{{ msg.getUser().getUName() }}</a>:
+ <div class="msg-avatar">
+ <a href="/{{ msg.getUser().getUName() }}/">
+ <img src="//i.juick.com/a/{{ msg.getUser().getUID() }}.png" alt="{{ msg.getUser().getUName() }}"/>
+ </a>
+ </div>
+ <div class="msg-ts">{{ msg.getDate() }}</div>
</div>
+
<div class="msg-txt">{{ msg.getText() | raw }}</div>
<form action="/pm/send" method="POST" enctype="multipart/form-data">
@@ -33,4 +34,4 @@
{% endblock %}
{% block "column" %}
{% include "views/partial/homecolumn.html" %}
-{% endblock %} \ No newline at end of file
+{% endblock %}
diff --git a/juick-www/src/main/resources/views/pm_sent.html b/juick-www/src/main/resources/views/pm_sent.html
index fc65a4fd..e03b3a7d 100644
--- a/juick-www/src/main/resources/views/pm_sent.html
+++ b/juick-www/src/main/resources/views/pm_sent.html
@@ -12,19 +12,16 @@
{% for msg in msgs %}
<li class="msg">
<div class="msg-cont">
- <div class="msg-ts">{{ msg.getDate() }}</div>
- <div class="msg-avatar">
- <a href="/{{ msg.getUser().getUName() }}/">
- <img src="//i.juick.com/a/{{ msg.getUser().getUID() }}.png" alt="{{ msg.getUser().getUName() }}"/>
- </a>
- </div>
- <div class="msg-header">
- <a href="/{{ msg.getUser().getUName() }}/">@{{ msg.getUser().getUName() }}</a>:
+ <div class="msg-header">
+ @<a href="/{{ msg.getUser().getUName() }}/">{{ msg.getUser().getUName() }}</a>:
+ <div class="msg-avatar">
+ <a href="/{{ msg.getUser().getUName() }}/">
+ <img src="//i.juick.com/a/{{ msg.getUser().getUID() }}.png" alt="{{ msg.getUser().getUName() }}"/>
+ </a>
+ </div>
+ <div class="msg-ts">{{ msg.getDate() }}</div>
</div>
<div class="msg-txt">{{ msg.getText() | raw }}</div>
-
-
-
</div>
</li>
{% endfor %}
@@ -33,4 +30,4 @@
{% endblock %}
{% block "column" %}
{% include "views/partial/homecolumn.html" %}
-{% endblock %} \ No newline at end of file
+{% endblock %}
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 36b6fc36..0ab31345 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -138,9 +138,9 @@ function wsIncomingReply(msg) {
var msgComment = document.createElement('div');
msgComment.setAttribute('class', 'msg-comment');
msgComment.style.display = 'none';
- msgCont.appendChild(msgMenu);
- msgCont.appendChild(msgTimestamp);
- msgCont.appendChild(msgAvatar);
+ msgHeader.appendChild(msgAvatar);
+ msgHeader.appendChild(msgMenu);
+ msgHeader.appendChild(msgTimestamp);
msgCont.appendChild(msgHeader);
msgCont.appendChild(msgTxt);
msgCont.appendChild(msgLinks);
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index e7c6f2cc..89016f7f 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -55,10 +55,8 @@ body>header p { color: #222; font-size: 13pt; margin: 12px 0; text-align: center
#newmessage .subm { width: 150px; background: #EEEEE5; }
article { margin-bottom: 20px; padding: 20px; line-height: 140%; background: #fff; /* box-shadow: 0 0 0 1px #ccc;*/ }
-article>aside { margin-right: 10px; float: left; }
-article>aside img { width: 48px; height: 48px; }
-article>header.u { display: inline-block; width: 630px; }
-article header.t { float: right; text-align: right; margin-top: -1px; }
+article aside { width: 48px; height: 48px; margin-right: 10px; float: left; }
+article aside img { width: 48px; height: 48px; }
article time { color: #999; font-size: 10pt; border-bottom: 1px dotted #999; }
article p { margin: 5px 0 15px 0; clear: left; }
article p.i { text-align: center; }
@@ -77,15 +75,7 @@ article textarea { width: 530px; padding: 2px; resize: vertical; vertical-align:
article input { width: 50px; margin-left: 6px; vertical-align: top; border: 1px solid #CCC; background: #EEE; color: #999; }
article .tags { margin-top: 3px; }
.msg-tags { margin-top: 5px; }
-article .tags>a, .msg-tags>a {
- font-size: 10pt;
- display: inline-block;
- margin-bottom: 5px;
- margin-right: 5px;
- padding: 0 10px;
- border: 1px dotted #ccc;
- color: #888;
-}
+article .tags>a, .msg-tags>a { font-size: 10pt; display: inline-block; margin-bottom: 5px; margin-right: 5px; padding: 0 10px; border: 1px dotted #ccc; color: #888; }
#yandex_ad_728 { width: 728px; height: 90px; margin: 20px 0; padding: 15px 0; background: #FFF; }
.adslot1 { display: inline-block; width: 320px; height: 90px; }
@@ -105,11 +95,11 @@ article .tags>a, .msg-tags>a {
.msg-menu { float: right; width: 16px; height: 16px; margin-top: 2.4px; margin-left: 10px; }
.msg-menu>a { display: block; width: 16px; height: 16px; vertical-align: top; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAALRQTFRFAAAAldX/ncT/ksj/ltL/nMb/lMn/mcz/l9H/lcr/mZmZmcz/m83/mJiYmZmZmcz/mM7/mpqamsr/l8v/m83/mJiYmM7/l8v/mZmZmcz/mpqamMv/mcz/mM3/ms3/msv/mMv/mMz/mcz/msz/mc3/mMz/mcz/msz/mc3/mcv/mc3/mcv/mcz/mcz/mcz/mcz/mZmZmZmZmcz/mcz/mcz/mcz/mcz/mcz/mcz/mcz/mcz/mZmZiZsGCAAAADx0Uk5TAAwNDhESExQWGC0tLi8yMjQ1NTY4OTk7PDxESktNUVNUd3h5eoGCg4mKmMvMzc7P29zd3uLj7O3u8vT2+A5wCAAAAJFJREFUGBkFwQlCgkAAAMDRxEySkryyzDxSAc+gkvX//2oGAAB42J5COG46AJ+/+SiKxvl1DsyqJyCtZnBXxgDxdxPrHQDZCvvUNIFkalAgtCSXHr1LIqpRt+ifu91zn6hG8YLh7TbEoMAyg8kEsgWaZQzwWDbgvXoG0p83YH7Nx+32a/73AdDZHEIovu4BAMA/t6QMuyHliCkAAAAASUVORK5CYII=") no-repeat; }
.msg-header { /* overflow: hidden; */ }
-.msg-ts { font-size: small; vertical-align: top; float: right; }
+.msg-ts, article header.t { font-size: small; vertical-align: top; float: right; }
.msg-ts, .msg-ts>a { color: #999; }
.msg-place { font-size: small; }
.msg-place>a { color: #999; }
-.msg-txt { margin: 10px 0 12px; }
+.msg-txt { clear: both; margin: 0 0 12px; padding-top: 10px;}
.msg-media { text-align: center; }
.msg-links { font-size: small; color: #999; margin: 5px 0 0 0; }
.msg-comments { overflow: hidden; font-size: small; color: #AAA; text-indent: 10px; margin-top: 10px; }
@@ -130,7 +120,8 @@ q { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-left: 10px;
#mtoolbar li { display: inline; }
#mtoolbar div { display: inline-block; width: 16px; height: 16px; background: url(//static.juick.com/toolbar-icons.png) no-repeat; vertical-align: middle; margin: 5px; }
-#replies .msg-txt, #private-messages .msg-txt { clear: both; margin: 0; padding-top: 10px; }
+#replies .msg-txt, #private-messages .msg-txt {margin: 0;}
+.msg-comment { margin-top: 10px; }
.newmessage { width: 695px; padding: 2px; resize: vertical; border: 1px solid #DDD; } /* textarea */
@@ -259,8 +250,6 @@ fieldset {
article { margin: 8px; overflow: auto; }
- article>header.u { margin: 0; width: auto; display: block; }
- article>header.t { float: none; text-align: left; margin: 0; width: auto; display: block; }
article p { margin: 10px 0 8px 0; }
article>nav.l { display: block; float: left; width: 80%; line-height: 15pt; }
article>nav.s { display: block; }
@@ -272,7 +261,6 @@ fieldset {
.msg,.msg-cont { width: auto; min-width: 280px; }
.msg-cont,.ads { margin: 8px; }
.msg-comment textarea { width: 100%; }
- .msg-txt { margin: 8px 0 0 0; }
.msg-media { overflow: auto; }
.title2 h2 { font-size: large; }
@@ -280,3 +268,11 @@ fieldset {
#footer { margin: 0 10px; }
#footer div { float: none; margin: 10px 0; }
}
+@media screen and (max-width: 480px) {
+ .msg-ts { float: none; }
+ .msg-tags { margin-top: 10px; }
+ .msg-txt { padding-top: 5px;}
+ .title2 { font-size: 11pt; }
+ #content .title2 h2 { font-size: 11pt; }
+ .title2-right {line-height: initial;}
+}