From f6bc4df11f842a208ce39b1fa4ae8a565cd4daae Mon Sep 17 00:00:00 2001
From: Lennart Blom <registrierungen@lennart-blom.de>
Date: Sat, 1 Dec 2018 11:44:51 +0100
Subject: [PATCH] Styling elements and getting structure into data view

---
 src/style.css            | 376 +++++++++++++++++++++------------------
 src/tags/image-date.tag  |   2 +-
 src/tags/tag-history.tag |  17 +-
 3 files changed, 213 insertions(+), 182 deletions(-)

diff --git a/src/style.css b/src/style.css
index 7666b52..2d8add5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -15,329 +15,353 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-html>body {
-  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
+html > body {
+    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
 }
 
 html, body {
-  margin: 0;
-  height: 100%;
+    margin: 0;
+    height: 100%;
 }
 
 main {
-  margin-bottom: 100px;
+    margin-bottom: 100px;
 }
 
 .section-centerd {
-  margin: auto;
+    margin: auto;
 }
 
 .full-table {
-  width: 100%;
-  border: none;
+    width: 100%;
+    border: none;
 }
 
 .url {
-  font-size: 14px;
-  word-break: break-all;
+    font-size: 14px;
+    word-break: break-all;
 }
 
 .material-card-title-action a {
-  color: inherit;
-  text-decoration: none;
-  font-weight: inherit;
+    color: inherit;
+    text-decoration: none;
+    font-weight: inherit;
 }
 
 material-card {
-  min-height: 200px;
-  max-width: 75%;
-  margin: auto;
-  margin-top: 20px;
-  margin-bottom: 20px;
+    min-height: 200px;
+    max-width: 75%;
+    margin: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
 }
 
 material-spinner {
-  align-self: center;
+    align-self: center;
 }
 
 .spinner-wrapper {
-  margin-top: 50px;
-  display: flex;
-  flex-direction: column;
+    margin-top: 50px;
+    display: flex;
+    flex-direction: column;
 }
 
 material-navbar {
-  height: 64px;
+    height: 64px;
 }
 
 .logo {
-  padding: 0 16px 0 72px;
-  text-decoration: none;
-  font-size: 20px;
-  line-height: 1;
-  letter-spacing: .02em;
-  font-weight: 400;
+    padding: 0 16px 0 72px;
+    text-decoration: none;
+    font-size: 20px;
+    line-height: 1;
+    letter-spacing: .02em;
+    font-weight: 400;
 }
 
 h2 {
-  padding: 16px;
-  margin: auto;
-  font-size: 24px;
-  font-weight: 300;
-  line-height: normal;
-  overflow: hidden;
+    padding: 16px;
+    margin: auto;
+    font-size: 24px;
+    font-weight: 300;
+    line-height: normal;
+    overflow: hidden;
 }
 
 .list {
-  display: block;
-  padding: 8px 0;
-  list-style: none;
+    display: block;
+    padding: 8px 0;
+    list-style: none;
 }
 
-.list.highlight>li:hover {
-  background-color: #eee;
-  cursor: pointer;
+.list.highlight > li:hover {
+    background-color: #eee;
+    cursor: pointer;
 }
 
-.list>li {
-  box-sizing: border-box;
-  line-height: 1;
-  height: 48px;
-  padding: 0 16px;
-  overflow: hidden;
+.list > li {
+    box-sizing: border-box;
+    line-height: 1;
+    height: 48px;
+    padding: 0 16px;
+    overflow: hidden;
 }
 
-.list>li i.material-icons {
-  margin-right: 32px;
-  height: 24px;
-  width: 24px;
-  font-size: 24px;
-  box-sizing: border-box;
-  color: #757575;
+.list > li i.material-icons {
+    margin-right: 32px;
+    height: 24px;
+    width: 24px;
+    font-size: 24px;
+    box-sizing: border-box;
+    color: #757575;
 }
 
-.list>li>span {
-  height: 100%;
-  text-decoration: none;
-  box-sizing: border-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
+.list > li > span {
+    height: 100%;
+    text-decoration: none;
+    box-sizing: border-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
 }
 
 .material-card-title-action {
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: block;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 16px;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    display: block;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 16px;
 }
 
 .material-card-title-action h2 {
-  margin: 0;
+    margin: 0;
 }
 
 material-card table {
-  width: 100%;
-  border: none;
-  position: relative;
-  border: 1px solid rgba(0, 0, 0, .12);
-  border-collapse: collapse;
-  white-space: nowrap;
-  font-size: 13px;
-  background-color: #fff;
-  border: none;
+    width: 100%;
+    border: none;
+    position: relative;
+    border: 1px solid rgba(0, 0, 0, .12);
+    border-collapse: collapse;
+    white-space: nowrap;
+    font-size: 13px;
+    background-color: #fff;
+    border: none;
 }
 
 material-card table th {
-  font-size: 18px;
-  vertical-align: bottom;
-  line-height: 24px;
-  height: 48px;
-  color: rgba(0, 0, 0, .54);
-  box-sizing: border-box;
-  padding: 0 18px 12px 18px;
-  text-align: right;
+    font-size: 18px;
+    vertical-align: bottom;
+    line-height: 24px;
+    height: 48px;
+    color: rgba(0, 0, 0, .54);
+    box-sizing: border-box;
+    padding: 0 18px 12px 18px;
+    text-align: right;
 }
 
 .material-card-th-left {
-  text-align: left;
+    text-align: left;
 }
 
 material-card table tbody tr:hover {
-  background-color: #eee;
+    background-color: #eee;
 }
 
 material-card table tbody tr {
-  position: relative;
-  height: 48px;
-  transition-duration: .28s;
-  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
-  transition-property: background-color;
+    position: relative;
+    height: 48px;
+    transition-duration: .28s;
+    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+    transition-property: background-color;
 }
 
 material-card table td {
-  font-size: 16px;
-  position: relative;
-  height: 48px;
-  border-top: 1px solid rgba(0, 0, 0, .12);
-  border-bottom: 1px solid rgba(0, 0, 0, .12);
-  padding: 12px 18px;
-  box-sizing: border-box;
-  vertical-align: middle;
-  text-align: right;
+    font-size: 16px;
+    position: relative;
+    height: 48px;
+    border-top: 1px solid rgba(0, 0, 0, .12);
+    border-bottom: 1px solid rgba(0, 0, 0, .12);
+    padding: 12px 18px;
+    box-sizing: border-box;
+    vertical-align: middle;
+    text-align: right;
 }
 
 material-card table th.material-card-th-sorted-ascending:hover, material-card table th.material-card-th-sorted-descending:hover {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 material-card table th.material-card-th-sorted-ascending:hover:before, material-card table th.material-card-th-sorted-descending:hover:before {
-  color: rgba(0, 0, 0, .26);
+    color: rgba(0, 0, 0, .26);
 }
 
 material-card table th.material-card-th-sorted-ascending:before, material-card table th.material-card-th-sorted-descending:before {
-  font-family: 'Material Icons';
-  font-weight: 400;
-  font-style: normal;
-  line-height: 1;
-  font-size: 16px;
-  content: "\e5d8";
-  margin-right: 5px;
-  vertical-align: sub;
+    font-family: 'Material Icons';
+    font-weight: 400;
+    font-style: normal;
+    line-height: 1;
+    font-size: 16px;
+    content: "\e5d8";
+    margin-right: 5px;
+    vertical-align: sub;
 }
 
 material-card table th.material-card-th-sorted-descending:before {
-  content: "\e5db";
+    content: "\e5db";
 }
 
 .material-icons {
-  color: #777;
+    color: #777;
 }
 
 material-snackbar .toast {
-  height: auto;
+    height: auto;
 }
 
 menu {
-  position: absolute;
-  top: 0px;
-  right: 16px;
-  color: #000;
+    position: absolute;
+    top: 0px;
+    right: 16px;
+    color: #000;
 }
 
 menu .overlay {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  right: 0;
-  z-index: 1;
+    position: fixed;
+    height: 100%;
+    width: 100%;
+    top: 0;
+    right: 0;
+    z-index: 1;
 }
 
 #menu-control-button {
-  background: rgba(255, 255, 255, 0);
-  float: right;
+    background: rgba(255, 255, 255, 0);
+    float: right;
 }
 
 #menu-control-button i {
-  color: #fff;
-  font-size: 24px;
+    color: #fff;
+    font-size: 24px;
 }
 
 #menu-control-dropdown {
-  display: inline-block;
-  position: relative;
+    display: inline-block;
+    position: relative;
 }
 
 .dropdown {
-  min-width: 124px;
-  padding: 8px 0;
-  margin: 0;
+    min-width: 124px;
+    padding: 8px 0;
+    margin: 0;
 }
 
 dropdown-item, #menu-control-dropdown p {
-  padding: 0 16px;
-  margin: auto;
-  line-height: 48px;
-  height: 48px;
-  cursor: pointer;
+    padding: 0 16px;
+    margin: auto;
+    line-height: 48px;
+    height: 48px;
+    cursor: pointer;
 }
 
 #menu-control-dropdown p:hover {
-  background-color: #eee;
+    background-color: #eee;
 }
 
 #menu-control-dropdown p:active, .material-button-active:active {
-  background-color: #e0e0e0;
+    background-color: #e0e0e0;
 }
 
 material-popup material-button {
-  background-color: #fff;
-  color: #000;
+    background-color: #fff;
+    color: #000;
 }
 
 material-popup material-button:hover material-waves {
-  background-color: hsla(0, 0%, 75%, .2);
+    background-color: hsla(0, 0%, 75%, .2);
 }
 
 material-popup .popup {
-  max-width: 450px;
+    max-width: 450px;
 }
 
 footer {
-  width: 100%;
-  position: fixed;
-  bottom: 0;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
 }
 
 .select-padding {
-  padding: 20px 0;
+    padding: 20px 0;
 }
 
 select {
-  position: relative;
-  outline: 0;
-  box-shadow: none;
-  padding: 0;
-  width: 100%;
-  background: 0 0;
-  border: none;
-  font-weight: 400;
-  line-height: 24px;
-  height: 24px;
-  border-bottom: 1px solid #2f6975;
-  appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
+    position: relative;
+    outline: 0;
+    box-shadow: none;
+    padding: 0;
+    width: 100%;
+    background: 0 0;
+    border: none;
+    font-weight: 400;
+    line-height: 24px;
+    height: 24px;
+    border-bottom: 1px solid #2f6975;
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
 }
 
 .copy-to-clipboard {
-  padding: 12px 5px;
+    padding: 12px 5px;
 }
 
 .show-tag-history {
-  width: 30px;
-  text-align: center;
+    width: 30px;
+    text-align: center;
 }
 
 .remove-tag {
-  padding: 12px 5px;
-  width: 30px;
-  text-align: center;
+    padding: 12px 5px;
+    width: 30px;
+    text-align: center;
 }
 
 .copy-to-clipboard a:hover {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .tag-history-element {
-  padding: 15px;
-  margin:5px;
+    padding: 15px;
+    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;
 }
\ No newline at end of file
diff --git a/src/tags/image-date.tag b/src/tags/image-date.tag
index 4247f98..81e642a 100644
--- a/src/tags/image-date.tag
+++ b/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()
diff --git a/src/tags/tag-history.tag b/src/tags/tag-history.tag
index 0e6206a..6cb5451 100644
--- a/src/tags/tag-history.tag
+++ b/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 }">
-                    { entry.key } { entry.value }
-                </p>
+                <div each="{ entry in guiElement }" class="{ entry.key }">
+                    <strong>{ entry.key }</strong><br> <span> { entry.value } </span>
+                </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>