Improve issue detail

webcompat · Jun 11, 2015 · a2438d3 · a2438d3
1 parent a9a2cb2
commit a2438d3
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 137 deletions.
diff --git 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
@@ -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);
     });