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): def output_html(hard):
get(hard) get(hard)
message_xml = "<p>" + __blame_info_text__ + ".</p>\n" blame_xml = "<div class=\"box statistics\">"
blame_xml = "<div class=\"statistics\"><table class=\"git\">" 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 += "<thead><tr> <th>Author</th> <th>Rows</th> <th>% in comments</th> </tr></thead>"
blame_xml += "<tbody>" blame_xml += "<tbody>"
chart_data = "" chart_data = ""
@ -172,7 +172,7 @@ def output_html(hard):
chart_data += ", " chart_data += ", "
blame_xml += "<tfoot><tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr></tfoot></tbody></table>" 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 += "<script type=\"text/javascript\">"
blame_xml += " $.plot($(\"#blame_chart\"), [{0}], {{".format(chart_data) blame_xml += " $.plot($(\"#blame_chart\"), [{0}], {{".format(chart_data)
@ -185,7 +185,7 @@ def output_html(hard):
blame_xml += " });" blame_xml += " });"
blame_xml += "</script>" blame_xml += "</script>"
print(message_xml + blame_xml) print(blame_xml)
def output_text(hard): def output_text(hard):
print("") print("")

View File

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