Some plugin CSS-related changes

* Fixed and tidied up filters for versions and CRCs.
* Moved plugin card CSS into template.
* Fixed zero CRCs being displayed.
* Moved versions and CRCs inline with plugin names.

resources/report/css/style.css

@@ -197,82 +197,6 @@ dialog button {
     margin: 0.5em;
 }
 
-section[data-active] {
-    overflow:visible;
-    /*transition: 0.6s;
-    -webkit-transform-style: preserve-3d;
-    z-index:-1;*/
-}
-
-/*section[data-active] .front, section[data-active] .editor {
-    -webkit-backface-visibility: hidden;
-    transition: 0.6s;
-}*/
-
-section[data-active] .editor {
-    /*-webkit-transform: rotateY(180deg);*/
-    display:none;
-}
-
-/*section[data-active].flip  {
-    -webkit-transform: rotateY(180deg);
-}*/
-
-section[data-active].flip .front  {
-    display:none;
-}
-
-section[data-active].flip .editor  {
-    display:block;
-}
-
-section[data-active] .icons {
-    background: transparent;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    position: absolute;
-    top: 1em;
-    right: 0.5em;
-    overflow:visible;
-}
-.icons .fa {
-    color: grey;
-    text-align: center;
-    display: inline-block;
-    margin: 0.2em;
-    cursor: pointer;
-}
-.icons  > li:hover {
-    color: black;
-}
-.pluginMenu {
-    width: 1.5em;
-    text-align: center;
-    margin: 0.2em;
-    cursor: pointer;
-}
-.menu {
-    background: white;
-    box-shadow:0 0 3px 0px rgba(0,0,0,0.5);
-    font:10pt/1.5 Helvetica,sans-serif;
-    list-style-type: none;
-    position: absolute;
-    right: 0.5em;
-    width: 14em;
-    z-index: 2;
-    text-align: left;
-    opacity: 1;
-    padding:0;
-    color: black;
-}
-.menu > li {
-    padding: 0.2em 0.5em;
-    cursor: pointer;
-}
-.menu > li:hover {
-    background:#e3e3e3;
-}
 
 
 

resources/report/js/plugin.js

@@ -106,7 +106,9 @@ function Plugin(obj) {
 
         card.id = this.id;
         card.querySelector('h1').textContent = this.name;
-        card.querySelector('.crc').textContent = this.crc;
+        if (this.crc != '0') {
+            card.querySelector('.crc').textContent = this.crc;
+        }
         card.querySelector('.version').textContent = this.version;
 
         card.setAttribute('data-active', this.isActive);

resources/report/js/script.js

@@ -74,11 +74,11 @@ function toggleDisplayCSS(evt) {
     var e = document.getElementsByClassName(evt.target.getAttribute('data-class'));
     if (evt.target.checked) {
         for (var i = 0, z = e.length; i < z; i++) {
-            e[i].className += ' hidden';
+            e[i].classList.toggle('hidden', true);
         }
     } else {
         for (var i = 0, z = e.length; i < z; i++) {
-            e[i].className = e[i].className.replace('hidden', '');
+            e[i].classList.toggle('hidden', false);
         }
     }
 }

resources/report/report.html

@@ -74,13 +74,28 @@
             background:#e3e3e3;
         }
         ::content h1 {
-            color: blue;
+            margin: 0;
+            font-weight: normal;
+            font-size: 1.2em;
+            display: inline-block;
+        }
+        ::content .version {
+            display: inline-block;
+            margin-left: 1em;
+        }
+        ::content .crc {
+            display: inline-block;
+            margin-left: 1em;
+        }
+        .hidden, ::content .hidden {
+            display: none;
         }
         .activeTick {
             color: green;
+            padding-right: 0.5em;
         }
         :host([data-active=false]) .activeTick {
-            display: none;
+            visibility: hidden;
         }
         :host([data-bsa=false]) .loadsBSA {
             display: none;
@@ -91,6 +106,36 @@
         :host([data-edits=false]) .hasUserEdits {
             display: none;
         }
+
+
+        section[data-active] {
+            overflow:visible;
+            /*transition: 0.6s;
+            -webkit-transform-style: preserve-3d;
+            z-index:-1;*/
+        }
+
+        /*section[data-active] .front, section[data-active] .editor {
+            -webkit-backface-visibility: hidden;
+            transition: 0.6s;
+        }*/
+
+        section[data-active] .editor {
+            /*-webkit-transform: rotateY(180deg);*/
+            display:none;
+        }
+
+        /*section[data-active].flip  {
+            -webkit-transform: rotateY(180deg);
+        }*/
+
+        section[data-active].flip .front  {
+            display:none;
+        }
+
+        section[data-active].flip .editor  {
+            display:block;
+        }
         </style>
 
         <span class="activeTick fa fa-check" title="Active Plugin"></span>