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 %} -
Please login to edit issues.
- {% endif %} -G takes you to the GitHub view of this page.
-Please login to edit issues.
+ {% endif %} +G takes you to the GitHub view of this page.
-