Browse Source

Bundle libraries (fixes #8) and use Macy.js for masonry layout

tags/v1.4
Moritz Marquardt 7 months ago
parent
commit
d7a91073d4
9 changed files with 247 additions and 19 deletions
  1. +1
    -1
      api.go
  2. +131
    -14
      web/data.go
  3. +5
    -4
      web/index.html
  4. +1
    -0
      web/lib/bulma.min.css
  5. +77
    -0
      web/lib/flexmasonry.css
  6. +7
    -0
      web/lib/flexmasonry.js
  7. +1
    -0
      web/lib/macy.min.js
  8. +6
    -0
      web/lib/vue.min.js
  9. +18
    -0
      web/script.js

+ 1
- 1
api.go View File

@@ -1,6 +1,6 @@
package chihuahua

//go:generate go-bindata -pkg web -fs -prefix web -o web/data.go -ignore data\\.go web web/icons
//go:generate go-bindata -pkg web -fs -prefix web -o web/data.go -ignore data\\.go web web/icons web/lib

import (
"io/ioutil"

+ 131
- 14
web/data.go
File diff suppressed because it is too large
View File


+ 5
- 4
web/index.html View File

@@ -7,7 +7,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="lib/bulma.min.css">
<!-- This site is using Eva Icons - https://github.com/akveo/eva-icons -->
<style>
img.icon { height: 1.7em; vertical-align: top; margin: -0.2em 0 -0.2em }
@@ -21,8 +21,8 @@
<section class="container" style="margin-top: 2em" v-for="(server, serverName) in servers" :key="serverName">
<hr>
<h2 class="subtitle" style="margin-bottom: 0.5em"><img class="icon" src="icons/hard-drive-outline.svg"> <strong>{{ serverName }}</strong></h2>
<div class="columns" style="flex-wrap: wrap">
<article class="panel column is-one-quarter" style="margin-bottom: 0" v-for="(check, checkName) in server" :key="serverName + '/' + checkName">
<div class="masonry" style="align-content: flex-start">
<article class="panel" v-for="(check, checkName) in server" :key="serverName + '/' + checkName">
<p class="panel-heading" style="font-weight: bold" :class="headerByStatus(check.status)">
<img class="icon" :src="iconByStatus(check.status)"></i>
{{ checkName }}
@@ -46,7 +46,8 @@
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue.min.js"></script>
<script src="lib/macy.min.js"></script>
<script src="script.js"></script>
</body>
</html>

+ 1
- 0
web/lib/bulma.min.css
File diff suppressed because it is too large
View File


+ 77
- 0
web/lib/flexmasonry.css View File

@@ -0,0 +1,77 @@
/*!
* FlexMasonry
* Version: 0.2.3
* Author: Gilbert Pellegrom <gilbert@pellegrom.me>
* License: MIT
*/
.flexmasonry {
display: flex;
flex-flow: column wrap;
align-content: space-between;
}

.flexmasonry-item { width: 100%; }
.flexmasonry-cols-2 .flexmasonry-item { width: 50%; }
.flexmasonry-cols-3 .flexmasonry-item { width: 33.333%; }
.flexmasonry-cols-4 .flexmasonry-item { width: 25%; }
.flexmasonry-cols-5 .flexmasonry-item { width: 20%; }
.flexmasonry-cols-6 .flexmasonry-item { width: 16.666%; }
.flexmasonry-cols-7 .flexmasonry-item { width: 14.285%; }
.flexmasonry-cols-8 .flexmasonry-item { width: 12.5%; }

.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n+1) { order: 1; }
.flexmasonry-cols-2 .flexmasonry-item:nth-child(2n) { order: 2; }

.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+1) { order: 1; }
.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n+2) { order: 2; }
.flexmasonry-cols-3 .flexmasonry-item:nth-child(3n) { order: 3; }

.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+1) { order: 1; }
.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+2) { order: 2; }
.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n+3) { order: 3; }
.flexmasonry-cols-4 .flexmasonry-item:nth-child(4n) { order: 4; }

.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+1) { order: 1; }
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+2) { order: 2; }
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+3) { order: 3; }
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n+4) { order: 4; }
.flexmasonry-cols-5 .flexmasonry-item:nth-child(5n) { order: 5; }

.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+1) { order: 1; }
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+2) { order: 2; }
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+3) { order: 3; }
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+4) { order: 4; }
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n+5) { order: 5; }
.flexmasonry-cols-6 .flexmasonry-item:nth-child(6n) { order: 6; }

.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+1) { order: 1; }
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+2) { order: 2; }
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+3) { order: 3; }
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+4) { order: 4; }
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+5) { order: 5; }
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n+6) { order: 6; }
.flexmasonry-cols-7 .flexmasonry-item:nth-child(7n) { order: 7; }

