Start

From d564973aa896cbbdd89e192fe7c076e2dd7ed6a8 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Tue, 4 Aug 2020 20:57:26 +0200 Subject: add masonry to cards --- .vscode/settings.json | 3 + src/index.html | 234 ++++++++++++++++++++++++++------------------ src/lib/masonry.pkgd.min.js | 9 ++ src/scripts/index.js | 98 +++++++++---------- src/styles/index.css | 17 ++-- src/styles/index.scss | 17 ++-- src/styles/prepros.config | 7 +- 7 files changed, 223 insertions(+), 162 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/lib/masonry.pkgd.min.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..7686a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.multiRootWorkspaceName": "startpage" +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index deeb427..81071bf 100644 --- a/src/index.html +++ b/src/index.html @@ -1,115 +1,155 @@ + + + + + + Start + - - - - - - - Start - - - - -

- -

-
- - - -
- Legg til kort -
- Importer fra - Pinboard
- -
  -
- Innstillinger -
-
-

+ +

+
+ + + +
- + Legg til kort +
- + Importer fra Pinboard +
- +
  +
- + Innstillinger +
+
+

+ - + - -

- -

+ + -

- -

- Generelt -
- Status -

+ + - - - - - - - - \ No newline at end of file + + + + + + + diff --git a/src/lib/masonry.pkgd.min.js b/src/lib/masonry.pkgd.min.js new file mode 100644 index 0000000..53386ae --- /dev/null +++ b/src/lib/masonry.pkgd.min.js @@ -0,0 +1,9 @@ +/*! + * Masonry PACKAGED v4.2.2 + * Cascading grid layout library + * https://masonry.desandro.com + * MIT License + * by David DeSandro + */ + +!function(t,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("jquery")):t.jQueryBridget=e(t,t.jQuery)}(window,function(t,e){"use strict";function i(i,r,a){function h(t,e,n){var o,r="$()."+i+'("'+e+'")';return t.each(function(t,h){var u=a.data(h,i);if(!u)return void s(i+" not initialized. Cannot call methods, i.e. "+r);var d=u[e];if(!d||"_"==e.charAt(0))return void s(r+" is not a valid method");var l=d.apply(u,n);o=void 0===o?l:o}),void 0!==o?o:t}function u(t,e){t.each(function(t,n){var o=a.data(n,i);o?(o.option(e),o._init()):(o=new r(n,e),a.data(n,i,o))})}a=a||e||t.jQuery,a&&(r.prototype.option||(r.prototype.option=function(t){a.isPlainObject(t)&&(this.options=a.extend(!0,this.options,t))}),a.fn[i]=function(t){if("string"==typeof t){var e=o.call(arguments,1);return h(this,t,e)}return u(this,t),this},n(a))}function n(t){!t||t&&t.bridget||(t.bridget=i)}var o=Array.prototype.slice,r=t.console,s="undefined"==typeof r?function(){}:function(t){r.error(t)};return n(e||t.jQuery),i}),function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){i=i.slice(0),e=e||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;oe;e++){var i=h[e];t[i]=0}return t}function n(t){var e=getComputedStyle(t);return e||a("Style returned "+e+". Are you running this code in a hidden iframe on Firefox? See https://bit.ly/getsizebug1"),e}function o(){if(!d){d=!0;var e=document.createElement("div");e.style.width="200px",e.style.padding="1px 2px 3px 4px",e.style.borderStyle="solid",e.style.borderWidth="1px 2px 3px 4px",e.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(e);var o=n(e);s=200==Math.round(t(o.width)),r.isBoxSizeOuter=s,i.removeChild(e)}}function r(e){if(o(),"string"==typeof e&&(e=document.querySelector(e)),e&&"object"==typeof e&&e.nodeType){var r=n(e);if("none"==r.display)return i();var a={};a.width=e.offsetWidth,a.height=e.offsetHeight;for(var d=a.isBorderBox="border-box"==r.boxSizing,l=0;u>l;l++){var c=h[l],f=r[c],m=parseFloat(f);a[c]=isNaN(m)?0:m}var p=a.paddingLeft+a.paddingRight,g=a.paddingTop+a.paddingBottom,y=a.marginLeft+a.marginRight,v=a.marginTop+a.marginBottom,_=a.borderLeftWidth+a.borderRightWidth,z=a.borderTopWidth+a.borderBottomWidth,E=d&&s,b=t(r.width);b!==!1&&(a.width=b+(E?0:p+_));var x=t(r.height);return x!==!1&&(a.height=x+(E?0:g+z)),a.innerWidth=a.width-(p+_),a.innerHeight=a.height-(g+z),a.outerWidth=a.width+y,a.outerHeight=a.height+v,a}}var s,a="undefined"==typeof console?e:function(t){console.error(t)},h=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],u=h.length,d=!1;return r}),function(t,e){"use strict";"function"==typeof define&&define.amd?define("desandro-matches-selector/matches-selector",e):"object"==typeof module&&module.exports?module.exports=e():t.matchesSelector=e()}(window,function(){"use strict";var t=function(){var t=window.Element.prototype;if(t.matches)return"matches";if(t.matchesSelector)return"matchesSelector";for(var e=["webkit","moz","ms","o"],i=0;is?"round":"floor";r=Math[a](r),this.cols=Math.max(r,1)},n.getContainerWidth=function(){var t=this._getOption("fitWidth"),i=t?this.element.parentNode:this.element,n=e(i);this.containerWidth=n&&n.innerWidth},n._getItemLayoutPosition=function(t){t.getSize();var e=t.size.outerWidth%this.columnWidth,i=e&&1>e?"round":"ceil",n=Math[i](t.size.outerWidth/this.columnWidth);n=Math.min(n,this.cols);for(var o=this.options.horizontalOrder?"_getHorizontalColPosition":"_getTopColPosition",r=this[o](n,t),s={x:this.columnWidth*r.col,y:r.y},a=r.y+t.size.outerHeight,h=n+r.col,u=r.col;h>u;u++)this.colYs[u]=a;return s},n._getTopColPosition=function(t){var e=this._getTopColGroup(t),i=Math.min.apply(Math,e);return{col:e.indexOf(i),y:i}},n._getTopColGroup=function(t){if(2>t)return this.colYs;for(var e=[],i=this.cols+1-t,n=0;i>n;n++)e[n]=this._getColGroupY(n,t);return e},n._getColGroupY=function(t,e){if(2>e)return this.colYs[t];var i=this.colYs.slice(t,t+e);return Math.max.apply(Math,i)},n._getHorizontalColPosition=function(t,e){var i=this.horizontalColIndex%this.cols,n=t>1&&i+t>this.cols;i=n?0:i;var o=e.size.outerWidth&&e.size.outerHeight;return this.horizontalColIndex=o?i+t:this.horizontalColIndex,{col:i,y:this._getColGroupY(i,t)}},n._manageStamp=function(t){var i=e(t),n=this._getElementOffset(t),o=this._getOption("originLeft"),r=o?n.left:n.right,s=r+i.outerWidth,a=Math.floor(r/this.columnWidth);a=Math.max(0,a);var h=Math.floor(s/this.columnWidth);h-=s%this.columnWidth?0:1,h=Math.min(this.cols-1,h);for(var u=this._getOption("originTop"),d=(u?n.top:n.bottom)+i.outerHeight,l=a;h>=l;l++)this.colYs[l]=Math.max(d,this.colYs[l])},n._getContainerSize=function(){this.maxY=Math.max.apply(Math,this.colYs);var t={height:this.maxY};return this._getOption("fitWidth")&&(t.width=this._getContainerFitWidth()),t},n._getContainerFitWidth=function(){for(var t=0,e=this.cols;--e&&0===this.colYs[e];)t++;return(this.cols-t)*this.columnWidth-this.gutter},n.needsResizeLayout=function(){var t=this.containerWidth;return this.getContainerWidth(),t!=this.containerWidth},i}); \ No newline at end of file diff --git a/src/scripts/index.js b/src/scripts/index.js index 3671a87..164c2cd 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -8,7 +8,7 @@ const cardsContainer = document.querySelector("#cards"); const commandElements = { createCardModalButton: document.querySelector("#open-new-card-modal-button"), importPinsModalButton: document.querySelector("#open-import-pins-modal-button"), - openOptionsModalButton: document.querySelector("#open-options-modal-button") + openOptionsModalButton: document.querySelector("#open-options-modal-button"), }; const cardModalElements = { @@ -24,10 +24,9 @@ const cardModalElements = { const optionsModalElements = { modal: document.querySelector("#options-modal"), - save: document.querySelector("#options-modal #save-options-button") + save: document.querySelector("#options-modal #save-options-button"), }; - const fileInput = document.querySelector("#file"); const cardModalBootstrap = new bootstrap.Modal(cardModalElements.modal); @@ -45,7 +44,7 @@ const constants = { keys: { cards: "cards", pins: "pins", - settings: "settings" + settings: "settings", }, }, flags: { @@ -80,7 +79,7 @@ function addEventListeners() { const file = fileInput.files[0]; console.log(file); const reader = new FileReader(); - reader.onload = content => importPins(content.target.result); + reader.onload = (content) => importPins(content.target.result); reader.readAsText(file); }); @@ -108,21 +107,18 @@ let pin = { toread: "", }; - function importPins(json) { - JSON.parse(json).forEach(pin => { + JSON.parse(json).forEach((pin) => { if (!addPin(pin)) throw new Error("WHOOPS"); }); } function logPins() { - database - .get(constants.database.keys.pins) - .then(pins => { - pins.data.forEach(element => { - console.log(element); - }); + database.get(constants.database.keys.pins).then((pins) => { + pins.data.forEach((element) => { + console.log(element); }); + }); } function addPin(pin) { @@ -153,7 +149,10 @@ function addPin(pin) { .then((added) => { console.log("created pins"); }) - .catch((err) => { logError("failed to create pins", err); return false; }); + .catch((err) => { + logError("failed to create pins", err); + return false; + }); } else { logError("failed to update pins", err); return false; @@ -161,7 +160,6 @@ function addPin(pin) { }); } - function openEditCardModal(id) { if (!id) return; database @@ -293,7 +291,6 @@ function addOrUpdateCard(card) { }); } - function logError(msg, error) { console.error("!!!"); console.error(msg); @@ -318,40 +315,42 @@ function renderCards() { database .get(constants.database.keys.cards) .then((cardDoc) => { - cardDoc.data.sort((a, b) => a.order - b.order).forEach((card) => { - let columElement = document.createElement("div"); - columElement.className = "col"; - let cardElement = document.createElement("div"); - cardElement.className = "card"; - columElement.appendChild(cardElement); - let cardHeader = document.createElement("div"); - cardHeader.className = - "card-header d-flex text-truncate justify-content-between align-items-center"; - let cardHeaderText = document.createElement("span"); - cardHeaderText.innerText = card.name; - cardHeader.appendChild(cardHeaderText); - let cardHeaderEditButton = document.createElement("img"); - cardHeaderEditButton.src = "assets/icons/pencil-square.svg"; - cardHeaderEditButton.title = "Rediger " + card.name; - cardHeaderEditButton.width = "18"; - cardHeaderEditButton.type = "button"; - cardHeaderEditButton.height = "18"; - cardHeaderEditButton.onclick = () => openEditCardModal(card._id); - cardHeader.appendChild(cardHeaderEditButton); - cardElement.appendChild(cardHeader); - let linkList = document.createElement("ul"); - linkList.className = "list-group list-group-flush"; - card.links.forEach((link) => { - let listItem = document.createElement("a"); - listItem.innerText = link.name; - listItem.className = "list-group-item"; - listItem.href = link.url; - linkList.appendChild(listItem); + cardDoc.data + .sort((a, b) => a.order - b.order) + .forEach((card) => { + let columElement = document.createElement("div"); + columElement.className = "col-sm-6 col-lg-4 mb-4"; + let cardElement = document.createElement("div"); + cardElement.className = "card"; + columElement.appendChild(cardElement); + let cardHeader = document.createElement("div"); + cardHeader.className = + "card-header d-flex text-truncate justify-content-between align-items-center"; + let cardHeaderText = document.createElement("span"); + cardHeaderText.innerText = card.name; + cardHeader.appendChild(cardHeaderText); + let cardHeaderEditButton = document.createElement("img"); + cardHeaderEditButton.src = "assets/icons/pencil-square.svg"; + cardHeaderEditButton.title = "Rediger " + card.name; + cardHeaderEditButton.width = "18"; + cardHeaderEditButton.type = "button"; + cardHeaderEditButton.height = "18"; + cardHeaderEditButton.onclick = () => openEditCardModal(card._id); + cardHeader.appendChild(cardHeaderEditButton); + cardElement.appendChild(cardHeader); + let linkList = document.createElement("ul"); + linkList.className = "list-group list-group-flush"; + card.links.forEach((link) => { + let listItem = document.createElement("a"); + listItem.innerText = link.name; + listItem.className = "list-group-item"; + listItem.href = link.url; + linkList.appendChild(listItem); + }); + cardElement.appendChild(linkList); + cardsContainer.append(columElement); }); - cardElement.appendChild(linkList); - cardsContainer.append(columElement); - }); - + new Masonry(cardsContainer); }) .catch((error) => { if (error.status !== 404) logError(error); @@ -376,4 +375,3 @@ Element.prototype.empty = function () { }; initialize(); - diff --git a/src/styles/index.css b/src/styles/index.css index e91972e..818c734 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,17 +1,20 @@ img { -webkit-user-select: none; - -ms-user-select: none; user-select: none; } -#cards { - overflow-x: auto; - flex-wrap: unset; +.center { + position: absolute; + height: 50%; + width: 50%; + top: 50%; + left: 50%; + translate-top: -50%; + translate-left: -50%; + transform: translate(-50%, -50%); } + #cards .col { - width: 18rem; - max-width: 18rem; - min-width: 18rem; overflow-y: auto; } #cards .col .card .card-header img { diff --git a/src/styles/index.scss b/src/styles/index.scss index 9175250..d90d415 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -2,14 +2,19 @@ img { user-select: none; } -#cards { - overflow-x: auto; - flex-wrap: unset; +.center { + position: absolute; + height: 50%; + width: 50%; + top: 50%; + left: 50%; + translate-top: -50%; + translate-left: -50%; + transform: translate(-50%, -50%); +} +#cards { .col { - width: 18rem; - max-width: 18rem; - min-width: 18rem; overflow-y: auto; .card .card-header img { diff --git a/src/styles/prepros.config b/src/styles/prepros.config index d01ba43..0636925 100644 --- a/src/styles/prepros.config +++ b/src/styles/prepros.config @@ -76,6 +76,7 @@ "remotePath": "", "timeout": 20000, "autoUpload": false, + "reuseConnection": true, "connectionType": "ftp", "history": [] }, @@ -106,7 +107,8 @@ "> 2%", "not dead" ], - "preserveImports": false + "preserveImports": false, + "polyfills": false } }, "@babel/preset-react": true, @@ -152,7 +154,8 @@ "> 2%", "not dead" ], - "preserveImports": false + "preserveImports": false, + "polyfills": false } }, "@babel/preset-react": true, -- cgit v1.3

Innstillinger

Innstillinger