Styling elements and getting structure into data view

src/style.css

@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-html>body {
+html > body {
     font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
 }
 
@@ -94,12 +94,12 @@ h2 {
     list-style: none;
 }
 
-.list.highlight>li:hover {
+.list.highlight > li:hover {
     background-color: #eee;
     cursor: pointer;
 }
 
-.list>li {
+.list > li {
     box-sizing: border-box;
     line-height: 1;
     height: 48px;
@@ -107,7 +107,7 @@ h2 {
     overflow: hidden;
 }
 
-.list>li i.material-icons {
+.list > li i.material-icons {
     margin-right: 32px;
     height: 24px;
     width: 24px;
@@ -116,7 +116,7 @@ h2 {
     color: #757575;
 }
 
-.list>li>span {
+.list > li > span {
     height: 100%;
     text-decoration: none;
     box-sizing: border-box;
@@ -339,5 +339,29 @@ select {
 
 .tag-history-element {
     padding: 15px;
-  margin:5px;
+    margin: 5px;
+    max-width: 100%;
+}
+
+.tag-history-element > div {
+    padding: 10px;
+    min-width: 100px;
+}
+
+.tag-history-element .id {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
+.tag-history-element .created {
+    position: absolute;
+    top: 70px;
+    right: 15px;
+}
+
+.tag-history-element .id span,
+.tag-history-element .container span,
+.tag-history-element .parent span{
+    font-size: 12px;
 }

src/tags/image-date.tag

@@ -32,7 +32,7 @@
           return Math.floor(diff / maxSeconds[i]) + ' ' + labels[i * 2 + 1];
         }
       }
-    }
+    };
     opts.image.on('creation-date', function(date) {
       self.date = date;
       self.localDate = date.toLocaleString()

src/tags/tag-history.tag

@@ -26,9 +26,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <div show="{ registryUI.taghistory.loadend }">
 
             <material-card each="{ guiElement in registryUI.taghistory.elements }" class="tag-history-element">
-                <p each="{ entry in guiElement }">
+                <div each="{ entry in guiElement }" class="{ entry.key }">
-                    { entry.key } { entry.value }
+                    <strong>{ entry.key }</strong><br> <span> { entry.value } </span>
-                </p>
+                </div>
 
             </material-card>
         </div>
@@ -38,6 +38,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <script type="text/javascript">
         console.log("taghistory script area");
 
+
+
         registryUI.taghistory.instance = this;
         registryUI.taghistory.display = function () {
             var oReq = new Http();
@@ -49,12 +51,16 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
                     var elements = JSON.parse(this.responseText).history || [];
                     for(var index in elements){
                         var parsedNestedElements = JSON.parse(elements[index].v1Compatibility || {});
-                        console.log(parsedNestedElements);
-
                         var guiElements = [];
                         var guiElement = {};
                         for(var attribute in parsedNestedElements){
                             if(parsedNestedElements.hasOwnProperty(attribute)){
+                                var value = parsedNestedElements[attribute];
+                                if(attribute == "created"){
+                                    // Todo this must be parsed correctly
+                                }else if(attribute == "container_config" || attribute == "config"){
+                                    console.log(value.cmd);
+                                }
                                 guiElement = {
                                     "key": attribute,
                                     "value": parsedNestedElements[attribute]
@@ -85,6 +91,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
             oReq.send();
         };
 
+
         registryUI.taghistory.display();
         registryUI.taghistory.instance.update();
     </script>