.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+1) { order: 1; }
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+2) { order: 2; }
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+3) { order: 3; }
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+4) { order: 4; }
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+5) { order: 5; }
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+6) { order: 6; }
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n+7) { order: 7; }
.flexmasonry-cols-8 .flexmasonry-item:nth-child(8n) { order: 8; }

.flexmasonry-break {
content: "";
flex-basis: 100%;
width: 0 !important;
margin: 0;
}
.flexmasonry-break-1 { order: 1; }
.flexmasonry-break-2 { order: 2; }
.flexmasonry-break-3 { order: 3; }
.flexmasonry-break-4 { order: 4; }
.flexmasonry-break-5 { order: 5; }
.flexmasonry-break-6 { order: 6; }
.flexmasonry-break-7 { order: 7; }


+ 7
- 0
web/lib/flexmasonry.js View File

@@ -0,0 +1,7 @@
/*!
* FlexMasonry
* Version: 0.2.3
* Author: Gilbert Pellegrom <gilbert@pellegrom.me>
* License: MIT
*/
var FlexMasonry=function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){t(1),e.exports=t(2)},function(e,n,t){},function(e,n,t){"use strict";t.r(n);const r={responsive:!0,breakpointCols:{"min-width: 1500px":6,"min-width: 1200px":5,"min-width: 992px":4,"min-width: 768px":3,"min-width: 576px":2},numCols:4};let o=null,i={},s=[];function a(){s.forEach(function(e){c(e)})}function l(){o&&window.cancelAnimationFrame(o),o=window.requestAnimationFrame(function(){y()})}function c(e){if(d()<2)return void e.style.removeProperty("height");let n=[];Array.from(e.children).forEach(function(e){if(e.classList.contains("flexmasonry-break"))return;const t=window.getComputedStyle(e),r=t.getPropertyValue("order"),o=t.getPropertyValue("height");n[r-1]||(n[r-1]=0),n[r-1]+=Math.ceil(parseFloat(o))});const t=Math.max(...n);e.style.height=t+"px"}function f(e){const n=e.querySelectorAll(".flexmasonry-break");if(Array.from(n).length!==d()-1)for(let n=1;n<d();n++){const t=document.createElement("div");t.classList.add("flexmasonry-break"),t.classList.add("flexmasonry-break-"+n),e.appendChild(t)}}function u(e){e.classList.contains("flexmasonry-cols-"+d())||(e.className=e.className.replace(/(flexmasonry-cols-\d+)/,""),e.classList.add("flexmasonry-cols-"+d()))}function d(){if(!i.responsive)return i.numCols;const e=Object.keys(i.breakpointCols);for(const n of e)if(window.matchMedia("("+n+")").matches)return i.breakpointCols[n];return 1}function m(e,n={}){return i=Object.assign(r,n),u(e),function(e){const n=e.querySelectorAll(".flexmasonry-break");Array.from(n).length!==d()-1&&Array.from(n).forEach(function(e){e.parentNode.removeChild(e)})}(e),f(e),c(e),this}function y(e={}){return s.forEach(function(n){m(n,e)}),this}n.default={init:function(e,n={}){return s="string"==typeof e?document.querySelectorAll(e):e,i=Object.assign(r,n),s.forEach(function(e){!function(e){e.classList.add("flexmasonry"),i.responsive&&e.classList.add("flexmasonry-responsive"),u(e),Array.from(e.children).forEach(function(e){e.classList.add("flexmasonry-item")}),f(e)}(e),c(e)}),window.addEventListener("load",a),window.addEventListener("resize",l),this},refresh:m,refreshAll:y,destroyAll:function(){window.removeEventListener("load",a),window.removeEventListener("resize",l)}}}]).default;

+ 1
- 0
web/lib/macy.min.js
File diff suppressed because it is too large
View File


+ 6
- 0
web/lib/vue.min.js
File diff suppressed because it is too large
View File


+ 18
- 0
web/script.js View File

@@ -1,6 +1,23 @@
// Leftpad - P(value, length, character, rightpad) - https://gist.github.com/moqmar/9ef4f0755d0a17b61458f35b91447bc1
function P(v,l,c,r) { v = v.toString(); while (v.length < l) v = r ? v + (c||0) : (c||0) + v; return v; }

var macies = [];
function updateMacy() {
[...document.getElementsByClassName("masonry")].forEach(x => {
if (!x.getAttribute("macy-id")) {
x.setAttribute("macy-id", macies.length);
macies.push(Macy({
container: x,
trueOrder: false,
waitForImages: false,
margin: 24,
columns: 4,
breakAt: { 940: 3, 520: 2, 400: 1 }
}));
} else macies[x.getAttribute("macy-id")].reInit();
});
}

window.app = new Vue({
el: "#app",
data: {
@@ -33,6 +50,7 @@ window.app = new Vue({
function update() {
fetch("/checks").then(r => r.json()).then(r => {
Vue.set(app, "servers", r);
setTimeout(updateMacy);
setTimeout(update, 1000);
}).catch(err => {
console.error(err);

Loading…
Cancel
Save