Refactoring HTML, CSS, View, Markup #901

magsout · 2016-01-09T23:16:23Z

Normalise, cleaned, and refactor CSS/HTML/View …

removed useless component (SuitCSS)
normalise each CSS Component
normalise ClassName (e.g: IssueList -> ListIssue ...)
Split View in multiple file
Removed #id

We have a code base that grows a little every day. There is some legacy code that also happens. so I wanted with this PR, cleaned, added what I learned from the beginning that I work on this project. It's not finished yet, but I wanted to start by sending this PR.

I know, there is lot files changed. Hard to review (my apologies in advance). But when I started to edit the files, I started with a css file, and markup etc .. It was hard to make only small changes. But change is not going to break anything (I have fixed testing course)

What I have to do:

Review needed. R? @miketaylr @karlcow @hallvors @tagawa

webcompat/static/css/development/components/UI.css

+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;


miketaylr · 2016-01-10T01:03:05Z

I didn't build or anything, but so far so good!

miketaylr · 2016-01-10T01:03:20Z

(let me know if you want help updating any broken tests)

magsout · 2016-01-10T16:35:14Z

@miketaylr thanks for your quick review. Just need to continu my todolist.

webcompat/templates/issue/issue-header.html

+  <!-- Issue Date -->
+  <div class="wc-IssueDetail-create">
+    <script type="text/template" id="metadata-tmpl">
+    <div class="wc-Tag wc-Tag--label wc-Tag--<%= stateClass %>"><%= issueState %></div>


magsout · 2016-01-15T22:31:06Z

OK, travis is happy now 👍

miketaylr · 2016-01-20T15:44:40Z

@magsout ready for review?

magsout · 2016-01-20T16:09:54Z

@miketaylr not yet, I have to finished Form. Hum, maybe better to add linter in another PR ?

magsout · 2016-01-20T16:12:21Z

@miketaylr I think finish tonight or tomorrow. What do you think to put on staging for everybody can review the design? Check that I have not created regression?

miketaylr · 2016-01-20T16:12:50Z

(oops, forgot about the checklist up top)

Yeah, maybe linter in another PR to keep it features more "atomic", if that makes sense.

miketaylr · 2016-01-20T16:13:32Z

What do you think to put on staging for everybody can review the design? Check that I have not created regression?

Sounds good! Just let me know when to deploy it. Also no rush -- I just wanted to make sure I wasn't sitting around ignoring reviews!

magsout · 2016-01-22T13:40:19Z

@miketaylr Neeed u ;) I break something but I don"t know what. In fact all test passed, but since I handle homepage, issue List failed.. Any thought ?

- removed useless component (SuitCSS) - normalise each CSS Component - normalise ClassName (e.g: IssueList -> ListIssue ...) - Split View in multiple file - Removed #id

webcompat/templates/list-issue.html

+      <div class="wc-ListIssue-sorting">
+        {% include "list-issue/list-issue-sorting.html" %}
+      </div>
+      {% include "list-issue/issue-list.html" %}


miketaylr · 2016-01-27T23:13:36Z

r+ from me with the small issues you've pointed out. I'm still not sure what the difference between issue-list and list-issue is, but I'm sure you'll tell me. :)

…List

…sName/ids

magsout · 2016-01-28T16:15:26Z

@miketaylr I changed ListIssue in SearchIssue is more relevant. I changed all classes js-* according to convention seen in the issue. I have not touched the js- class which was not related to a component

miketaylr · 2016-01-28T16:40:28Z

@magsout ah, ok sounds good. I say feel free to merge when you're happy. HUGE improvements. ❤️

magsout · 2016-01-28T17:03:42Z

Any thought ? @karlcow @hallvors @calexity @tagawa ?

karlcow · 2016-01-29T00:41:07Z

yes more white space around the issues gives it more air. Breathable.
@magsout did you test on mobile the new version?

💌　good to send.

tagawa · 2016-01-29T09:21:02Z

Agree, I like the wider layout as well. I thought having the labels showing (android, opera, etc.) was helpful but maybe that's a personal preference.

magsout · 2016-01-29T11:14:36Z

@tagawa what do you mean about label ? I don't understand

tagawa · 2016-01-29T11:35:59Z

@magsout In your "before" screenshot the browser labels are visible, but in the "after" screenshot they've been removed.

magsout · 2016-01-29T12:36:19Z

@tagawa ah yes, don't worries, labels are still here. The Second screenshot is take on my localhost and the issues have not labels.

tagawa · 2016-01-29T14:18:43Z

Ah, my misunderstanding. All good then, thanks.

magsout · 2016-01-29T20:49:35Z

@karlcow yes

Refactoring HTML, CSS, View, Markup

magsout added the status: in progress label Jan 9, 2016

magsout force-pushed the refactor branch 2 times, most recently from 8b7c882 to 23b2feb Compare January 9, 2016 23:27

