Issue Improvements - Dynamic Information about reporter

tests/functional/comments.js

@@ -102,7 +102,7 @@ define([
       return this.remote
         .setFindTimeout(intern.config.wc.pageLoadTimeout)
         .get(require.toUrl(url(100)))
-        .findAllByCssSelector('.wc-Comment:not(.wc-Comment--form)')
+        .findAllByCssSelector('.js-issue-comment:not(.wc-Comment--form)')
         .then(function(elms){
           originalCommentsLength = elms.length;
         })
@@ -115,7 +115,7 @@ define([
         .findByCssSelector('.js-issue-comment-button').click()
         .end()
         .sleep(2000)
-        .findAllByCssSelector('.wc-Comment:not(.wc-Comment--form)')
+        .findAllByCssSelector('.js-issue-comment:not(.wc-Comment--form)')
         .then(function(elms){
           allCommentsLength = elms.length;
           assert(originalCommentsLength < allCommentsLength, 'Comment was successfully left.');
@@ -127,7 +127,7 @@ define([
       return this.remote
         .setFindTimeout(intern.config.wc.pageLoadTimeout)
         .get(require.toUrl(url(100)))
-        .findAllByCssSelector('.wc-Comment:not(.wc-Comment--form)')
+        .findAllByCssSelector('.js-issue-comment:not(.wc-Comment--form)')
         .then(function(elms){
           originalCommentsLength = elms.length;
         })
@@ -136,7 +136,7 @@ define([
         .findByCssSelector('.js-issue-comment-button').click()
         .end()
         .sleep(500)
-        .findAllByCssSelector('.wc-Comment:not(.wc-Comment--form)')
+        .findAllByCssSelector('.js-issue-comment:not(.wc-Comment--form)')
         .then(function(elms){
           allCommentsLength = elms.length;
           assert(originalCommentsLength === allCommentsLength, 'Comment was not successfully left.');

tests/functional/issues.js

@@ -22,12 +22,12 @@ define([
         .setFindTimeout(intern.config.wc.pageLoadTimeout)
         .get(require.toUrl(url(100)))
         .sleep(1000)
-        .findByCssSelector('h1.Issue-title').getVisibleText()
+        .findByCssSelector('h1.wc-IssueDetail-title').getVisibleText()
         .then(function (text) {
           assert.include(text, 'Issue 100:', 'Issue title displayed');
         })
         .end()
-        .findByCssSelector('.Issue-reporter').getVisibleText()
+        .findByCssSelector('.wc-IssueDetail-reporter').getVisibleText()
         .then(function (text) {
           assert.equal(text, 'miketaylr', 'Issue reporter displayed.');
         })
@@ -45,7 +45,7 @@ define([
         .findByCssSelector('.js-issue-state-button').click()
         .sleep(2000)
         .end()
-        .findByCssSelector('.Issue-state').getVisibleText()
+        .findByCssSelector('.wc-IssueDetail-state').getVisibleText()
         .then(function (text) {
           assert.equal(text, 'Closed', 'Closed state text is displayed');
         })
@@ -58,7 +58,7 @@ define([
         .findByCssSelector('.js-issue-state-button').click()
         .sleep(2000)
         .end()
-        .findByCssSelector('.Issue-state').getVisibleText()
+        .findByCssSelector('.wc-IssueDetail-state').getVisibleText()
         .then(function (text) {
           assert.equal(text, 'Ready for Outreach', 'Ready for Outreach state is displayed');
         })
@@ -74,7 +74,7 @@ define([
         .setFindTimeout(intern.config.wc.pageLoadTimeout)
         .get(require.toUrl(url(100)))
         .sleep(1000)
-        .findByCssSelector('.wc-Comment').isDisplayed()
+        .findByCssSelector('.js-issue-comment').isDisplayed()
         .then(function (isDisplayed) {
           assert.equal(isDisplayed, true);
         })

webcompat/static/css/development/components/comment.css

@@ -167,7 +167,7 @@
   width: 100%;
   max-width: 100%;
 }
-.wc-Comment--form  .Comment-wrapper {
+.wc-Comment--form  .wc-Comment-wrapper {
   padding-top: 1em;
 }
 /* drag and drop */

webcompat/static/css/development/page/issues.css → webcompat/static/css/development/components/issue-detail.css

@@ -1,140 +1,121 @@
 /*------Issues view------*/
 
-.Issue {
-  display: none;
+.wc-IssueDetail {
   font-size:var(--base-font-size);
 }
 /* Wrapper title and date issue */
-.Issue-title {
-  font-size: 2em;
+.wc-IssueDetail-title {
+  font-size: 1.6em;
   line-height: 1em;
   margin-bottom: .5em;
   word-wrap: break-word;
 }
 @media (--viewport-450px) {
-  .Issue-title {
+  .wc-IssueDetail-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 {
+.wc-IssueDetail-wrapper {
   margin:0 0 0 4.2em;
 }
 @media (--viewport-1180px) {
-  .Issue-wrapper {
+  .wc-IssueDetail-wrapper {
     margin:0;
   }
 }
 
 /* information issue : date / author / number of comment */
-.Issue-create {
-  font-size: 1.2em;
+.wc-IssueDetail-create {
+  font-size: 1em;
   margin:0 0 2em
 }
 /* State issue */
-.Issue-state {
+.wc-IssueDetail-state {
   display: inline-block;
-  padding: 7px 23px;
+  padding: .36458333em 1.19791667em;
   color: #fff;
 }
 @media (--viewport-450px) {
-  .Issue-state {
+  .wc-IssueDetail-state {
     font-size:.8em;
   }
 }
 /*New*/
-.Issue-state--new {
+.wc-IssueDetail-state--new {
   background-color: var(--wc-state-new);
 }
 /*Needs Diagnosis*/
-.Issue-state--need {
+.wc-IssueDetail-state--need {
   background-color: var(--wc-state-need);
 }
 /*Ready for Outreach*/
-.Issue-state--ready {
+.wc-IssueDetail-state--ready {
   background-color: var(--wc-state-ready);
 }
 /*Site wait*/
-.Issue-state--sitewait {
+.wc-IssueDetail-state--sitewait {
     background-color: var(--wc-state-sitewait);
 }
 /*Close*/
-.Issue-state--close {
+.wc-IssueDetail-state--close {
   background-color: var(--wc-state-close);
 }
 /* Date of issue */
-.Issue-date {
+.wc-IssueDetail-date {
   display: inline-block;
 }
 @media (--viewport-450px) {
-  .Issue-date {
+  .wc-IssueDetail-date {
     font-size:.9em;
   }
 }
 /* Author */
-.Issue-reporter {
+.wc-IssueDetail-reporter {
   font-weight: bold;
 }
 
 /* container details issue */
-.Issue-details {
+.wc-IssueDetail-details {
   word-wrap: break-word;
   overflow: hidden;
   position: relative;
+  line-height: 1.5em;
 }
 /* force font-size */
-.Issue-details * {
+.wc-IssueDetail-details * {
   font-size:1em !important;
 }
-.Issue-details strong {
+.wc-IssueDetail-details strong {
     font-weight: bold !important;
 }
-.Issue-details img {
+.wc-IssueDetail-details img {
     max-width: 100%;
     max-height: 100%;
 }
-.Issue-details code,
-.Comment-content code {
+.wc-IssueDetail-details code,
+.wc-Comment-content code {
   font-family: monospace;
   font-size: 90%;
 }
-.Issue-details p > code,
-.Comment-content p > code {
+.wc-IssueDetail-details p > code,
+.wc-Comment-content p > code {
   color: inherit;
   background-color: #F5F5F5;
   padding: 0.25em;
 }
+.wc-IssueDetail-details li {
+  margin-bottom: 1em;
+}
+.wc-IssueDetail-details p {
+  margin-bottom: 1em;
+}
+.wc-IssueDetail-comment {
+  margin-top:2em;
+}
+.Label-wrapper {
+  margin-bottom: 2em;
+}
 /* FullScreen LabelEditor*/
 @media (--viewport-375px) {
   .Label-wrapper {
@@ -192,12 +173,12 @@
 }
 
 /* Link to log in */
-.Issue-login {
+.wc-IssueDetail-login {
   margin-top: 2.5em;
   text-align:center;
 }
 
 /*wrapper list comment */
-.Issue-comment {
+.wc-IssueDetail-comment {
   margin:4em 0 0;
 }

webcompat/static/css/development/main.css

@@ -33,13 +33,14 @@
 @import "components/loader.css";
 @import "components/box.css";
 @import "components/report-form.css";
+@import "components/issue-detail.css";
+
 /*----------Layout----------*/
 @import "layout/body.css";
 @import "layout/utilities.css";
 
 /*----------page----------*/
 @import "page/home.css";
-@import "page/issues.css";
 @import "page/static.css";
 @import "page/contributors.css";
 @import "page/issue-list.css"

webcompat/static/js/lib/comments.js

@@ -12,7 +12,7 @@ issues.CommentsCollection = Backbone.Collection.extend({
 });
 
 issues.CommentView = Backbone.View.extend({
-  className: 'wc-Comment',
+  className: 'wc-Comment js-issue-comment',
   id: function() {
     return this.model.get('commentLinkId');
   },

webcompat/static/js/lib/issues.js

@@ -14,7 +14,7 @@ if (!window.md) {
 }
 
 issues.TitleView = Backbone.View.extend({
-  el: $('.Issue-title'),
+  el: $('.wc-IssueDetail-title'),
   events: {
     'click .js-linkBack': 'goBack'
   },
@@ -44,7 +44,7 @@ issues.TitleView = Backbone.View.extend({
 });
 
 issues.MetaDataView = Backbone.View.extend({
-  el: $('.Issue-create'),
+  el: $('.wc-IssueDetail-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: $('.wc-IssueDetail-report'),
   template: _.template($('#issue-info-tmpl').html()),
   render: function() {
     this.$el.html(this.template(this.model.toJSON()));
     // hide metadata
-    $('.Issue-details')
+    $('.wc-IssueDetail-details')
       .contents()
       .filter(function() {
         //find the bare html comment-ish text nodes
@@ -140,7 +140,7 @@ issues.StateButtonView = Backbone.View.extend({
 });
 
 issues.MainView = Backbone.View.extend({
-  el: $('.Issue'),
+  el: $('.js-issue'),
   events: {
     'click .Button--default': 'addNewComment',
     'click': 'closeLabelEditor'
@@ -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($('.wc-IssueDetail-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);
+    $(".wc-IssueDetail-comment").append(commentElm);
     _.each($(commentElm).find('code'), function(elm){
       Prism.highlightElement(elm);
     });

webcompat/static/js/lib/models/issue.js

@@ -57,6 +57,7 @@
       labels: response.labels,
       number: response.number,
       reporter: response.user.login,
+      reporterAvatar: response.user.avatar_url,
       state: response.state,
       title: response.title
     });