new design for HTML pages

diff --git a/NEWS b/NEWS
index ec5ac58..46d67e3 100644 (file)
--- a/NEWS
+++ b/NEWS
@@ -1,3 +1,9 @@
+v1.0.0
+------
+
+* new design for HTML pages.
+
+
 * v0.0.9
 ** Fixed compilation issue related to 'boolean' type.
 

diff --git a/src/html.c b/src/html.c
index 6dc0c76..a6acc2f 100644 (file)
--- a/src/html.c
+++ b/src/html.c
@@ -563,6 +563,7 @@ ppa_to_html(const char *owner,
                    "js/jquery.jqplot.min.js",
                    DEFAULT_WWW_DIR"/excanvas.js", "js/excanvas.js",
                    DEFAULT_WWW_DIR"/ppastats.css", "css/ppastats.css",
+                   DEFAULT_WWW_DIR"/wpitchoune.css", "css/wpitchoune.css",
                    DEFAULT_WWW_DIR"/jquery.jqplot.min.css",
                    "css/jquery.jqplot.min.css" };
 
@@ -575,7 +576,7 @@ ppa_to_html(const char *owner,
                mkdir(css_dir, 0777);
                mkdir(js_dir, 0777);
 
-               for (i = 0; i < 7; i++) {
+               for (i = 0; i < 8; i++) {
                        f_dst = path_append(output_dir, www_files[2*i+1]);
 
                        log_debug(_("Copying %s %s"), www_files[2*i], f_dst);

diff --git a/www/Makefile.am b/www/Makefile.am
index 1dc9534..0ad2063 100644 (file)
--- a/www/Makefile.am
+++ b/www/Makefile.am
@@ -7,6 +7,7 @@ defaultwww_DATA = \
        js/ppastats.js\
        js/jqplot.dateAxisRenderer.min.js\
        js/jquery.jqplot.min.js\
+       css/wpitchoune.css\
        css/ppastats.css\
        css/jquery.jqplot.min.css\
        pkg.tpl\

diff --git a/www/Makefile.in b/www/Makefile.in
index a1c1ef5..729987c 100644 (file)
--- a/www/Makefile.in
+++ b/www/Makefile.in
@@ -234,6 +234,7 @@ defaultwww_DATA = \
        js/ppastats.js\
        js/jqplot.dateAxisRenderer.min.js\
        js/jquery.jqplot.min.js\
+       css/wpitchoune.css\
        css/ppastats.css\
        css/jquery.jqplot.min.css\
        pkg.tpl\

diff --git a/www/css/ppastats.css b/www/css/ppastats.css
index f7fec11..ba76347 100644 (file)
--- a/www/css/ppastats.css
+++ b/www/css/ppastats.css
@@ -1,56 +1,7 @@
-body {
-    padding: 1em 1em 1em 1em;
-    font-family: "Ubuntu", sans-serif;
-    color: #000;
-    background-color: #fff;
+table.jqplot-table-legend {
+    width: auto;
 }
 
-em {
-    font-weight: bold;
-    font-style: normal;
+#pkgs, #distros > ul, #versions > ul{
+    list-style-type: none;
 }
-
-a {
-    color: #1982D1;
-    font-style: normal;
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-#charts {
-    color: #000;
-    float: right;
-    width: 80%;
-    margin: 0 0 0 0;
-    padding: 0 0 0 0;
-}
-
-#details {
-    width: 20%;
-    float: left;
-}
-
-li {
-    list-style: none;
-    padding: 0em 0em 0em 1em;
-}
-
-h1 {
-    text-transform: uppercase;
-}
-
-ul {
-    margin: 0 0 0 0;
-    padding: 0 0 0;
-}
-
-#footer {
-    padding-top: 2em;
-    color: #666;
-    clear: both;
-    text-align: right;
-    font-size: 75%;
-}
\ No newline at end of file

diff --git a/www/css/wpitchoune.css b/www/css/wpitchoune.css
new file mode 100644 (file)
index 0000000..32cb5d0
--- /dev/null
+++ b/www/css/wpitchoune.css
@@ -0,0 +1,173 @@
+
+body {
+    background: #e2e2e2;
+    color: #333333;
+    font-family: Ubuntu,Arial,sans-serif;
+    line-height: 1.6;
+    font-weight: lighter;
+    margin: 1em 1em 1em 1em;
+    padding: 0 0 0 0;
+}
+
+h1 {
+    font-size: 2.813em;
+    margin: 0 0 0.267em 0;
+    padding: 0 0 0 0;
+    font-weight: normal;
+}
+
+h2 {
+    font-size: 2em;
+    margin: 0 0 0.375em;
+    padding: 0 0 0 0;
+    font-weight: normal;
+}
+
+h3 {
+    font-size: 1.438em;
+    margin: 0 0 0.522em;
+    padding: 0 0 0 0;
+    font-weight: normal;
+}
+
+h4 {
+    font-size: 1.219em;
+    margin: 0 0 0.615em;
+    padding: 0 0 0 0;
+    font-weight: normal;
+}
+
+h5 {
+    font-size: 1em;
+    margin: 0 0 0.75em;
+    padding: 0 0 0 0;
+    font-weight: bold;
+}
+
+h6 {
+    font-weight: normal;
+    font-size: 0.813em;
+    letter-spacing: 0.1em;
+    margin: 0 0 0.923em;
+    text-transform: uppercase;
+    padding: 0 0 0 0;
+}
+
+em {
+    font-weight: bold;
+    font-style: normal;
+}
+
+li {
+    margin: 0 0 0 1em;
+    line-height: 1.6;
+}
+
+li p {
+    margin: 0 0 0 0;
+}
+
+ul {
+    margin: 0 0 0 0;
+    padding: 0 0 0 0;
+}
+
+a:link, a:visited {
+    color: #19B6EE;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+code, pre, tt {
+    font-family: "Ubuntu Mono","Courier New",Courier,monospace;
+    font-weight: normal;
+    color: #333333;
+}
+
+pre {
+    background: none repeat scroll 0 0 #e0e0e0;
+    border-radius: 4px;
+    padding: 0.5em 0.5em;
+    margin: 0 0 0 0;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+
+table {
+    width: 100%;
+    text-align: left;
+}
+
+#footer {
+    margin: 0 0 0 0;
+    font-size: 0.8em;
+    font-weight: lighter;
+    clear: both;
+    text-align: right;
+}
+
+#page {
+    margin: 0 0 0 0;
+    padding: 0 0 0 0;
+}
+
+#main, #menu {
+    background: #ffffff;
+
+   -moz-box-sizing: border-box;
+
+    padding: 1em 1em 1em 1em;
+
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    
+    -webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
+    box-shadow: 0 2px 2px 0 #C2C2C2;
+}
+
+#menu-list, #menu-list > li > ul  {
+    list-style-type: none;
+}
+
+/* menu on left col, content on right col */
+
+#menu {
+    float: left;
+    width: 19%;
+}
+
+#main {
+    float: right;
+    width: 80%;
+}
+
+/* asciidoc */
+
+#toc, #content {
+    margin: 0em 0em 2em 0em;
+    
+    background: #ffffff;
+   -moz-box-sizing: border-box;
+    padding: 2em 2em 2em 2em;
+
+    -moz-border-radius: 4px;
+    -webkit-border-radius: 4px;
+    border-radius: 4px;
+    
+    -webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
+    box-shadow: 0 2px 2px 0 #C2C2C2;
+}
+
+li {
+    margin: 0 0 0 0;
+    padding: 0 0 0 1em;
+}
+
+ul {
+    margin: 0 0 0 0;
+    padding: 0 0 0 0;
+}
\ No newline at end of file

