FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

2019 design by ssddanbrown · Pull Request #1153 · BookStackApp/BookStack · GitHub

2019 design - #1153

Merged
ssddanbrown merged 65 commits into
masterfrom
2019-design
Apr 14, 2019
Merged

2019 design#1153
ssddanbrown merged 65 commits into
masterfrom
2019-design

Conversation

ssddanbrown commented Dec 1, 2018
edited
Loading

Copy link
Copy Markdown
Member

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

New Books List View

Copy link
Copy Markdown
Contributor

This list of books and sorting looks good.

Copy link
Copy Markdown

Nice!

Copy link
Copy Markdown

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

Copy link
Copy Markdown

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

Also changed public user settings to be stored in session rather than DB.
Cleaned existing list view type logic.
This was referenced Dec 24, 2018

Copy link
Copy Markdown

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

Copy link
Copy Markdown
Member Author

Getting there: https://gfycat.com/acceptablewanarkshell

Have had good progress over these last two weekends. Just a few small bits and an update to the mobile styles now before it's ready to be merged into master.

Abijeet commented Apr 7, 2019

Copy link
Copy Markdown
Member

@ssddanbrown - Looks good!

A few things,

  1. Padding on the top of the page, between the page heading and the border of the white main section feels a little high.
  2. Having the create buttons along with the other buttons that are specific to the page (Edit, Delete etc) we are currently viewing feels a little awkward. Maybe we can add a horizontal divider?
  3. On the same menu, how are we deciding the order of the menu items?

Copy link
Copy Markdown
Contributor

Getting there: https://gfycat.com/acceptablewanarkshell

Have had good progress over these last two weekends. Just a few small bits and an update to the mobile styles now before it's ready to be merged into master.

Really good progress. Cant wait.

Copy link
Copy Markdown
Member Author

@Abijeet

  1. Padding on the top of the page, between the page heading and the border of the white main section feels a little high.

Yeah, I've had a surprising amount of trouble with this padding, It never looks quite right depending on the page content. Will likely adjust this again before release.

  1. Having the create buttons along with the other buttons that are specific to the page (Edit, Delete etc) we are currently viewing feels a little awkward. Maybe we can add a horizontal divider?

Good idea, Some visual separation would really help here.

  1. On the same menu, how are we deciding the order of the menu items?

Not really decided yet. The ordering is something I know will change before release. It feels odd to not have the edit page action at the top. At some point I'll put some focus on this, probably at the same time as your idea from point 2.

ssddanbrown mentioned this pull request Apr 11, 2019

Copy link
Copy Markdown
Member Author

Upon other bits, I've done some updates to the mobile layout today.

Here's a preview of what this looks like, I've followed the same flow for the exact same content at iPhone SE sizes (Our smallest target):

Actually got stuck a few times on the old design. I know there's still some padding/size changes for mobile still to do. Still need to update Markdown editor for mobile.

Copy link
Copy Markdown
Member Author

If anyone has some better recommendations for the wording (Or good ideas for icons) of the info/content tabs that would be great:

Info will show everything that's currently in the sidebar and any buttons/actions. Contents focuses on the main content

Copy link
Copy Markdown

Looks a lot cleaner, however we'll notice what could be improved when we use it in production :)

ezzra commented Apr 14, 2019

Copy link
Copy Markdown

Much better, but the header is still too large, the breadcrumb row is too big and I wonder if there is even a possibility to hide it somewhere else?!

Also tweaked padding and responsivness on many common elements
Also added test for user list order preferences

Copy link
Copy Markdown
Member Author

After 6 Months from starting this redesign, I'm fairly happy with where it's got to. Will still be some tweaks and fixes to make while other bits are completed for the next release. Now happy to merge into master.

Feel free to open new issues regarding the design if you're comfortable playing with the master branch, Please prefix the issue names with [2019 design] so I can easily see if the issue is regarding this design. Be aware that UI stuff is very opinionated and subjective so sorry if I close any such issues more hastily than you'd hope.

ssddanbrown merged commit 03073dd into master Apr 14, 2019
ssddanbrown deleted the 2019-design branch May 5, 2019 15:04
Abijeet changed the title WIP: 2019 design 2019 design May 5, 2019

nmehlei commented May 7, 2019

Copy link
Copy Markdown

After switching to the new version, the tiles of the grid view in our books list have now a maximum width of ~262px with the book titles h2 element having a maximum width of 214px. This leaves only ~19 characters before the title is being wrapped. Is this expected behavior? At least in our case, it negatively impacts the visual look but this probably depends on the average book length and might be very different in other cases.

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Development

Successfully merging this pull request may close these issues.


Back | FazBrowse Home | New Git URL