Change Design of Comparison Page and NavBar
monasobh opened this issue · 14 comments
Is your feature request related to a problem? Please describe:
The Navigationbar is taking away too much space, the focus should be on the metrics.
The metrics design should be similar to the overview page and have a little margin.
Please describe the solution you'd like:
Make Navigationbar smaller, add margin between metrics and make metrics header smaller.
Affected Component(s):
ComparisonPage, UI,
Before:
Changes:
- rename "Analysis Views" --> Monitoring
- rename "Settings" --> Configuration
- change size of Navbar
- changed color of "Aggregation: 1 second" to our primary color (Darkgrey)
- reduced size of graphs (remove white space between headline and metric)
- added space between graphs
- make y-axis font smaller
- added light-grey background
- changed font size of metric (similar to the db name in db information)
After:
Changes (from left to right):
Looks good to me, thanks!
rename "Analysis Views" --> Monitoring
Was that someone's request?
No, just my suggestion. It's shorter and often used in other database dashboards.
We use different size and style of the font-family Roboto everywhere.
I just saw the change to Roboto without providing alternatives fonts. What happens on a computer without Roboto? I just remember that we had the custom font discussion before and I was surprised to see that coming up again.
Roboto is a Google Font which means that the browsers (Chrome, Firefox, Safari, Opera, Internet Explorer) are supported by those fonts. Using an unsupported browser means that the text is displayed in the unsupported browser's default font.
That’s assuming users allow font downloading (should be true for most, but not for all).
And I assume that this material framework has better fall backs than the default and rather some other serifless fonts.
What is bothering me is that you haven’t provided these. What happens without Roboto?
So you would like us to set a second font in our code in case Roboto is not being supported by the browser? Do you know what font that would be?
I'd say font-family: Sans-Serif; but I don't really have a plan. :D
Unfortunately it's not possible to just set the font-family to sans-serif. I would say that if someone denied the font downloading in their browser, it's probably on purpose (because it's activated by default). For me, it would not make a lot of sense to set another fall back font, unknowingly if that font even exists in the browser, where the font-downloading is off.
Why shouldn’t this be possible?
From my understanding it’s best practice: https://www.w3schools.com/cssref/css_websafe_fonts.asp
Relying on custom fonts (still, without even having a good reason to use them in the first place IMO) is just wrong.
Our material design framework vuetify already sets sans-serif as fallback font
Good to know, but if we use Roboto anyway and have a fall-back, why set it in the discussed PR?
Good to know, but if we use Roboto anyway and have a fall-back, why set it in the discussed PR?
Ah sorry nvm, I just noticed this PR adds Roboto for all plotly charts. So then this has nothing to do with vuetify. @monasobh Just do this: https://plotly.com/javascript/reference/#layout-font-family
Good to know, but if we use Roboto anyway and have a fall-back, why set it in the discussed PR?
In this PR I just changed the description of the y-axis of the metrics to the same font we (Vuetify) use which is Roboto. Because we use plotly for our metrics we have to separately set the font for the x- and y-axis to Roboto to be consistent, because the default font of plotly is not Roboto.
@schTi I already added "Roboto, regular" but I might as well change it to "Roboto, sans-serif".
We have pretty long aneinandervorbeigeredet, but I like the result! 👍