diff --git a/www/footer.tpl b/www/footer.tpl
index b0feb3a..6fdc985 100644 (file)
--- a/www/footer.tpl
+++ b/www/footer.tpl
@@ -1,5 +1,6 @@
     <div id="footer">
       Generated by <a href='http://wpitchoune.net/ppastats'>ppastats</a> v0.0.x
     </div>
+    </div>
   </body>
 </html>

diff --git a/www/footer.tpl.in b/www/footer.tpl.in
index 1c75569..3dc7f5e 100644 (file)
--- a/www/footer.tpl.in
+++ b/www/footer.tpl.in
@@ -1,5 +1,6 @@
     <div id="footer">
       Generated by <a href='http://wpitchoune.net/ppastats'>ppastats</a> v@VERSION@
     </div>
+    </div>
   </body>
 </html>

diff --git a/www/header.tpl b/www/header.tpl
index 0bd0327..ff52748 100644 (file)
--- a/www/header.tpl
+++ b/www/header.tpl
@@ -1,8 +1,7 @@
 <html> 
   <head>
     <title>@TITLE@</title>
-    <link type="text/css" rel="stylesheet"
-         href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
+    <link type="text/css" href="css/wpitchoune.css" rel="stylesheet"/>
     <link type="text/css" href="css/ppastats.css" rel="stylesheet"/>
     <link type="text/css" href="css/jquery.jqplot.min.css" rel="stylesheet" />
     <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->
@@ -13,4 +12,5 @@
     <script>@SCRIPT@</script>
   </head>
   <body>
+  <div id="page">
 

