Merge pull request #179 from tosdr/styling-point-view-page

[enh] restyling the point view page

Author: piks3l

app/assets/stylesheets/pages/_point.scss

@@ -1,7 +1,12 @@
 .point-holder {
-  margin-right: auto;
-  margin-left: auto;
-  max-width: 60rem;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.article-point-header {
+  padding-top: 10px;
+  font-weight: bolder;
+  font-size: larger;
 }
 
 .border {

app/views/points/index.html.erb

@@ -2,6 +2,8 @@
   <h1 class="fw2 mv3">
     All Contributions
   </h1>
+  <%= link_to 'Add A Point', new_point_path, class: 'btn btn-primary' %>
+
 </header>
 
 <%= render "shared/search" %>

app/views/points/show.html.erb

@@ -1,5 +1,63 @@
 <div class="point-holder">
 
+  <div class="article-holder">
+    <div class="article-point-header">
+      <ul class="point-info">
+        <li class="point-items">
+          <div class="point-service">
+            <span class="bolder">Service:</span> <%= @point.service.name %>
+          </div>
+          <div class="point-status">
+            <span class="bolder">Status:</span> <%= @point.status %>
+          </div>
+          <div class="point-rating">
+            <span class="bolder">Rating:</span> <%= @point.rating %>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="article-holder">
+
+    <div class="article-point-header">
+      <h3 class="lighter"><%= @point.title %></h3>
+    </div>
+
+    <div class="article-point-text-holder p15">
+      <div class="article-point-text pad-left pad-right">
+        <span class="bolder">Analysis:</span> <%= @point.analysis %>
+      </div>
+    </div>
+
+  </div>
+
+
+  <% if @point.reasons.any? %>
+
+  <div class="status-changes article-holder border mw6 p15">
+
+    <table class="table table-striped">
+      <thead class="thead thead-dark">
+        <th scope="col">STATUS UPDATES</th>
+        <th scope="col">REASON</th>
+        <th scope="col">WHEN</th>
+      </thead>
+      <% @point.reasons.each do |reason| %>
+      <tbody>
+        <tr>
+          <th scope="row"><%= reason.status %></th>
+          <td><%= reason.content %></td>
+          <td><%= time_ago_in_words reason.created_at %> ago</td>
+        </tr>
+      </tbody>
+      <% end %>
+    </table>
+
+  </div>
+
+
+  <% end %>
   <div class="m15 mw6">
     <ul class="point-info">
       <li class="point-items">
@@ -18,11 +76,11 @@
         </div>
         <div class="pl15">
           <% if @point.status == "approved" %>
-            <% if !@point.is_featured? %>
-              <%= link_to 'Feature', featured_point_path(@point), method: :put, class: 'btn btn-primary' %>
-            <% else %>
-             <%= link_to 'Un-Feature', featured_point_path(@point), method: :put, class: 'btn btn-warning' %>
-            <% end %>
+          <% if !@point.is_featured? %>
+          <%= link_to 'Feature', featured_point_path(@point), method: :put, class: 'btn btn-primary' %>
+          <% else %>
+          <%= link_to 'Un-Feature', featured_point_path(@point), method: :put, class: 'btn btn-warning' %>
+          <% end %>
           <% end %>
         </div>
         <div class="pl15">
@@ -31,65 +89,7 @@
         <% end %>
       </li>
     </ul>
-</div>
-
-<div class="article-holder border mw6">
-  <div class="article-header">
-    <ul class="point-info">
-      <li class="point-items">
-        <div class="point-service">
-          <span class="bolder">Service:</span> <%= @point.service.name %>
-        </div>
-        <div class="point-status">
-          <span class="bolder">Status:</span> <%= @point.status %>
-        </div>
-        <div class="point-rating">
-          <span class="bolder">Rating:</span> <%= @point.rating %>
-        </div>
-      </li>
-    </ul>
-  </div>
-</div>
-
-<div class="article-holder border mw6">
-
-  <div class="article-header">
-  <h3 class="lighter smaller-title"><%= @point.title %></h3>
-  </div>
-
-  <div class="article-text-holder bgw p15">
-  <div class="article-text pad-left pad-right">
-    <span class="bolder">Analysis:</span> <%= @point.analysis %>
-  </div>
   </div>
 
 </div>
 
-
-<% if @point.reasons.any? %>
-
-<div class="status-changes article-holder border mw6 p15">
-
-  <table class="table table-striped">
-    <thead class="thead thead-dark">
-      <th scope="col">STATUS UPDATES</th>
-      <th scope="col">REASON</th>
-      <th scope="col">WHEN</th>
-    </thead>
-    <% @point.reasons.each do |reason| %>
-    <tbody>
-      <tr>
-        <th scope="row"><%= reason.status %></th>
-        <td><%= reason.content %></td>
-        <td><%= time_ago_in_words reason.created_at %> ago</td>
-      </tr>
-    </tbody>
-  <% end %>
-</table>
-
-</div>
-
-<% end %>
-
-</div>
-