Patchwork [bitbake-devel,69/94] bitbake: webhob: refactor CSS display in Simple

login
register
mail settings
Submitter Alexandru DAMIAN
Date Sept. 24, 2013, 4:52 p.m.
Message ID <914b829608b0d7e6b9a27e71a1b593024c1f69bd.1380041477.git.alexandru.damian@intel.com>
Download mbox | patch
Permalink /patch/58819/
State New
Headers show

Comments

Alexandru DAMIAN - Sept. 24, 2013, 4:52 p.m.
From: Alexandru DAMIAN <alexandru.damian@intel.com>

Refactoring CSS display in Simple to separate
the generic layout to the table display code.

With the new layout we can add the generic display
to more than just table pages.

Signed-off-by: Alexandru DAMIAN <alexandru.damian@intel.com>
---
 bitbake/lib/webhob/bldviewer/templates/base.html   | 51 ++++------------------
 .../lib/webhob/bldviewer/templates/basetable.html  | 46 +++++++++++++++++++
 bitbake/lib/webhob/bldviewer/templates/build.html  |  2 +-
 bitbake/lib/webhob/bldviewer/templates/layer.html  |  2 +-
 .../lib/webhob/bldviewer/templates/package.html    |  2 +-
 bitbake/lib/webhob/bldviewer/templates/recipe.html |  2 +-
 bitbake/lib/webhob/bldviewer/templates/task.html   |  2 +-
 7 files changed, 59 insertions(+), 48 deletions(-)
 create mode 100644 bitbake/lib/webhob/bldviewer/templates/basetable.html

Patch

diff --git a/bitbake/lib/webhob/bldviewer/templates/base.html b/bitbake/lib/webhob/bldviewer/templates/base.html
index e97c8f6..31abeb1 100644
--- a/bitbake/lib/webhob/bldviewer/templates/base.html
+++ b/bitbake/lib/webhob/bldviewer/templates/base.html
@@ -2,7 +2,7 @@ 
 
 <html>
 	<head>
-		<title>WebHob Simple Explorer</title>
+		<title>Toaster Simple Explorer</title>
 <script src="/static/js/jquery-2.0.3.js">
 </script>
 <script src="/static/js/bootstrap.js">
@@ -11,55 +11,20 @@ 
 	</head>
 
 <body style="height: 100%">
-<script>
-function showhideTableColumn(i, sh) {
-    if (sh)
-        $('td:nth-child('+i+'),th:nth-child('+i+')').show();
-    else
-        $('td:nth-child('+i+'),th:nth-child('+i+')').hide();
-}
-
-
-function filterTableRows(test) {
-    if (test.length > 0) {
-        var r = test.split(/[ ,]+/).map(function (e) { return new RegExp(e, 'i') });
-        $('tr.data').map( function (i, el) {
-            (! r.map(function (j) { return j.test($(el).html())}).reduce(function (c, p) { return c && p;} )) ? $(el).hide() : $(el).show();
-        });
-    } else
-    {
-        $('tr.data').show();
-    }
-}
-</script>
-<div style="position:fixed; top:0; z-index: 999; width: 100%; background:white"> 
+<div style="width:100%; height: 100%; position:absolute">
+<div style="width: 100%; height: 3em" class="nav">
     <ul class="nav nav-tabs">
         <li><a href="/simple/build/">All Builds</a></li>
         <li><a href="/simple/layer/">All Layers</a></li>
     </ul>
-    
-    {% block pagename %}
-    {% endblock %}
-    
-    <div style="padding-top:1em ;padding-bottom: 1em">
-    <div align="left" style="display:inline-block; width: 49%; margin-left: 2em"> Search: <input type="search" id="filterstring" style="width: 30em" onkeyup="filterTableRows($('#filterstring').val())" autocomplete="off">
-    </div>
-    {% if hideshowcols %}
-    <div align="right" style="display: inline-block; width: 49%">Show/Hide columns:
-    {% for i in hideshowcols %}
-        <span>{{i.name}} <input type="checkbox" id="ct{{i.name}}" onchange="showhideTableColumn({{i.order}}, $('#ct{{i.name}}').is(':checked'))" checked autocomplete="off"></span> |
-    {% endfor %}
-    </div>
-    {% endif %}
-    </div>
 </div>
-<div style="padding-top: 13em; width:98%; align:center; margin:auto;">
-    <table class="table table-striped table-condensed">
-{% block pagetable %}
+
+<div style="overflow-y:scroll; width: 100%; position: absolute; top: 3em; bottom:70px ">
+{% block pagecontent %}
 {% endblock %}
-    </table>
 </div>
-<div class="navbar"><br/>About Toaster | Yocto Project </div>
+<div class="navbar" style="position: absolute; bottom: 0; width:100%"><br/>About Toaster | Yocto Project </div>
+</div>
 </body>
 </html>
 
