GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — 2019 design by ssddanbrown · Pull Request #1153 · BookStackApp/BookStack

Conversation

@ssddanbrown

@ssddanbrown ssddanbrown commented Dec 1, 2018 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

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
bookstack_books_redesign_old

New Books List View
bookstack_books_redesign

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

TBK, derek-shnosh, cnfw, wouterloedeman, sebklaus, Biepa, AbijeetP, FreeTheTech101, MrSnoozles, BeckerFelix, and 23 more reacted with thumbs up emoji Bolthier, Grekkor, yamss, lithium-ap, SebastiaanKloos, bishwanathjha, daicain, lifepeer, and dawolf reacted with heart emoji
All reactions
  • 👍 33 reactions
  • ❤️ 9 reactions
ssddanbrown added 9 commits October 16, 2018 18:49
@ssddanbrown
Started on a design update
89be30f
- Added base of new grid system.
- Added new margin/padding/visiblity helpers.
- Made header collapse to overflow menu on mobile.
@ssddanbrown
Started reworking of page-show design
0e395b1
- Updated core toolbar & breadcrumb design
@ssddanbrown
Added sidebar layout size tweaks
c356612
@ssddanbrown
Merge branch 'master' into 2019-design
4a87201
@ssddanbrown
Updated book-tree design and abstracted breadcrumb template
4df1170
@ssddanbrown
Merge branch 'master' into 2019-design
d39fc84
@ssddanbrown
Started looking at the books listing design
aabd4c0
@ssddanbrown
Updated books listing to three column layout design
2a882a4
@ssddanbrown
Added list sorting styles, Yet to add functionality
0b976d9
@ssddanbrown ssddanbrown added 🛠️ Enhancement 🔧 Maintenance 🎨 Design 💻 Front-End 💆 UX labels Dec 1, 2018
@ssddanbrown ssddanbrown self-assigned this Dec 1, 2018
@qianmengnet

qianmengnet commented Dec 3, 2018

Copy link
Copy Markdown
Contributor

This list of books and sorting looks good.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@lucassmacedo

lucassmacedo commented Dec 3, 2018

Copy link
Copy Markdown

Nice!

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@lostdesign

lostdesign commented Dec 6, 2018

Copy link
Copy Markdown

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

aljawaid reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@Shackelford-Arden

Shackelford-Arden commented Dec 7, 2018

Copy link
Copy Markdown

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

aljawaid reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ssddanbrown
Implemented functionality to make books sort function
4c574c2
Also changed public user settings to be stored in session rather than DB.
Cleaned existing list view type logic.
@ssddanbrown ssddanbrown mentioned this pull request Dec 8, 2018
Looking to drop Internet Explorer 11 Support, Anyone Care? #1164
Closed
ssddanbrown added 4 commits December 8, 2018 23:34
@ssddanbrown
Added responsive functionality to tri-layout view.
e147419
@ssddanbrown
Added tri-layout desktop sticky-scroll
8fd8652
@ssddanbrown
Cleaned existing grid view up a little
ff0b900
@ssddanbrown
Rolled tri-layout to page edit and book-create
7f95b51
This was referenced Dec 24, 2018
Display Book Name in Search Results #1194
Closed
Search Term Log #1000
Closed
ssddanbrown added 2 commits January 13, 2019 14:10
@ssddanbrown
Merge branch 'master' into 2019-design
163a57c
@ssddanbrown
Converted more views to new layout and made breadcrumbs more flexible
0efed43
@seanosullivanuk

seanosullivanuk commented Jan 14, 2019

Copy link
Copy Markdown

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

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ssddanbrown

ssddanbrown commented Apr 7, 2019

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, Nebucatnetzer, JHenneberg, TommiieeSV, tgrosinger, and ezzra reacted with thumbs up emoji JtheBAB, Nebucatnetzer, and tgrosinger reacted with heart emoji JHenneberg reacted with rocket emoji
All reactions
  • 👍 6 reactions
  • ❤️ 3 reactions
  • 🚀 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@Abijeet

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?
All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@JHenneberg

