From 628f7f2868e88954e56553cde02f0c327db53b3d Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 18 Apr 2021 16:18:32 +0100
Subject: [PATCH] Small fixes and better mobile layout

---
 src/components/LinkItems/Item.vue             |  7 ++++---
 src/components/LinkItems/ItemIcon.vue         |  3 ++-
 src/components/Settings/SearchBar.vue         | 11 ++++++++++-
 src/components/Settings/SettingsContainer.vue | 16 +++++++++++++++-
 src/styles/color-themes.scss                  | 10 +++++-----
 src/styles/media-queries.scss                 |  1 -
 6 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue
index 864dc61a..1b932f84 100644
--- a/src/components/LinkItems/Item.vue
+++ b/src/components/LinkItems/Item.vue
@@ -68,8 +68,8 @@ export default {
     manageTitleEllipse() {
       const tileElem = document.getElementById(`tile-${this.getId}`);
       if (tileElem) {
-        const isOverflowing = tileElem.scrollHeight > tileElem.clientHeight
-              || tileElem.scrollWidth > tileElem.clientWidth;
+        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?!
     },
@@ -107,6 +107,7 @@ export default {
   border-radius: var(--curve-factor);
   box-shadow: var(--item-shadow);
   cursor: pointer;
+  text-decoration: none;
   &:hover {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
@@ -176,7 +177,7 @@ export default {
       opacity: 0;
     }
     span.text {
-      transform: translateX(calc(120px - 100%));
+      transform: translateX(calc(100px - 100%));
     }
   }
 
diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index 355f818e..ce9149d0 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -54,7 +54,8 @@ export default {
     /* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
     determineImageType(img) {
       let imgType = '';
-      if (this.isUrl(img)) imgType = 'url';
+      if (!img) imgType = 'none';
+      else if (this.isUrl(img)) imgType = 'url';
       else if (this.isImage(img)) imgType = 'img';
       else if (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg';
       else if (img.includes('fa-')) imgType = 'font-awesome';
diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue
index 588ebcaf..a8e15462 100644
--- a/src/components/Settings/SearchBar.vue
+++ b/src/components/Settings/SearchBar.vue
@@ -55,6 +55,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   section {
     display: flex;
     align-items: center;
@@ -107,12 +109,19 @@ export default {
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @include tablet {
+    form {
+      display: block;
+      text-align: center;
+    }
+  }
+  @include phone {
     form {
       flex: 1;
       border-radius: 0;
       text-align: center;
       padding: 0.25rem 0;
+      display: block;
     }
   }
 </style>
diff --git a/src/components/Settings/SettingsContainer.vue b/src/components/Settings/SettingsContainer.vue
index 0975d14f..25f96589 100644
--- a/src/components/Settings/SettingsContainer.vue
+++ b/src/components/Settings/SettingsContainer.vue
@@ -65,6 +65,8 @@ export default {
 
 <style scoped lang="scss">
 
+@import '@/styles/media-queries.scss';
+
   section {
     display: flex;
     align-items: center;
@@ -87,9 +89,21 @@ export default {
     }
   }
 
-  @media screen and (max-width: 600px) {
+  @include tablet {
+    section {
+      display: block;
+      margin: 0 auto;
+      background: none;
+      .options-container {
+          justify-content: center;
+      }
+    }
+  }
+
+  @include phone {
     .options-container {
       display: none;
     }
   }
+
 </style>
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index e5ea5c35..8017ad92 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -29,11 +29,11 @@ html[data-theme='dracula'] {
   --item-hover-shadow: none;
   --settings-text-color: #98ace9;
   --primary: #6272a4;
-  .collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; span {color: #8be9fd; }}}
-  .collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; span {color: #50fa7b; }}}
-  .collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; span {color: #ffb86c; }}}
-  .collapsable:nth-child(4n) { background: #ff79c6; .item { border: 1px solid #ff79c6; span {color: #ff79c6; }}}
-  .collapsable:nth-child(4n) { background: #bd93f9; .item { border: 1px solid #bd93f9; span {color: #bd93f9; }}}
+  .collapsable:nth-child(1n) { background: #8be9fd; .item { border: 1px solid #8be9fd; color: #8be9fd; }}
+  .collapsable:nth-child(2n) { background: #50fa7b; .item { border: 1px solid #50fa7b; color: #50fa7b; }}
+  .collapsable:nth-child(3n) { background: #ffb86c; .item { border: 1px solid #ffb86c; color: #ffb86c; }}
+  .collapsable:nth-child(4n) { background: #ff79c6; .item { border: 1px solid #ff79c6; color: #ff79c6; }}
+  .collapsable:nth-child(4n) { background: #bd93f9; .item { border: 1px solid #bd93f9; color: #bd93f9; }}
 }
 
 html[data-theme='bee'] {
diff --git a/src/styles/media-queries.scss b/src/styles/media-queries.scss
index ba5b6ef5..91461af7 100644
--- a/src/styles/media-queries.scss
+++ b/src/styles/media-queries.scss
@@ -38,7 +38,6 @@ $extra-large: 2800px;
   }
 }
 
-
 @mixin tablet-up {
   @media (min-width: #{$small}) {
     @content;