Small update to the UI's look and feel #395

rafaelconde · 2017-04-30T01:04:17Z

- Summary
This PR offers a very minor, pure visual update to the UI.
Take it as quick and dirty fixes to how it looks, and hopefully the plan is to fan this spark into a flame, and consider a more thoughtful effort to rethink the User Interface.

- Test plan

- Description for the changelog

Updates typography, colors, and some UI visual tweaks

- A picture of a cute animal (not mandatory but encouraged)

erquhart · 2017-05-01T13:57:23Z

@rafaelconde so fresh and so clean! Really happy to see this PR!

Things I love:

That typography!
Depth and motion
Improved consistency
No longer looks bad

I really only have one high level concern: contrast. We need it. Your mocks in #179 use gray for the header and sidebar, what do you think of pulling that into this change? Same for the form fields - at least for this iteration, we should have distinct borders for them. I think we can pull it off without hurting the look.

I mean you, you can pull it off. lol.

erquhart

A few basic code review points here, nothing major.

erquhart · 2017-05-01T14:00:18Z

src/components/AppHeader/AppHeader.css

@@ -2,6 +2,8 @@

 .appBar {
  background-color: var(--backgroundAltColor);
+  height: auto;
+  padding: 8px 2.4rem;


I'd like to see us stick to pixels for units, but open to discussion on it if you feel strongly.

I'd love to see us move away from pixels across the board (better for accessibility), but that's a much longer discussion, and one I'll probably lose. :)

I'm with @verythorough on using relative units instead of pixels. Any reason you prefer pixels, @erquhart?

@imorente the reasons for using px are consistency with existing CSS and the fact that rems and ems can cause half-pixel boundaries, which are undesirable. I have mixed feelings - those are both significant issues, but the accessibility problem is a hard one to ignore. For now, I think we should stick with px for the simple reason that we shouldn't make a transition to relative units ad-hoc, even if we do end up using them at some point in the future.

Yep, the idea is:

Use pixels everywhere for now - simple and declarative.

When we get an actual design system in place and get rid of all the hodge podge, bring in the ems and rems. It's more complex, but the benefits are there if we implement properly.

erquhart · 2017-05-01T14:05:42Z

src/components/EntryListing/EntryListing.js

@@ -56,7 +56,6 @@ export default class EntryListing extends React.Component {
          <p>{entry.getIn(['data', inferedFields.descriptionField])}</p>
          : inferedFields.remainingFields && inferedFields.remainingFields.map(f => (
            <p key={f.get('name')} className={styles.cardList}>
-              <span className={styles.cardListLabel}>{f.get('label')}:</span>{' '}


I agree that this is redundant when viewing all entries of a given type, but it's necessary for the editorial workflow and search, where multiple entry types are present at once. If we're removing this we should add it back in for those views.

I'll leave this to you, I'll revert it back 👍

erquhart · 2017-05-01T14:06:38Z

src/components/UI/card/Card.css

@@ -3,31 +3,35 @@
 .card {
  composes: base container rounded depth;
  overflow: hidden;
-}
-
-.card > *:not(iframe, video, img, header, footer) {


At a glance I'm uncertain why these ungainly selectors were added - are you sure we don't need them?

erquhart · 2017-05-01T14:07:24Z

src/components/UI/card/Card.css

 }

 .card > iframe,
 .card > video,
 .card > img {
-  max-width: 100%;
+  margin: -16px -24px 16px -24px;


Nitpick: you can drop the fourth value.

cassandraoid · 2017-05-01T17:17:00Z

I can't wait for the facelift.

My notes:

I agree we need more contrast. The cards with the same pattern as the background fades in a little bit too much for me.
The grid in the editor feels off to me. I like the contrast we have in it now, just wish it was a little prettier. (IE:Boxes feels shallow.)

biilmann · 2017-05-01T18:48:09Z

Comparing this:

With the current editing screen:

I think the current version is much easier to use. We need to make the UI look better, but it should never be at the cost of clarity and familiarity and I would bet good money that the current version will perform much, much better in any user testing with content editors that have never tried the CMS before.

I think the steps @erquhart has been taking in the current version to move away from the more discrete UI elements I had in my initial mockups, and towards something that looks way more like traditional form elements from a Wordpress admin UI or the like, is the right approach. The #1 goal should be to make it really, really easy to see what is the preview, what is a form element, where you can click, where the different fields are separated, etc.

Benaiah

I really like the direction you've gone. I have a couple small nitpicks on the CSS changes, but those are trivial.

Some thoughts on the design changes:

While I think most of the entry draft fields such as single lines or images are pretty clear, the body is a bit confusing. It's not really clear where the textbox starts or ends, and the toolbar is a bit confusing since it looks almost identical to the contents of the body editor. It actually looks a little like I'm supposed to edit the text in the toolbar, since it has the same underline as the text fields above.
When the cards don't distribute evenly across the rows, extra cards at the bottom are stretched dramatically to fill the space. Is this intended?
The search box and the rest of the header have very similar background colors, which is kinda hard on my eyes. IDK if that's a real issue or just me.

Benaiah · 2017-05-01T18:59:16Z

src/components/EntryListing/EntryListing.css

-  margin-left: 15px;
+  margin-bottom: 16px;
+  margin-left: 16px;
+  /*max-width: 31%;*/


This should be either uncommented or removed. We shouldn't have commented-out code committed to the repo.

Benaiah · 2017-05-01T19:01:59Z

src/components/UI/card/Card.css

+  letter-spacing: 0;
+  line-height: 24px;
+  padding: 0;
+  color: #8c8c8c;


I don't think this should be hardcoded - we should add it as a text color in theme.css.

Benaiah

LGTM

Needs rebase to ensure scrolling issues are still fixed.

Benaiah

LGTM - this merges easily into @erquhart's upcoming text editor scrolling PR, and that fix still works correctly once that's done.

erquhart · 2017-05-03T19:56:55Z

Rebased and added a commit to address the following:

Improved entry listing contrast by replacing shadow/border with input field border styling
Removed entry listing flex treatment - stretching cards can lead to wonky image presentation and degrade the overall appearance
Removed leftover toolbar bottom border
Slight code improvements

@rafaelconde let me know if you have thoughts on that last commit. I do think depth in the cards UI would be awesome, as well as a more elegant card grid presentation, but I think we need more polish when taking those steps. As it was, they were detracting from your stellar improvements.

biilmann · 2017-05-03T21:18:25Z

There's still some contract issues for some widgets - the image and date widget for examlple:

And the bottom bar also needs some clearer definition imo - right now it floats together with the forms panel.

erquhart · 2017-05-03T21:25:03Z

@biilmann I was thinking we could settle a bit on this PR, and fix the remaining contrast issues in a subsequent PR. Widgets and the editor footer are both on my radar.

erquhart

Hold off on merging, fixing the sticky toolbar appearance.

calavera · 2017-05-05T18:00:02Z

The contrast of the image widget is still a little bit off, it's very easy to miss. Can we make the border at least slightly more visible? Why are we using such a light grey in every border?

erquhart · 2017-05-09T15:28:33Z

@rafaelconde if you can improve the contrast issues that David and Matt pointed out, we should be good to merge.

rafaelconde · 2017-05-10T16:03:28Z

I addressed the contrast of popover and borders.

I don't believe that removing the drop-shadow on the cards is the best way to address the contrast issue (now some cards have depth, some don't 🙃).
I also don't think that removing the adaptive grid on the card layout is the best way to address the super wide orphan elements — this way we effectively will never have the grid taking advantage of the available space, it looks odd IMO.

I also think that this could and should be addressed on a separate PR 🙏

erquhart · 2017-05-10T17:31:06Z

@rafaelconde thanks, and yeah there's plenty to improve, and there will be more opportunity to do so. Just want to get this thing merged right now!

@biilmann @calavera I'm good with Rafa's changes, and I'm planning to merge this at EOD if there are no objections.

calavera · 2017-05-10T20:51:20Z

My main issue is that I can barely see the border in the image widget. That has not been addressed.

rafaelconde · 2017-05-10T21:06:03Z

Assuming @calavera is talking about this — I literally don't know how to change the border on that.

imorente · 2017-05-10T21:52:03Z

@rafaelconde, I found the styles for the image widget 🎉

They're here: https://github.com/netlify/netlify-cms/blob/visual-tweaks/src/components/Widgets/ImageControl.js#L113

rafaelconde · 2017-05-11T15:46:53Z

Thanks @imorente !

erquhart · 2017-05-12T16:00:23Z

@calavera good?

erquhart

@rafa just mentioned something I think we all forgot - the editorial workflow. He's planning to update for that soon, adding this as a requested change so we don't merge.

calavera · 2017-05-17T16:03:29Z

@calavera good?

yes

erquhart

Checked out the list and object widgets too, looks fine.

LGTM

erquhart suggested changes May 1, 2017

View reviewed changes

Benaiah suggested changes May 1, 2017

View reviewed changes

Benaiah previously approved these changes May 3, 2017

View reviewed changes

Benaiah approved these changes May 3, 2017

View reviewed changes

erquhart force-pushed the visual-tweaks branch 2 times, most recently from a65173f to 9745ac2 Compare May 3, 2017 19:56

erquhart approved these changes May 3, 2017

View reviewed changes

erquhart suggested changes May 3, 2017

View reviewed changes

rafaelconde and others added 14 commits May 5, 2017 12:49

Clean up basic colors and type

de5f9bc

Add hover effect on cards

9c1a41f

Tweak header and card grid

8a9370f

Update editor look and downplay header

1c95b5e

Make card take available space in grid

6492eea

Apply changes proposed by review

ff2a045

Change to dark sidebar

19f34c8

Add back the dark header

a1a9ebe

Make search bar smaller

a6c8a11

Increase contrast and focus of input fields

5adbeca

further improve ui contrast and consistency

e21a339

Add border to bottom bar and widget

996f5a3

Tweak border colors

515a08d

update rich text toolbar styling

3ee5a5e

erquhart force-pushed the visual-tweaks branch from 7515c4f to 3ee5a5e Compare May 5, 2017 16:59

erquhart approved these changes May 5, 2017

View reviewed changes

rafaelconde added 2 commits May 10, 2017 08:44

Increased contrast on borders

7fd8556

Increase contrast of popovers on editor

cb45997

Update border on image widget, tweak the copy

e212091

erquhart suggested changes May 13, 2017

View reviewed changes

fix notification style bugs

032e1f9

rafaelconde and others added 2 commits May 18, 2017 10:29

Tweak cards on Editorial Workflow

3a78626

improve theme color control via variables

62a8de9

erquhart approved these changes May 18, 2017

View reviewed changes

erquhart merged commit 2a1e9b4 into master May 18, 2017

erquhart deleted the visual-tweaks branch May 18, 2017 20:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Small update to the UI's look and feel #395

Small update to the UI's look and feel #395

rafaelconde commented Apr 30, 2017

erquhart commented May 1, 2017 •

edited

Loading

erquhart left a comment

erquhart May 1, 2017

verythorough May 1, 2017

imorente May 1, 2017

Benaiah May 1, 2017

erquhart May 2, 2017

erquhart May 1, 2017

rafaelconde May 3, 2017

erquhart May 1, 2017

erquhart May 1, 2017

cassandraoid commented May 1, 2017

biilmann commented May 1, 2017

Benaiah left a comment •

edited

Loading

Benaiah May 1, 2017

Benaiah May 1, 2017

Benaiah left a comment

Benaiah left a comment

erquhart commented May 3, 2017 •

edited

Loading

biilmann commented May 3, 2017

erquhart commented May 3, 2017

erquhart left a comment

calavera commented May 5, 2017 •

edited

Loading

erquhart commented May 9, 2017

rafaelconde commented May 10, 2017

erquhart commented May 10, 2017 •

edited

Loading

calavera commented May 10, 2017

rafaelconde commented May 10, 2017

imorente commented May 10, 2017

rafaelconde commented May 11, 2017

erquhart commented May 12, 2017 •

edited

Loading

erquhart left a comment •

edited

Loading

calavera commented May 17, 2017

erquhart left a comment

Small update to the UI's look and feel #395

Small update to the UI's look and feel #395

Conversation

rafaelconde commented Apr 30, 2017

erquhart commented May 1, 2017 • edited Loading

erquhart left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cassandraoid commented May 1, 2017

biilmann commented May 1, 2017

Benaiah left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Benaiah left a comment

Choose a reason for hiding this comment

Benaiah left a comment

Choose a reason for hiding this comment

erquhart commented May 3, 2017 • edited Loading

biilmann commented May 3, 2017

erquhart commented May 3, 2017

erquhart left a comment

Choose a reason for hiding this comment

calavera commented May 5, 2017 • edited Loading

erquhart commented May 9, 2017

rafaelconde commented May 10, 2017

erquhart commented May 10, 2017 • edited Loading

calavera commented May 10, 2017

rafaelconde commented May 10, 2017

imorente commented May 10, 2017

rafaelconde commented May 11, 2017

erquhart commented May 12, 2017 • edited Loading

erquhart left a comment • edited Loading

Choose a reason for hiding this comment

calavera commented May 17, 2017

erquhart left a comment

Choose a reason for hiding this comment

erquhart commented May 1, 2017 •

edited

Loading

Benaiah left a comment •

edited

Loading

erquhart commented May 3, 2017 •

edited

Loading

calavera commented May 5, 2017 •

edited

Loading

erquhart commented May 10, 2017 •

edited

Loading

erquhart commented May 12, 2017 •

edited

Loading

erquhart left a comment •

edited

Loading