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

WIP: 2019 design #1153

Open
wants to merge 31 commits into
base: master
from

Conversation

@ssddanbrown
Copy link
Member

ssddanbrown commented Dec 1, 2018

This is a WIP design update targeted for early 2019. It includes some functional aspects of the design as well as just styles.

Design Goals

  • Improved design consistency and feature usage throughout application.
  • Provide a more modern, less "stock" feel.
  • Cleanup of colour-scheme for easier customizability.
  • Lessen usage of glaring entity colours.
  • Improved mobile usability.
  • Increased functionality in core areas for improved app usage efficiency. (Book list sorting, for example)

Early Preview (Comparison)

Old Books List View
bookstack_books_redesign_old

New Books List View
bookstack_books_redesign

ssddanbrown added some commits Oct 16, 2018

Started on a design update
- Added base of new grid system.
- Added new margin/padding/visiblity helpers.
- Made header collapse to overflow menu on mobile.
Started reworking of page-show design
- Updated core toolbar & breadcrumb design
@qianmengnet

This comment has been minimized.

Copy link
Contributor

qianmengnet commented Dec 3, 2018

This list of books and sorting looks good.

@lucassmacedo

This comment has been minimized.

Copy link

lucassmacedo commented Dec 3, 2018

Nice!

@lostdesign

This comment has been minimized.

Copy link

lostdesign commented Dec 6, 2018

The typography needs more contrast and hierarchy but it looks great overall

@Shackelford-Arden

This comment has been minimized.

Copy link

Shackelford-Arden commented Dec 7, 2018

Personally, I'm a bit fan of the increased usage of the available space. Definitely excited!

Implemented functionality to make books sort function
Also changed public user settings to be stored in session rather than DB.
Cleaned existing list view type logic.

ssddanbrown added some commits Dec 8, 2018

ssddanbrown added some commits Jan 13, 2019

@seanosullivanuk

This comment has been minimized.

Copy link

seanosullivanuk commented Jan 14, 2019

The early preview looks nice. I look forward to seeing this progress.

@jorgedeloera

This comment has been minimized.

Copy link

jorgedeloera commented Jan 21, 2019

There is some design file on which they are based (sketchapp, figma or something)?
I am ux designer, i can help.

ssddanbrown added some commits Jan 31, 2019

@ssddanbrown

This comment has been minimized.

Copy link
Member Author

ssddanbrown commented Feb 3, 2019

Made some good progress this weekend, Most views have now been converted to the new design but a lot of additional functionality, improvements, fixing and tidying still to do.

@jorgedeloera No design files I'm afraid, designing directly in code 😬.

Here's another preview:

Old Profile View
bookstackdev com_settings_users_1 1

New Profile View
bookstackdev com_settings_users_1

@JHenneberg

This comment has been minimized.

Copy link

JHenneberg commented Feb 4, 2019

@ssddanbrown : looks much more elegant and clean.

@MrSnoozles

This comment has been minimized.

Copy link

MrSnoozles commented Feb 4, 2019

Looks really nice and cleaned up 👍 Can't wait :)

@edenpc

This comment has been minimized.

Copy link

edenpc commented Feb 10, 2019

Looks really great!

@chou0214

This comment has been minimized.

Copy link

chou0214 commented Feb 11, 2019

can't wait for the new layout

@tranthon

This comment has been minimized.

Copy link

tranthon commented Feb 14, 2019

When would you release this 2019 design version?

ssddanbrown added some commits Feb 16, 2019

Re-arranged some list items to flexbox instead of grid
Since flexbox is better supported on a wider range of elements
@ssddanbrown

This comment has been minimized.

Copy link
Member Author

ssddanbrown commented Feb 16, 2019

Have been playing about with a more unique & efficient /shelves list view, Where all books are directly listed in columns, kind of like real-life shelves. Grid view will remain as a more visual overview.

bookstackdev com_shelves

Made shelf listing more unique & efficient
- Now includes listing of all books within.
@Nebucatnetzer

This comment has been minimized.

Copy link

Nebucatnetzer commented Feb 17, 2019

Looks good :)

ssddanbrown added some commits Feb 17, 2019

@Nebucatnetzer

This comment has been minimized.

Copy link

Nebucatnetzer commented Feb 17, 2019

About improving the mobile usability. When I notice something that doesn't work properly on a mobile device due to the design. E.g. that something doesn't fit on the screen. Should I open a new issue for it or post it here?

@ssddanbrown

This comment has been minimized.

Copy link
Member Author

ssddanbrown commented Feb 17, 2019

@Nebucatnetzer Probably best to open a new issue, but please don't raise anything for now since things are rapidly changing and/or unfinished. At some point I'll merge this into master for testing, translations and review at which point issues can be created.

@Nebucatnetzer

This comment has been minimized.

Copy link

Nebucatnetzer commented Feb 18, 2019

I didn't notice the problems in the new design but in the old design and I don't know what exactly you plan to change in the mobile layout with the new design.

@ssddanbrown

This comment has been minimized.

Copy link
Member Author

ssddanbrown commented Feb 18, 2019

@Nebucatnetzer Okay, The structure of all views will effectively be completely different on mobile after the redesign so hold off for now until merged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment