From fd0107443a0c34631485d2e1418f786e8de9c87a Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Wed, 23 Jun 2021 16:30:42 +0100 Subject: [PATCH] :bug: Re: #41 No longer cuts title text on items --- src/components/LinkItems/Item.vue | 44 ++++--------------------------- src/styles/color-themes.scss | 5 ---- 2 files changed, 5 insertions(+), 44 deletions(-) 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 {