Perfected the look of the HTML output from the blame module.

This output is a good start and should work fine as a first template that
can be used when implementing HTML output in all other modules.

Once this is done we can work on adding some interactivity. However; it
might be a good idea to just release a version with some simple HTML
output before adding more complex stuff.
This commit is contained in:
Adam Waldenberg 2012-11-17 02:58:56 +01:00
parent f4c8aa05b5
commit 3e8d6434e8
2 changed files with 33 additions and 17 deletions

View file

@ -149,8 +149,8 @@ __blame_info_text__ = ("Below are the number of rows from each author that have
def output_html(hard):
get(hard)
message_xml = "<p>" + __blame_info_text__ + ".</p>\n"
blame_xml = "<div class=\"statistics\"><table class=\"git\">"
blame_xml = "<div class=\"box statistics\">"
blame_xml += "<p>" + __blame_info_text__ + ".</p><div><table class=\"git\">"
blame_xml += "<thead><tr> <th>Author</th> <th>Rows</th> <th>% in comments</th> </tr></thead>"
blame_xml += "<tbody>"
chart_data = ""
@ -172,7 +172,7 @@ def output_html(hard):
chart_data += ", "
blame_xml += "<tfoot><tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr></tfoot></tbody></table>"
blame_xml += "<div class=\"chart\" id=\"blame_chart\"></div></div>"
blame_xml += "<div class=\"chart\" id=\"blame_chart\"></div></div></div>"
blame_xml += "<script type=\"text/javascript\">"
blame_xml += " $.plot($(\"#blame_chart\"), [{0}], {{".format(chart_data)
@ -185,7 +185,7 @@ def output_html(hard):
blame_xml += " });"
blame_xml += "</script>"
print(message_xml + blame_xml)
print(blame_xml)
def output_text(hard):
print("")

View file

@ -5,33 +5,47 @@
<script type="application/javascript">{2}</script>
<script type="application/javascript">{3}</script>
<style type="text/css">
html,body {{
height: 100%;
}}
body {{
font-family: "Arial";
float: left;
}}
div.statistics {{
height: 10em;
}}
table.git, div.logo {{
div.box {{
border: 4px solid #ddd;
width: 33%;
float: right;
background-color: #eee;
margin: 1.25em;
padding: 5px;
font-size: small;
border-radius: 15px;
-moz-border-radius: 15px;
box-shadow: 1px 1px 3px #888;
-moz-box-shadow: 1px 1px 3px #888;
}}
div.logo {{
width: 33%;
float: right;
}}
div.logo img {{
float: left;
padding: 0.6em;
}}
table.git {{
div.statistics {{
float: left;
height: 100%;
width: 50em;
}}
table.git th, table.git tfoot tr td{{
div.statistics > div {{
position: relative;
float: left;
width: 100%;
}}
table.git {{
font-size: small;
width: 50%;
float: left;
}}
table.git th, table.git tfoot tr td {{
padding: 0.3em;
background-color: #ddcece;
border-radius: 8px 8px 0px 0px;
@ -48,15 +62,17 @@
background-color: #dbdbdb;
}}
div.chart {{
float: left;
width: 350px;
height: 100%;
position: absolute;
top: 5px;
bottom: 5px;
right: 5px;
width: 50%;
font-size: x-small;
}}
</style>
</head>
<body>
<div class="logo">
<div class="box logo">
<img src="data:image/png;base64,{4}" />
<p>The output has been generated by <a href="http://gitinspector.googlecode.com">gitinspector</a>;
the statistical analysis tool for git repositories.<p>