Issue #2505 - Custom checkbox & flexbox order to move checked labels up #2521

Regaddi · 2018-06-22T07:04:53Z

This PR fixes issue #2505

Proposed PR background

This will move the checked labels in the label editor to the top of the list.
I introduced some custom styling to achieve this, since I can't reference a parent element in CSS, e.g. to select a label which wraps around the checkbox input element.

I have read the Pull Request + Code Style Guidelines thoroughly.

TravisBuddy · 2018-06-22T07:07:31Z

Travis tests have failed

Hey @Regaddi,
Please read the following log in order to understand the failure reason.
It'll be awesome if you fix what's wrong and commit the changes.

1st Build

nosetests

Milestones are not initialized. Check logs.

sleep 5

Writing logs to: /home/travis/build/webcompat/webcompat.com/tmp
Statuses Initialization…
Oooops.
We can't find /home/travis/build/webcompat/webcompat.com/data/milestones.json
Double check that everything is configured properly
in config/secrets.py and try again. Good luck!

Fetching milestones from Github…
It failed with 403 Client Error: Forbidden for url: https://api.github.com/repos/webcompat/webcompat-tests/milestones!
We will read from data/milestones.json.

Milestones are not initialized. Check logs.

$ npm run lint

> webcompat@ lint /home/travis/build/webcompat/webcompat.com
> npm run lint:js && npm run lint:css


> webcompat@ lint:js /home/travis/build/webcompat/webcompat.com
> eslint ./Gruntfile.js ./tests ./grunt-tasks ./webcompat/static/js/lib


> webcompat@ lint:css /home/travis/build/webcompat/webcompat.com
> stylelint './webcompat/static/css/src/**/*.css' './webcompat/static/css/webcompat.dev.css'


$ npm run build

> webcompat@ build /home/travis/build/webcompat/webcompat.com
> grunt

Running "checkDependencies:default" (checkDependencies) task

Running "jst:compile" (jst) task
File webcompat/static/js/dist/templates.js created.

Running "concat:dist" (concat) task

Running "concat:diagnose" (concat) task

Running "concat:issues" (concat) task

Running "concat:issueList" (concat) task

Running "concat:userActivity" (concat) task

Running "uglify:dist" (uglify) task
>> 1 file created 546.29 kB → 385.24 kB

Running "uglify:ga" (uglify) task
>> 1 file created 780 B → 585 B

Running "uglify:issues" (uglify) task
>> 1 file created 48.78 kB → 27.11 kB

Running "uglify:issueList" (uglify) task
>> 1 file created 37.69 kB → 20.14 kB

Running "uglify:userActivity" (uglify) task
>> 1 file created 21.91 kB → 11.36 kB

Running "uglify:diagnose" (uglify) task
>> 1 file created 12.9 kB → 6.44 kB

Running "uglify:contributors" (uglify) task
>> 1 file created 1.1 kB → 737 B

Running "postcss:dist" (postcss) task
>> 1 processed stylesheet created.

Running "cssmin:combine" (cssmin) task
>> 1 file created. 1.8 kB → 37.11 kB

Running "purifycss:target" (purifycss) task
Source Files:  [ 'webcompat/templates/about.html',
  'webcompat/templates/contact.html',
  'webcompat/templates/contributors.html',
  'webcompat/templates/error.html',
  'webcompat/templates/index.html',
  'webcompat/templates/issue.html',
  'webcompat/templates/layout.html',
  'webcompat/templates/list-issue.html',
  'webcompat/templates/new-issue.html',
  'webcompat/templates/privacy.html',
  'webcompat/templates/user-activity.html' ]
