UI improvements

dpnishant · Jun 5, 2017 · 5b50c8a · 5b50c8a
1 parent bf3cee9
commit 5b50c8a
Show file tree

Hide file tree

Showing 7 changed files with 273 additions and 16 deletions.
diff --git a/appmon.py b/appmon.py
@@ -32,14 +32,26 @@
                                                                   
 """
 
-app = Flask(__name__)
+app = Flask(__name__, static_url_path='/static')
 #app.debug = True
 
 device = ''
 session = ''
 merged_script_path = '/tmp/merged.js'
 APP_LIST = []
 
+@app.after_request
+def add_header(r):
+    """
+    Add headers to both force latest IE rendering engine or Chrome Frame,
+    and also to cache the rendered page for 10 minutes.
+    """
+    r.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
+    r.headers["Pragma"] = "no-cache"
+    r.headers["Expires"] = "0"
+    r.headers['Cache-Control'] = 'public, max-age=0'
+    return r
+
 @app.route('/api/fetch', methods=['GET'])
 def serve_json():
     index = request.args.get('id')

diff --git a/static/img/logo.png b/static/img/logo.png
diff --git a/static/img/to-bottom.png b/static/img/to-bottom.png
diff --git a/static/img/to-top.png b/static/img/to-top.png
diff --git a/templates/index.html b/templates/index.html
@@ -16,13 +16,43 @@
  limitations under the License.
 -->
 <head>
+<link href="https://fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet">
 <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 <style>
 
+#logo {
+	margin-top: -4%;
+	margin-left: -4%;
+    display: block;
+}
+
+.footer {
+	font-family: 'Cabin', sans-serif;
+	font-size: 170%;
+	color: #D1D1D1;
+    position: absolute;
+    bottom: 8px;
+    right: 16px;
+    font-size: 18px;
+}
+
+.logotable {
+	table-layout: fixed;
+	width: 100%;
+}
+
+.logotable td {
+	font-family: 'Cabin', sans-serif;
+	font-size: 170%;
+	color: #ffffff;
+	text-align: right;
+	width: 50%;
+}
+
 .menu_container {
   position: absolute;
   margin: auto;
@@ -36,17 +66,21 @@
 }
 
 .navbar-default {
-  background-color: #0cbee5;
-  border-color: #0cbee5;
+  background-color: #337ab7;
+  border-color: #2e6da4;
 }
 .navbar-default .navbar-brand {
-  color: #ecf0f1;
+  color: #337ab7;
 }
 .navbar-default .navbar-brand:hover,
 .navbar-default .navbar-brand:focus {
   color: #ffffff;
 }
 
+.navbar {
+    border-radius: 0px;
+}
+
 p .btn_container {
 	float: right;
 }
@@ -58,9 +92,17 @@
 	<nav class="navbar navbar-default">
 		<div class="container-fluid">
 			<div class="navbar-header">
-				<a class="navbar-brand">
-					AppMon
+				<table class="logotable">
+					<tbody>
+						<tr>
+				<td>
+					<a class="navbar-brand" href="http://dpnishant.github.com/appmon" target="_blank">
+					<img id="logo" src="/static/img/logo.png" alt="AppMon"/>
 				</a>
+			</td>
+				<td class="intro"> Runtime security profiling framework </td>
+			</tr>
+		</tbody></table>
 			</div>
 		</div>
 	</nav>
@@ -81,5 +123,6 @@
         window.location= '/monitor?app=' + $('#selectMenu').val();
     });
 	</script>
+<span class="footer"> Nishant Das Patnaik </span>
 </body>
 </html>
diff --git a/templates/monitor.html b/templates/monitor.html
@@ -18,6 +18,8 @@
 -->
 
 <head>
+    <link href="https://fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet">
+
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 
@@ -32,6 +34,44 @@
 
 <style>
 
+.header {
+    table-layout: fixed !important;
+    width: 100% !important;
+    background: none !important;
+    border: none !important;
+    margin-bottom: 0;
+    padding: 0;
+    margin: 0;
+}
+
+.desc {
+    font-family: 'Cabin', sans-serif !important;
+    font-size: 170% !important;
+    color: #ffffff !important;
+    text-align: right !important;
+    width: 50% !important;
+}
+
+.logo {
+    margin-top: -4%;
+    margin-left: -4%;
+    display: block;
+}
+
+.footer {
+    font-family: 'Cabin', sans-serif;
+    font-size: 170%;
+    color: #D1D1D1;
+    position: absolute;
+    bottom: 8px;
+    right: 16px;
+    font-size: 18px;
+}
+
+#tblResultView thead {
+    display:table-header-group
+}
+
 #colSearchContainer {
     width: 15%;
     padding: 0px;
@@ -82,38 +122,68 @@
     padding: 0px;
 }
 
-td {
+#tblResultView td {
     font-family: Consolas, monaco, monospace;
     font-size: 10pt;
     vertical-align: top;
     word-wrap: break-word;
  }
 
- body {
+body {
     font-family: Consolas, monaco, monospace;
     font-size: 10pt;
- }
+}
 
-table {
+#tblResultView table {
     table-layout: fixed;
     width:auto;
     padding: 0px;
     margin: 0px;
 }
 
 .navbar-default {
-    background-color: #008cba;
-    border-color: #008cba;
+    background-color: #337ab7;
+    border-color: #2e6da4;
 }
 
 .navbar-default .navbar-brand {
-    color: #FFF;
+    color: #ffffff;
 }
 
 .navbar {
     border-radius: 0px;
 }
 
+a.back-to-top {
+    display: none;
+    width: 60px;
+    height: 60px;
+    text-indent: -9999px;
+    position: fixed;
+    z-index: 999;
+    right: 45%;
+    bottom: 5%;
+    background: #FFE3B9 url("/static/img/to-top.png") no-repeat center 43%;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+}
+
+a.back-to-bottom {
+    display: none;
+    width: 60px;
+    height: 60px;
+    text-indent: -9999px;
+    position: fixed;
+    z-index: 999;
+    right: 50%;
+    bottom: 5%;
+    background: #FFE3B9 url("/static/img/to-bottom.png") no-repeat center 43%;
+    -webkit-border-radius: 30px;
+    -moz-border-radius: 30px;
+    border-radius: 30px;
+}
+
 </style>
 
 </head>
@@ -122,9 +192,17 @@
     <nav class="navbar navbar-default">
         <div class="container-fluid">
             <div class="navbar-header">
-                <a class="navbar-brand" href="#">
-                    AppMon: API Monitor for Native Mobile Apps
+                <table class="header">
+                    <tbody>
+                        <tr>
+                <td>
+                    <a class="navbar-brand" href="http://dpnishant.github.com/appmon" target="_blank">
+                    <img class="logo" src="/static/img/logo.png" alt="AppMon"/>
                 </a>
+            </td>
+                <td class="desc">Runtime security profiling framework </td>
+            </tr>
+        </tbody></table>
             </div>
         </div>
     </nav>
@@ -230,6 +308,17 @@
         });
         */
         $('#tblResultView').DataTable({
+            "columns": [
+            null,
+            null,
+            null,
+            { 
+                "width": "50%"
+            },
+            null,
+            null,
+            null
+            ],
             ajax: {
                 "url": "/api/fetch",
                 "data": function (d) {
@@ -242,7 +331,6 @@
                 "smart": true
             },
             bAutoWidth: false,
-            fixedHeader: true,
             colReorder: true,
             keys: true,
             "scrollY": true,
@@ -324,5 +412,42 @@
     */
     });
 </script>
+<script type="text/javascript">
+    $('body').prepend('<a href="#" class="back-to-top">Back to Top</a>');
+    $('body').prepend('<a href="#" class="back-to-bottom">Back to Bottom</a>');
+
+</script>
+<script>
+var amountScrolledForTop = 500;
+var amountScrolledForBottom = 1500;
+$(window).scroll(function() {
+    if ( $(window).scrollTop() > amountScrolledForTop ) {
+        $('a.back-to-top').fadeIn('slow');
+    } else {
+        $('a.back-to-top').fadeOut('slow');
+    }
+
+    if ( $(window).scrollTop() > amountScrolledForBottom ) {
+        $('a.back-to-bottom').fadeIn('slow');
+    } else {
+        $('a.back-to-bottom').fadeOut('slow');
+    }
+});
+
+
+$('a.back-to-top').click(function() {
+    $('html, body').animate({
+        scrollTop: 0
+    }, 700);
+    return false;
+});
+
+$('a.back-to-bottom').click(function() {
+    $('html, body').animate({
+        scrollTop: $(document).height()
+    }, 700);
+    return false;
+});
+</script>
 </body>
 </html>