diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index cf4aa1d7..e75e9c69 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -11,7 +11,6 @@
{{ title }}
-
...
{{ description }}
@@ -80,18 +79,6 @@ export default {
this.$emit('itemClicked');
}
},
- /**
- * Detects overflowing text, shows ellipse, and allows is to marguee on hover
- * The below code is horifically bad, it is embarassing that I wrote it...
- */
- manageTitleEllipse() {
- const tileElem = document.getElementById(`tile-${this.getId}`);
- if (tileElem) {
- const isOverflowing = (tileElem.scrollHeight > tileElem.clientHeight
- || tileElem.scrollWidth > tileElem.clientWidth) && this.title.length > 12;
- if (isOverflowing) tileElem.className += ' is-overflowing';
- } // Note from present me to past me: WTF?!
- },
/* Returns configuration object for the tooltip */
getTooltipOptions() {
return {
@@ -131,7 +118,6 @@ export default {
},
},
mounted() {
- this.manageTitleEllipse();
if (this.enableStatusCheck) this.checkWebsiteStatus();
if (this.statusCheckInterval > 0) {
setInterval(this.checkWebsiteStatus, this.statusCheckInterval * 1000);
@@ -157,10 +143,14 @@ export default {
cursor: pointer;
text-decoration: none;
position: relative;
+ transition: all 0.2s ease-in-out 0s;
&:hover {
box-shadow: var(--item-hover-shadow);
background: var(--item-background-hover);
position: relative;
+ .tile-title span.text {
+ white-space: pre-wrap;
+ }
}
&:focus {
outline: 2px solid var(--primary);
@@ -177,36 +167,11 @@ export default {
text-overflow: ellipsis;
min-width: 120px;
height: 30px;
- overflow: hidden;
position: relative;
padding: 0;
z-index: 2;
span.text {
- position: absolute;
white-space: nowrap;
- transition: 1s;
- float: left;
- left: 0;
- }
- &:not(.is-overflowing) span.text{
- width: 100%;
- }
- .overflow-dots {
- opacity: 0;
- }
- &.is-overflowing {
- span.text {
- overflow: hidden;
- }
- .overflow-dots {
- display: block;
- opacity: 1;
- background: var(--item-background);
- position: absolute;
- z-index: 5;
- right: 0;
- transition: opacity 0.1s ease-in;
- }
}
}
@@ -275,6 +240,7 @@ export default {
}
.tile-title {
min-width: 100px;
+ max-width: 160px;
}
}
&.size-large {
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 28346eeb..d01128b0 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -241,7 +241,6 @@ html[data-theme='colorful'] {
.item:nth-child(6n) { color: #afeb5c; border: 1px solid #afeb5c; }
.item:nth-child(7n) { color: #ebb75c; border: 1px solid #ebb75c; }
.item:nth-child(8n) { color: #eb615c; border: 1px solid #eb615c; }
- .tile-title span.text { transition: none; }
.item:hover, .item:focus {
opacity: 0.85;
outline: none;
@@ -404,9 +403,6 @@ html[data-theme='material'], html[data-theme='material-dark'] {
&:active {
background: #c7c7c754;
}
- span.text {
- transition: none;
- }
&.size-small {
padding-left: 0.5rem;
min-width: 11rem;
@@ -666,7 +662,6 @@ html[data-theme='vaporware'] {
background: #844ceb;
color: #09bfe6;
}
- .tile-title span.text { transition: none; }
}
div.login-page {