Source Files:  [ 'webcompat/templates/about.html',
  'webcompat/templates/contact.html',
  'webcompat/templates/contributors.html',
  'webcompat/templates/contributors/build-tools.html',
  'webcompat/templates/contributors/diagnose-bug.html',
  'webcompat/templates/contributors/organize-webcompat-events.html',
  'webcompat/templates/contributors/report-bug.html',
  'webcompat/templates/contributors/reproduce-bug.html',
  'webcompat/templates/contributors/site-outreach.html',
  'webcompat/templates/contributors/sub-nav.html',
  'webcompat/templates/contributors/web-platform-research.html',
  'webcompat/templates/dashboard/footer.html',
  'webcompat/templates/dashboard/layout.html',
  'webcompat/templates/dashboard/triage.html',
  'webcompat/templates/dashboard/triage/activity-indicator.html',
  'webcompat/templates/dashboard/triage/filters.html',
  'webcompat/templates/dashboard/triage/needstriage-list.html',
  'webcompat/templates/dashboard/triage/no-result.html',
  'webcompat/templates/dashboard/triage/stats.html',
  'webcompat/templates/dashboard/triage/top-bar.html',
  'webcompat/templates/error.html',
  'webcompat/templates/home-page/browse-issues.html',
  'webcompat/templates/home-page/form.html',
  'webcompat/templates/home-page/hero.html',
  'webcompat/templates/home-page/how-it-works.html',
  'webcompat/templates/home-page/join-us.html',
  'webcompat/templates/index.html',
  'webcompat/templates/issue.html',
  'webcompat/templates/issue/issue-aside.html',
  'webcompat/templates/issue/issue-comment-submit.html',
  'webcompat/templates/issue/issue-information.html',
  'webcompat/templates/layout.html',
  'webcompat/templates/list-issue.html',
  'webcompat/templates/list-issue/search-issue-filter.html',
  'webcompat/templates/nav/addon-links.html',
  'webcompat/templates/nav/nav.html',
  'webcompat/templates/nav/shared-nav-links.html',
  'webcompat/templates/nav/topbar.html',
  'webcompat/templates/new-issue.html',
  'webcompat/templates/privacy.html',
  'webcompat/templates/shared/footer.html',
  'webcompat/templates/shared/svg-icons.html',
  'webcompat/templates/user-activity.html',
  'webcompat/templates/user-activity/reported-by-user.html',
  'webcompat/templates/user-activity/user-mentions.html',
  'webcompat/templates/web_modules/pagination.html',
  'webcompat/templates/web_modules/tag.html' ]
Source Files:  [ 'webcompat/templates/issue/aside.jst',
  'webcompat/templates/issue/issue-comment-list.jst',
  'webcompat/templates/issue/issue-labels-sub.jst',
  'webcompat/templates/issue/issue-labels.jst',
  'webcompat/templates/issue/issue-milestones-sub.jst',
  'webcompat/templates/issue/issue-milestones.jst',
  'webcompat/templates/issue/metadata.jst',
  'webcompat/templates/issue/thanks.jst',
  'webcompat/templates/issue/upload-image.jst',
  'webcompat/templates/list-issue/dropdown.jst',
  'webcompat/templates/list-issue/issuelist-issue.jst',
  'webcompat/templates/list-issue/issuelist-search.jst',
  'webcompat/templates/list-issue/issuelist-sorting.jst',
  'webcompat/templates/web_modules/issue-list.jst',
  'webcompat/templates/web_modules/label-editor.jst',
  'webcompat/templates/web_modules/milestone-editor.jst' ]
