feat(news): rework list design and add comment view

Rework the design of the news list and single news view. Add the comment
box to the news view.

---

 scss/include/modules/_news.scss | 28 ++++++++++++++++++++++++
 scss/style.scss                 |  1 +
 src/views/news/index.html       | 24 ++++++++++-----------
 src/views/news/view.html        | 39 ++++++++++++++++++++++------------
 4 files changed, 66 insertions(+), 26 deletions(-)

Author: MarcScheib

scss/include/modules/_news.scss

@@ -0,0 +1,28 @@
+.news-card {
+  .card-text {
+    padding-top: 15px;
+  }
+}
+
+.news-card-header {
+  img {
+    height: 50px;
+    margin-right: 10px;
+    width: 50px;
+  }
+
+  h4 {
+    margin-bottom: 0.1rem;
+  }
+}
+
+.news-card-comment {
+  img {
+    margin-right: 10px;
+    width: 32px;
+  }
+
+  .media-body .form-control {
+    font-size: .8rem;
+  }
+}

scss/style.scss

@@ -14,4 +14,5 @@
 @import "include/_animation";
 
 /** modules **/
+@import "include/modules/_news";
 @import "include/modules/_profile";

src/views/news/index.html

@@ -5,19 +5,17 @@
         <div if.bind="news.length == 0" class="card card-default card-block">
             <p class="card-text">There are no news available currently.</p>
         </div>
-        <div class="card card-default card-block" repeat.for="item of news">
-          <h4 class="card-title">${item.title}<br>
-            <small>on
-              <time>${item.created_at}</time>
-            </small>
-          </h4>
-          <p class="card-text">${item.text}</p>
-
-          <p class="card-text text-right">
-            posted by <a href="#/profiles/view/${item.user_id}">${item.user.username}</a>
-            -
-            <a href="#/news/view/${item.id}">View</a>
-          </p>
+        <div class="card card-default card-block news-card" repeat.for="item of news">
+          <div class="news-card-header">
+            <a href="#/profiles/view/${item.user_id}" class="pull-left">
+              <!-- Todo -->
+              <img alt="${item.user.username}" src="http://lr.local/img/avatar/${item.user.avatar}">
+            </a>
+            <h4><a href="#/news/view/${item.id}">${item.title}</a></h4>
+            <a href="#/profiles/view/${item.user_id}">${item.user.username}</a>
+            <small class="text-muted">on ${item.created_at}</small>
+          </div>
+          <div class="card-text">${item.text}</div>
         </div>
       </div>
     </div>

src/views/news/view.html

@@ -2,24 +2,37 @@
   <section class="au-animate">
     <div class="row">
       <div class="col-lg-12">
-        <div class="card card-default card-block" if.bind="news">
-          <h4 class="card-title">${news.title}<br>
-            <small>on
-              <time>${news.created_at}</time>
-            </small>
-          </h4>
-          <p class="card-text">${news.text}</p>
-
-          <p class="card-text text-right">
-            posted by <a href="#/profiles/view/${news.user_id}">${news.user.username}</a>
-          </p>
-        </div>
-
         <div class="card card-default card-block" if.bind="!news">
           <p class="card-text">
             The selected news entry is not available.
           </p>
         </div>
+
+        <div class="card news-card">
+          <div class="card-default card-block" if.bind="news">
+            <div class="news-card-header">
+              <a href="#/profiles/view/${news.user_id}" class="pull-left">
+                <!-- Todo -->
+                <img alt="${news.user.username}" src="http://lr.local/img/avatar/${news.user.avatar}">
+              </a>
+              <h4><a href="#/news/view/${news.id}">${news.title}</a></h4>
+              <a href="#/profiles/view/${news.user_id}">${news.user.username}</a>
+              <small class="text-muted">on ${news.created_at}</small>
+            </div>
+            <div class="card-text">${news.text}</div>
+          </div>
+          <div class="card-footer">
+            <div class="news-card-comment">
+              <!-- Todo: add logged in user data -->
+              <a href="#/profiles/view/${news.user_id}" class="pull-left">
+                <img alt="${news.user.username}" src="http://lr.local/img/avatar/${news.user.avatar}">
+              </a>
+              <div class="media-body">
+                <textarea class="form-control" placeholder="Write comment..."></textarea>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>