diff --git a/src/css/group.css b/src/css/group.css index 44babdec..36736187 100644 --- a/src/css/group.css +++ b/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 { diff --git a/src/css/link.css b/src/css/link.css index f85f3301..3ac21c52 100755 --- a/src/css/link.css +++ b/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%; diff --git a/src/css/variables.css b/src/css/variables.css index 0b25947e..74bd91c5 100644 --- a/src/css/variables.css +++ b/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 { diff --git a/src/js/bookmarks.js b/src/js/bookmarks.js index adc35653..c6d7e40c 100644 --- a/src/js/bookmarks.js +++ b/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 }] diff --git a/src/js/link.js b/src/js/link.js index d8785a27..6e4e5fa7 100644 --- a/src/js/link.js +++ b/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"), - forcePlaceholderSize: true + placeholder: placeholder }); 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(); diff --git a/src/js/state.js b/src/js/state.js index afa752e5..2573647c 100644 --- a/src/js/state.js +++ b/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: { diff --git a/src/js/update.js b/src/js/update.js index 537b042a..74927de7 100644 --- a/src/js/update.js +++ b/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; } };