Source Files:  []
Style Files:  [ 'webcompat/static/css/webcompat.dev.css' ]
Style Files:  [ 'webcompat/static/css/src/animations.css',
  'webcompat/static/css/src/bio.css',
  'webcompat/static/css/src/button.css',
  'webcompat/static/css/src/dropdown.css',
  'webcompat/static/css/src/filter-bar.css',
  'webcompat/static/css/src/filter.css',
  'webcompat/static/css/src/footer.css',
  'webcompat/static/css/src/form.css',
  'webcompat/static/css/src/grid.css',
  'webcompat/static/css/src/hero.css',
  'webcompat/static/css/src/icons.css',
  'webcompat/static/css/src/issue.css',
  'webcompat/static/css/src/issues-list.css',
  'webcompat/static/css/src/label-box.css',
  'webcompat/static/css/src/label-editor.css',
  'webcompat/static/css/src/labels.css',
  'webcompat/static/css/src/nav.css',
  'webcompat/static/css/src/notification-bar.css',
  'webcompat/static/css/src/pagination.css',
  'webcompat/static/css/src/sub-nav.css',
  'webcompat/static/css/src/tiles.css',
  'webcompat/static/css/src/typo.css',
  'webcompat/static/css/src/variables.css' ]

    ________________________________________________
    |
    |   PurifyCSS has reduced the file size by ~ 10.4%  
    |
    ________________________________________________
    

    ________________________________________________
    |
    |   PurifyCSS - Rejected selectors:  
    |   .visually-hidden
    |	.filter-bar-dropdown-listbox ul
    |	.filter-bar-dropdown-listbox a
    |	.filter-bar-dropdown-listbox a:focus
    |	:checked + label .collapsed-text
    |	.filter-bar-dropdown-input:not(:checked) + label .collapsed-text
    |	.filter-bar-dropdown-listbox
    |	:checked ~ .filter-bar-dropdown-listbox
    |	.filter-label .needscontact
    |	.filter-label .needscontact:hover
    |	.filter-label .needscontact.is-active
    |	.filter-label .sitewait
    |	.filter-label .sitewait:hover
    |	.filter-label .sitewait.is-active
    |	.form-upload:hover .visually-hidden
    |	.is-validated .check::after
    |	.is-validated.no-js-error .label-upload
    |	.is-validated.no-js-error:hover .label-upload
    |	.is-validated.no-js-error:focus-within .label-upload
    |	.is-validated .label-remove
    |	.is-validated:hover .icon-remove
    |	.is-validated:focus-within .icon-remove
    |	.is-validated:hover .label-remove .label-icon-message
    |	.is-validated:focus-within .label-remove .label-icon-message
    |	.label-editor-list-item.focused
    |	.label-editorLauncher
    |	.label-editorLauncher.is-active + .label-editor::after
    |	.label-editorLauncher.is-active + .label-editor
    |	.label-editor-launcher:hover
    |	.label-editor-launcher::before
    |	.label-editor-launcher.is-active::before
    |	.wc-Issue-categoryEditor-button .label-editorLauncher
    |	.issue.label-needscontact .x2
    |	.issue.label-sitewait .x2
    |	.label-box-header.label-needscontact
    |	.label-box-editor .label-needscontact
    |	.label-box-header.label-sitewait
    |	.label-box-editor .label-sitewait
    |	.label-box .label-editor-list .label-needscontact
    |	.label-box .label-editor-list .label-sitewait
    |	.is-offscreen
    |	.notification-bar
    |	.notification-information
    |	.notification-alert
    |	.notification-thanks
    |	.is-disabled
    |	.italic
    |	blockquote
    |
    ________________________________________________
    
File "tmp/purestyles.css" created.

Done.

$ nosetests
Milestones are not initialized. Check logs.

npm run test:js -- --reporters="runner" --firefoxBinary=`which firefox`

> webcompat@ test:js /home/travis/build/webcompat/webcompat.com
> node ./tests/functional/_intern.js "--reporters=runner" "--firefoxBinary=/home/travis/firefox-58.0/firefox/firefox"

Error: 
        ======================================================
        Intern checkServer Connection Error: Error: connect ECONNREFUSED 127.0.0.1:5000
        ======================================================
        
  at ClientRequest.<anonymous>  <tests/functional/lib/setup.js:55:9>
  at emitOne  <events.js:116:13>
  at ClientRequest.emit  <events.js:211:7>
  at Socket.socketErrorListener  <_http_client.js:387:9>
  at emitOne  <events.js:116:13>
  at Socket.emit  <events.js:211:7>
  at emitErrorNT  <internal/streams/destroy.js:64:8>
