Merge branch 'master' into update-simple-icons

src/components/LinkItems/Collapsable.vue

@@ -64,7 +64,6 @@ export default {
       return this.$store.state.editMode;
     },
     sectionKey() {
-      if (this.isEditMode) return undefined;
       return `collapsible-${this.uniqueKey}`;
     },
     collapseClass() {
@@ -104,12 +103,23 @@ export default {
   watch: {
     checkboxState(newState) {
       this.isExpanded = newState;
+      this.updateLocalStorage(); // Save every change immediately
     },
-    uniqueKey() {
-      this.checkboxState = this.isExpanded;
+    uniqueKey(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.refreshCollapseState(); // Refresh state when key changes
+      }
     },
   },
   methods: {
+    refreshCollapseState() {
+      this.checkboxState = this.isExpanded;
+    },
+    updateLocalStorage() {
+      const collapseState = this.locallyStoredCollapseStates();
+      collapseState[this.uniqueKey] = this.checkboxState;
+      localStorage.setItem(localStorageKeys.COLLAPSE_STATE, JSON.stringify(collapseState));
+    },
     /* Either expand or collapse section, based on it's current state */
     toggle() {
       this.checkboxState = !this.checkboxState;

src/components/LinkItems/Item.vue

@@ -9,7 +9,8 @@
       :target="anchorTarget"
       :class="`item ${makeClassList}`"
       v-tooltip="getTooltipOptions()"
-      rel="noopener noreferrer" tabindex="0"
+      :rel="`${item.rel || 'noopener noreferrer'}`"
+      tabindex="0"
       :id="`link-${item.id}`"
       :style="customStyle"
     >
@@ -255,8 +256,12 @@ export default {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   word-break: keep-all;
+  overflow: hidden;
   span.text {
     white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
   }
 }
 
@@ -385,6 +390,7 @@ p.description {
         font-size: .9em;
         line-height: 1rem;
         height: 2rem;
+        overflow: hidden;
       }
     }
   }

src/components/LinkItems/Section.vue

@@ -74,8 +74,8 @@
     </div>
     <!-- Modal for opening in modal view -->
     <IframeModal
-      :ref="`iframeModal`"
-      :name="`iframeModal`"
+      :ref="`iframeModal-${groupId}`"
+      :name="`iframeModal-${groupId}`"
       @closed="$emit('itemClicked')"
     />
     <!-- Edit item menu -->
@@ -213,7 +213,7 @@ export default {
   methods: {
     /* Opens the iframe modal */
     triggerModal(url) {
-      this.$refs.iframeModal.show(url);
+      this.$refs[`iframeModal-${this.groupId}`].show(url);
     },
     /* Sorts items alphabetically using the title attribute */
     sortAlphabetically(items) {