clean up content screen prototype

refs TryGhost/Ghost#7860 - load 30 posts per page - clean up unnecessary styles, match class name to component name - start moving towards desired content/styles end goal
TryGhost · Feb 4, 2017 · 9abe999 · 9abe999
1 parent 0affec3
commit 9abe999
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 158 deletions.
diff --git a/app/components/gh-posts-list-item.js b/app/components/gh-posts-list-item.js
@@ -3,6 +3,8 @@ import Component from 'ember-component';
 import {htmlSafe} from 'ember-string';
 import computed, {alias, equal} from 'ember-computed';
 import injectService from 'ember-service/inject';
+import $ from 'jquery';
+import {isBlank} from 'ember-utils';
 
 // ember-cli-shims doesn't export these
 const {Handlebars, ObjectProxy, PromiseProxyMixin} = Ember;
@@ -11,6 +13,7 @@ const ObjectPromiseProxy = ObjectProxy.extend(PromiseProxyMixin);
 
 export default Component.extend({
     tagName: 'li',
+    classNames: ['gh-posts-list-item'],
 
     post: null,
     previewIsHidden: false,
@@ -43,6 +46,23 @@ export default Component.extend({
         });
     }),
 
+    // HACK: this is intentionally awful due to time constraints
+    // TODO: find a better way to get an excerpt! :)
+    subText: computed('post.{html,metaDescription}', function () {
+        let html = this.get('post.html');
+        let metaDescription = this.get('post.metaDescription');
+        let text;
+
+        if (!isBlank(metaDescription)) {
+            text = metaDescription;
+        } else {
+            let $html = $(`<div>${html}</div>`);
+            text = $html.text();
+        }
+
+        return htmlSafe(`${text.slice(0, 80)}&hellip;`);
+    }),
+
     click() {
         this.sendAction('onClick', this.get('post'));
     },

