[feature] add controls for tall and wide link tiles

src/css/group.css

@@ -186,11 +186,11 @@
   background-color: transparent;
   font-size: var(--link-item-size);
   position: relative;
-  min-height: var(--link-item-height);
   display: grid;
-  grid-auto-rows: 1fr;
+  grid-auto-rows: var(--link-item-height);
   grid-gap: calc(var(--layout-space) * var(--layout-gutter));
   grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
+  grid-auto-flow: dense;
 }
 
 .is-link-area-direction-ltr .group-body {

src/css/link.css

@@ -93,6 +93,23 @@
   pointer-events: none;
 }
 
+@media (min-width: 900px) {
+
+  .is-link-breakpoint-md .link-sort-placeholder-wide,
+  .is-link-breakpoint-lg .link-sort-placeholder-wide,
+  .is-link-breakpoint-xl .link-sort-placeholder-wide,
+  .is-link-breakpoint-xxl .link-sort-placeholder-wide {
+    grid-column: span 2;
+  }
+
+  .is-link-breakpoint-md .link-sort-placeholder-tall,
+  .is-link-breakpoint-lg .link-sort-placeholder-tall,
+  .is-link-breakpoint-xl .link-sort-placeholder-tall,
+  .is-link-breakpoint-xxl .link-sort-placeholder-tall {
+    grid-row: span 2;
+  }
+}
+
 .link-item.link-empty {
   background-color: rgba(var(--theme-color-04), 0.2);
   padding: 0.5em 1em;
@@ -137,7 +154,8 @@
 .link-item {
   font-size: 1em;
   position: relative;
-  height: var(--link-item-height);
+  width: 100%;
+  height: 100%;
   display: block;
   transform: scale(1);
   transition: transform var(--layout-timing-extra-fast);
@@ -167,6 +185,23 @@
   transition: none;
 }
 
+@media (min-width: 900px) {
+
+  .is-link-breakpoint-md .link-item-wide,
+  .is-link-breakpoint-lg .link-item-wide,
+  .is-link-breakpoint-xl .link-item-wide,
+  .is-link-breakpoint-xxl .link-item-wide {
+    grid-column: span 2;
+  }
+
+  .is-link-breakpoint-md .link-item-tall,
+  .is-link-breakpoint-lg .link-item-tall,
+  .is-link-breakpoint-xl .link-item-tall,
+  .is-link-breakpoint-xxl .link-item-tall {
+    grid-row: span 2;
+  }
+}
+
 /* link panel front */
 .link-panel-front {
   background-color: rgba(var(--link-item-color), var(--link-item-color-opacity));
@@ -953,6 +988,36 @@
   flex-wrap: wrap;
 }
 
+@media (min-width: 900px) {
+
+  .is-link-orientation-top.is-link-style-block .link-item-wide,
+  .is-link-orientation-bottom.is-link-style-block .link-item-wide {
+    --link-item-edit-height: 2.5em;
+  }
+
+  .is-link-orientation-top.is-link-style-block .link-item-wide .link-control,
+  .is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control {
+    flex-wrap: nowrap;
+  }
+
+  .is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(1) {
+    border-bottom-left-radius: var(--theme-radius);
+  }
+
+  .is-link-orientation-bottom.is-link-style-block .link-item-wide .link-control-item:nth-child(4) {
+    border-bottom-left-radius: 0;
+  }
+
+  .is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(1) {
+    border-top-left-radius: var(--theme-radius);
+    border-bottom-left-radius: 0;
+  }
+
+  .is-link-orientation-top.is-link-style-block .link-item-wide .link-control-item:nth-child(4) {
+    border-top-left-radius: 0;
+  }
+}
+
 .link-url {
   padding: 0 1em;
   width: 100%;

src/css/variables.css

@@ -406,16 +406,16 @@
   /* link */
   --link-item-width:                                    11em;
   --link-item-height:                                   10em;
-  --link-item-url-height:                               20%;
+  --link-item-url-height:                               2.25em;
-  --link-item-edit-height:                              50%;
+  --link-item-edit-height:                              5em;
 }
 
 .is-link-style-list {
   /* link */
   --link-item-width:                                    20em;
   --link-item-height:                                   4em;
-  --link-item-url-height:                               30%;
+  --link-item-url-height:                               1.5em;
-  --link-item-edit-height:                              50%;
+  --link-item-edit-height:                              2em;
 }
 
 .is-link-item-color-opacity {

src/js/bookmarks.js

@@ -50,6 +50,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453104010
     }, {
@@ -92,6 +94,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453107633
     }, {
@@ -134,6 +138,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453110265
     }, {
@@ -176,6 +182,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453111491
     }, {
@@ -218,6 +226,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453104460
     }, {
@@ -260,6 +270,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453111953
     }]
