[feature] add controls for tall and wide link tiles

Author: zombieFox

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-edit-height:                              50%;
+  --link-item-url-height:                               2.25em;
+  --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-edit-height:                              50%;
+  --link-item-url-height:                               1.5em;
+  --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
     }]