From 0d5e6742e4c471462aae950f36bbf5a5f24cd68b Mon Sep 17 00:00:00 2001 From: Guillaume Demesy Date: Thu, 11 Jun 2015 07:02:46 +0200 Subject: [PATCH 1/3] Improve issue detail --- tests/functional/comments.js | 8 +- tests/functional/issues.js | 10 +- .../css/development/components/comment.css | 2 +- .../issue-detail.css} | 103 ++++++------- webcompat/static/css/development/main.css | 3 +- webcompat/static/js/lib/comments.js | 2 +- webcompat/static/js/lib/issues.js | 14 +- webcompat/templates/issue.html | 136 +++++++++--------- 8 files changed, 133 insertions(+), 145 deletions(-) rename webcompat/static/css/development/{page/issues.css => components/issue-detail.css} (66%) diff --git a/tests/functional/comments.js b/tests/functional/comments.js index 902bd4e85..d91784609 100644 --- a/tests/functional/comments.js +++ b/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.'); diff --git a/tests/functional/issues.js b/tests/functional/issues.js index 6dcf91227..f8c2f0fec 100644 --- a/tests/functional/issues.js +++ b/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); }) diff --git a/webcompat/static/css/development/components/comment.css b/webcompat/static/css/development/components/comment.css index 146b8a2fc..fb690b7ae 100644 --- a/webcompat/static/css/development/components/comment.css +++ b/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 */ diff --git a/webcompat/static/css/development/page/issues.css b/webcompat/static/css/development/components/issue-detail.css similarity index 66% rename from webcompat/static/css/development/page/issues.css rename to webcompat/static/css/development/components/issue-detail.css index 25af7e642..1dc96e1d7 100644 --- a/webcompat/static/css/development/page/issues.css +++ b/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; } diff --git a/webcompat/static/css/development/main.css b/webcompat/static/css/development/main.css index bf252d7b6..e17cb0075 100644 --- a/webcompat/static/css/development/main.css +++ b/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" diff --git a/webcompat/static/js/lib/comments.js b/webcompat/static/js/lib/comments.js index b55ba5d40..7dc0e413a 100644 --- a/webcompat/static/js/lib/comments.js +++ b/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'); }, diff --git a/webcompat/static/js/lib/issues.js b/webcompat/static/js/lib/issues.js index 98b3116f6..ccc0a0cc9 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: $('.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-details'), 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); }); diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html index 69aebfc81..b30e28cc6 100644 --- a/webcompat/templates/issue.html +++ b/webcompat/templates/issue.html @@ -1,41 +1,31 @@ {% extends "layout.html" %} {% block body %} -
{% include "shared/nav.html" %} -
-

- -

-
+
+
+

+ +

-
- -
-
- - +
- -
+
+ +
+
+
+
+
- -
-
- +
- - {% if session.user_id and session.avatar_url %} - -
-
- Avatar +
+ +
+ +
+ {% if session.user_id and session.avatar_url %} + +
+
+ Avatar +
+
+ + + + + +
+ - -
+ +
- {% else %} - - {% endif %} -

G takes you to the GitHub view of this page.

-
+
+ {% else %} +

Please login to edit issues.

+ {% endif %} +

G takes you to the GitHub view of this page.

- -
-
- -
-
-
-
- - @todo autor - commented @todo time -
-
-
- +
+
From 4c57ea7dce9d4dfb27c46c3ad2608807d8cdca99 Mon Sep 17 00:00:00 2001 From: Mike Taylor Date: Tue, 16 Jun 2015 15:01:31 -0500 Subject: [PATCH 3/3] Remove .js-issue-comment from wc-IssueDetail-report child. (otherwise it breaks some tests) --- webcompat/templates/issue.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webcompat/templates/issue.html b/webcompat/templates/issue.html index 2a746bb57..0913e68c4 100644 --- a/webcompat/templates/issue.html +++ b/webcompat/templates/issue.html @@ -38,7 +38,7 @@