New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zelda #5273

Merged
merged 46 commits into from May 22, 2015

Conversation

Projects
None yet
6 participants
@JohnONolan
Copy link
Member

JohnONolan commented May 15, 2015

This is a WIP of the 2015 revision of Ghost's admin UI. It's not set in stone, but rather the starting point for testing and experimentation.

Where we were before

The UI frame of Ghost admin was designed as a paged-serverside CMS application. Not a native-like single page responsive platform that it really is. It was also only designed with a very narrow use-case of “it should do X” - rather than “it should do X now, Y in 6 months and Z in a year”.

The best similar example that I can think of that speaks to this is the post settings menu. The old menu was a glorified dropdown with a couple of options. There was no way to extend it or do more with it, and it worked horrendously on mobile. It blocked us, for a long time, on being able to add new things to Ghost because there was simply nowhere to put them.

The new menu is a wonderful, fully fledged Ember component. It’s extensible, fast, and it is build with patterns instead of a fixed design. It leaves room for any number of things to be added to it, and it works beautifully on mobile - because it was designed based on mobile design conventions.

Where we are now

This is a move in the same direction for the rest of the Ghost Admin UI. The biggest goals are to make it more extensible, more easily navigable, more Ember-friendly, easier to scale down for mobile usage, and - of course - to feel more like an "app" and less like a website.

In addition - after a very long 2 years with many problems - this PR removes Sass entirely from the Ghost codebase and replaces it with Myth for pre-processing. You can think of this kind of like switching from CoffeeScript to Babel. Myth is a polyfill for the future (real) CSS specification (rather than an arbitrary set of syntax tools which become increasingly more complicated the more you use them).

The plan - pending any major problems - is to get this into master relatively soon and iterate on it quickly, with an emphasis on testing the relative ease of use compared to the previous version. There are lots of elements of the layout architecture which are in flux, and my hope is that usage will slowly start to determine what's working well (and what's not).

This is an early mockup from when I started playing with this concept - feel free to pull down this PR and have a play with it. This is a Work-in-Progress PR - so expect plenty of bugs and unfinished bits - I'll be pushing updates relatively regularly for the next few days to get it into a usable state.

image
NB: Editor details here are conceptual experimentation - this PR only covers UI-frame and navigation.

TODO:

  • New button component styles
  • New notification component styles
  • Refactor auth screen layouts
  • Refresh auth screen colours
  • Fix uploader component styles
  • Fix splitbuttons
  • Fix external-link icons
  • Add CSS linting
  • Refactor about page
  • Squash and clean up commits

Ember help wanted:

  • Remove <div id="container"> first child element inside body
  • Fix up notification rendering, see TODOs in application.hbs
  • Fix icon overflow after uploading image - @cobbspur ?
  • Navigating from editing post => new post, is broken
  • Refactor autonav show/hide TODOs in views/application.js
  • Remove all old mobile emberjs layout functionality
@ErisDS

This comment has been minimized.

Copy link
Member

ErisDS commented May 15, 2015

Much huzzah for Zelda 🎺 🎈

I really recommend checking out this PR and having a play with the new application frame. There's a tutorial here on how to setup your environment to make it SUPER easy to checkout a PR.

@nuclearpengy

This comment has been minimized.

Copy link

nuclearpengy commented May 16, 2015

❤️

a date selector would be nice, so as not to need to type in the date

@JohnONolan

This comment has been minimized.

Copy link
Member

JohnONolan commented May 21, 2015

This is pretty much just waiting on help with the ember cleanup tasks now

@ErisDS ErisDS force-pushed the JohnONolan:zelda branch from 21ebc6b to 7f5e10d May 22, 2015

Fix-up remaining functional tests
No Issue

- signup, signin and setup tests
- fixup other files for code styles

@ErisDS ErisDS force-pushed the JohnONolan:zelda branch from 7f5e10d to 2e5caeb May 22, 2015

@ErisDS ErisDS changed the title [WIP]: Zelda Zelda May 22, 2015

JohnONolan added a commit that referenced this pull request May 22, 2015

@JohnONolan JohnONolan merged commit 27569b0 into TryGhost:master May 22, 2015

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment