baalajimaestro/traefik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix UI bug on long service name

Browse source
This commit is contained in:
Ioannis Pinakoulakis 2020-12-07 15:14:03 +02:00 committed by GitHub
parent 134a767a7f
commit 0d15ac8861
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
webui/src/components/_commons/PanelMiddlewares.vue
View file

@ -231,8 +231,9 @@
<div class="text-subtitle2">Service</div>
<q-chip
dense
class="app-chip app-chip-green">
class="app-chip app-chip-green app-chip-overflow">
{{ exData(middleware).service }}
<q-tooltip>{{ exData(middleware).service }}</q-tooltip>
</q-chip>
</div>
</div>

3
webui/src/components/_commons/PanelMirroringServices.vue
View file

@ -21,8 +21,9 @@
<div class="col-6">
<q-chip
dense
class="app-chip app-chip-rule">
class="app-chip app-chip-rule app-chip-overflow">
{{ service.name }}
<q-tooltip>{{service.name}}</q-tooltip>
</q-chip>
</div>
<div class="col-3 text-right">

3
webui/src/components/_commons/PanelRouterDetails.vue
View file

@ -66,8 +66,9 @@
dense
clickable
@click.native="$router.push({ path: `/${protocol}/services/${getServiceId()}`})"
class="app-chip app-chip-wrap app-chip-service">
class="app-chip app-chip-wrap app-chip-service app-chip-overflow">
{{ data.service }}
<q-tooltip>{{ data.service }}</q-tooltip>
</q-chip>
</div>
</div>

3
webui/src/components/_commons/PanelWeightedServices.vue
View file

@ -21,8 +21,9 @@
<div class="col-7">
<q-chip
dense
class="app-chip app-chip-rule">
class="app-chip app-chip-rule app-chip-overflow">
{{ service.name }}
<q-tooltip>{{service.name}}</q-tooltip>
</q-chip>
</div>
<div class="col-3">

10
webui/src/css/sass/app.scss
View file

@ -131,6 +131,16 @@ body {
white-space: normal;
}
}
&-overflow {
max-width: 90%;
.q-chip__content{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&-accent, &-rule {
color: $accent;
background-color: rgba($accent, 0.1);