Page MenuHomePhabricator

Implement CSS styles for Jade Entity UI
Closed, ResolvedPublic

Description

We need to implement CSS styles in the Jade UI.

Design mockups are here: https://phabricator.wikimedia.org/T212370

Right now we just have the facet view developed. The components/widgets render, but need to be lined up better on the page. Also some icons are not showing up for some reason.

Due to the structure of the extension app, this may require writing some JS as well.

All frontend code lives in the resources/ directory and CSS files live alongside the corresponding JS file.
All page components will be found in the widgets/ directory. All popup form components will be found in the dialogs/ dir.
The majority of widgets/component classnames have been added to the css files for ease of development, although I might have missed a couple.

Details

ProjectBranchLines +/-Subject
mediawiki/extensions/Jademaster+1 -1
mediawiki/extensions/Jademaster+25 -2
mediawiki/extensions/Jademaster+8 -5
mediawiki/extensions/Jademaster+3 -1
mediawiki/extensions/Jademaster+2 -1
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+2 -1
mediawiki/extensions/Jademaster+6 -0
mediawiki/extensions/Jademaster+3 -1
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+4 -1
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+3 -1
mediawiki/extensions/Jademaster+5 -0
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+2 -2
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+5 -0
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+2 -2
mediawiki/extensions/Jademaster+2 -2
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+2 -2
mediawiki/extensions/Jademaster+2 -2
mediawiki/extensions/Jademaster+2 -1
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+4 -1
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+5 -1
mediawiki/extensions/Jademaster+3 -1
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+3 -1
mediawiki/extensions/Jademaster+3 -1
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+1 -2
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+1 -2
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+3 -1
mediawiki/extensions/Jademaster+1 -0
mediawiki/extensions/Jademaster+1 -1
mediawiki/extensions/Jademaster+4 -0
mediawiki/extensions/Jademaster+98 -22
mediawiki/extensions/Jademaster+83 -17
Show related patches Customize query in gerrit

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change 574277 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Removed destructive flag from jade-proposeNewLabelDialog-cancelBtn

https://gerrit.wikimedia.org/r/574277

Change 574278 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Removed destructive flag from jade-endorseDialog-cancelBtn

https://gerrit.wikimedia.org/r/574278

Change 574402 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Add class jade-promoteDialog-commentForm

https://gerrit.wikimedia.org/r/574402

Change 574403 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Right aligned jade-promoteDialog-commentForm-buttons

https://gerrit.wikimedia.org/r/574403

Change 574697 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Aligned jade-promoteDialog-errorMessage to the left

https://gerrit.wikimedia.org/r/574697

Change 574698 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added jade-moveEndorsementDialog-commentForm-buttons class

https://gerrit.wikimedia.org/r/574698

Change 574699 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Right aligned jade-moveEndorsementDialog-commentForm-buttons

https://gerrit.wikimedia.org/r/574699

Change 574700 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Aligned jade-moveEndorsementDialog-errorMessage

https://gerrit.wikimedia.org/r/574700

Change 574701 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Aligned jade-moveEndorsementDialog-errorMessage to the left

https://gerrit.wikimedia.org/r/574701

Change 574700 abandoned by Kevin Bazira:
Aligned jade-moveEndorsementDialog-errorMessage

Reason:
Fixed commit message in patch set 574701

https://gerrit.wikimedia.org/r/574700

Change 574697 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Aligned jade-promoteDialog-errorMessage to the left

https://gerrit.wikimedia.org/r/574697

Change 574698 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added jade-moveEndorsementDialog-commentForm-buttons class

https://gerrit.wikimedia.org/r/574698

Change 574699 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Right aligned jade-moveEndorsementDialog-commentForm-buttons

https://gerrit.wikimedia.org/r/574699

Change 574701 merged by Accraze:
[mediawiki/extensions/Jade@master] Aligned jade-moveEndorsementDialog-errorMessage to the left

https://gerrit.wikimedia.org/r/574701

