From 36400c75433d2734fe88dffebc3294b5bbf62464 Mon Sep 17 00:00:00 2001
From: Guillaume Demesy <guillaume.demesy@gmail.com>
Date: Thu, 11 Jun 2015 07:02:46 +0200
Subject: [PATCH] Improve issue detail

---
 .../static/css/development/page/issues.css    |  97 +++++------
 webcompat/static/js/lib/issues.js             |  12 +-
 webcompat/templates/issue.html                | 150 +++++++++---------
 3 files changed, 122 insertions(+), 137 deletions(-)

diff --git a/webcompat/static/css/development/page/issues.css b/webcompat/static/css/development/page/issues.css
index 25af7e642..c8a3d8891 100644
--- a/webcompat/static/css/development/page/issues.css
+++ b/webcompat/static/css/development/page/issues.css
@@ -5,136 +5,115 @@
   font-size:var(--base-font-size);
 }
 /* Wrapper title and date issue */
-.Issue-title {
-  font-size: 2em;
+.IssueItem-title {
+  font-size: 1.6em;
   line-height: 1em;
   margin-bottom: .5em;
   word-wrap: break-word;
 }
 @media (--viewport-450px) {
-  .Issue-title {
+  .IssueItem-title {
     font-size:1.2em;
   }
 }
-/* btn back /index */
-.Issue-linkBack {
-  display: inline-block;
-  vertical-align: middle;
-  margin:0 .8em 0 0;
-}
-@media (--viewport-450px) {
-  .Issue-linkBack {
-    display:block;
-    margin-bottom:.3em;
-  }
-}
-.Issue-linkBack:hover {
-  text-decoration: none;
-}
-.Issue-linkBack-icon {
-  display: inline-block;
-  width: 1.25em;
-  height: 1.25em;
-  line-height: 1.25em;
-  text-align: center;
-  background-color: var(--wc-variant-background-light);
-  color: #fff;;
-  border-radius:50%;
-  transition: all 0.3s linear 0s;
-}
-.Issue-linkBack:hover .Issue-linkBack-icon {
-  background-color: var(--wc-variant-background-dark);
-  transition: all 0.3s linear 0s;
-}
-
 /* Issue wrapper */
-.Issue-wrapper {
+.IssueItem-wrapper {
   margin:0 0 0 4.2em;
 }
 @media (--viewport-1180px) {
-  .Issue-wrapper {
+  .IssueItem-wrapper {
     margin:0;
   }
 }
 
 /* information issue : date / author / number of comment */
-.Issue-create {
-  font-size: 1.2em;
+.IssueItem-create {
+  font-size: 1em;
   margin:0 0 2em
 }
 /* State issue */
-.Issue-state {
+.IssueItem-state {
   display: inline-block;
-  padding: 7px 23px;
+  padding: .36458333em 1.19791667em;
   color: #fff;
 }
 @media (--viewport-450px) {
-  .Issue-state {
+  .IssueItem-state {
     font-size:.8em;
   }
 }
 /*New*/
-.Issue-state--new {
+.IssueItem-state--new {
   background-color: var(--wc-state-new);
 }
 /*Needs Diagnosis*/
-.Issue-state--need {
+.IssueItem-state--need {
   background-color: var(--wc-state-need);
 }
 /*Ready for Outreach*/
-.Issue-state--ready {
+.IssueItem-state--ready {
   background-color: var(--wc-state-ready);
 }
 /*Site wait*/
-.Issue-state--sitewait {
+.IssueItem-state--sitewait {
     background-color: var(--wc-state-sitewait);
 }
 /*Close*/
-.Issue-state--close {
+.IssueItem-state--close {
   background-color: var(--wc-state-close);
 }
 /* Date of issue */
-.Issue-date {
+.IssueItem-date {
   display: inline-block;
 }
 @media (--viewport-450px) {
-  .Issue-date {
+  .IssueItem-date {
     font-size:.9em;
   }
 }
 /* Author */
-.Issue-reporter {
+.IssueItem-reporter {
   font-weight: bold;
 }
 
 /* container details issue */
-.Issue-details {
+.IssueItem-details {
   word-wrap: break-word;
   overflow: hidden;
   position: relative;
+  line-height: 1.5em;
 }
 /* force font-size */
-.Issue-details * {
+.IssueItem-details * {
   font-size:1em !important;
 }
-.Issue-details strong {
+.IssueItem-details strong {
     font-weight: bold !important;
 }
-.Issue-details img {
+.IssueItem-details img {
     max-width: 100%;
     max-height: 100%;
 }
-.Issue-details code,
-.Comment-content code {
+.IssueItem-details code,
+.wc-Comment-content code {
   font-family: monospace;
   font-size: 90%;
 }
-.Issue-details p > code,
-.Comment-content p > code {
+.IssueItem-details p > code,
+.wc-Comment-content p > code {
   color: inherit;
   background-color: #F5F5F5;
   padding: 0.25em;
 }
+.IssueItem-details li {
+  margin-bottom: 1em;
+}
+.IssueItem-details p {
+  margin-bottom: 1em;
+}
+.Label-wrapper {
+  margin-bottom: 2em;
+}
 /* FullScreen LabelEditor*/
 @media (--viewport-375px) {
   .Label-wrapper {
@@ -192,12 +171,12 @@
 }
 
 /* Link to log in */
-.Issue-login {
+.IssueItem-login {
   margin-top: 2.5em;
   text-align:center;
 }
 
 /*wrapper list comment */
-.Issue-comment {
+.IssueItem-comment {
   margin:4em 0 0;
 }
diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js
index 98b3116f6..089904845 100644
--- a/webcompat/static/js/lib/issues.js
+++ b/webcompat/static/js/lib/issues.js
@@ -14,7 +14,7 @@ if (!window.md) {
 }
 
 issues.TitleView = Backbone.View.extend({
-  el: $('.Issue-title'),
+  el: $('.IssueItem-title'),
   events: {
     'click .js-linkBack': 'goBack'
   },
@@ -44,7 +44,7 @@ issues.TitleView = Backbone.View.extend({
 });
 
 issues.MetaDataView = Backbone.View.extend({
-  el: $('.Issue-create'),
+  el: $('.IssueItem-create'),
   initialize: function() {
     var self = this;
     this.model.on('change:issueState', function() {
@@ -59,12 +59,12 @@ issues.MetaDataView = Backbone.View.extend({
 });
 
 issues.BodyView = Backbone.View.extend({
-  el: $('.Issue-details'),
+  el: $('.IssueItem-details'),
   template: _.template($('#issue-info-tmpl').html()),
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     // hide metadata
-    $('.Issue-details')
+    $('.IssueItem-details')
       .contents()
       .filter(function() {
         //find the bare html comment-ish text nodes
@@ -189,7 +189,7 @@ issues.MainView = Backbone.View.extend({
       _.each([self.title, self.metadata, self.body, self.labels, self.stateButton, self],
         function(elm) {
           elm.render();
-          _.each($('.Issue-details code'), function(elm) {
+          _.each($('.IssueItem-details code'), function(elm) {
             Prism.highlightElement(elm);
           });
         }
@@ -226,7 +226,7 @@ issues.MainView = Backbone.View.extend({
   addComment: function(comment) {
     var view = new issues.CommentView({model: comment});
     var commentElm = view.render().el;
-    $(".Issue-comment").append(commentElm);
+    $(".IssueItem-comment").append(commentElm);
     _.each($(commentElm).find('code'), function(elm){
       Prism.highlightElement(elm);
     });
diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html
index 69aebfc81..fa3982054 100644
--- a/webcompat/templates/issue.html
+++ b/webcompat/templates/issue.html
@@ -1,99 +1,105 @@
 {% extends "layout.html" %}
 {% block body %}
-  <div class="page page--issue">
   {% include "shared/nav.html" %}
     <main class="wc-content wc-content--body Issue" role="main">
-      <h1 class="Issue-title wc-Title--l">
-      <script type="text/template" id="title-tmpl">
-        <a class="Issue-linkBack js-linkBack" href="{{ url_for("show_issues") }}" title="All issues">
-          <span class="wc-sronly">All Issues</span>
-          <span class="Issue-linkBack-icon wc-Icon wc-Icon--arrow-left" aria-hidden="true"></span>
-        </a>
-        Issue <%= number %>: <%- title %>
-      </script>
-      </h1>
-      <div class="Issue-wrapper">
+      <div class="IssueItem">
+        <h1 class="IssueItem-title wc-Title--l">
+          <script type="text/template" id="title-tmpl">
+          Issue <%= number %>: <%- title %>
+          </script>
+        </h1>
         <!-- Issue Date -->
-        <div class="Issue-create">
-        <script type="text/template" id="metadata-tmpl">
-          <div class="Issue-state Issue-state--<%= stateClass %>"><%= issueState %></div>
-          <div class="Issue-date">Opened <%= createdAt %> by
-            <span class="Issue-reporter">
+        <div class="IssueItem-create">
+          <script type="text/template" id="metadata-tmpl">
+          <div class="IssueItem-state IssueItem-state--<%= stateClass %>"><%= issueState %></div>
+          <div class="IssueItem-date">Opened <%= createdAt %> by
+            <span class="IssueItem-reporter">
               <a href="https://github.com/<%= reporter %>"><%= reporter %></a><!--
          --></span>. <%= commentNumber %> comments
           </div>
-        </script>
-        </div>
-        <div class="Issue-details">
-        <!-- Issue Info -->
-        <script type="text/template" id="issue-info-tmpl">
-          <%= body %>
-        </script>
+          </script>
         </div>
         <!-- Issue Labels -->
         <div class="Label-wrapper">
-        <script type="text/template" id="issue-labels-tmpl">
-          <span class="Label Label--title">Labels</span>
-          {% if session.user_id and session.avatar_url %}
+          <script type="text/template" id="issue-labels-tmpl">
+            <span class="Label Label--title">Labels</span>
+            {% if session.user_id and session.avatar_url %}
             <span class="LabelEditor-wrapper"><button class="LabelEditor-launcher wc-Icon wc-Icon--gear" aria-hidden="true"><span class="wc-sronly">Edit Labels</span></button></span>
-          {% endif %}
-          <span class="Label-list">
-          <% _.each(labels, function(label) { %>
-            <span class="Label Label--badge" style="background-color:#<%=label.color%>">
-              <%= label.name %>
+            {% endif %}
+            <span class="Label-list">
+            <% _.each(labels, function(label) { %>
+              <span class="Label Label--badge" style="background-color:#<%=label.color%>">
+                <%= label.name %>
+              </span>
+            <% }); %>
             </span>
-          <% }); %>
-          </span>
-        </script>
+          </script>
         </div>
-        <!-- Issue Comments -->
-        <div class="Issue-comment">
-          <script type="text/template" id="comment-tmpl">
-            <div class="wc-Comment-avatar">
-              <img src="<%= avatarUrl %>" alt="">
-            </div>
-            <div class="wc-Comment-body wc-Comment-body--caret">
-              <div class="wc-Comment-wrapper">
-                <div class="wc-Comment-header">
-                  <span class="wc-Comment-owner">
-                    <a href="https://github.com/<%= commenter %>"><%= commenter %></a>
-                  </span> commented <a href="#<%= commentLinkId %>"><%= createdAt %></a>
+        <div class="wc-Comment">
+          <div class="wc-Comment-avatar">
+            <img src="https://avatars.githubusercontent.com/u/67283?v=3" alt="">
+          </div>
+          <div class="wc-Comment-body wc-Comment-body--caret">
+            <div class="wc-Comment-wrapper">
+              <div class="wc-Comment-header">
+                <span class="wc-Comment-owner">
+                  <a href="https://github.com/magsout">magsout</a>
+                </span> commented <a href="#">3 months ago</a>
+              </div>
+              <div class="wc-Comment-content">
+                <div class="IssueItem-details">
+                  <script type="text/template" id="issue-info-tmpl"><%= body %></script>
                 </div>
-                <div class="wc-Comment-content"><%= body %></div>
               </div>
             </div>
-          </script>
+          </div>
         </div>
-
-        {% if session.user_id and session.avatar_url %}
-        <!-- Create issue comment -->
-        <div class="wc-Comment wc-Comment--form" data-username={{ session.username }} data-avatar-url= {{ session.avatar_url }}>
-          <div class="wc-Comment-avatar">
-            <img class="" src="{{ session.avatar_url }}" alt="Avatar"/>
+      </div>
+      <!-- Issue Comments -->
+      <div class="IssueItem-comment">
+        <script type="text/template" id="comment-tmpl">
+        <div class="wc-Comment-avatar">
+          <img src="<%= avatarUrl %>" alt="">
+        </div>
+        <div class="wc-Comment-body wc-Comment-body--caret">
+          <div class="wc-Comment-wrapper">
+            <div class="wc-Comment-header">
+              <span class="wc-Comment-owner">
+                <a href="https://github.com/<%= commenter %>"><%= commenter %></a>
+              </span> commented <a href="#<%= commentLinkId %>"><%= createdAt %></a>
+            </div>
+            <div class="wc-Comment-content"><%= body %></div>
           </div>
-          <div class="wc-Comment-body wc-Comment-body--caret">
-            <!--<div class="Comment-drag">-->
-              <!-- TODO(miket) <div class="comment__dd">Attach images by dragging &amp; dropping, <span class="comment__dd__label">selecting them</span> or pasting form the clipboad </div> -->
-              <label for="wc-Comment-text" class="wc-sronly">Comment Text</label>
-              <textarea id="Comment-text" class="wc-Comment-wrapper wc-Comment-text" placeholder="Leave a comment"></textarea>
-            <!--</div>-->
-            <div class="wc-Comment-button">
-              <button class="Button Button--action js-issue-state-button">
+        </div>
+        </script>
+      </div>
+      {% if session.user_id and session.avatar_url %}
+      <!-- Create issue comment -->
+      <div class="wc-Comment wc-Comment--form" data-username={{ session.username }} data-avatar-url= {{ session.avatar_url }}>
+        <div class="wc-Comment-avatar">
+          <img class="" src="{{ session.avatar_url }}" alt="Avatar"/>
+        </div>
+        <div class="wc-Comment-body wc-Comment-body--caret">
+        <!--<div class="Comment-drag">-->
+        <!-- TODO(miket) <div class="comment__dd">Attach images by dragging &amp; dropping, <span class="comment__dd__label">selecting them</span> or pasting form the clipboad </div> -->
+        <label for="wc-Comment-text" class="wc-sronly">Comment Text</label>
+          <textarea id="Comment-text" class="wc-Comment-wrapper wc-Comment-text" placeholder="Leave a comment"></textarea>
+        <!--</div>-->
+          <div class="wc-Comment-button">
+            <button class="Button Button--action js-issue-state-button">
               <script type="text/template" id="state-button-tmpl">
-                <%= state %>
+              <%= state %>
               </script>
-              </button>
-              <button value="comment" class="Button Button--default js-issue-comment-button" type="submit">Comment</button>
-            </div>
+            </button>
+            <button value="comment" class="Button Button--default js-issue-comment-button" type="submit">Comment</button>
           </div>
         </div>
-        {% else %}
-        <p class="Issue-login">Please <a href="{{ url_for('login') }}">login</a> to edit issues.</p>
-        {% endif %}
-        <p class="wc-margin-bottom"><span class="wc-keyhint">G</span> takes you to the <a href="https://github.com/{{ config['ISSUES_REPO_URI'] }}/{{ number }}">GitHub view</a> of this page.</p>
-       </div>
+      </div>
+      {% else %}
+      <p class="IssueItem-login">Please <a href="{{ url_for('login') }}">login</a> to edit issues.</p>
+      {% endif %}
+      <p class="wc-margin-bottom"><span class="wc-keyhint">G</span> takes you to the <a href="https://github.com/{{ config['ISSUES_REPO_URI'] }}/{{ number }}">GitHub view</a> of this page.</p>
     </main>
-  </div>
 
   <script type="text/template" id="label-editor-tmpl">
     <div class="LabelEditor-table">