miketaylr reviewed Jan 10, 2016
View reviewed changes

webcompat/static/css/development/components/UI.css

html {

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

This comment was marked as abuse.

Sign in to view

This comment was marked as abuse.

Sign in to view

magsout reviewed Jan 10, 2016
View reviewed changes

magsout force-pushed the refactor branch 9 times, most recently from 14364cd to c9b736a Compare January 15, 2016 22:23

magsout force-pushed the refactor branch from 3b7f579 to 7ae31ff Compare January 22, 2016 11:31

Normalise, cleaned, and refactor CSS/HTML/View

c4b52e6

- removed useless component (SuitCSS) - normalise each CSS Component - normalise ClassName (e.g: IssueList -> ListIssue ...) - Split View in multiple file - Removed #id

miketaylr reviewed Jan 27, 2016
View reviewed changes

webcompat/templates/list-issue.html

<div class="wc-ListIssue-sorting">

{% include "list-issue/list-issue-sorting.html" %}

</div>

{% include "list-issue/issue-list.html" %}

This comment was marked as abuse.

Sign in to view

magsout changed the title ~~Refactoring HTML, CSS~~ Refactoring HTML, CSS, View, Markup Jan 28, 2016

magsout added 4 commits January 28, 2016 16:58

Refactoring HTML, CSS, View, Markup - fixed typos

0735271

Refactoring HTML, CSS, View, Markup - ListIssue are now called Search…

cec4763

…List

Refactoring HTML, CSS, View, Markup - consistent style for js- classe…

55db9ff

…sName/ids

Refactoring HTML, CSS, View, Markup - fixed makrup

318c458

magsout force-pushed the refactor branch from c6ce4bc to 318c458 Compare January 28, 2016 16:07

Refactoring HTML, CSS, View, Markup - removed useless selector

9b7e42a

magsout added a commit that referenced this pull request Jan 29, 2016

Merge pull request #901 from webcompat/refactor

60637b1

Refactoring HTML, CSS, View, Markup

magsout merged commit 60637b1 into master Jan 29, 2016

magsout deleted the refactor branch January 29, 2016 20:50

magsout added review-accepted and removed status: in progress status: needs review labels Jan 29, 2016

miketaylr added status: add to changelog and removed review-accepted labels Feb 2, 2016

magsout added the review-accepted label Feb 4, 2016

miketaylr removed the status: add to changelog label Feb 5, 2016

jmm mentioned this pull request Aug 4, 2016

"GitHub view" text rendering problem on issues list page #1155

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactoring HTML, CSS, View, Markup #901

Refactoring HTML, CSS, View, Markup #901

magsout commented Jan 9, 2016

This comment was marked as abuse.

This comment was marked as abuse.

miketaylr commented Jan 10, 2016

miketaylr commented Jan 10, 2016

magsout commented Jan 10, 2016

This comment was marked as abuse.

This comment was marked as abuse.

magsout commented Jan 15, 2016

miketaylr commented Jan 20, 2016

magsout commented Jan 20, 2016

magsout commented Jan 20, 2016

miketaylr commented Jan 20, 2016

miketaylr commented Jan 20, 2016

magsout commented Jan 22, 2016

This comment was marked as abuse.

miketaylr commented Jan 27, 2016

magsout commented Jan 28, 2016

miketaylr commented Jan 28, 2016

magsout commented Jan 28, 2016

karlcow commented Jan 29, 2016

tagawa commented Jan 29, 2016

magsout commented Jan 29, 2016

tagawa commented Jan 29, 2016

magsout commented Jan 29, 2016

tagawa commented Jan 29, 2016

magsout commented Jan 29, 2016

Refactoring HTML, CSS, View, Markup #901

Refactoring HTML, CSS, View, Markup #901

Conversation

magsout commented Jan 9, 2016

This comment was marked as abuse.

This comment was marked as abuse.

miketaylr commented Jan 10, 2016

miketaylr commented Jan 10, 2016

magsout commented Jan 10, 2016

This comment was marked as abuse.

This comment was marked as abuse.

magsout commented Jan 15, 2016

miketaylr commented Jan 20, 2016

magsout commented Jan 20, 2016

magsout commented Jan 20, 2016

miketaylr commented Jan 20, 2016

miketaylr commented Jan 20, 2016

magsout commented Jan 22, 2016

This comment was marked as abuse.

miketaylr commented Jan 27, 2016

magsout commented Jan 28, 2016

miketaylr commented Jan 28, 2016

magsout commented Jan 28, 2016

karlcow commented Jan 29, 2016

tagawa commented Jan 29, 2016

magsout commented Jan 29, 2016

tagawa commented Jan 29, 2016

magsout commented Jan 29, 2016

tagawa commented Jan 29, 2016

magsout commented Jan 29, 2016