Change 574994 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added HorizontalLayout to move endorsement dialog button

https://gerrit.wikimedia.org/r/574994

Change 574998 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Aligned jade-ui-moveendorsement-button to the right

https://gerrit.wikimedia.org/r/574998

Change 574994 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added HorizontalLayout to move endorsement dialog button

https://gerrit.wikimedia.org/r/574994

Change 574998 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Aligned jade-ui-moveendorsement-button to the right

https://gerrit.wikimedia.org/r/574998

Change 575239 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added jade-facet-editquality-desc-popup class

https://gerrit.wikimedia.org/r/575239

Change 575241 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Moved popup to the right

https://gerrit.wikimedia.org/r/575241

Change 575239 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added jade-facet-editquality-desc-popup class

https://gerrit.wikimedia.org/r/575239

Change 575241 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Moved popup to the right

https://gerrit.wikimedia.org/r/575241

Change 575996 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed endorsementWidget comment font style to italic

https://gerrit.wikimedia.org/r/575996

Change 576041 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed proposalWidget-editForm-text input to textarea

https://gerrit.wikimedia.org/r/576041

Change 575996 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Changed endorsementWidget comment font style to italic

https://gerrit.wikimedia.org/r/575996

Change 576041 merged by Accraze:
[mediawiki/extensions/Jade@master] Changed proposalWidget-editForm-text input to textarea

https://gerrit.wikimedia.org/r/576041

Change 576264 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Moved proposeNewLabelDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/576264

Change 576266 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Made proposeNewLabelDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/576266

Change 576269 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Moved endorseDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/576269

Change 576272 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Made endorseDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/576272

Change 576264 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Moved proposeNewLabelDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/576264

Change 576266 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Made proposeNewLabelDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/576266

Change 576269 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Moved endorseDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/576269

Change 576272 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Made endorseDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/576272

Change 576635 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Moved deleteEndorsementDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/576635

Change 576644 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Made deleteEndorsementDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/576644

Change 576635 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Moved deleteEndorsementDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/576635

Change 576644 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Made deleteEndorsementDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/576644

Change 577190 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Moved moveEndorsementDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/577190

Change 577201 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Made moveEndorsementDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/577201

Change 577190 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Moved moveEndorsementDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/577190

Change 577201 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Made moveEndorsementDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/577201

Change 577425 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Moved deleteProposalDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/577425

Change 577459 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Made deleteProposalDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/577459

Change 577463 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Made deleteProposalDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/577463

Change 577459 abandoned by Kevin Bazira:
Made deleteProposalDialog errorMessage span entire section width

Reason:
Fixed with patchset 577463

https://gerrit.wikimedia.org/r/577459

Change 577465 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Moved promoteDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/577465

Change 577466 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Made promoteDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/577466

Change 578282 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added jade-proposalWidget-label-productive class

https://gerrit.wikimedia.org/r/578282

Change 578286 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed color of productive label to green50

https://gerrit.wikimedia.org/r/578286

Change 578289 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed background image of productive label icon

https://gerrit.wikimedia.org/r/578289

Change 578291 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed background image of productive label icon

https://gerrit.wikimedia.org/r/578291

Change 578293 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed background image of productive label icon

https://gerrit.wikimedia.org/r/578293

Change 578295 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed background image of productive label icon

https://gerrit.wikimedia.org/r/578295

Change 578293 abandoned by Kevin Bazira:
Changed background image of productive label icon

Reason:
Fixed lint issues in patchset 578295

https://gerrit.wikimedia.org/r/578293

Change 578291 abandoned by Kevin Bazira:
Changed background image of productive label icon

Reason:
Fixed lint issues in patchset 578295

https://gerrit.wikimedia.org/r/578291

Change 578289 abandoned by Kevin Bazira:
Changed background image of productive label icon

Reason:
Fixed lint issues in patchset 578295

https://gerrit.wikimedia.org/r/578289