diff --git a/app/routes/posts/index.js b/app/routes/posts/index.js
@@ -7,6 +7,7 @@ import $ from 'jquery';
 
 export default AuthenticatedRoute.extend(InfinityRoute, ShortcutsRoute, {
 
+    perPage: 30,
     perPageParam: 'limit',
     totalPagesParam: 'meta.pagination.pages',
 
@@ -22,7 +23,8 @@ export default AuthenticatedRoute.extend(InfinityRoute, ShortcutsRoute, {
                     ? `${filterSettings.filter}+author:${user.get('slug')}` : `author:${user.get('slug')}`;
             }
 
-            let paginationSettings = assign({perPage: 15, startingPage: 1}, filterSettings);
+            let perPage = this.get('perPage');
+            let paginationSettings = assign({perPage, startingPage: 1}, filterSettings);
 
             return this.infinityModel('post', paginationSettings);
         });
@@ -86,7 +88,7 @@ export default AuthenticatedRoute.extend(InfinityRoute, ShortcutsRoute, {
         queryParamsDidChange() {
             this.refresh();
             // reset the scroll position
-            $('.content-list-content').scrollTop(0);
+            $('.content-list').scrollTop(0);
         },
 
         newPost() {

diff --git a/app/styles/layouts/content.css b/app/styles/layouts/content.css
@@ -8,73 +8,100 @@
 }
 
 .basic-filter {
-    display: flex;
-    justify-content: space-between;
+    margin-top: 0.5em;
     border-bottom: #dfe1e3 1px solid;
 }
 
-.basic-filter > ul {
+.basic-filter ul {
     display: flex;
     flex-direction: row;
     margin-bottom: 0;
+    padding-left: 0.7em;
 }
 
-.basic-filter > ul li {
+.basic-filter li {
     list-style: none;
     display: inline-block;
-    margin-right: 1em;
+    margin-bottom: 0;
+    padding: 0 0.5em 10px 0.5em;
+}
+
+.basic-filter li.active {
+    border-bottom: #dfe1e3 3px solid ;
+}
+
+.basic-filter li a {
+    color: var(--midgrey);
+}
+
+.basic-filter li a.active {
+    font-weight: bold;
+    color: var(--darkgrey);
+}
+
+@media (max-width: 500px) {
+    .basic-filter ul {
+        padding-left: 8px !important;
+    }
 }
 
-.basic-filter > ul a.active {
-    text-decoration: underline;
+@media (max-width: 800px) {
+    .basic-filter ul {
+        padding-left: 15px;
+    }
 }
 
 /* Content List
 /* ---------------------------------------------------------- */
 
 .content-list {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    border-right: #dfe1e3 1px solid;
-    background: #fff;
+    position: relative;
+    overflow-y: auto;
 }
 
-@media (max-width: 900px) {
-    .content-list {
-        right: 0;
-        z-index: 500;
-        width: auto;
-        border: none;
-    }
+.content-list ol {
+    margin: 20px 4vw;
+    padding: 0;
+    list-style: none;
 }
 
-.content-list .content-list-content {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
+.gh-posts-list-item {
+    position: relative;
+    margin: 0;
+    padding: 0;
+    border-bottom: #dfe1e3 1px solid;
 }
 
-.content-list .entry-title {
-    margin: 0;
+.gh-posts-list-item a {
+    display: block;
+    padding: 19px 25px 22px 20px;
+    color: rgba(0, 0, 0, 0.5);
+}
+
+.gh-posts-list-item a:hover {
+    text-decoration: none;
+}
+
+.gh-posts-list-item .entry-title {
+    margin: 0 0 0.2em 0;
     font-size: 1.5rem;
     line-height: 1.3em;
     font-weight: normal;
 }
 
-.content-list .entry-meta {
+.gh-posts-list-item p {
+    margin: 0 0 1em 0;
+    font-size: 0.8em;
+    line-height: 1.5em;
+}
+
+.gh-posts-list-item .entry-meta {
     position: relative;
     margin-top: 7px;
     line-height: 18px;
 }
 
-.content-list .avatar {
+.gh-posts-list-item .avatar {
     position: relative;
     float: left;
     margin: 1px 10px 0px 0;
@@ -85,7 +112,7 @@
     border-radius: 18px;
 }
 
-.content-list .avatar img {
+.gh-posts-list-item .avatar img {
     position: absolute;
     top: 0;
     left: 0;
@@ -94,73 +121,50 @@
     opacity: 0;
 }
 
-.content-list .status,
-.content-list .author {
+.gh-posts-list-item .status,
+.gh-posts-list-item .author {
     font-size: 1.3rem;
     font-weight: 300;
     transition: opacity 0.15s linear;
 }
 
-.content-list .avatar:hover + .author + .status {
+.gh-posts-list-item .avatar:hover + .author + .status {
     opacity: 0;
 }
 
-.content-list .avatar:hover + .author {
+.gh-posts-list-item .avatar:hover + .author {
     opacity: 1;
 }
 
-.content-list .author {
+.gh-posts-list-item .author {
     position: absolute;
     bottom: 0;
     left: 28px;
     opacity: 0;
 }
 
-.content-list .status .draft {
+.gh-posts-list-item .status .draft {
     color: var(--red);
 }
 
-.content-list .status .scheduled {
+.gh-posts-list-item .status .scheduled {
     color: var(--green);
 }
 
-.content-list ol {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.content-list li {
-    position: relative;
-    margin: 0;
-    padding: 0;
-    border-bottom: #dfe1e3 1px solid;
-}
-
-.content-list li a {
-    display: block;
-    padding: 19px 25px 22px 20px;
-    color: rgba(0, 0, 0, 0.5);
-}
-
-.content-list li a:hover {
-    text-decoration: none;
-}
-
 @media (max-width: 400px) {
-    .content-list li a {
+    .gh-posts-list-item a {
         padding: 15px;
     }
 }
 
 @media (max-width: 900px) {
-    .content-list li a {
+    .gh-posts-list-item a {
         padding-right: 40px;
     }
 }
 
 @media (min-width: 901px) {
-    .content-list li a:after {
+    .gh-posts-list-item a:after {
         display: none;
     }
 }

diff --git a/app/templates/-posts-header.hbs b/app/templates/-posts-header.hbs
@@ -0,0 +1,26 @@
+<header class="view-header">
+    {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Your stories</span>{{/gh-view-title}}
+    <section class="view-actions">
+        {{link-to "New Story" "editor.new" class="btn btn-green" title="New Story" data-test-new-post-button=true}}
+    </section>
+</header>
+
+<section class="basic-filter">
+    <ul>
+        {{#active-link}}
+            {{link-to "All" "posts.index" (query-params type=null) data-test-all-filter-link=true}}
+        {{/active-link}}
+        {{#active-link}}
+            {{link-to "Drafts" "posts.index" (query-params type="draft") data-test-drafts-filter-link=true}}
+        {{/active-link}}
+        {{#active-link}}
+            {{link-to "Published" "posts.index" (query-params type="published") data-test-published-filter-link=true}}
+        {{/active-link}}
+        {{#active-link}}
+            {{link-to "Scheduled" "posts.index" (query-params type="scheduled") data-test-scheduled-filter-link=true}}
+        {{/active-link}}
+        {{#active-link}}
+            {{link-to "Pages" "posts.index" (query-params type="page") data-test-pages-filter-link=true}}
+        {{/active-link}}
+    </ul>
+</section>
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -27,4 +27,4 @@
                           modifier="wide"}}
 {{/if}}
 
-{{ember-load-remover}}
+{{ember-load-remover}}
diff --git a/app/templates/components/gh-posts-list-item.hbs b/app/templates/components/gh-posts-list-item.hbs
@@ -1,17 +1,15 @@
 {{#link-to "editor.edit" post.id class="permalink" title="Edit this post"}}
     <h3 class="entry-title">{{post.title}}</h3>
+    <p>{{subText}}</p>
+
     <section class="entry-meta">
-        <span class="avatar" style={{authorAvatarBackground}}>
-            <img src="{{authorAvatar}}" title="{{authorName}}">
-        </span>
-        <span class="author">{{authorName}}</span>
         <span class="status">
             {{#if isPublished}}
                 {{#if post.page}}
                     <span class="page">Page</span>
                 {{else}}
                     <time datetime="{{post.publishedAtUTC}}" class="date published">
-                        Published {{gh-format-timeago post.publishedAtUTC}}
+                        Published {{gh-format-timeago post.publishedAtUTC}}.
                     </time>
                 {{/if}}
             {{else}}
@@ -26,6 +24,9 @@
                     <span class="draft">Draft</span>
                 {{/if}}
             {{/if}}
+
+            Last edited {{gh-format-timeago post.updatedAtUTC}}
+            &ndash; by {{authorName}}
         </span>
     </section>
 {{/link-to}}
diff --git a/app/templates/posts-loading.hbs b/app/templates/posts-loading.hbs
@@ -1,30 +1,5 @@
 <section class="gh-view gh-content-view-container">
-    <header class="view-header">
-        {{#gh-view-title openMobileMenu="openMobileMenu"}}<span>Content</span>{{/gh-view-title}}
-        <section class="view-actions">
-            {{link-to "New Post" "editor.new" class="btn btn-green" title="New Post"}}
-        </section>
-    </header>
-
-    <section class="basic-filter">
-        <ul>
-            <li>
-                {{link-to "All" "posts.index" (query-params type=null) data-test-all-filter-link=true}}
-            </li>
-            <li>
-                {{link-to "Drafts" "posts.index" (query-params type="draft") data-test-drafts-filter-link=true}}
-            </li>
-            <li>
-                {{link-to "Published" "posts.index" (query-params type="published") data-test-published-filter-link=true}}
-            </li>
-            <li>
-                {{link-to "Scheduled" "posts.index" (query-params type="scheduled") data-test-scheduled-filter-link=true}}
-            </li>
-            <li>
-                {{link-to "Pages" "posts.index" (query-params type="page") data-test-pages-filter-link=true}}
-            </li>
-        </ul>
-    </section>
+    {{partial "posts-header"}}
 
     <div class="view-container">
         {{gh-loading-spinner}}