läuft besser sieht aber immernoch nicht perfekt aus

README.md

@@ -305,17 +305,3 @@ benötigt "Fader"
   <!-- End logit -->
 ```
 nicht vergessen bei setSiteId die richtige id anzugeben
-
-## Flag
-einfach folgende zeilen in den footer
-```
-  <script src="/cssjs/flag.min.js"></script>
-  <link rel="stylesheet" href="/cssjs/flag.min.css">
-
-```
-
-um zusätzliche infos zu liefern muss ein
-```
-data-flaginfo="<key>:<val>"
-```
-in irgend ein html tag gepackt werden, ,das wird dann vom script abgeholt wenn es gebraucht wird.

admin.css

@@ -1,8 +1,3 @@
-body {
-  background-color: #000 !important;
-  color: #fff;
-}
-
 textarea {
   display: block;
   width: 100%;
@@ -26,6 +21,7 @@ form .label {
   margin: 0 10px;
 }
 
+
 .hover {
   border: 1px solid white;
 }

admin.min.css

@@ -1 +1 @@
-body{background-color:#000!important;color:#fff}textarea{display:block;width:100%}form .label{float:left;width:200px}.admin_navi{display:block;width:100%;border-bottom:1px solid #000;overflow:overlay}.admin_navi li{display:block;float:left;margin:0 10px}.hover{border:1px solid #fff}.hover:hover{border:1px solid #000}
+textarea{display:block;width:100%}form .label{float:left;width:200px}.admin_navi{display:block;width:100%;border-bottom:1px solid #000;overflow:overlay}.admin_navi li{display:block;float:left;margin:0 10px}.hover{border:1px solid #fff}.hover:hover{border:1px solid #000}

flag.css

@@ -2,23 +2,14 @@
   position: fixed;
   bottom: 0px;
   right: 0px;
-  width: 170px;
+  width: 150px;
   border: 1px solid #fff;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
-  margin-right: -145px;
+  margin-right: -130px;
   z-index: 99999;
 }
 
-@media (max-width:1081px) {
-  #flag-panel {
-    border: 10px solid #fff;
-    border-top-left-radius: 23px;
-    border-bottom-left-radius: 23px;
-    margin-right: -135px;
-  }
-}
-
 #flag-panel.open {
   margin-right: 0px !important;
 }
@@ -30,6 +21,7 @@
 #flag-panel span {
   margin-right: 10px;
   margin-left: 5px;
+  float: left;
 }
 
 #flag-overlay {

flag.js

@@ -55,15 +55,6 @@
     });*/
     var fields = {};
     fields['s'] = window.location.hostname;
-    var datas = document.querySelectorAll('[data-flaginfo]');
-    if(datas) {
-      for(var i=0; i<datas.length;i++) {
-        console.log(datas[i].dataset['flaginfo']);
-        var tmp = datas[i].dataset['flaginfo'];
-        tmp = tmp.split(':',2);
-        fields[tmp[0]] = tmp[1];
-      }
-    }
     if(document.referrer) {fields['r'] = document.referrer;}
     if(window.location.href) {fields['u'] = window.location.href;}
     if(navigator.userAgent) {fields['a'] = navigator.userAgent;}
@@ -95,10 +86,24 @@
   var tab = document.createElement('span');
   tab.innerHTML = '&#9873;';
   tab.addEventListener('mouseenter',function(ev) {
-    if(!panel.classList.contains('opened')) {
+    if(!panel.classList.contains('tapped')) {
-      panel.classList.add('opened');
+      if(!panel.classList.contains('opened')) {
+        panel.classList.add('open');
+        panel.classList.add('opened');
+      }else{
+        panel.classList.toggle('open');
+      }
+    }
+  });
+  //TODO open feedback btn with click
+  tab.addEventListener('click',function(ev) {
+    if(!panel.classList.contains('opened')) {
+      panel.classList.add('tapped');
+      panel.classList.add('open');
+      panel.classList.add('opened');
+    }else{
+      panel.classList.toggle('open');
     }
-    panel.classList.toggle('open');
   });
 
   var button = document.createElement('button');

flag.min.css

@@ -1 +1 @@
-#flag-panel{position:fixed;bottom:0;right:0;width:170px;border:1px solid #fff;border-top-left-radius:15px;border-bottom-left-radius:15px;margin-right:-145px;z-index:99999}@media (max-width:1081px){#flag-panel{border:10px solid #fff;border-top-left-radius:23px;border-bottom-left-radius:23px;margin-right:-135px}}#flag-panel.open{margin-right:0!important}#flag-panel.opened{transition:margin-right 1s}#flag-panel span{margin-right:10px;margin-left:5px}#flag-overlay{position:fixed;width:100%;height:100vh;top:0;left:0;background-color:rgba(0,0,0,.5);z-index:9999}#flag-iframe{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;background-color:#000;border:3px solid #fff;border-radius:1em;overflow-y:scroll;height:97vh;min-width:350px;width:80%;display:block;margin:1vh auto 0}#flag-overlay.closing{transition:opacity .5s}#flag-iframe.closing{transition:margin 1s,width 1s,height 1s;width:350px;height:170px;margin-top:calc(50vh - 50px);overflow:hidden}
+#flag-panel{position:fixed;bottom:0;right:0;width:150px;border:1px solid #fff;border-top-left-radius:15px;border-bottom-left-radius:15px;margin-right:-130px;z-index:99999}#flag-panel.open{margin-right:0!important}#flag-panel.opened{transition:margin-right 1s}#flag-panel span{margin-right:10px;margin-left:5px;float:left}#flag-overlay{position:fixed;width:100%;height:100vh;top:0;left:0;background-color:rgba(0,0,0,.5);z-index:9999}#flag-iframe{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:10000;background-color:#000;border:3px solid #fff;border-radius:1em;overflow-y:scroll;height:97vh;min-width:350px;width:80%;display:block;margin:0 auto;margin-top:1vh}#flag-overlay.closing{transition:opacity .5s}#flag-iframe.closing{transition:margin 1s ease,width 1s ease,height 1s ease;width:350px;height:170px;margin-top:calc(50vh - 50px);overflow:hidden}

flag.min.js

@@ -1,2 +1,2 @@
-!function(connector){"use strict";var style="default",iframe,flag;document.body.dataset.feedbackstyle&&(style=document.body.dataset.feedbackstyle);var col="light",closeFlag=function(ev){flag.classList.add("closing"),iframe.classList.add("closing"),setTimeout((function(){flag.style.opacity=0,iframe.style.opacity=0,setTimeout((function(){flag.remove(),iframe.remove(),document.body.style.overflowY="auto"}),500)}),1e3)},openFlag=function(ev,infos=!1){flag=document.createElement("div"),document.body.style.overflowY="hidden",flag.id="flag-overlay",(iframe=document.createElement("iframe")).src="",iframe.name="flag-iframe",iframe.id="flag-iframe",document.body.appendChild(flag),setTimeout((function(){flag.addEventListener("click",(function(){closeFlag()}))}),3e3),document.body.appendChild(iframe);var form=document.createElement("form");form.action=connector+"?style="+style,form.target="flag-iframe",form.method="POST";const screenshotTarget=document.body;var fields={};fields.s=window.location.hostname;var datas=document.querySelectorAll("[data-flaginfo]");if(datas)for(var i=0;i<datas.length;i++){console.log(datas[i].dataset.flaginfo);var tmp=datas[i].dataset.flaginfo;fields[(tmp=tmp.split(":",2))[0]]=tmp[1]}if(document.referrer&&(fields.r=document.referrer),window.location.href&&(fields.u=window.location.href),navigator.userAgent&&(fields.a=navigator.userAgent),fields.d=window.screen.width+"x"+window.screen.height+" ("+window.screen.colorDepth+"bit)",infos&&typeof infos==typeof{})for(var i in infos)fields[i]=infos[i];for(var f in console.log("Fields",fields),fields){var inp=document.createElement("input");inp.type="hidden",inp.name=f,inp.value=fields[f],form.appendChild(inp)}form.style="display:none",document.body.appendChild(form),form.submit(),form.remove()},panel=document.createElement("div");panel.id="flag-panel";var tab=document.createElement("span");tab.innerHTML="&#9873;",tab.addEventListener("mouseenter",(function(ev){panel.classList.contains("opened")||panel.classList.add("opened"),panel.classList.toggle("open")}));var button=document.createElement("button");button.innerHTML="Problem melden",button.addEventListener("click",openFlag),window.addEventListener("message",event=>{"close"==event.data&&closeFlag()});var links=document.getElementsByClassName("flag-link");if(links.length>0)for(var l=0;l<links.length;l++)links[l].addEventListener("click",(function(ev){return openFlag(ev,ev.target.dataset),ev.preventDefault(),!1}));panel.appendChild(tab),panel.appendChild(button),document.body.appendChild(panel)}("https://troy-grunt.de/feedback");
+!function(connector){"use strict";var style="default",iframe,flag;document.body.dataset.feedbackstyle&&(style=document.body.dataset.feedbackstyle);var col="light",closeFlag=function(ev){flag.classList.add("closing"),iframe.classList.add("closing"),setTimeout((function(){flag.style.opacity=0,iframe.style.opacity=0,setTimeout((function(){flag.remove(),iframe.remove(),document.body.style.overflowY="auto"}),500)}),1e3)},openFlag=function(ev,infos=!1){flag=document.createElement("div"),document.body.style.overflowY="hidden",flag.id="flag-overlay",(iframe=document.createElement("iframe")).src="",iframe.name="flag-iframe",iframe.id="flag-iframe",document.body.appendChild(flag),setTimeout((function(){flag.addEventListener("click",(function(){closeFlag()}))}),3e3),document.body.appendChild(iframe);var form=document.createElement("form");form.action=connector+"?style="+style,form.target="flag-iframe",form.method="POST";const screenshotTarget=document.body;var fields={};if(fields.s=window.location.hostname,document.referrer&&(fields.r=document.referrer),window.location.href&&(fields.u=window.location.href),navigator.userAgent&&(fields.a=navigator.userAgent),fields.d=window.screen.width+"x"+window.screen.height+" ("+window.screen.colorDepth+"bit)",infos&&typeof infos==typeof{})for(var i in infos)fields[i]=infos[i];for(var f in console.log("Fields",fields),fields){var inp=document.createElement("input");inp.type="hidden",inp.name=f,inp.value=fields[f],form.appendChild(inp)}form.style="display:none",document.body.appendChild(form),form.submit(),form.remove()},panel=document.createElement("div");panel.id="flag-panel";var tab=document.createElement("span");tab.innerHTML="&#9873;",tab.addEventListener("mouseenter",(function(ev){panel.classList.contains("tapped")||(panel.classList.contains("opened")?panel.classList.toggle("open"):(panel.classList.add("open"),panel.classList.add("opened")))})),tab.addEventListener("click",(function(ev){panel.classList.contains("opened")?panel.classList.toggle("open"):(panel.classList.add("tapped"),panel.classList.add("open"),panel.classList.add("opened"))}));var button=document.createElement("button");button.innerHTML="Problem melden",button.addEventListener("click",openFlag),window.addEventListener("message",event=>{"close"==event.data&&closeFlag()});var links=document.getElementsByClassName("flag-link");if(links.length>0)for(var l=0;l<links.length;l++)links[l].addEventListener("click",(function(ev){return openFlag(ev,ev.target.dataset),ev.preventDefault(),!1}));panel.appendChild(tab),panel.appendChild(button),document.body.appendChild(panel)}("https://troy-grunt.de/feedback");
 //# sourceMappingURL=flag.min.js.map

flag.min.js.map

@@ -38,14 +38,6 @@
         "window",
         "location",
         "hostname",
-        "datas",
-        "querySelectorAll",
-        "i",
-        "length",
-        "console",
-        "log",
-        "tmp",
-        "split",
         "referrer",
         "href",
         "navigator",
@@ -54,7 +46,10 @@
         "width",
         "height",
         "colorDepth",
+        "i",
         "f",
+        "console",
+        "log",
         "inp",
         "type",
         "value",
@@ -69,9 +64,10 @@
         "data",
         "links",
         "getElementsByClassName",
+        "length",
         "l",
         "preventDefault"
     ],
-    "mappings": "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",
+    "mappings": "CAAA,SAAUA,WACR,aAEA,IAAIC,MAAQ,UAKRC,OACAC,KALDC,SAASC,KAAKC,QAAQC,gBACvBN,MAAQG,SAASC,KAAKC,QAAQC,eAKhC,IAAIC,IAAM,QAINC,UAAY,SAASC,IACvBP,KAAKQ,UAAUC,IAAI,WACnBV,OAAOS,UAAUC,IAAI,WACrBC,YAAW,WACTV,KAAKF,MAAMa,QAAU,EACrBZ,OAAOD,MAAMa,QAAU,EACvBD,YAAW,WACTV,KAAKY,SACLb,OAAOa,SACPX,SAASC,KAAKJ,MAAMe,UAAY,SAChC,OACF,MAGAC,SAAW,SAASP,GAAIQ,OAAM,GAChCf,KAAOC,SAASe,cAAc,OAC9Bf,SAASC,KAAKJ,MAAMe,UAAY,SAChCb,KAAKiB,GAAK,gBACVlB,OAASE,SAASe,cAAc,WACzBE,IAAK,GACZnB,OAAOoB,KAAO,cACdpB,OAAOkB,GAAK,cACZhB,SAASC,KAAKkB,YAAYpB,MAC1BU,YAAW,WACTV,KAAKqB,iBAAiB,SAAQ,WAC5Bf,iBAGF,KACFL,SAASC,KAAKkB,YAAYrB,QAE1B,IAAIuB,KAAOrB,SAASe,cAAc,QAClCM,KAAKC,OAAS1B,UAAU,UAAUC,MAClCwB,KAAKE,OAAS,cACdF,KAAKG,OAAS,OACd,MAAMC,iBAAmBzB,SAASC,KAMlC,IAAIyB,OAAS,GAMb,GALAA,OAAU,EAAIC,OAAOC,SAASC,SAC3B7B,SAAS8B,WAAWJ,OAAU,EAAI1B,SAAS8B,UAC3CH,OAAOC,SAASG,OAAOL,OAAU,EAAIC,OAAOC,SAASG,MACrDC,UAAUC,YAAYP,OAAU,EAAIM,UAAUC,WACjDP,OAAU,EAAOC,OAAOO,OAAOC,MAAM,IAAIR,OAAOO,OAAOE,OAAO,KAAKT,OAAOO,OAAOG,WAAW,OACzFvB,cAAe,aAAiB,GACjC,IAAI,IAAIwB,KAAKxB,MACXY,OAAOY,GAAKxB,MAAMwB,GAKtB,IAAI,IAAIC,KAFRC,QAAQC,IAAI,SAASf,QAERA,OAAQ,CACnB,IAAIgB,IAAM1C,SAASe,cAAc,SACjC2B,IAAIC,KAAO,SACXD,IAAIxB,KAAOqB,EACXG,IAAIE,MAAQlB,OAAOa,GACnBlB,KAAKF,YAAYuB,KAGnBrB,KAAKxB,MAAQ,eACbG,SAASC,KAAKkB,YAAYE,MAC1BA,KAAKwB,SACLxB,KAAKV,UAGHmC,MAAQ9C,SAASe,cAAc,OACnC+B,MAAM9B,GAAK,aAEX,IAAI+B,IAAM/C,SAASe,cAAc,QACjCgC,IAAIC,UAAY,UAChBD,IAAI3B,iBAAiB,cAAa,SAASd,IACrCwC,MAAMvC,UAAU0C,SAAS,YACvBH,MAAMvC,UAAU0C,SAAS,UAI3BH,MAAMvC,UAAU2C,OAAO,SAHvBJ,MAAMvC,UAAUC,IAAI,QACpBsC,MAAMvC,UAAUC,IAAI,eAO1BuC,IAAI3B,iBAAiB,SAAQ,SAASd,IAChCwC,MAAMvC,UAAU0C,SAAS,UAK3BH,MAAMvC,UAAU2C,OAAO,SAJvBJ,MAAMvC,UAAUC,IAAI,UACpBsC,MAAMvC,UAAUC,IAAI,QACpBsC,MAAMvC,UAAUC,IAAI,cAMxB,IAAI2C,OAASnD,SAASe,cAAc,UAEpCoC,OAAOH,UAAY,iBACnBG,OAAO/B,iBAAiB,QAAQP,UAEhCc,OAAOP,iBAAiB,UAAYgC,QAEjB,SAAdA,MAAMC,MAEPhD,cAIJ,IAAIiD,MAAQtD,SAASuD,uBAAuB,aAC5C,GAAGD,MAAME,OAAS,EAChB,IAAI,IAAIC,EAAE,EAAEA,EAAEH,MAAME,OAAOC,IAEzBH,MAAMG,GAAGrC,iBAAiB,SAAQ,SAASd,IAGzC,OAFAO,SAASP,GAAGA,GAAGiB,OAAOrB,SACtBI,GAAGoD,kBACI,KAKbZ,MAAM3B,YAAY4B,KAClBD,MAAM3B,YAAYgC,QAElBnD,SAASC,KAAKkB,YAAY2B,OAxI5B,CAyIG",
     "file": "flag.js"
 }

frontlog.css

@@ -1,46 +0,0 @@
-frontlog {
-  position: fixed;
-  min-width: 200px;
-  bottom: 0;
-  right: 0;
-}
-
-flogelem {
-  display:block;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 8px;
-  overflow: hidden;
-  max-height: 0;
-  margin-bottom: 0;
-  padding: 0;
-  opacity: 0;
-  position: relative;
-  bottom: 0;
-  -webkit-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
-	-moz-transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
-  transition: max-height 3s, margin-bottom 3s, padding 3s,opacity 3s, bottom 3s;
-}
-
-.flshow {
-  max-height: 200px!important;
-  margin-bottom: 1em;
-  padding: 4px;
-  opacity: 1;
-}
-.flvanish {
-  position: relative;
-  bottom: 3em;
-  max-height: 0 !important;
-  opacity: 0 !important;
-}
-
-fltitle {
-  display: block;
-  font-size: 120%;
-}
-
-flogelem img {
-  float: left;
-  width: 25px;
-}

frontlog.js

@@ -1,68 +0,0 @@
-let frontlogList = [];
-let frontlogMaxEl = document.body.dataset['frontlog']||3;
-let frontlog = document.createElement('frontlog');
-document.body.appendChild(frontlog);
-
-let frontlogVanish = function(elem) {
-  elem.classList.add('flvanish');
-  setTimeout(function() {
-    elem.remove();
-    let elems = document.getElementsByTagName('flogelem');
-    if(elems.length < frontlogMaxEl && frontlogList.length) {
-      let p = frontlogList.shift();
-      frontlogPipe(p.title,p.icon,p.msg,p.col,p.time);
-    }
-  },3100);
-}
-
-let frontlogAdd = function(title,icon,msg,col,time) {
-  let elems = document.getElementsByTagName('flogelem');
-  if(elems.length < frontlogMaxEl) {
-    frontlogPipe(title,icon,msg,col,time);
-  }else{
-    let pElem = {"title":title,"icon":icon,"msg":msg,"col":col,"time":time};
-    frontlogList.push(pElem);
-  }
-}
-
-let frontlogPipe = function(title,icon,msg,col, time) {
-  let elem = document.createElement('flogelem');
-  {
-    let elemid = 'fl_';
-    {
-      let ch = 'abcdefghijklmnopqrstuvwxyz0123456789';
-      let chl = ch.length;
-      for ( let i = 0; i < 16; i++ ) {
-        elemid += ch.charAt(Math.floor(Math.random() * chl));
-      }
-    }
-    elem.id = elemid;
-    let flicon = document.createElement('img');
-    flicon.src = icon;
-    elem.appendChild(flicon);
-
-    let fltitle = document.createElement('fltitle');
-    fltitle.innerText = title;
-    elem.appendChild(fltitle);
-
-    let flmsg = document.createElement('flmsg');
-    flmsg.innerText = msg;
-    elem.appendChild(flmsg);
-  }
-
-  elem.style = 'border-color: '+col+';';
-  elem.addEventListener('click',function(ev){
-    let tg = ev.target;
-    if(tg.tagName.toLowerCase() != 'flogelem') {
-      tg = ev.target.parentNode;
-    }
-    frontlogVanish(tg);
-  });
-  setTimeout(function(){
-    frontlogVanish(elem);
-  },time*1000)
-  frontlog.appendChild(elem);
-  setTimeout(function(){
-    elem.classList.add('flshow');
-  },10);
-}

switch.css

@@ -12,7 +12,7 @@ input.switch[type="checkbox"] + label {
   float: left;
   margin-right: 5px;
   transition: background-color 0.5s linear;
-  margin-bottom: 15px;
+  margin-top: 15px;
 }
 input.switch[type="checkbox"] + label:hover {
   cursor: pointer;

switch.min.css

@@ -1 +1 @@
-input.switch[type=checkbox]{display:none}input.switch[type=checkbox]+label{width:60px;height:30px;border-radius:30px;border:2px solid #ddd;background-color:#eee;display:inline-block;content:"";float:left;margin-right:5px;transition:background-color .5s linear;margin-bottom:15px}input.switch[type=checkbox]+label:hover{cursor:pointer}input.switch[type=checkbox]+label::before{width:30px;height:30px;border-radius:30px;background-color:#fff;display:block;content:"";float:left;margin-right:5px;transition:margin .1s linear;box-shadow:0 0 5px #aaa}input.switch[type=checkbox]:checked+label{background-color:#2b8718}input.switch[type=checkbox]:checked+label::before{margin:0 0 0 30px}
+input.switch[type=checkbox]{display:none}input.switch[type=checkbox]+label{width:60px;height:30px;border-radius:30px;border:2px solid #ddd;background-color:#eee;display:inline-block;content:"";float:left;margin-right:5px;transition:background-color .5s linear;margin-top:15px}input.switch[type=checkbox]+label:hover{cursor:pointer}input.switch[type=checkbox]+label::before{width:30px;height:30px;border-radius:30px;background-color:#fff;display:block;content:"";float:left;margin-right:5px;transition:margin .1s linear;box-shadow:0 0 5px #aaa}input.switch[type=checkbox]:checked+label{background-color:#2b8718}input.switch[type=checkbox]:checked+label::before{margin:0 0 0 30px}