JHenneberg commented Apr 8, 2019

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.

ssddanbrown reacted with heart emoji
All reactions
  • ❤️ 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ssddanbrown

ssddanbrown commented Apr 8, 2019

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ssddanbrown ssddanbrown mentioned this pull request Apr 11, 2019
Add Tag page. #1354
Closed
ssddanbrown added 10 commits April 13, 2019 10:50
@ssddanbrown
Updated the design of the comments section
2694bb8
@ssddanbrown
Updated and aligned entity dashboard elements
d66fab8
@ssddanbrown
Updated empty container item states
4d5e47a
@ssddanbrown
Updated guest page-create intermediate page
36481bb
@ssddanbrown
Added select-all helpers to permission tables
07adfb2
@ssddanbrown
Organised entity action buttons a little more
cc24d47
@ssddanbrown
Fixed "Add comment" layout when no comments exist
d3cc261
@ssddanbrown
Added column select-all to role permission table
f797d2d
@ssddanbrown
Updated tri-layout on mobile to be tab based
8d358e4
@ssddanbrown
Updated editor usability on mobile
21e1123
@ssddanbrown

ssddanbrown commented Apr 13, 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):

  • Old Design: https://gfycat.com/EminentExhaustedFinch
  • New Design: https://gfycat.com/esteemedfrighteningazurevase

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ssddanbrown

ssddanbrown commented Apr 13, 2019

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:

bookstack local_books_all-about-bookstack_page_bookstack-general-usage(iPhone 5_SE)

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

lithium-c7ks7s and Bolthier reacted with thumbs up emoji
All reactions
  • 👍 2 reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@Nebucatnetzer

Nebucatnetzer commented Apr 14, 2019

Copy link
Copy Markdown

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

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ezzra

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?!

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

ssddanbrown added 3 commits April 14, 2019 12:04
@ssddanbrown
Updated markdown editor for mobile
01be72d
Also tweaked padding and responsivness on many common elements
@ssddanbrown
Updated view toggle to store date
9406b4d
Also added test for user list order preferences
@ssddanbrown
Updated user references to be app-default-supporting functions
ee58bea
@ssddanbrown

ssddanbrown commented Apr 14, 2019

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.

nmehlei, lithium-c7ks7s, MrSnoozles, and stkac reacted with thumbs up emoji Bolthier, cnfw, adamgranted, and DanDobrick reacted with hooray emoji lixaotec reacted with heart emoji
All reactions
  • 👍 4 reactions
  • 🎉 4 reactions
  • ❤️ 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ssddanbrown
ssddanbrown merged commit 03073dd into master Apr 14, 2019
@ssddanbrown ssddanbrown mentioned this pull request Apr 28, 2019
Book navigation visual redesign #1406
Closed
@ssddanbrown
ssddanbrown deleted the 2019-design branch May 5, 2019 15:04
@Abijeet Abijeet changed the title WIP: 2019 design 2019 design May 5, 2019
@nmehlei

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.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@ssddanbrown ssddanbrown mentioned this pull request Nov 15, 2019
Make pages bigger #1757
Closed
@yannizhang2019 yannizhang2019 mentioned this pull request Oct 23, 2022
Navigation bars take up too much space #3801
Closed
2 tasks done
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Uh oh!

There was an error while loading. Please reload this page.

Assignees

@ssddanbrown ssddanbrown

Labels

🎨 Design 💻 Front-End 🛠️ Enhancement 💆 UX 🔧 Maintenance

Milestone

v0.26.0

Development

Successfully merging this pull request may close these issues.

Uh oh!

There was an error while loading. Please reload this page.

18 participants

@ssddanbrown @qianmengnet @lucassmacedo @lostdesign @Shackelford-Arden @seanosullivanuk @Tzeenchist @jorgedeloera @JHenneberg @MrSnoozles @edenpc @chou0214 @tranthon @Nebucatnetzer @Abijeet @ezzra @p0lp0 @nmehlei
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.