diff --git a/www/js/ppastats.js b/www/js/ppastats.js
index d5e95cb..1824508 100644 (file)
--- a/www/js/ppastats.js
+++ b/www/js/ppastats.js
@@ -94,15 +94,16 @@ function ppastats_pkg(json_url) {
            $("#ppa_name").html(data["ppa_name"]);
            $("#pkg_name").html(data["name"]);
            
+           $("#versions").append("<ul>");
            $.each(data["versions"], function(i, v) {
                var v_url = data["name"]+"_"+v+".html";
                
-               $("#versions").append("<li><a href='"+v_url+"'>"+v+"</a></li>");
+               $("#versions ul").append("<li><a href='"+v_url+"'>"+v+"</a></li>");
            });
            
            $("#distros").append("<ul>");
            $.each(data["distros"], function(i, d) {
-               $("#distros ul").append("<li><em>"+d["name"]+"</em>: "+d["count"]+"</li>");
+               $("#distros ul").append("<li>"+d["name"]+": "+d["count"]+"</li>");
            });
            
            
@@ -121,9 +122,10 @@ function ppastats_ver() {
        $("#pkg_name").html("<a href='"+pkg_url+"'>"+data["pkg_name"]+"</a>");
        $("#version").append(" "+data["name"]);
        
+       $("#distros").append("<ul>");
        $.each(data["distros"], function(i, distro) {
            $.each(distro["archs"], function(i, arch) {
-               $("#distros").append("<li><em>"+distro["name"]+"_"+arch["name"]+"</em>: "+arch["count"]+"</li");
+               $("#distros ul").append("<li>"+distro["name"]+"_"+arch["name"]+": "+arch["count"]+"</li");
            });
        });
 
@@ -151,5 +153,4 @@ function ppastats_ppa() {
        });
     });
 }
-                     
-                     
\ No newline at end of file
+

diff --git a/www/pkg.tpl b/www/pkg.tpl
index 9b2fac6..59dff60 100644 (file)
--- a/www/pkg.tpl
+++ b/www/pkg.tpl
@@ -1,15 +1,28 @@
-<h1><span id="pkg_name">N/A</span></h1>
-<div id="charts">
-  <div id="chart"></div>
-  <div id="chart_distro"></div>
+<div id="main">
+  <div id="charts">
+    <div id="chart"></div>
+    <div id="chart_distro"></div>
+  </div>
 </div>
-<div id="details">
-  <em>PPA</em>: 
-  <a href="index.html">
-    <span id="ppa_owner">N/A</span>/
-    <span id="ppa_name">N/A</span>
-  </a>
-
-  <div id="distros"><em>Distros:</em></div>
-  <div id="versions"><em>Versions:</em></div>
+
+<div id="menu">
+  <div>
+    <em>PPA</em>: 
+    <a href="index.html">
+      <span id="ppa_owner">N/A</span>/<span id="ppa_name">N/A</span>
+    </a>
+  </div>
+
+  <div>
+    <em>Package</em>: <span id="pkg_name">N/A</span>
+  </div>
+    
+  <div id="distros">
+    <em>Distributions:</em>
+  </div>
+
+  <div id="versions">
+    <em>Versions:</em>
+  </div>
 </div>
+

diff --git a/www/pkg_version.tpl b/www/pkg_version.tpl
index 182c119..0af0899 100644 (file)
--- a/www/pkg_version.tpl
+++ b/www/pkg_version.tpl
@@ -1,17 +1,21 @@
-<h1><span id="pkg_name">N/A</span></h1>
-<div id="version"><em>Version:</em></div>
-<p><em>PPA</em>: 
-  <a href="index.html">
-    <span id="ppa_owner">N/A</span>/<span id="ppa_name">N/A</span>
-  </a>
-</p>
-<div id="charts">
-  <div id="chart"></div>
-</div>
-<div id="details">
-  <div class="distros">
-    <em>Distros</em>:
-    <ul id="distros"></ul>
+<div id="menu">
+  <div>
+    <em>PPA</em>: 
+    <a href="index.html">
+      <span id="ppa_owner">N/A</span>/<span id="ppa_name">N/A</span>
+    </a>
+  </div>
+  <div>
+    <em>Package</em>: <span id="pkg_name">N/A</span>
+  </div>
+  <div id="version"><em>Version</em>: </div>
+  <div id="distros">
+    <em>Distributions</em>:
   </div>
 </div>
 
+<div id="main">
+  <div id="charts">
+    <div id="chart"></div>
+  </div>
+</div>

diff --git a/www/ppa.tpl b/www/ppa.tpl
index 0b6d9af..96db2c6 100644 (file)
--- a/www/ppa.tpl
+++ b/www/ppa.tpl
@@ -1,10 +1,17 @@
-<h1><span id="ppa_name">N/A</span></h1>
-<div id="details">
+
+<div id="menu">
   <div class="pkgs">
-    <em>Packages</em>:
-    <ul id="pkgs"></ul>
+    <div>
+      <em>PPA</em>: <span id="ppa_name">N/A</span>
+    </div>
+    
+    <div>
+      <em>Packages</em>:
+      <ul id="pkgs"></ul>
+    </div>
   </div>
 </div>
-<div id="charts">
+
+<div id="main">
   <div id="chart"></div>
 </div>