mirror of
https://github.com/VictoriaMetrics/VictoriaMetrics.git
synced 2024-12-13 13:11:37 +01:00
vmui: increase font-size and fix the text display (#4273)
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
Aliaksandr Valialkin
parent
fc9e7b650b
commit
55f77dd353
@ -19,7 +19,7 @@
|
||||
|
||||
&__description {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
line-height: 1.5;
|
||||
|
||||
svg,
|
||||
code {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: $padding-global;
|
||||
gap: $padding-medium;
|
||||
|
||||
&__input {
|
||||
flex-basis: 160px;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -63,9 +63,4 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-nav {
|
||||
font-size: $font-size-small;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -41,8 +41,6 @@
|
||||
max-width: 280px;
|
||||
white-space: normal;
|
||||
padding: $padding-small;
|
||||
line-height: $font-size;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
&__value {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
&-list {
|
||||
display: grid;
|
||||
gap: $padding-small;
|
||||
gap: 12px;
|
||||
padding: $padding-global;
|
||||
max-height: 350px;
|
||||
overflow: auto;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 *************/
|
||||
|
||||
@ -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).
|
||||
|
||||
Loading…
Reference in New Issue
Block a user