@@ -311,6 +323,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453101749
     }, {
@@ -353,6 +367,8 @@ var bookmarks = (function() {
         }
       },
       image: "",
+      wide: false,
+      tall: false,
       searchMatch: false,
       timeStamp: 1546453108926
     }]

src/js/link.js

@@ -96,6 +96,8 @@ var link = (function() {
         }
       },
       image: null,
+      wide: null,
+      tall: null,
       timeStamp: null,
       searchMatch: null
     }
@@ -133,6 +135,8 @@ var link = (function() {
     stagedLink.link.color.rgb.g = 0;
     stagedLink.link.color.rgb.b = 0;
     stagedLink.link.image = "";
+    stagedLink.link.wide = false;
+    stagedLink.link.tall = false;
     stagedLink.link.searchMatch = false;
   };
 
@@ -168,8 +172,10 @@ var link = (function() {
     stagedLink.link.color.rgb.g = null;
     stagedLink.link.color.rgb.b = null;
     stagedLink.link.image = null;
-    stagedLink.link.timeStamp = null;
+    stagedLink.link.wide = null;
+    stagedLink.link.tall = null;
     stagedLink.link.searchMatch = null;
+    stagedLink.link.timeStamp = null;
   };
 
   var mod = {};
@@ -485,7 +491,7 @@ var link = (function() {
           stagedLink.position.origin.group = Array.from(helper.getClosest(event.detail.origin.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.origin.container, ".group"));
           stagedLink.position.origin.item = event.detail.origin.index;
           stagedLink.position.destination.group = Array.from(helper.getClosest(event.detail.destination.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.destination.container, ".group"));
-          stagedLink.position.destination.item = event.detail.destination.index
+          stagedLink.position.destination.item = event.detail.destination.index;
           bookmarks.mod.move.link(stagedLink);
           data.save();
           groupAndItems();
@@ -518,20 +524,72 @@ var link = (function() {
       });
     },
     item: function() {
+      var placeholder = helper.node("div|class:link-sort-placeholder");
       sortable(".group-body", {
         items: ".link-item",
         handle: ".link-control-item-handle",
         acceptFrom: ".group-body",
-        placeholder: helper.node("div|class:link-sort-placeholder"),
+        placeholder: placeholder
-        forcePlaceholderSize: true
       });
       bind.sort.update.remove.item();
       helper.eA(".group-body").forEach(function(arrayItem, index) {
         sortable(arrayItem)[0].addEventListener("sortupdate", bind.sort.update.func.item, false, event);
       });
+      helper.eA(".group-body").forEach(function(arrayItem, index) {
+        sortable(arrayItem)[0].addEventListener("sortstart", function() {
+          var groupIndex = Array.from(helper.getClosest(event.detail.origin.container, ".group").parentNode.children).indexOf(helper.getClosest(event.detail.origin.container, ".group"));
+          var itemIndex = event.detail.origin.index;
+          var link = bookmarks.get()[groupIndex].items[itemIndex];
+          if (link.wide) {
+            helper.addClass(placeholder, "link-sort-placeholder-wide");
+          };
+          if (link.tall) {
+            helper.addClass(placeholder, "link-sort-placeholder-tall");
+          };
+        }, false, event);
+      });
     }
   };
 
+  bind.resize = new ResizeObserver(function(elements) {
+    var linkArea = helper.e(".link-area");
+    var groupBody = helper.e(".group-body");
+    var linkItem = helper.e(".link-item");
+    var size = {
+      sm: 550,
+      md: 700,
+      lg: 900,
+      xl: 1100,
+      xxl: 1600
+    };
+    if (linkArea) {
+      if (groupBody && linkItem) {
+        elements.forEach(function(entry) {
+          var breakpoint;
+          if (entry.contentRect.width <= size.sm) {
+            breakpoint = "xs";
+          } else if (entry.contentRect.width > size.sm && entry.contentRect.width <= size.md) {
+            breakpoint = "sm";
+          } else if (entry.contentRect.width > size.md && entry.contentRect.width <= size.lg) {
+            breakpoint = "md";
+          } else if (entry.contentRect.width > size.lg && entry.contentRect.width <= size.xl) {
+            breakpoint = "lg";
+          } else if (entry.contentRect.width > size.xl && entry.contentRect.width <= size.xxl) {
+            breakpoint = "xl";
+          } else if (entry.contentRect.width > size.xxl) {
+            breakpoint = "xxl";
+          };
+          helper.setObject({
+            object: state.get.current(),
+            path: "link.breakpoint",
+            newValue: breakpoint
+          });
+          render.breakpoint.update();
+        });
+      };
+    };
+  });
+
   var render = {};
 
   render.move = {
@@ -748,7 +806,7 @@ var link = (function() {
       var groupFormInputNameShowLabel = helper.node("label|for:group-form-input-name-show");
       var groupFormInputNameShowText = helper.node("span:Show Group name");
       var groupFormInputNameShowIcon = helper.node("span|class:label-icon");
-      var groupFormInputNameShowInput = helper.node("input|type:checkbox,class:group-form-input-name-show,id:group-form-input-name-show,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,checked");
+      var groupFormInputNameShowInput = helper.node("input|type:checkbox,class:group-form-input-name-show,id:group-form-input-name-show,tabindex:1,checked");
       var groupFormInputNameIndentWrap = helper.node("div|class:form-wrap");
       var groupFormInputNameIndent = helper.node("div|class:form-indent");
       var groupFormInputNameWrap = helper.node("div|class:form-wrap");
@@ -761,7 +819,7 @@ var link = (function() {
       var groupFormInputOpenallLabel = helper.node("label|for:group-form-input-openall");
       var groupFormInputOpenallLabelText = helper.node("span:Show Open all");
       var groupFormInputOpenallLabelIcon = helper.node("span|class:label-icon");
-      var groupFormOpenAllInput = helper.node("input|type:checkbox,class:group-form-input-openall,id:group-form-input-openall,placeholder:Example group,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,checked");
+      var groupFormOpenAllInput = helper.node("input|type:checkbox,class:group-form-input-openall,id:group-form-input-openall,tabindex:1,checked");
       var groupFormOpenAllInputHelper = helper.node("div|class:form-helper");
       var groupFormOpenAllInputHelperItem = helper.node("p:Open all button will appear if there is at least one Bookmark in this Group.|class:link-form-input-icon-helper form-helper-item");
 
@@ -926,6 +984,12 @@ var link = (function() {
           value: "link-item"
         }]
       };
+      if (stagedLink.link.wide) {
+        linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-wide";
+      };
+      if (stagedLink.link.tall) {
+        linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-item-tall";
+      };
       if (stagedLink.link.accent.by == "custom" || stagedLink.link.color.by == "custom" || helper.checkIfValidString(stagedLink.link.image)) {
         linkItemOptions.attr.push({
           key: "style",
@@ -1361,6 +1425,24 @@ var link = (function() {
         }]
       });
 
+      // wide
+      var wideInputWrap = helper.node("div|class:form-wrap");
+      var wideLabel = helper.node("label|for:link-form-wide");
+      var wideLabelBlock = helper.node("span|class:label-block");
+      var wideLabelBlockItem1 = helper.node("span:Wide tile|class:label-block-item");
+      var wideLabelBlockItem2 = helper.node("span:Bookmark tile to span across two columns.|class:label-block-item small muted");
+      var wideLabelIcon = helper.node("span|class:label-icon");
+      var wideInput = helper.node("input|type:checkbox,class:link-form-wide,id:link-form-wide,tabindex:1");
+
+      // tall
+      var tallInputWrap = helper.node("div|class:form-wrap");
+      var tallLabel = helper.node("label|for:link-form-tall");
+      var tallLabelBlock = helper.node("span|class:label-block");
+      var tallLabelBlockItem1 = helper.node("span:Tall tile|class:label-block-item");
+      var tallLabelBlockItem2 = helper.node("span:Bookmark tile to span across two rows.|class:label-block-item small muted");
+      var tallLabelIcon = helper.node("span|class:label-icon");
+      var tallInput = helper.node("input|type:checkbox,class:link-form-tall,id:link-form-tall,tabindex:1");
+
       groupExistingRadioWrap.appendChild(groupExistingRadio);
       groupExistingLable.appendChild(groupExistingLableIcon);
       groupExistingLable.appendChild(groupExistingLableText);
@@ -1584,6 +1666,24 @@ var link = (function() {
       imageInputHelper.appendChild(imageInputHelperItem);
       fieldset.appendChild(imageInputHelper);
 
+      fieldset.appendChild(helper.node("hr"));
+
+      wideInputWrap.appendChild(wideInput);
+      wideLabel.appendChild(wideLabelIcon);
+      wideLabelBlock.appendChild(wideLabelBlockItem1);
+      wideLabelBlock.appendChild(wideLabelBlockItem2);
+      wideLabel.appendChild(wideLabelBlock);
+      wideInputWrap.appendChild(wideLabel);
+      fieldset.appendChild(wideInputWrap);
+
+      tallInputWrap.appendChild(tallInput);
+      tallLabel.appendChild(tallLabelIcon);
+      tallLabelBlock.appendChild(tallLabelBlockItem1);
+      tallLabelBlock.appendChild(tallLabelBlockItem2);
+      tallLabel.appendChild(tallLabelBlock);
+      tallInputWrap.appendChild(tallLabel);
+      fieldset.appendChild(tallInputWrap);
+
       form.appendChild(fieldset);
 
       var makeGroupOptions = function() {
@@ -1820,6 +1920,12 @@ var link = (function() {
         accentRgbBRange.value = stagedLink.link.accent.rgb.b;
         accentRgbBNumber.value = stagedLink.link.accent.rgb.b;
         imageInput.value = stagedLink.link.image;
+        if (stagedLink.link.wide) {
+          wideInput.checked = true;
+        };
+        if (stagedLink.link.tall) {
+          tallInput.checked = true;
+        };
       };
 
       var mirror = {
@@ -2462,6 +2568,12 @@ var link = (function() {
       imageInput.addEventListener("input", function(event) {
         stagedLink.link.image = this.value;
       }, false);
+      wideInput.addEventListener("change", function(event) {
+        stagedLink.link.wide = this.checked;
+      }, false);
+      tallInput.addEventListener("change", function(event) {
+        stagedLink.link.tall = this.checked;
+      }, false);
       autoSuggest.bind.input({
         input: displayIconInput,
         type: "fontawesomeIcon",
@@ -3134,6 +3246,45 @@ var link = (function() {
     }
   };
 
+  render.breakpoint = {
+    add: function() {
+      var html = helper.e("html");
+      switch (state.get.current().link.breakpoint) {
+        case "xs":
+          helper.addClass(html, "is-link-breakpoint-xs");
+          break
+        case "sm":
+          helper.addClass(html, "is-link-breakpoint-sm");
+          break
+        case "md":
+          helper.addClass(html, "is-link-breakpoint-md");
+          break
+        case "lg":
+          helper.addClass(html, "is-link-breakpoint-lg");
+          break
+        case "xl":
+          helper.addClass(html, "is-link-breakpoint-xl");
+          break
+        case "xxl":
+          helper.addClass(html, "is-link-breakpoint-xxl");
+          break
+      };
+    },
+    remove: function() {
+      var html = helper.e("html");
+      helper.removeClass(html, "is-link-breakpoint-xs");
+      helper.removeClass(html, "is-link-breakpoint-sm");
+      helper.removeClass(html, "is-link-breakpoint-md");
+      helper.removeClass(html, "is-link-breakpoint-lg");
+      helper.removeClass(html, "is-link-breakpoint-xl");
+      helper.removeClass(html, "is-link-breakpoint-xxl");
+    },
+    update: function() {
+      render.breakpoint.remove();
+      render.breakpoint.add();
+    }
+  };
+
   var add = {
     item: {
       open: function() {
@@ -3217,11 +3368,15 @@ var link = (function() {
   };
 
   var groupAndItems = function() {
+    if (helper.e(".link-area")) {
+      bind.resize.unobserve(helper.e(".link-area"));
+    };
     render.clear.item();
     render.clear.group();
     render.all();
     render.group.tabindex();
     render.item.tabindex();
+    bind.resize.observe(helper.e(".link-area"));
     if (!state.get.current().search) {
       bind.sort.group();
       bind.sort.item();

src/js/state.js

@@ -256,7 +256,8 @@ var state = (function() {
       add: false,
       edit: false,
       style: "block",
-      orientation: "bottom"
+      orientation: "bottom",
+      breakpoint: "xs"
     },
     group: {
       area: {

src/js/update.js

@@ -1102,6 +1102,16 @@ var update = (function() {
         opacity: 1
       };
       return data;
+    },
+    "5.46.0": function(data) {
+      data.bookmarks.forEach(function(arrayItem, index) {
+        arrayItem.items.forEach(function(arrayItem, index) {
+          arrayItem.wide = false;
+          arrayItem.tall = false;
+        });
+      });
+      data.state.link.breakpoint = "xs";
+      return data;
     }
   };