github-mirrors/VictoriaMetrics
1
0
Fork 0
mirror of https://github.com/VictoriaMetrics/VictoriaMetrics.git synced 2024-11-21 14:44:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

vmui: increase font-size and fix the text display (#4273)

Browse source 
vmui: change default font size to 14px for better readability
vmui: fix bug with missing text on buttons in safari

---------

Co-authored-by: Roman Khavronenko <roman@victoriametrics.com>
This commit is contained in:
Yury Molodov 2023-05-11 14:50:09 +02:00 committed by GitHub
parent 7ea2531db0
commit a55d3f6882
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 44 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/vmui/packages/vmui/src/components/Chart/GraphTips/style.scss
View file

@ -19,7 +19,7 @@
&__description {
display: inline-block;
line-height: 20px;
line-height: 1.5;
svg,
code {

2
app/vmui/packages/vmui/src/components/Chart/Line/ChartTooltip/style.scss
View file

@ -66,7 +66,7 @@ $chart-tooltip-y: -1 * ($padding-small + $chart-tooltip-half-icon);
gap: $padding-small;
align-items: flex-start;
word-break: break-all;
line-height: 12px;
line-height: $font-size;
&__marker {
width: 12px;

1
app/vmui/packages/vmui/src/components/Chart/Line/Legend/LegendItem/style.scss
View file

@ -11,6 +11,7 @@
cursor: pointer;
transition: 0.2s ease;
margin-bottom: $padding-small;
font-size: $font-size-small;
&:hover {
background-color: rgba(0, 0, 0, 0.1);

2
app/vmui/packages/vmui/src/components/Configurators/AdditionalSettings/style.scss
View file

@ -5,7 +5,7 @@
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: $padding-global;
gap: $padding-medium;
&__input {
flex-basis: 160px;

5
app/vmui/packages/vmui/src/components/Configurators/StepConfigurator/style.scss
View file

@ -34,16 +34,15 @@
&-info {
font-size: $font-size-small;
line-height: 1.6;
line-height: 1.8;
a {
margin: 0 0.2em;
margin: 0 0.4em;
}
code {
padding: 0.2em 0.4em;
margin: 0 0.2em;
font-size: 85%;
background-color: $color-hover-black;
border-radius: 6px;
}

12
app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/style.scss
View file

@ -5,8 +5,6 @@
align-items: center;
justify-content: flex-start;
gap: $padding-global;
font-size: $font-size-small;
font-weight: bold;
&_column {
flex-direction: column;
@ -25,10 +23,12 @@
&-item {
position: relative;
padding: $padding-global $padding-small;
opacity: 0.5;
opacity: 0.7;
cursor: pointer;
transition: opacity 200ms ease-in;
text-transform: uppercase;
text-transform: capitalize;
font-size: $font-size;
font-weight: normal;
&_sub {
display: grid;
@ -63,11 +63,9 @@
white-space: nowrap;
padding: $padding-small;
color: $color-white;
border-radius: 2px;
border-radius: $border-radius-small;
opacity: 1;
transform-origin: top center;
font-size: $font-size-small;
font-weight: bold;
&-item {
cursor: pointer;

5
app/vmui/packages/vmui/src/components/Layout/Header/style.scss
View file

@ -63,9 +63,4 @@
margin: 0 auto;
}
}
&-nav {
font-size: $font-size-small;
font-weight: bold;
}
}

4
app/vmui/packages/vmui/src/components/Main/Alert/style.scss
View file

@ -10,10 +10,10 @@
background-color: $color-background-block;
border-radius: $border-radius-medium;
box-shadow: $box-shadow;
font-size: $font-size-medium;
font-size: $font-size;
font-weight: normal;
color: $color-text;
line-height: 20px;
line-height: 1.5;
&_mobile {
align-items: flex-start;

5
app/vmui/packages/vmui/src/components/Main/Button/style.scss
View file

@ -9,7 +9,7 @@ $button-radius: 6px;
justify-content: center;
padding: 6px 14px;
font-size: $font-size-small;
line-height: 15px;
line-height: 1.3;
font-weight: normal;
min-height: 31px;
border-radius: $button-radius;
@ -49,6 +49,7 @@ $button-radius: 6px;
display: grid;
align-items: center;
justify-content: center;
transform: translateZ(1px);
svg {
width: 15px;
@ -79,7 +80,7 @@ $button-radius: 6px;
/* size SMALL */
&_small {
padding: 4px 6px;
padding: 4px 8px;
min-height: 25px;
span {

8
app/vmui/packages/vmui/src/components/Main/Select/style.scss
View file

@ -5,12 +5,11 @@
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0 5px $padding-global;
padding: 8px 0 8px $padding-global;
cursor: pointer;
border: $border-divider;
border-radius: $border-radius-small;
min-height: 36px;
min-height: 40px;
&-content {
display: flex;
@ -18,8 +17,7 @@
justify-content: flex-start;
flex-wrap: wrap;
gap: $padding-small;
width: 100%;
max-width: calc(100% - ($padding-global + 61px));
flex-grow: 1;
&_mobile {
flex-wrap: nowrap;

6
app/vmui/packages/vmui/src/components/Main/Switch/style.scss
View file

@ -73,8 +73,12 @@ $switch-border-radius: $switch-handle-size + ($switch-padding * 2);
&__label {
white-space: nowrap;
font-size: inherit;
color: inherit;
margin-left: $padding-small;
transition: color 200ms ease;
color: $color-text-secondary;
}
&_active &__label {
color: $color-text;
}
}

4
app/vmui/packages/vmui/src/components/Main/Tabs/style.scss
View file

@ -16,7 +16,7 @@
padding: $padding-global $padding-small;
color: inherit;
text-decoration: none;
text-transform: uppercase;
text-transform: capitalize;
font-size: inherit;
font-weight: inherit;
opacity: 0.6;
@ -33,7 +33,7 @@
&__icon {
display: grid;
width: 15px;
width: 16px;
margin-right: $padding-small;
&_single {

4
app/vmui/packages/vmui/src/components/Main/TextField/style.scss
View file

@ -18,7 +18,7 @@
padding: $padding-small $padding-global;
border: $border-divider;
background-color: transparent;
font-size: 12px;
font-size: $font-size;
line-height: 18px;
grid-area: 1 / 1 / 2 / 2;
overflow: hidden;
@ -71,7 +71,7 @@
display: block;
border-radius: $border-radius-small;
transition: border 200ms ease;
min-height: 34px;
min-height: 40px;
resize: none;
overflow: hidden;
background-color: transparent;

5
app/vmui/packages/vmui/src/components/TraceQuery/NestedNav/NestedNav.tsx
View file

@ -88,11 +88,12 @@ const NestedNav: FC<RecursiveProps> = ({ trace, totalMsec }) => {
</div>
{(isExpanded || showFullMessage) && (
<Button
variant="text"
variant="outlined"
size="small"
color="secondary"
onClick={handleClickShowMore}
>
{showFullMessage ? "Hide" : "Show more"}
{showFullMessage ? "Hide" : "Show full query"}
</Button>
)}
</div>

9
app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTips/style.scss
View file

@ -67,15 +67,6 @@
}
}
h5 {
font-size: $font-size-medium;
margin-bottom: $padding-small;
}
h6 {
margin-bottom: $padding-small;
}
ul, ol {
list-style-position: inside;

2
app/vmui/packages/vmui/src/pages/CardinalityPanel/CardinalityTotals/style.scss
View file

@ -41,8 +41,6 @@
max-width: 280px;
white-space: normal;
padding: $padding-small;
line-height: $font-size;
font-size: $font-size;
}
&__value {

2
app/vmui/packages/vmui/src/pages/CardinalityPanel/MetricsContent/style.scss
View file

@ -14,8 +14,6 @@
max-width: 300px;
white-space: normal;
padding: $padding-small;
line-height: 130%;
font-size: $font-size;
p {
margin-bottom: $padding-small;

2
app/vmui/packages/vmui/src/pages/CardinalityPanel/Table/TableSettings/style.scss
View file

@ -14,7 +14,7 @@
&-list {
display: grid;
gap: $padding-small;
gap: 12px;
padding: $padding-global;
max-height: 350px;
overflow: auto;

2
app/vmui/packages/vmui/src/pages/PredefinedPanels/PredefinedDashboard/style.scss
View file

@ -14,7 +14,7 @@
font-weight: bold;
transform-style: preserve-3d;
overflow: hidden;
line-height: 14px;
line-height: 1;
box-shadow: $box-shadow;
transition: box-shadow 200ms ease-in-out;

2
app/vmui/packages/vmui/src/pages/TracePage/style.scss
View file

@ -69,7 +69,7 @@
&__text {
margin-bottom: $padding-global;
font-size: $font-size-medium;
font-size: $font-size;
white-space: pre-line;
text-align: center;
line-height: 1.8;

4
app/vmui/packages/vmui/src/pages/WithTemplate/WithTemplateTutorial/style.scss
View file

@ -5,7 +5,7 @@
gap: $padding-large;
&__title {
font-size: $font-size-large;
font-size: $font-size-medium;
font-weight: bold;
}
@ -14,7 +14,7 @@
gap: $padding-global;
&__text {
font-size: $font-size-medium;
font-size: $font-size;
line-height: 130%;
max-width: 720px;
}

4
app/vmui/packages/vmui/src/styles/components/table.scss
View file

@ -26,11 +26,11 @@
}
&-cell {
padding: $padding-small;
padding: 12px;
border-bottom: $border-divider;
height: 40px;
vertical-align: top;
line-height: 25px;
line-height: 1.5;
&__content {
display: flex;

8
app/vmui/packages/vmui/src/styles/variables.scss
View file

@ -40,10 +40,10 @@ $padding-small: 8px;
/************* fonts *************/
$font-family-global: 'Lato', sans-serif;
$font-family-monospace: monospace;
$font-size-large: 16px;
$font-size-medium: 14px;
$font-size: 12px;
$font-size-small: 10px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size: 14px;
$font-size-small: 12px;
/************* border *************/

2
docs/CHANGELOG.md
View file

@ -44,6 +44,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): display histograms as heatmaps in [Metrics explorer](https://docs.victoriametrics.com/#metrics-explorer). See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4111).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add `WITH template` playground. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3811).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add ability to debug relabeling. See [this feature request](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3807).
* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): increase default font size to `14px` for better usability.
* FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): add `-s3StorageClass` command-line flag for setting the storage class for AWS S3 backups. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4164). Thanks to @justcompile for the [pull request](https://github.com/VictoriaMetrics/VictoriaMetrics/pull/4166).
* FEATURE: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): store backup creation and completion time in `backup_complete.ignore` file of backup contents. This allows determining the exact timestamp when the backup was created and completed.
* FEATURE: [vmbackupmanager](https://docs.victoriametrics.com/vmbackupmanager.html): add `created_at` field to the output of `/api/v1/backups` API and `vmbackupmanager backup list` command. See this [doc](https://docs.victoriametrics.com/vmbackupmanager.html#api-methods) for data format details.
@ -65,6 +66,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
* BUGFIX: [vmalert](https://docs.victoriametrics.com/vmalert.html): properly return empty slices instead of nil for `/api/v1/rules` and `/api/v1/alerts` API handlers. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4221).
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the display of the tenant selector. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4160).
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix UI freeze when the query returns non-histogram series alongside histogram series.
* BUGFIX: [vmui](https://docs.victoriametrics.com/#vmui): fix the text display on buttons in Safari 16.4.
* BUGFIX: [alerts-health](https://github.com/VictoriaMetrics/VictoriaMetrics/blob/master/deployment/docker/alerts-health.yml): update threshold for `TooHighMemoryUsage` alert from 90% to 80%, since 90% is too high for production environments.
* BUGFIX: [vmbackup](https://docs.victoriametrics.com/vmbackup.html): fix compatibility with Windows OS. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/70).
* BUGFIX: [vmctl](https://docs.victoriametrics.com/vmctl.html): fix performance issue when migrating data from VictoriaMetrics according to [these docs](https://docs.victoriametrics.com/vmctl.html#migrating-data-from-victoriametrics). Add the ability to speed up the data migration via `--vm-native-disable-retries` command-line flag. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4092).