Zelda #5273

merged 46 commits into from May 22, 2015


None yet

7 participants


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.

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


  • 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 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.



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


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

JohnONolan and others added some commits Mar 29, 2015
@JohnONolan @ErisDS JohnONolan New onboarding markup and styles 1daee7c
@JohnONolan @ErisDS JohnONolan Integrate new admin frame eadbf7c
@acburdine @ErisDS acburdine fixed extraneous div tag f2f10ac
@JohnONolan @ErisDS JohnONolan New settings headers b6ab6c1
@JohnONolan @ErisDS JohnONolan Content view c17c40a
@acburdine @ErisDS acburdine fix users template rendering f6a116b
@JohnONolan @ErisDS JohnONolan Cleanup 51ea7e0
@JohnONolan @ErisDS JohnONolan Lighten up publish bar 804425a
@JohnONolan @ErisDS JohnONolan Clean up borders 8d0d53b
@JohnONolan @ErisDS JohnONolan Much fix 2fffb4f
@JohnONolan @ErisDS JohnONolan Dem colours fb3d307
@JohnONolan @ErisDS JohnONolan Move in new icons 71255a3
@JohnONolan @ErisDS JohnONolan First pass - strip mixins 3bf189e
@JohnONolan @ErisDS JohnONolan Remove extends 6d89893
@JohnONolan @ErisDS JohnONolan Cleanup. b93d9a5
@JohnONolan @ErisDS JohnONolan Convert Sass to Myth 390c017
@JohnONolan @ErisDS JohnONolan Disable user selection by default 464d297
@JohnONolan @ErisDS JohnONolan New button component 0ffd857
@JohnONolan @ErisDS JohnONolan Cleanup CSS code style ca9f837
@JohnONolan @ErisDS JohnONolan Introduce CSScomb 208999a
@JohnONolan @ErisDS JohnONolan Integrate new auth styles into core 2f5a8f8
@JohnONolan @ErisDS JohnONolan Get rid of forgotten PW route bee39f4
@JohnONolan @ErisDS JohnONolan Fix lock icon class 7114f0a
@JohnONolan @ErisDS JohnONolan Automate CSScomb 3e6cf30
@JohnONolan @ErisDS JohnONolan First pass new notification component 2036552
@JohnONolan @ErisDS JohnONolan Remove double border 4c6bc6d
@JohnONolan @ErisDS JohnONolan Strip old MQs 3eb9429
@JohnONolan @ErisDS JohnONolan Properly scope editor title, fix bug overriding content mgmt cf517c7
@JohnONolan @ErisDS JohnONolan Introduce new notification and alerts components 4b39f88
@JohnONolan @ErisDS JohnONolan Fix splitbuttons, add more icons e871f20
@cobbspur @ErisDS cobbspur Initial fixes for tests on Zelda branch
No issue

- Adds embers declaration
- Removes duplicate class in code injection
@JohnONolan @ErisDS JohnONolan Fix uploader styles f6850e0
@JohnONolan @ErisDS JohnONolan Remove extra ember container 7417b29
@JohnONolan @ErisDS JohnONolan Refactor about page 13ec196
@cobbspur @ErisDS cobbspur Add UI link classes
No Issue

- Adds contextual classnames to Nav Bar links
- Various test updates

- Increase test coverage for new admin UI
- Fix up Caspertests for new Admin UI
@josephwegner @ErisDS josephwegner pin to csscomb 3.0.4 36f1902
@JohnONolan @ErisDS JohnONolan Update icons, remove old navbar file 3ecb2c0
@josephwegner @ErisDS josephwegner setup the basic css structure for the slider nav menu
- toggles the persistent sidenav under the open-nav class
- adds a toggle/hover bar to the side of the sidenav that shows the nav
  on hover
@JohnONolan @ErisDS JohnONolan Implement autonav a60d469
@JohnONolan @ErisDS JohnONolan Minor visual fixes 5012657
@cobbspur @ErisDS cobbspur Fix image uploader and update tests
No Issue

- fixes removal of url link on image uploader
- fixes functional tests for editor and content
@acburdine @ErisDS acburdine fixed notification components 77d08c3
@jaswilli @ErisDS jaswilli Rework signin form so correct actions are fired cf23977
@JohnONolan @ErisDS JohnONolan Fix z-index bug on notifications 50b5c9c
@jaswilli @ErisDS jaswilli Handle password reset from signin page ce64208
@cobbspur @ErisDS cobbspur Fix-up remaining functional tests
No Issue

- signup, signin and setup tests
- fixup other files for code styles
@ErisDS ErisDS changed the title from [WIP]: Zelda to Zelda 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment