fix autopaging and marking read, render items

1 files changed, 77 insertions, 153 deletions

diff --git a/css/content.css b/css/content.css
index 3382f22fa..084b26609 100644
--- a/css/content.css
+++ b/css/content.css
@@ -40,7 +40,7 @@
 }
 
 
-#app-content.loading > ul {
+#app-content.icon-loading > ul {
     display: none;
 }
 
@@ -48,115 +48,69 @@
 /**
  * Rules for a single feed item
  */
-.feed_item {
+.item {
     border-top: 1px solid #ccc;
     min-height: 120px;
-    background-image: linear-gradient(top, rgb(248,248,248) 0, rgb(255,255,255) 84px);
-    padding: 40px 5px 10px 5px;
+    background-image: linear-gradient(top, #F8F8F8 0, #FFF 84px);
+    padding: 35px 5px 20px 5px;
     cursor: default;
 }
 
-.feed_item.viewed {
+.item.viewed {
     border-right: 5px solid #F28627;
 }
 
 
-.feed_item:first-child {
+.item:first-child {
     border-top: 0;
 }
 
     /**
      * Utils panel
      */
-    .feed_item .item_utils {
-        height: 28px;
-        margin: 0 0 0 8px;
+    .item .star {
+        height: 25px;
+        width: 25px;
+        margin: 2px 0 0 6px;
         float: left;
+        border: 0;
+        background-color: #FFF;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-image: url('../img/inactive_star.svg');
     }
 
-    /**
-     * Primary feed utils which are always shown
-     */
-    .feed_item .primary_item_utils {
-        float: left;
+    .item .starred,
+    .item .star:hover {
+        background-image: url('../img/active_star.svg');
     }
 
-        .feed_item .primary_item_utils li {
-            display: inline-block;
-            line-height: 21px;
-            font-size: 14px;
-            color: #aaa;
-            float: left;
-            margin-left: ;
-            cursor: default;
-        }
-
-        .feed_item .primary_item_utils li:first-child { margin: 0}
-        .feed_item .star,
-        .feed_item .external {
-            background: none;
-            background-repeat: no-repeat;
-            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('../img/inactive_star.svg');
-        }
-
-        .feed_item .external {
-            background-image: url('../img/link.svg');
-            opacity: 0.4;
-        }
-
-        .feed_item .external:hover {
-            opacity: 1;
-        }
-
-        .feed_item .star.important,
-        .feed_item .star:hover {
-            background-image: url('../img/active_star.svg');
-        }
-        .feed_item .star.important:hover {
-            opacity:1;
-        }
-        .feed_item .star:hover {
-            opacity:0.5;
-        }
-
     /**
      * Heading for compact view
      */
-    .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 {
+    .compact .item .body,
+    .compact .item .title,
+    .compact .item .author,
+    .compact .item .date,
+    .compact .item .bottom-utils,
+    .item .heading,
+    .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 {
+    .compact .item.open .body,
+    .compact .item.open .author,
+    .compact .item.open .bottom-utils,
+    .compact .item .heading,
+    .item .link {
         display: block;
     }
 
-    .item_heading {
+    .heading {
         padding: 5px 20px;
         background-color: #fafafa;
     }
 
-    .item_heading h1 a {
+    .heading h1 a {
         font-weight: bold;
         font-size: 13pt;
         padding: 0 5px;
@@ -164,35 +118,35 @@
         line-height: 40px;
     }
 
-    .read .item_heading h1 a {
+    .read .heading h1 a {
         color: #888;
     }
 
-    .feed_item.compact {
+    .compact .item {
         padding: 0 !important;
         min-height: 0;
     }
 
-    .feed_item.compact .item_body {
+    .compact .item .body {
         padding-bottom: 40px;
     }
 
-    .feed_item.compact.open .item_heading {
+    .compact .item.open .heading {
         margin-bottom: 15px;
         border-bottom: 1px dashed #ddd;
     }
 
-    .item_heading .star {
+    .heading .star {
         float: left;
         margin: 7px 12px 0 0;
     }
 
-    .item_heading .external {
+    .heading .external {
         float: left;
         margin: 8px 12px 0 0;
     }
 
-    .item_heading .timeago {
+    .heading .timeago {
         display: block;
         float: right;
         line-height: 40px;
@@ -202,17 +156,17 @@
     /**
      * Feed title
      */
-    .feed_item .item_title {
+    .item .title {
         font-size: 19px;
-        margin: 0 182px 10px 42px;
+        margin: 4px 182px 4px 42px;
         font-weight: bold;
         word-wrap: break-word;
     }
 
-        .feed_item .item_title a {
+        .item .title a {
             color: #222;
         }
-            .feed_item .item_title a:hover {
+            .item .title a:hover {
                 color: #222;
                 text-decoration: underline;
             }
@@ -220,37 +174,28 @@
     /**
      * Feed title when read
      */
-    .feed_item.read .item_title {
+    .item.read .title {
         font-weight: normal;
     }
 
-        .feed_item.read .item_title a {
+        .item.read .title a {
             color: #888;
         }
 
     /**
-     * Title of the feed to which the item belongs
-     */
-    .feed_item .item_feed_title {
-        color: #aaa;
-        font-size: 15px;
-        margin-left: 42px;
-    }
-
-    /**
      * Author of the item
      */
-    .feed_item .item_author {
+    .item .author {
         color: #aaa;
         font-size: 15px;
         margin: 3px 0 5px 42px;
     }
 
-        .feed_item .item_author a {
+        .item .author a {
             color: inherit;
         }
 
-            .feed_item .item_author a:hover {
+            .item .author a:hover {
                 text-decoration: underline;
             }
 
@@ -264,18 +209,18 @@
     .timeago {
         float: right;
         color: #aaa;
-        margin: 0 17px 0 0;
+        margin: 4px 17px 0 0;
         font-size: 15px;
     }
 
     /**
      * Body of the feed item
      */
-    .feed_item .enclosure {
+    .item .enclosure {
         padding: 14px 42px 0 49px;
     }
 
-    .feed_item .item_body {
+    .item .body {
         padding: 10px 42px 0 42px;
         max-width: 770px;
         font-size: 14px;
@@ -285,16 +230,16 @@
         height: 80px;*/
     }
 
-    .feed_item .item_body.opened {
+    .item .body.opened {
 
     }
 
-        .feed_item .item_body p {
+        .item .body p {
             line-height: 1.5;
             margin: 7px 0 14px 0;
         }
 
-        .feed_item .item_body img, .feed_item .item_body table {
+        .item .body img, .item .body table {
             max-width: 100%;
             height: auto;
             overflow: auto;
@@ -302,20 +247,20 @@
             white-space:normal;
         }
 
-        .feed_item .item_body > img:first-child,
-        .feed_item .item_body > div:first-child > img:first-child {
+        .item .body > img:first-child,
+        .item .body > div:first-child > img:first-child {
             padding: 0 14px 0 0;
             float: left;
         }
 
-        .feed_item .item_body h1, .feed_item .item_body h2 {
+        .item .body h1, .item .body h2 {
             font-size: 17px;
             font-weight: bold;
             color: #222;
             margin: 21px 0 0 0;
         }
 
-        .feed_item .item_body h3 {
+        .item .body h3 {
             font-size: 15px;
             font-weight: bold;
             color: #222;
@@ -323,57 +268,57 @@
             text-decoration: underline;
         }
 
-        .feed_item .item_body > div {
+        .item .body > div {
             margin: 7px 0;
         }
 
-        .feed_item .item_body a {
+        .item .body a {
             color: #0000ff;
             text-decoration: underline;
         }
 
-        .feed_item .item_body ul {
+        .item .body ul {
             margin: 7px 0;
             padding-left: 14px;
             list-style-type: disc;
         }
 
-        .feed_item .item_body ol {
+        .item .body ol {
             margin: 7px 0;
             padding-left: 21px;
         }
 
-            .feed_item .item_body ul li {
+            .item .body ul li {
                 cursor: default;
                 line-height: 21px;
             }
 
-        .feed_item .item_body pre {
+        .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 .item_body pre::-webkit-scrollbar {
+            .item .body pre::-webkit-scrollbar {
                 height: 10px;
             }
 
-            .feed_item .item_body pre::-webkit-scrollbar-thumb {
+            .item .body pre::-webkit-scrollbar-thumb {
                 background: #333;
             }
 
-            .feed_item .item_body pre::-webkit-scrollbar-track-piece {
+            .item .body pre::-webkit-scrollbar-track-piece {
                 background: #ddd;
             }
 
-            .feed_item .item_body code,
-            .feed_item .item_body pre {
+            .item .body code,
+            .item .body pre {
                 font-family: monospace;
                 font-size: 16px;
             }
 
-        .feed_item .item_body blockquote {
+        .item .body blockquote {
             border-left: 1px solid rgb(210,210,210);
             margin: 25px 0;
             padding: 0 0 0 15px;
@@ -384,7 +329,7 @@
 /**
  * Line with utils at the bottom
  */
-.item_bottom_utils {
+.item .bottom-utils  {
     width: 100%;
     height: 35px;
     margin: 0;
@@ -393,46 +338,25 @@
     -moz-box-sizing: border-box;
 }
 
-    /**
-     * Secondary feed items which are only shown on hover
-     */
-    .feed_item .secondary_item_utils {
+    .item .bottom-utils ul {
         float: right;
         margin: 0 17px;
     }
 
 
-    .feed_item .secondary_item_utils, .feed_item .secondary_item_utils a {
+    .item .bottom-utils,
+    .item .bottom-utils a {
         color: #000;
     }
 
-    .feed_item:hover .secondary_item_utils li {
+    .item:hover .bottom-utils li {
         display: inline-block;
     }
 
-        .feed_item .secondary_item_utils li {
+        .item .bottom-utils li {
             padding-left: 25px;
-            display: none;
-        }
-
-        /**
-         * Secondary feed items which are only shown on hover
-         */
-        .feed_item .show_keep_unread .keep_unread{
-            display: block;
-        }
-
-        .feed_item li.share_link {
-            background-image: url('../img/share.svg');
-            background-repeat: no-repeat;
-            background-position: right center;
-            padding-right: 20px;
-        }
-
-        .feed_item:hover .secondary_item_utils li.keep_unread {
-            cursor: pointer;
         }
 
-        .feed_item .secondary_item_utils li input[type=checkbox]{
+        .item .bottom-utils li input[type=checkbox]{
             margin-left: 5px;
         }