Change 578508 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added jade-proposeNewLabelDialog-selectOption-1-productive class

https://gerrit.wikimedia.org/r/578508

Change 578512 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed color of proposeNewLabelDialog productive label to green50

https://gerrit.wikimedia.org/r/578512

Change 578513 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Changed background image of proposeNewLabelDialog productive label icon

https://gerrit.wikimedia.org/r/578513

Change 577425 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Moved deleteProposalDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/577425

Change 577463 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Made deleteProposalDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/577463

Change 577465 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Moved promoteDialog errorMessage to the top of dialog buttons

https://gerrit.wikimedia.org/r/577465

Change 577466 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Made promoteDialog errorMessage span entire section width

https://gerrit.wikimedia.org/r/577466

Change 578282 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added jade-proposalWidget-label-productive class

https://gerrit.wikimedia.org/r/578282

Change 578286 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Changed color of productive label to green50

https://gerrit.wikimedia.org/r/578286

Change 578295 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Changed background image of productive label icon

https://gerrit.wikimedia.org/r/578295

Change 578508 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added jade-proposeNewLabelDialog-selectOption-1-productive class

https://gerrit.wikimedia.org/r/578508

Change 578512 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Changed color of proposeNewLabelDialog productive label to green50

https://gerrit.wikimedia.org/r/578512

Change 578513 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Changed background image of proposeNewLabelDialog productive label icon

https://gerrit.wikimedia.org/r/578513

Change 578720 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added width for jade-endorsementWidget

https://gerrit.wikimedia.org/r/578720

Change 578769 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Adjusted margin-top for jade-proposeNewLabelDialog-selectOption-* (1,2 & 3)

https://gerrit.wikimedia.org/r/578769

Change 578720 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added width for jade-endorsementWidget

https://gerrit.wikimedia.org/r/578720

Change 578769 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Adjusted margin-top for jade-proposeNewLabelDialog-selectOption-* (1,2 & 3)

https://gerrit.wikimedia.org/r/578769

Change 579235 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Aligned diffWidget Visual editor and Wikitext buttons to the right

https://gerrit.wikimedia.org/r/579235

Change 579235 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Aligned diffWidget Visual editor and Wikitext buttons to the right

https://gerrit.wikimedia.org/r/579235

Change 579527 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added maximum height to jade-entity-diff-panel

https://gerrit.wikimedia.org/r/579527

Change 579529 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Adjusted top and bottom margin areas for jade-entity-view-split

https://gerrit.wikimedia.org/r/579529

Change 579527 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added maximum height to jade-entity-diff-panel

https://gerrit.wikimedia.org/r/579527

Change 579529 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Adjusted top and bottom margin areas for jade-entity-view-split

https://gerrit.wikimedia.org/r/579529

Change 579914 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Represented proposalWidget-notes in multiline

https://gerrit.wikimedia.org/r/579914

Change 579914 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Represented proposalWidget-notes in multiline

https://gerrit.wikimedia.org/r/579914

Change 582002 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added check for missing userpage

https://gerrit.wikimedia.org/r/582002

Change 582642 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Added check for missing user Talk Page

https://gerrit.wikimedia.org/r/582642

Change 582002 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added check for missing userpage

https://gerrit.wikimedia.org/r/582002

Change 582642 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Added check for missing user Talk Page

https://gerrit.wikimedia.org/r/582642

Change 583587 had a related patch set uploaded (by Kevin Bazira; owner: Kevin Bazira):
[mediawiki/extensions/Jade@master] Adjusted left margin area for proposalListWidget alternativesBtn

https://gerrit.wikimedia.org/r/583587

Change 583587 merged by jenkins-bot:
[mediawiki/extensions/Jade@master] Adjusted left margin area for proposalListWidget alternativesBtn

https://gerrit.wikimedia.org/r/583587

@kevinbazira, it looks like this might be done. What do you think?

@Halfak, yes this is done for now.

It will be re-activated whenever new elements or facets are added to the Jade UI.