add compact view, fix #267, merry christmas ;D

1 files changed, 110 insertions, 34 deletions

diff --git a/css/items.css b/css/items.css
index 9c5ca9ab2..19e5e197b 100644
--- a/css/items.css
+++ b/css/items.css
@@ -93,9 +93,9 @@
 	/**
 	 * Utils panel
 	 */
-	.feed_item .utils {
+	.feed_item .item_utils {
 		height: 28px;
-		margin: 0 0 0 14px;
+		margin: 0 0 0 8px;
 		float: left;
 	}
 
@@ -117,32 +117,108 @@
 		}
 
 		.feed_item .primary_item_utils li:first-child { margin: 0}
-		.feed_item .primary_item_utils li.star {
-			background-image: url('%appswebroot%/news/img/inactive_star.svg');
+		.feed_item .star,
+		.feed_item .external {
+			background: none;
 			background-repeat: no-repeat;
-			background-size: 21px 21px;
-			width: 21px;
-			height: 21px;
-			cursor: pointer;
+			background-position: center center;
+			background-size: 24px 24px;
+			width: 24px;
+			height: 24px;
+			border: none;
+			display: block;
+			margin: 0;
+			padding: 0;
+		}
+
+		.feed_item .star {
+			background-image: url('%appswebroot%/news/img/inactive_star.svg');
+		}
+
+		.feed_item .external {
+			background-image: url('%webroot%/core/img/places/link.svg');
+			opacity: 0.4;
 		}
 
-		.feed_item .primary_item_utils li.star.important,
-		.feed_item .primary_item_utils li.star:hover {
+		.feed_item .external:hover {
+			opacity: 1;
+		}
+
+		.feed_item .star.important,
+		.feed_item .star:hover {
 			background-image: url('%appswebroot%/news/img/active_star.svg');
 		}
-		.feed_item .primary_item_utils li.star.important:hover {
+		.feed_item .star.important:hover {
 			opacity:1;
 		}
-		.feed_item .primary_item_utils li.star:hover {
+		.feed_item .star:hover {
 			opacity:0.5;
 		}
 
 	/**
-	 * Heading which is used for plugins only
+	 * Heading for compact view
 	 */
-	.feed_item .item_heading {
+	.feed_item.compact .item_body,
+	.feed_item.compact .item_title,
+	.feed_item.compact .item_author,
+	.feed_item.compact .item_date,
+	.feed_item.compact .item_utils,
+	.feed_item.compact .item_bottom_utils,
+	.feed_item .item_heading,
+	.feed_item .item_link {
 		display: none;
 	}
+	.feed_item.compact.open .item_body,
+	.feed_item.compact.open .item_author,
+	.feed_item.compact.open .item_bottom_utils,
+	.feed_item.compact .item_heading,
+	.feed_item .item_link {
+		display: block;
+	}
+
+	.item_heading {
+		padding: 5px 20px;
+		background-color: #fafafa;
+	}
+
+	.item_heading h1 a {
+		font-weight: bold;
+		font-size: 13pt;
+		padding: 0 5px;
+		margin: 0;
+		line-height: 40px;
+	}
+
+	.read .item_heading h1 a {
+		color: #888;
+	}
+
+	.feed_item.compact {
+		padding: 0 !important;
+		min-height: 0;
+	}
+
+	.feed_item.compact .item_body {
+		padding-bottom: 40px;
+	}
+
+	.feed_item.compact.open .item_heading {
+		margin-bottom: 15px;
+		border-bottom: 1px dashed #ddd;
+	}
+
+	.item_heading .star,
+	.item_heading .external {
+		float: left;
+		margin: 7px 12px 0 0;
+	}
+
+	.item_heading .timeago {
+		display: block;
+		float: right;
+		line-height: 40px;
+	}
+
 
 	/**
 	 * Feed title
@@ -220,7 +296,7 @@
 		padding: 14px 42px 0 49px;
 	}
 
-	.feed_item .body {
+	.feed_item .item_body {
 		padding: 10px 42px 0 42px;
 		max-width: 770px;
 		font-size: 14px;
@@ -230,16 +306,16 @@
 		height: 80px;*/
 	}
 
-	.feed_item .body.opened {
+	.feed_item .item_body.opened {
 
 	}
 
-		.feed_item .body p {
+		.feed_item .item_body p {
 			line-height: 1.5;
 			margin: 7px 0 14px 0;
 		}
 
-		.feed_item .body img, .feed_item .body table {
+		.feed_item .item_body img, .feed_item .item_body table {
 			max-width: 100%;
 			height: auto;
 			overflow: auto;
@@ -247,19 +323,19 @@
 			white-space:normal;
 		}
 
-		.feed_item .body > img:first-child {
+		.feed_item .item_body > img:first-child {
 			padding: 0 14px 0 0;
 			float: left;
 		}
 
-		.feed_item .body h1, .feed_item .body h2 {
+		.feed_item .item_body h1, .feed_item .item_body h2 {
 			font-size: 17px;
 			font-weight: bold;
 			color: #222;
 			margin: 21px 0 0 0;
 		}
 
-		.feed_item .body h3 {
+		.feed_item .item_body h3 {
 			font-size: 15px;
 			font-weight: bold;
 			color: #222;
@@ -267,57 +343,57 @@
 			text-decoration: underline;
 		}
 
-		.feed_item .body > div {
+		.feed_item .item_body > div {
 			margin: 7px 0;
 		}
 
-		.feed_item .body a {
+		.feed_item .item_body a {
 			color: #0000ff;
 			text-decoration: underline;
 		}
 
-		.feed_item .body ul {
+		.feed_item .item_body ul {
 			margin: 7px 0;
 			padding-left: 14px;
 			list-style-type: disc;
 		}
 
-		.feed_item .body ol {
+		.feed_item .item_body ol {
 			margin: 7px 0;
 			padding-left: 21px;
 		}
 
-			.feed_item .body ul li {
+			.feed_item .item_body ul li {
 				cursor: default;
 				line-height: 21px;
 			}
 
-		.feed_item .body pre {
+		.feed_item .item_body pre {
 			padding: 7px 7px 7px 14px;
 			background-color: #dadada;
 			border: 1px solid #ccc;
 			margin: 7px 0 14px 0;
 			overflow-y: auto;
 		}
-			.feed_item .body pre::-webkit-scrollbar {
+			.feed_item .item_body pre::-webkit-scrollbar {
 				height: 10px;
 			}
 
-			.feed_item .body pre::-webkit-scrollbar-thumb {
+			.feed_item .item_body pre::-webkit-scrollbar-thumb {
 				background: #333;
 			}
 
-			.feed_item .body pre::-webkit-scrollbar-track-piece {
+			.feed_item .item_body pre::-webkit-scrollbar-track-piece {
 				background: #ddd;
 			}
 
-			.feed_item .body code,
-			.feed_item .body pre {
+			.feed_item .item_body code,
+			.feed_item .item_body pre {
 				font-family: monospace;
 				font-size: 16px;
 			}
 
-		.feed_item .body blockquote {
+		.feed_item .item_body blockquote {
 			border-left: 1px solid rgb(210,210,210);
 			margin: 25px 0;
 			padding: 0 0 0 15px;
@@ -328,7 +404,7 @@
 /**
  * Line with utils at the bottom
  */
-.bottom_utils {
+.item_bottom_utils {
 	width: 100%;
 	height: 35px;
 	margin: 0;