Skip to content

Web console: refresh and tighten up the console styles βœ¨πŸ’…πŸ’«#10515

Merged
clintropolis merged 21 commits intoapache:masterfrom
implydata:style-pass
Oct 21, 2020
Merged

Web console: refresh and tighten up the console styles βœ¨πŸ’…πŸ’«#10515
clintropolis merged 21 commits intoapache:masterfrom
implydata:style-pass

Conversation

@vogievetsky
Copy link
Copy Markdown
Contributor

This is a style pass and color overhaul for the console. It was about time that a professional designer took a look at the console. The aim of this work was to make the console style tie in better with the Druid brand colors and to tighten up all the miscellaneous paddings and margins all over the place.

The true heavy lifting of this styling was was done by @asherbitter and all credit goes to him. I just helped with things like updating package versions and importing the new font.

localhost_18081_unified-console html(Doc screenshot) (9)

  • Notice the new background color hue (derivative from the Druid logo background)
  • The home view icons are now Druid brand colored
  • The logo in the top left corner was tightened up

localhost_18081_unified-console html(Doc screenshot) (10)

  • The data source tiles now fill up the entire space and are responsive

localhost_18081_unified-console html(Doc screenshot) (12)

  • Look at how the panels are much better defined
  • The padding in this view was tightened up
  • The font in the console has been changed from apple system default to Open Sans an open source (Apache-2.0) font which has monospaced numbers allowing us to align the numeric columns really nicely
  • Notice the flat buttons - the gradients have been removed as is the more modern style

localhost_18081_unified-console html(Doc screenshot) (13)

  • One of the table views

Original colors for reference:

localhost_18081_unified-console html(Doc screenshot) (4)

Copy link
Copy Markdown
Member

@clintropolis clintropolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very nice 🀘

@clintropolis clintropolis merged commit f391e89 into apache:master Oct 21, 2020
@vogievetsky vogievetsky deleted the style-pass branch October 21, 2020 06:11
@jihoonson jihoonson added this to the 0.21.0 milestone Jan 4, 2021
JulianJaffePinterest pushed a commit to JulianJaffePinterest/druid that referenced this pull request Jan 22, 2021
)

* no hardcoded dark mode

* update blueprint

* style pass

* add open sans font

* fix public path

* update licenses

* add comment

* allow zero bsd

* add new lines

* update tests

* remove default mods

* use variables

* fix background

* fix query init style

* pad fracional part

* paginate braces

* update to latest blueprint, fix column tree

* Smart query limit -> Auto limit

* adjust gutter color for dark mode

* fix spelling

* update snapshot

Co-authored-by: asherbitter <ofir@imply.io>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants