aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Ugnich Anton2013-10-23 23:20:21 +0700
committerGravatar Ugnich Anton2013-10-23 23:20:21 +0700
commitdfaed35136ba1ed24cfb49acb87e837a11a2a8d1 (patch)
tree9b1b38774e619028f64b91d175074c5c4d5d7e67
parentf723832791490ad342c7ab1190d1f16dce84ade9 (diff)
New feed design
Diffstat
-rw-r--r--src/java/com/juick/http/www/PageTemplates.java15
-rw-r--r--src/java/com/juick/http/www/UserThread.java32
-rw-r--r--web/style3.css55
3 files changed, 61 insertions, 41 deletions
diff --git a/src/java/com/juick/http/www/PageTemplates.java b/src/java/com/juick/http/www/PageTemplates.java
index f83713c9..fc9bb1d5 100644
--- a/src/java/com/juick/http/www/PageTemplates.java
+++ b/src/java/com/juick/http/www/PageTemplates.java
@@ -50,7 +50,7 @@ public class PageTemplates {
out.println("<!DOCTYPE html>");
out.print("<html>");
out.print("<head>");
- out.print("<link rel=\"stylesheet\" href=\"/style.2013100900.css\"/>");
+ out.print("<link rel=\"stylesheet\" href=\"/style.2013102203.css\"/>");
out.print("<script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js\" defer=\"defer\"></script>");
out.print("<script type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js\" defer=\"defer\" async=\"async\"></script>");
out.print("<script type=\"text/javascript\" src=\"/scripts.2013072200.js\" defer=\"defer\"></script>");
@@ -209,7 +209,7 @@ public class PageTemplates {
if (user == null) {
ret += "/tag/";
} else {
- ret += "./?tag=";
+ ret += "/" + user.UName + "/?tag=";
}
ret += URLEncoder.encode(tags.get(i), "utf-8") + "\">" + tag + "</a>";
} catch (UnsupportedEncodingException e) {
@@ -400,7 +400,7 @@ public class PageTemplates {
com.juick.Message msg = msgs.get(i);
- String tags = msg.Tags.isEmpty() ? "" : formatTags(msg.Tags, user);
+ String tags = msg.Tags.isEmpty() ? "" : formatTags(msg.Tags, msg.User);
if (msg.ReadOnly) {
tags += " *readonly";
}
@@ -426,10 +426,16 @@ public class PageTemplates {
txt = formatMessage(msg.Text);
}
+ if (!tags.isEmpty()) {
+ tags = "<span class=\"msg-tags\">" + tags + "</span>";
+ }
+
out.println(" <li id=\"msg-" + msg.MID + "\" class=\"msg\">");
out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.User.UName + "/\"><img src=\"//i.juick.com/a/" + msg.User.UID + ".png\" alt=\"" + msg.User.UName + "\"/></a></div>");
+ out.println(" <div class=\"msg-cont\">");
+ out.println(" <div class=\"msg-menu\"><a href=\"#\" onclick=\"showMessageLinksDialog(" + msg.MID + "); return false\"></a></div>");
out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:" + tags + "</div>");
- out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.User.UName + "/" + msg.MID + "\" title=\"" + msg.TimestampString + " GMT\">" + formatDate(msg.TimeAgo, msg.TimestampString, locale) + "</a><a href=\"#\" onclick=\"showMessageLinksDialog(" + msg.MID + "); return false\" class=\"msg-menu\"></a></div>");
+ out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.User.UName + "/" + msg.MID + "\" title=\"" + msg.TimestampString + " GMT\">" + formatDate(msg.TimeAgo, msg.TimestampString, locale) + "</a></div>");
if (msg.Place != null) {
out.println(" <div class=\"msg-place\"><a href=\"/places/" + msg.Place.pid + "\">" + msg.Place.name + "</a></div>");
}
@@ -453,6 +459,7 @@ public class PageTemplates {
out.println(" <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"" + rb.getString("Add a comment") + "\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
out.println(" </form>");
}
+ out.println(" </div>");
out.println(" </li>");
}
}
diff --git a/src/java/com/juick/http/www/UserThread.java b/src/java/com/juick/http/www/UserThread.java
index 6fb63209..0d096aa1 100644
--- a/src/java/com/juick/http/www/UserThread.java
+++ b/src/java/com/juick/http/www/UserThread.java
@@ -95,7 +95,7 @@ public class UserThread {
msg.VisitorCanComment = visitor != null;
- String tags = (msg.Tags.isEmpty()) ? "" : PageTemplates.formatTags(msg.Tags, user);
+ String tags = (msg.Tags.isEmpty()) ? "" : PageTemplates.formatTags(msg.Tags, msg.User);
if (msg.ReadOnly) {
tags += " *readonly";
msg.VisitorCanComment = false;
@@ -122,9 +122,14 @@ public class UserThread {
txt = PageTemplates.formatMessage(msg.Text);
}
+ if (!tags.isEmpty()) {
+ tags = "<span class=\"msg-tags\">" + tags + "</span>";
+ }
+
out.println("<ul>");
out.println(" <li id=\"msg-" + mid + "\" class=\"msg msgthread\">");
out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.User.UName + "/\"><img src=\"//i.juick.com/a/" + msg.User.UID + ".png\" alt=\"" + msg.User.UName + "\"/></a></div>");
+ out.println(" <div class=\"msg-cont\">");
out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:" + tags + "</div>");
out.println(" <div class=\"msg-ts\">" + PageTemplates.formatJSLocalTime(msg.TimestampString) + "<a href=\"#\" onclick=\"showMessageLinksDialog(" + msg.MID + "); return false\" class=\"msg-menu\"></a></div>");
if (msg.Place != null) {
@@ -169,8 +174,9 @@ public class UserThread {
}
out.println("</div>");
}
-
+ out.println(" </div>");
out.println(" </li>");
+
out.println(" <li id=\"mtoolbar\"><ul>");
out.println(" <li><a href=\"/" + mid + "\"><div style=\"background-position: -64px 0\"></div>" + mid + "</a></li>");
if (visitor != null) {
@@ -294,6 +300,12 @@ public class UserThread {
out.print("display:none;");
}
out.println("\">");
+ out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.User.UName + "/\"><img src=\"//i.juick.com/a/" + msg.User.UID + ".png\" alt=\"" + msg.User.UName + "\"/></a></div>");
+ out.println(" <div class=\"msg-cont\">");
+ out.println(" <div class=\"msg-menu\"><a href=\"#\" onclick=\"showMessageLinksDialog(" + msg.MID + "," + msg.RID + "); return false\"></a></div>");
+ out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:</div>");
+ out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.MID + "#" + msg.RID + "\" title=\"" + msg.TimestampString + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.TimestampString, locale) + "</a></div>");
+ out.println(" <div class=\"msg-txt\">" + PageTemplates.formatMessage(msg.Text) + "</div>");
if (msg.AttachmentType != null) {
if (msg.AttachmentType.equals("mp4")) {
out.println(" <div class=\"msg-media\"><div id=\"video-" + msg.MID + "-" + msg.RID + "\"><a href=\"//i.juick.com/video/" + msg.MID + "-" + msg.RID + ".mp4\" onclick=\"inlinevideo('" + msg.MID + "-" + msg.RID + "'); return false\"><img src=\"//i.juick.com/thumbs/" + msg.MID + "-" + msg.RID + ".jpg\" alt=\"\"/></a></div></div>");
@@ -301,10 +313,6 @@ public class UserThread {
out.println(" <div class=\"msg-media\"><a href=\"//i.juick.com/p/" + msg.MID + "-" + msg.RID + "." + msg.AttachmentType + "\"><img src=\"//i.juick.com/photos-512/" + msg.MID + "-" + msg.RID + "." + msg.AttachmentType + "\" alt=\"\"/></a></div>");
}
}
- out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.User.UName + "/\"><img src=\"//i.juick.com/a/" + msg.User.UID + ".png\" alt=\"" + msg.User.UName + "\"/></a></div>");
- out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:</div>");
- out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.MID + "#" + msg.RID + "\" title=\"" + msg.TimestampString + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.TimestampString, locale) + "</a><a href=\"#\" onclick=\"showMessageLinksDialog(" + msg.MID + "," + msg.RID + "); return false\" class=\"msg-menu\"></a></div>");
- out.println(" <div class=\"msg-txt\">" + PageTemplates.formatMessage(msg.Text) + "</div>");
if (msg.VisitorCanComment) {
out.println(" <div class=\"msg-links\"><a href=\"#\" onclick=\"return showCommentForm(" + msg.MID + "," + msg.RID + ")\">" + rb.getString("Comment") + "</a></div>");
out.println(" <div class=\"msg-comment\" style=\"display: none\"></div>");
@@ -315,6 +323,7 @@ public class UserThread {
out.println(" <div class=\"msg-comments\"><a href=\"#\" onclick=\"return showMoreReplies(" + msg.RID + ")\">" + PageTemplates.formatReplies(childs, locale) + " more</a></div>");
}
+ out.println(" </div>");
out.println(" </li>");
if (ReplyTo == 0 && childs > 1 && replies.size() > 10) {
@@ -333,6 +342,12 @@ public class UserThread {
com.juick.Message msg = replies.get(i);
out.print(" <li id=\"" + msg.RID + "\" class=\"msg\">");
+ out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.User.UName + "/\"><img src=\"//i.juick.com/a/" + msg.User.UID + ".png\"></a></div>");
+ out.println(" <div class=\"msg-cont\">");
+ out.println(" <div class=\"msg-menu\"><a href=\"#\" onclick=\"showMessageLinksDialog(" + msg.MID + "," + msg.RID + "); return false\"></a></div>");
+ out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:</div>");
+ out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.MID + "#" + msg.RID + "\" title=\"" + msg.TimestampString + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.TimestampString, locale) + "</a></div>");
+ out.println(" <div class=\"msg-txt\">" + PageTemplates.formatMessage(msg.Text) + "</div>");
if (msg.AttachmentType != null) {
if (msg.AttachmentType.equals("mp4")) {
out.println(" <div class=\"msg-media\"><div id=\"video-" + msg.MID + "-" + msg.RID + "\"><a href=\"//i.juick.com/video/" + msg.MID + "-" + msg.RID + ".mp4\" onclick=\"inlinevideo('" + msg.MID + "-" + msg.RID + "'); return false\"><img src=\"//i.juick.com/thumbs/" + msg.MID + "-" + msg.RID + ".jpg\" alt=\"\"/></a></div></div>");
@@ -340,10 +355,6 @@ public class UserThread {
out.println(" <div class=\"msg-media\"><a href=\"//i.juick.com/p/" + msg.MID + "-" + msg.RID + "." + msg.AttachmentType + "\"><img src=\"//i.juick.com/photos-512/" + msg.MID + "-" + msg.RID + "." + msg.AttachmentType + "\" alt=\"\"/></a></div>");
}
}
- out.println(" <div class=\"msg-avatar\"><a href=\"/" + msg.User.UName + "/\"><img src=\"//i.juick.com/a/" + msg.User.UID + ".png\"></a></div>");
- out.println(" <div class=\"msg-header\"><a href=\"/" + msg.User.UName + "/\">@" + msg.User.UName + "</a>:</div>");
- out.println(" <div class=\"msg-ts\"><a href=\"/" + msg.MID + "#" + msg.RID + "\" title=\"" + msg.TimestampString + " GMT\">" + PageTemplates.formatDate(msg.TimeAgo, msg.TimestampString, locale) + "</a><a href=\"#\" onclick=\"showMessageLinksDialog(" + msg.MID + "," + msg.RID + "); return false\" class=\"msg-menu\"></a></div>");
- out.println(" <div class=\"msg-txt\">" + PageTemplates.formatMessage(msg.Text) + "</div>");
out.print(" <div class=\"msg-links\">/" + msg.RID);
if (msg.ReplyTo > 0) {
out.print(" " + rb.getString("in reply to") + " <a href=\"#" + msg.ReplyTo + "\">/" + msg.ReplyTo + "</a>");
@@ -352,6 +363,7 @@ public class UserThread {
out.println(" &#183; <a href=\"#\" onclick=\"return showCommentForm(" + msg.MID + "," + msg.RID + ")\">" + rb.getString("Comment") + "</a></div>");
out.println(" <div class=\"msg-comment\" style=\"display: none\"></div>");
}
+ out.println(" </div>");
out.println(" </li>");
}
}
diff --git a/web/style3.css b/web/style3.css
index 5e49b6cc..8a59f4ee 100644
--- a/web/style3.css
+++ b/web/style3.css
@@ -9,10 +9,10 @@ hr { height: 1px; background: #CCC; margin: 10px 0; }
pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; }
.u { text-decoration: underline; }
-#header, #topwrapper { width: 850px; }
+#header, #topwrapper { width: 860px; }
#content, #footer { width: 600px; }
#header, #topwrapper, #footer { margin: 0 auto; }
-#content { margin: 15px 0 0 250px; }
+#content { margin: 15px 0 0 260px; }
/********/
@@ -41,30 +41,31 @@ pre { white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap;
#geomap { width: 600px; height: 300px; margin-top: 1em; overflow: hidden; }
-.msg { padding: 15px; margin: 8px 0 16px 0; width: 570px; background: #FFF; }
-.ads { padding: 13px 10px 5px 10px; margin: 8px 0 16px 0; background: #FFF; }
-.msgthread { margin-bottom: 0; border-bottom: 1px solid #CCC; }
-.msg-avatar { float: left; height: 1px; overflow: visible; }
+.msg { margin: 10px 0 20px 0; }
+.ads { padding: 13px 10px 5px 10px; margin: 8px 0 16px 58px; background: #FFF; }
+.msgthread { margin-bottom: 0; }
+.msg-avatar { float: left; width: 48px; height: 48px; }
.msg-avatar img { width: 48px; height: 48px; vertical-align: top; }
-.msg-ts { float: right; font-size: small; vertical-align: top; }
+.msg-cont { background: #FFF; margin-left: 58px; padding: 12px 15px; width: 512px; }
+.msg-menu { float: right; width: 16px; height: 16px; }
+.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; margin: 5px 0; }
.msg-ts, .msg-ts>a { color: #999; }
-.msg-menu { width: 16px; height: 16px; display: inline-block; vertical-align: top; margin: 0 0 0 6px;
- 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 { float: left; margin: 0 0 8px 10px; max-width: 350px; overflow: hidden; }
-.msg-place { clear: both; font-size: small; margin: 8px 0 8px 58px; }
+.msg-place { font-size: small; }
.msg-place>a { color: #999; }
-.msg-txt { clear: both; margin: 8px 0 8px 58px; overflow: hidden; }
-.msg-media { text-align: center; margin: 8px 0 0px 58px; }
-.msg-links { font-size: small; margin: 8px 0 0 68px; color: #999; }
-.msg-comments { margin: 8px 0 0 58px; padding: 5px 0 0 10px; overflow: hidden; font-size: small; border-top: 1px solid #DDD; color: #AAA; }
-.msg-comment { margin: 8px 0 0 58px; }
-.msg-comment textarea { width: 505px; padding: 2px; resize: vertical; vertical-align: top; min-height: 12pt; height: 12pt; border: 1px solid #DDD; }
+.msg-txt { overflow: hidden; margin: 10px 0 12px 0; }
+.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; }
+.msg-comment { margin: 5px 0; }
+.msg-comment textarea { width: 506px; padding: 2px; resize: vertical; vertical-align: top; min-height: 12pt; height: 12pt; border: 1px solid #DDD; }
.msg-comment .narrow { width: 450px; }
.msg-comment input { width: 50px; margin-left: 6px; vertical-align: top; border: 1px solid #CCC; background: #EEE; color: #999; }
-.msg-recomms { margin: 10px 0 0 68px; overflow: hidden; font-size: small; color: #AAA; }
+.msg-recomms { margin-top: 10px; overflow: hidden; font-size: small; color: #AAA; text-indent: 10px; }
blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-left: 10px; }
-#mtoolbar { width: 600px; margin-left: 1px; background: #E5E5DD; }
+#mtoolbar { width: 542px; margin-left: 58px; background: #E5E5DD; border-top: 1px solid #CCC; }
#mtoolbar ul, #mtoolbar a { padding: 5px; }
#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; }
@@ -123,9 +124,9 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef
/******************************************************************************/
@media screen and (max-width: 850px) {
- #header,#topwrapper,#content,#footer,#mtoolbar { width: auto; min-width: 320px; margin: 0 auto; }
+ #header,#topwrapper,#content,#footer,#mtoolbar { width: auto; min-width: 310px; margin: 0 auto; }
- #hwrapper { position: fixed; top: 0; z-index: 1; }
+ #hwrapper { position: fixed; top: 0; z-index: 100; }
#topwrapper { margin-top: 3em; }
#header li { line-height: 42px; }
@@ -139,17 +140,17 @@ blockquote { border-left: 1px dashed #CCC; margin: 10px 0 10px 10px; padding-lef
#hi-logo { width: 32px; background-position: -110px 0; margin: 0; }
#hi-post { margin: 0; }
- .msg { width: auto; min-width: 280px; }
+ .msg,.msg-cont { width: auto; min-width: 280px; }
+ .msg-cont,.ads { margin-left: 0; }
+ .msg-avatar { margin: 10px 10px 0 10px; width: 40px; height: 40px; }
+ .msg-avatar img { width: 40px; height: 40px; }
.msg-comment textarea { width: 100%; }
- .msg-header { margin-bottom: 6px; }
- .msg-ts { clear: both; float: none; margin: 0 0 4px 58px; }
- .msg-txt { clear: both; margin: 8px 0 0 0; }
+ .msg-txt { margin: 8px 0 0 0; }
.msg-media { overflow: auto; }
- .msg-media,.msg-links,.msg-comment,.msg-comments,.msg-recomms { margin-left: 0px; }
.title2 h2 { font-size: large; }
.fix,.abs { position: static; }
#column { clear: both; margin: 0 3%; width: 44%; float: left; }
#rcol { float: left; width: 44%; margin: 20px 3% 0 3%; }
-}
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-23 04:08:30 +0000