From 4ad677e456cede7f1f2536280c5a78555bc70952 Mon Sep 17 00:00:00 2001
From: Eugen Neuber <eugen.neuber@tugraz.at>
Date: Wed, 3 Jun 2020 13:27:01 +0200
Subject: [PATCH] Shorten username if chevron becomes invisible
See issue #9
---
packages/auth/src/auth.js | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/packages/auth/src/auth.js b/packages/auth/src/auth.js
index a3814957..dbfa2d57 100644
--- a/packages/auth/src/auth.js
+++ b/packages/auth/src/auth.js
@@ -413,6 +413,13 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
.loginbox .label {
padding-left: 0.2em;
}
+
+ .ellipsis {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: inline-block;
+ }
`;
}
@@ -445,12 +452,13 @@ export class Auth extends ScopedElementsMixin(VPULitElement) {
renderLoggedIn() {
const imageURL = (this.showImage && this.person && this.person.image) ? this.person.image : null;
+ const w = window.innerWidth/2 - 20 - 40;
return html`
<div class="dropdown" @click="${this.onDropdownClick}">
<div class="dropdown-trigger">
<a href="#">
- <span>${this.name}</span>
+ <div class="ellipsis" style="max-width: ${w}px;">${this.name}</div>
<vpu-icon name="chevron-down" id="menu-chevron-icon"></vpu-icon>
</a>
</div>
--
GitLab