From c3422c2c08510dbb7443c63b88adf1587deb8f76 Mon Sep 17 00:00:00 2001 From: Igor Ustyugov Date: Sun, 4 Sep 2016 11:30:27 +0500 Subject: Fix avatar/timestamp on small display --- .../src/main/java/com/juick/www/PageTemplates.java | 7 +++-- .../src/main/java/com/juick/www/UserThread.java | 34 ++++++++++++---------- juick-www/src/main/resources/views/pm_inbox.html | 19 ++++++------ juick-www/src/main/resources/views/pm_sent.html | 21 ++++++------- juick-www/src/main/static/scripts.js | 6 ++-- juick-www/src/main/static/style.css | 34 ++++++++++------------ 6 files changed, 60 insertions(+), 61 deletions(-) (limited to 'juick-www') 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("
"); - out.println(" "); out.println("
"); - out.println("
"); out.println(" @" + msg.getUser().getUName() + ":"); - out.println("
" + tagsStr + "
"); + out.println("
\""
"); + out.println("
"); + + out.println("
" + tagsStr + "
"); out.println("
"); 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("
"); - out.println("
"); - out.println("
" + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "
"); - if (!msg.getUser().Banned) { - out.println("
\""
"); - out.println("
@" + msg.getUser().getUName() + ":
"); + out.println("
"); + if (!msg.getUser().Banned) { + out.println(" @" + msg.getUser().getUName() + ":"); + out.println("
\""
"); } else { - out.println("
"); - out.println("
[удалено]:
"); + out.println(" [удалено]:"); + out.println("
"); } - out.println("
" + Utils.formatMessage(msg.getText()) + "
"); + out.println("
"); + out.println("
" + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "
"); + out.println("
"); + out.println("
" + Utils.formatMessage(msg.getText()) + "
"); if (msg.AttachmentType != null) { out.println("
\"\"/
"); } @@ -319,16 +321,18 @@ public class UserThread { for (Message msg : replies) { out.print("
  • "); out.println("
    "); - out.println("
    "); - out.println("
    " + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "
    "); + out.println("
    "); if (!msg.getUser().Banned) { - out.println("
    \""
    "); - out.println("
    @" + msg.getUser().getUName() + ":
    "); + out.println(" @" + msg.getUser().getUName() + ":"); + out.println("
    \""
    "); } else { - out.println("
    "); - out.println("
    [удалено]:
    "); + out.println(" [удалено]:"); + out.println("
    "); } - out.println("
    " + Utils.formatMessage(msg.getText()) + "
    "); + out.println("
    "); + out.println("
    " + PageTemplates.formatDate(msg.TimeAgo, msg.getDate()) + "
    "); + out.println("
    "); + out.println("
    " + Utils.formatMessage(msg.getText()) + "
    "); if (msg.AttachmentType != null) { out.println("
    \"\"/
    "); } 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 %}
  • -
    {{ msg.getDate() }}
    -
    - - {{ msg.getUser().getUName() }} - -
    -
    - @{{ msg.getUser().getUName() }}: +
    + @{{ msg.getUser().getUName() }}: +
    + + {{ msg.getUser().getUName() }} + +
    +
    {{ msg.getDate() }}
    +
    {{ msg.getText() | raw }}
    @@ -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 %}
  • -
    {{ msg.getDate() }}
    -
    - - {{ msg.getUser().getUName() }} - -
    -
    - @{{ msg.getUser().getUName() }}: +
    + @{{ msg.getUser().getUName() }}: +
    + + {{ msg.getUser().getUName() }} + +
    +
    {{ msg.getDate() }}
    {{ msg.getText() | raw }}
    - - -
    • {% 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;} +} -- cgit v1.2.3