Adds item size switching functionality and styles

src/components/LinkItems/Item.vue

@@ -2,7 +2,7 @@
     <a @click="itemOpened"
       :href="target !== 'iframe' ? url : '#'"
       :target="target === 'newtab' ? '_blank' : ''"
-      :class="`item ${!icon? 'short': ''}`"
+      :class="`item ${!icon? 'short': ''} size-${itemSize}`"
       :id="`link-${id}`"
       v-tooltip="getTooltipOptions()"
       rel="noopener noreferrer"
@@ -16,7 +16,8 @@
       <!-- Item Icon -->
       <Icon :icon="icon" :url="url" />
       <!-- Small icon, showing opening method on hover -->
-      <ItemOpenMethodIcon class="opening-method-icon" :openingMethod="target" :isSmall="!icon" />
+      <ItemOpenMethodIcon class="opening-method-icon" :isSmall="!icon" :openingMethod="target"
+        :position="itemSize === 'medium'? 'bottom right' : 'top right'"/>
     </a>
 </template>
 
@@ -40,6 +41,7 @@ export default {
       default: 'newtab',
       validator: (value) => ['newtab', 'sametab', 'iframe'].indexOf(value) !== -1,
     },
+    itemSize: String,
   },
   data() {
     return {
@@ -93,14 +95,8 @@ export default {
 <style scoped lang="scss">
 @import '../../../src/styles/constants.scss';
 
-/* Item wrapper */
-.item-wrapper {
-
-}
-
 .item {
   flex-grow: 1;
-  height: 100px;
   position: relative;
   color: var(--primary);
   vertical-align: middle;
@@ -123,9 +119,6 @@ export default {
   &.short {
     height: 18px;
   }
-  .item {
-    color: var(--primary);
-  }
 }
 
 /* Text in tile */
@@ -200,13 +193,42 @@ export default {
   }
 }
 
-.tile-icon {
-  width: 60px;
-  filter: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
-}
-
-.tile-svg {
-  width: 56px;
+/* Specify layout for alternate sized icons */
+.item {
+  &.size-small {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    align-items: center;
+    height: 2rem;
+    img {
+      width: 2rem;
+    }
+    .tile-title {
+      height: fit-content;
+      min-height: 1rem;
+      span.text {
+        text-align: left;
+        padding-left: 10%;
+      }
+    }
+  }
+  &.size-medium {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: auto;
+    img {
+      width: 2rem;
+      margin-bottom: 0.25rem;
+    }
+    .tile-title {
+      min-width: 100px;
+    }
+  }
+  &.size-large {
+    height: 100px;
+  }
 }
 
 </style>

src/components/LinkItems/ItemGroup.vue

@@ -21,7 +21,7 @@
         :description="item.description"
         :icon="item.icon"
         :target="item.target"
-        :svg="item.svg"
+        :itemSize="itemSize"
         @itemClicked="$emit('itemClicked')"
         @triggerModal="triggerModal"
       />
@@ -47,6 +47,7 @@ export default {
     title: String,
     displayData: Object,
     items: Array,
+    itemSize: String,
   },
   components: {
     Collapsable,

src/components/LinkItems/ItemOpenMethodIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="`opening-method-icon  ${isSmall? 'short': ''}`">
+  <div :class="makeClass(position, isSmall, isTransparent)">
     <NewTabOpenIcon v-if="openingMethod === 'newtab'" />
     <SameTabOpenIcon v-else-if="openingMethod === 'sametab'" />
     <IframeOpenIcon v-else-if="openingMethod === 'iframe'" />
@@ -14,8 +14,19 @@ import IframeOpenIcon from '@/assets/icons/open-iframe.svg';
 export default {
   name: 'ItemOpenMethodIcon',
   props: {
-    openingMethod: String,
-    isSmall: Boolean,
+    openingMethod: String, // newtab | sametab | iframe
+    isSmall: Boolean, // If true, will apply small class
+    position: String, // Position classes: top, bottom, left, right
+    isTransparent: Boolean, // If true, will apply opacity
+  },
+  methods: {
+    /* Returns custom class string, from optional props */
+    makeClass(position = 'top right', isSmall = false, transparent = false) {
+      return `opening-method-icon
+      ${position || 'top right'}
+      ${isSmall ? 'short' : ''}
+      ${transparent ? 'transparent' : ''}`;
+    },
   },
   components: {
     NewTabOpenIcon,
@@ -31,16 +42,23 @@ export default {
     position: absolute;
     width: 1rem;
     margin: 2px;
-    right: 0;
-    top: 0;
     path {
       fill: var(--primary-transparent);
     }
   }
+  &.top svg { top: 0; }
+  &.bottom svg { bottom: 0; }
+  &.left svg { left: 0; }
+  &.right svg { right: 0; }
+
   &.short svg {
-    width: 0.5rem;
+    width: 0.8rem;
     margin: 0;
   }
+
+  &.transparent svg {
+    opacity: 0.5;
+  }
 }
 
 </style>