diff --git a/bitbake/lib/webhob/bldviewer/templates/basetable.html b/bitbake/lib/webhob/bldviewer/templates/basetable.html
new file mode 100644
index 0000000..083bcb8
--- /dev/null
+++ b/bitbake/lib/webhob/bldviewer/templates/basetable.html
@@ -0,0 +1,46 @@ 
+{% extends "base.html" %}
+
+{% block pagecontent %}
+<script>
+function showhideTableColumn(i, sh) {
+    if (sh)
+        $('td:nth-child('+i+'),th:nth-child('+i+')').show();
+    else
+        $('td:nth-child('+i+'),th:nth-child('+i+')').hide();
+}
+
+
+function filterTableRows(test) {
+    if (test.length > 0) {
+        var r = test.split(/[ ,]+/).map(function (e) { return new RegExp(e, 'i') });
+        $('tr.data').map( function (i, el) {
+            (! r.map(function (j) { return j.test($(el).html())}).reduce(function (c, p) { return c && p;} )) ? $(el).hide() : $(el).show();
+        });
+    } else
+    {
+        $('tr.data').show();
+    }
+}
+</script>
+<div style="margin-bottom: 0.5em">
+
+    {% block pagename %}
+    {% endblock %}
+    <div align="left" style="display:inline-block; width: 40%; margin-left: 2em"> Search: <input type="search" id="filterstring" style="width: 80%" onkeyup="filterTableRows($('#filterstring').val())" autocomplete="off">
+    </div>
+    {% if hideshowcols %}
+    <div align="right" style="display: inline-block; width: 40%">Show/Hide columns:
+    {% for i in hideshowcols %}
+        <span>{{i.name}} <input type="checkbox" id="ct{{i.name}}" onchange="showhideTableColumn({{i.order}}, $('#ct{{i.name}}').is(':checked'))" checked autocomplete="off"></span> |
+    {% endfor %}
+    </div>
+    {% endif %}
+</div>
+<div>
+    <table class="table table-striped table-condensed" style="width:95%">
+{% block pagetable %}
+{% endblock %}
+    </table>
+</div>
+
+{% endblock %}
diff --git a/bitbake/lib/webhob/bldviewer/templates/build.html b/bitbake/lib/webhob/bldviewer/templates/build.html
index 20c415b..53271a7 100644
--- a/bitbake/lib/webhob/bldviewer/templates/build.html
+++ b/bitbake/lib/webhob/bldviewer/templates/build.html
@@ -1,4 +1,4 @@ 
-{% extends "base.html" %}
+{% extends "basetable.html" %}
 
 {% block pagename %}
     <h1>Toaster - Builds</h1>
diff --git a/bitbake/lib/webhob/bldviewer/templates/layer.html b/bitbake/lib/webhob/bldviewer/templates/layer.html
index 5b317ba..508f254 100644
--- a/bitbake/lib/webhob/bldviewer/templates/layer.html
+++ b/bitbake/lib/webhob/bldviewer/templates/layer.html
@@ -1,4 +1,4 @@ 
-{% extends "base.html" %}
+{% extends "basetable.html" %}
 
 {% block pagename %}
     <h1>Toaster - Layers</h1>
diff --git a/bitbake/lib/webhob/bldviewer/templates/package.html b/bitbake/lib/webhob/bldviewer/templates/package.html
index f70b022..622c23d 100644
--- a/bitbake/lib/webhob/bldviewer/templates/package.html
+++ b/bitbake/lib/webhob/bldviewer/templates/package.html
@@ -1,4 +1,4 @@ 
-{% extends "base.html" %}
+{% extends "basetable.html" %}
 
 {% block pagename %}
     <h1>Toaster - Packages</h1>
diff --git a/bitbake/lib/webhob/bldviewer/templates/recipe.html b/bitbake/lib/webhob/bldviewer/templates/recipe.html
index 515053a..e855625 100644
--- a/bitbake/lib/webhob/bldviewer/templates/recipe.html
+++ b/bitbake/lib/webhob/bldviewer/templates/recipe.html
@@ -1,4 +1,4 @@ 
-{% extends "base.html" %}
+{% extends "basetable.html" %}
 
 {% block pagename %}
     <h1>Toaster - Recipes for a Layer</h1>
diff --git a/bitbake/lib/webhob/bldviewer/templates/task.html b/bitbake/lib/webhob/bldviewer/templates/task.html
index 6d06d0f..05d8e12 100644
--- a/bitbake/lib/webhob/bldviewer/templates/task.html
+++ b/bitbake/lib/webhob/bldviewer/templates/task.html
@@ -1,4 +1,4 @@ 
-{% extends "base.html" %}
+{% extends "basetable.html" %}
 
 {% block pagename %}
     <h1>Toaster - Tasks</h1>