something bad happened inside intern.run()
{ Error: 
        ======================================================
        Intern checkServer Connection Error: Error: connect ECONNREFUSED 127.0.0.1:5000
        ======================================================
        
    at ClientRequest.<anonymous> (/home/travis/build/webcompat/webcompat.com/tests/functional/lib/setup.js:55:9)
    at emitOne (events.js:116:13)
    at ClientRequest.emit (events.js:211:7)
    at Socket.socketErrorListener (_http_client.js:387:9)
    at emitOne (events.js:116:13)
    at Socket.emit (events.js:211:7)
    at emitErrorNT (internal/streams/destroy.js:64:8)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9) reported: true }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webcompat@ test:js: `node ./tests/functional/_intern.js "--reporters=runner" "--firefoxBinary=/home/travis/firefox-58.0/firefox/firefox"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webcompat@ test:js script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/travis/.npm/_logs/2018-06-29T11_12_01_401Z-debug.log

miketaylr · 2018-06-26T20:35:33Z

r? @magsout

magsout · 2018-06-27T14:17:04Z

@Regaddi thanks. R+ for the css.

Could you take a look for the failing test? It seems due to your commits.

@karlcow could you take a look for the UI? If it's ok with what you want?

My thought, it's we only change the order when we open the box, not when we check or uncheck the inputs

miketaylr · 2018-06-27T14:24:43Z

127.0.0.1 - - [26/Jun/2018 20:42:00] "GET /api/issues/100/comments?page=1 HTTP/1.1" 200 -
× chrome 67.0.3396.99 on Linux - Labels (auth) - Label editor filters label list based on entered text (1.35s)
    AssertionError: Entering label name in search box filters to matching label: expected 1 to deeply equal 21
      at Command.<anonymous>  <tests/functional/labels-auth.js:134:18>
      at Test.Label editor filters label list based on entered text [as test]  <tests/functional/labels-auth.js:132:10>
      at <src/lib/Test.ts:260:47>

karlcow

Thanks @Regaddi. The UX does what I wanted.

Some questions about accessibility

webcompat/static/css/src/label-editor.css

+}
+
+.label-editor-list-item-checkbox:checked + .label-editor-list-item::before {
+  content: "︎☑︎";


webcompat/static/css/src/label-editor.css

@@ -70,8 +85,15 @@

 /* checkbox */
 .label-editor-list-item-checkbox {
-  margin: 0;
-  padding: 0;
+  display: none;


Regaddi · 2018-06-28T06:07:19Z

My thought, it's we only change the order when we open the box, not when we check or uncheck the inputs

@magsout order is tied to the checked state of the checkboxes. It's a CSS-only solution :)

magsout · 2018-06-28T07:05:06Z

@Regaddi

@magsout order is tied to the checked state of the checkboxes. It's a CSS-only solution :)

Yes and it's a good solution ;)

miketaylr · 2018-06-29T17:37:28Z

Tests are green, are we ready to merge @magsout?

magsout · 2018-06-29T20:43:05Z

@miketaylr yes we can 👍

Thanks @Regaddi

miketaylr · 2018-06-29T21:03:50Z

cool, thanks @magsout
i'll go ahead and do another deploy for this.

Regaddi requested review from karlcow and zoepage June 22, 2018 07:04

Regaddi requested a review from miketaylr June 26, 2018 06:14

miketaylr requested review from magsout and removed request for karlcow and zoepage June 26, 2018 20:35

karlcow reviewed Jun 28, 2018

View reviewed changes

Issue #2505 - Custom checkbox & flexbox order to move checked labels up

93d7f94

Regaddi force-pushed the issues/2505 branch from d72d475 to 93d7f94 Compare June 29, 2018 11:10

Issue #2505 - Checkboxes only visually hidden. Fix label filtering

df4d162

magsout approved these changes Jun 29, 2018

View reviewed changes

magsout merged commit 9742eef into master Jun 29, 2018

magsout deleted the issues/2505 branch June 29, 2018 20:43

magsout added the status: add to changelog label Jun 29, 2018

miketaylr removed the status: add to changelog label Jun 29, 2018

laghee mentioned this pull request Jul 13, 2018

Milestone checkmarks are missing in dropdown #2554

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue #2505 - Custom checkbox & flexbox order to move checked labels up #2521

Issue #2505 - Custom checkbox & flexbox order to move checked labels up #2521

Regaddi commented Jun 22, 2018

TravisBuddy commented Jun 22, 2018 •

edited

Loading

miketaylr commented Jun 26, 2018

magsout commented Jun 27, 2018

miketaylr commented Jun 27, 2018

karlcow left a comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

Regaddi commented Jun 28, 2018

magsout commented Jun 28, 2018

miketaylr commented Jun 29, 2018

magsout commented Jun 29, 2018

miketaylr commented Jun 29, 2018

Issue #2505 - Custom checkbox & flexbox order to move checked labels up #2521

Issue #2505 - Custom checkbox & flexbox order to move checked labels up #2521

Conversation

Regaddi commented Jun 22, 2018

Proposed PR background

TravisBuddy commented Jun 22, 2018 • edited Loading

Travis tests have failed

1st Build

miketaylr commented Jun 26, 2018

magsout commented Jun 27, 2018

miketaylr commented Jun 27, 2018

karlcow left a comment

Choose a reason for hiding this comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

Regaddi commented Jun 28, 2018

magsout commented Jun 28, 2018

miketaylr commented Jun 29, 2018

magsout commented Jun 29, 2018

miketaylr commented Jun 29, 2018

TravisBuddy commented Jun 22, 2018 •

edited

Loading