From 41e74c4cd003dfadf1e8658a0c54e5a04ad97f66 Mon Sep 17 00:00:00 2001
From: "Steve Nyemba, The Architect" <steve@the-phi.com>
Date: Wed, 31 Oct 2018 00:45:59 -0500
Subject: [PATCH] bug fix with responsive layout

---
 src/api/templates/dashboard/apps/summary.html | 99 ++++++++++++-------
 1 file changed, 63 insertions(+), 36 deletions(-)

diff --git a/src/api/templates/dashboard/apps/summary.html b/src/api/templates/dashboard/apps/summary.html
index b2b28cc..da2bfda 100644
--- a/src/api/templates/dashboard/apps/summary.html
+++ b/src/api/templates/dashboard/apps/summary.html
@@ -18,10 +18,8 @@
 <script src="{{context}}/static/js/jx/ext/math.js"></script>
 <link href="{{context}}/static/css/default.css" rel="stylesheet" type="text/css">
 <style>
+
     .board {
-        display:grid ;
-        grid-template-rows: 32px auto;
-        grid-gap:4px;
 	    height:99%;
         
         
@@ -39,6 +37,7 @@
         width:100%;
 	    height:90%;
         
+        
     }
     .widget .title {
         font-size:18px;
@@ -114,8 +113,9 @@
         height:100%;
         
     }
-    
     .action-group {display:grid; grid-gap:1px; grid-template-columns:repeat(3,64px); justify-content: end}
+
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
     .hidden {display:none}
     .dialog-frame {
         padding:4px;
@@ -125,6 +125,31 @@
     .dialog .title { font-weight: bold; padding:4px; margin-bottom:4px; background:#f3f3f3; }
     .dialog .title i {color:ff5733}
     .dialog .message {padding:8px; font-family:verdana; min-height:10%}
+    @media screen and (max-width: 1280px){
+        .widget .chart .info {
+            width:99%; 
+            min-height:90%;            
+            overflow:hidden
+            }        
+    }
+    @media only screen and (max-width: 1024px) {
+        .widget .chart {
+            display:grid;
+            grid-template-columns: 35% 35% 30%;
+            grid-template-rows:auto;
+            grid-gap:1px;
+            width:100%;
+            height:90%;
+
+        }
+        .widget .chart .info {
+            width:99%; 
+            min-height:65%;            
+            overflow:hidden
+            }
+        
+    }
+      
 </style>
 <script>
 
@@ -333,7 +358,7 @@
                                 
 
                             </div>
-                            <iframe class="no-border" src="{{context}}/1/plot/html/pie/apps.status?index={{loop.index -1}}&no=title" scrolling="no"></iframe>
+                            <iframe class="info no-border" src="{{context}}/1/plot/html/pie/apps.status?index={{loop.index -1}}&no=title" scrolling="no"></iframe>
                             <div align="center" class="bold">
                                 Status Counts
                             </div>
@@ -356,7 +381,7 @@
                             <div class="small">{{ app_summary[loop.index -1 ].formatted_date }}</div>                            
                         </div>    
 
-                        <iframe class="no-border" src="{{context}}/1/plot/html/bar/apps.resource?index={{loop.index -1}}" scrolling="no"></iframe>
+                        <iframe class="info no-border" src="{{context}}/1/plot/html/bar/apps.resource?index={{loop.index -1}}" scrolling="no"></iframe>
                         <div align="center" class="bold">
                                 Total Resource Usage 
                             </div>
@@ -380,7 +405,7 @@
                             </div>
                         </div>                        
                     </div>
-                    <div class="border-left">
+                    <div class="border-left" style="">
                             {%for row in folders_summary %}
                                 <div align="center" style="padding:8px">
                                     <div class="bold">Folder Analysis</div>                            
@@ -388,40 +413,42 @@
                                 </div>
     
                                 {%if row.node == name %}
-                                    <div class="" style="padding-left:10px; margin-top:4px; min-height:90%; overflow:hidden">
+                                    <div class="info" style="padding-left:10px; overflow:hidden">
 
-                                                
-                                                    <li type="square" style="list-style-type: none">
-                                                        <i class="fa fa-check" style="font-size:18px;"></i>
-                                                        Monitoring <span class="bold">{{row.folders}}</span> Folder
-                                                        {% if row.folders > 1%}
-                                                            s
-                                                        {% endif %}
-                                                    </li>
-                                                    <li type="square" style="margin-top:8px; list-style-type: none">
-                                                        <i class="fa fa-check" style="font-size:18px;"></i>
-                                                        
-                                                        <span class="bold">
-                                                            {% if row.avg_folder_size > 1000 %}
-                                                                {{ (row.avg_folder_size/1000)|round(2)}} GB
-                                                            {% else %}
-                                                                {{ row.avg_folder_size}} MB
-                                                            {% endif %}
-                                                        </span>/Folder monitored    
-            
-                                                    </li>
-                                                    <li type="square" style="margin-top:8px; list-style-type: none">
-                                                            <i class="fa fa-check" style="font-size:18px;"></i>
-                                                            <span class="bold">{{row.avg_files_folder}}</span> Files / Folder
-                                                    </li>
+                                                    <div class="folder-info">
+
+                                                            <li type="square" style="list-style-type: none">
+                                                                    <i class="fa fa-check" style="font-size:18px;"></i>
+                                                                    Monitoring <span class="bold">{{row.folders}}</span> Folder
+                                                                    {% if row.folders > 1%}
+                                                                        s
+                                                                    {% endif %}
+                                                                </li>
+                                                                <li type="square" style="margin-top:8px; list-style-type: none">
+                                                                    <i class="fa fa-check" style="font-size:18px;"></i>
+                                                                    
+                                                                    <span class="bold">
+                                                                        {% if row.avg_folder_size > 1000 %}
+                                                                            {{ (row.avg_folder_size/1000)|round(2)}} GB
+                                                                        {% else %}
+                                                                            {{ row.avg_folder_size}} MB
+                                                                        {% endif %}
+                                                                    </span>/Folder monitored    
+                        
+                                                                </li>
+                                                                <li type="square" style="margin-top:8px; list-style-type: none">
+                                                                        <i class="fa fa-check" style="font-size:18px;"></i>
+                                                                        <span class="bold">{{row.avg_files_folder}}</span> Files / Folder
+                                                                </li>                                                        
+                                                    </div>
 
                                                 
                                                 
-                                                <p>
-                                                    <div class="small border-top" style=" font-family:verdana; margin-top:8px;padding:8px; color:#4682B4">
-                                                            <br>The largest folder analysis, provides insight into what the largest folder size is, and if it has reached the archiving threshold.
+                                                    
+                                                    <div class="small border-bottom" style=" font-family:verdana; margin-top:8px;padding:8px; color:#4682B4">
+                                                            The largest folder analysis, provides insight into what the largest folder size is, and if it has reached the archiving threshold.
                                                     </div>
-                                                </p>
+                                                
 
                                     </div>                             
                                     <div align="center" class="bold">