interface to create a dist dir for snap-diff

1. update html template to insert json data to html.
2. add css and more static file to git tree.
3. add a function in repo.py to provide a interface.

Fixes: #1510
Change-Id: Idca060db88616e338f69667364fdb5a39137f422

diff --git a/MANIFEST.in b/MANIFEST.in
index 410a988f15afbfec755de428e096dd771d82397b..99b20aeeca33c59d146cafe8617b30692d9c69c3 100644 (file)
--- a/MANIFEST.in
+++ b/MANIFEST.in
@@ -1,2 +1,2 @@
 include snapdiff/templates/*.html
-
+include snapdiff/static/*/*

diff --git a/snapdiff/__init__.py b/snapdiff/__init__.py
index 4f8d6b688042b5ddc832db164fb2545c657f5b0c..2b0b8e9c81a1b13f428bdfc85c2e52b863b72069 100644 (file)
--- a/snapdiff/__init__.py
+++ b/snapdiff/__init__.py
@@ -130,3 +130,31 @@ def diff_to_HTML(old_url, new_url, style='repo'):
             }
 
     return output_html('diff.html', **context)
+
+def diff_to_dist(old_url, new_url, dist_path):
+    """create a dist-dir of diffs, contains html and css"""
+    import os
+    static_dir = os.path.join(
+        os.path.dirname(os.path.abspath(__file__)), 'static')
+    output_html = diff_to_HTML(old_url, new_url)
+
+    if not os.path.exists(dist_path):
+        os.makedirs(dist_path)
+    import shutil
+
+    for root, dirs, files in os.walk(static_dir):
+        for filename in files:
+            if filename.endswith('.css'):
+                if not os.path.exists(os.path.join(dist_path, 'css')):
+                    os.makedirs(os.path.join(dist_path, 'css'))
+                shutil.copy(os.path.join(root, filename),
+                    os.path.join(dist_path, 'css', filename))
+            elif filename.endswith('.png'):
+                if not os.path.exists(os.path.join(dist_path, 'img')):
+                    os.makedirs(os.path.join(dist_path, 'img'))
+                shutil.copy(os.path.join(root, filename),
+                    os.path.join(dist_path, 'img', filename))
+
+    with open(os.path.join(dist_path, 'diff.html'), 'w') as fp:
+        fp.write(output_html)
+    return dist_path

diff --git a/snapdiff/static/css/html-reset.css b/snapdiff/static/css/html-reset.css
new file mode 100644 (file)
index 0000000..98dd8dc
--- /dev/null
+++ b/snapdiff/static/css/html-reset.css
@@ -0,0 +1,324 @@
+/* $Id: meego.css,v 1.18.2.1 2010/04/05 12:45:00 mshaver Exp $ */
+
+/**
+ * @file
+ * MeeGo Static HTML Reset Styling
+ *
+ * Style the base markup found in static HTML pages for MeeGo. Styles are derived from the "meego"
+ * theme found at meego.com.
+ */
+
+
+/*
+ * Fonts
+ *
+ * Our font size and line height declarations are based on the following ALA
+ * article:
+ *   http://www.alistapart.com/articles/howtosizetextincss
+ *
+ * All modern browsrs use a 16px default font size. Specifying the font-size
+ * and line-height in ems (relative to the 16px default font) allows the user
+ * to resize the font in the browser and produces the most consistent results
+ * across different browsers.
+ */
+body {
+  font-size: 100%; /* Fixes exaggerated text resizing in IE6 and IE7 */
+  color: #333333;
+  background-color: #FFFFFF;
+}
+
+#skip-to-nav,
+#page {
+  /*
+   * To use a 12px font size on the page, delete the 14px declarations.
+   * to use a 14px font size on the page, delete the 12px declarations.
+   */
+
+  /* Use a 14px base font size with a 18px line height */
+  font-size: 0.875em; /* 16px x .875 = 14px */
+  line-height: 1.286em; /* 14px x 1.286 = 18px */
+
+}
+
+body,
+caption,
+th,
+td,
+input,
+textarea,
+select,
+option,
+legend,
+fieldset {
+  /* The following font family declarations are based on the Microsoft core web
+   * fonts which are common fonts available on most computer systems. The DejaVu
+   * fonts are commonly available on Linux systems where the MS fonts are less
+   * common. Tahoma and Helvetica are also widely available.
+   *
+   * A user's web browser will look at the comma-separated list and will
+   * attempt to use each font in turn until it finds one that is available
+   * on the user's computer. The final "generic" font (sans-serif or serif)
+   * hints at what type of font to use if the web browser doesn't find any
+   * of the fonts in the list.
+
+  font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
+  font-family: Times, "Times New Roman", Georgia, "DejaVu Serif", serif;
+  font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
+
+  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
+  font-family: Tahoma, Verdana, "DejaVu Sans", sans-serif;
+  font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;
+  font-family: Arial, Helvetica, "Nimbus Sans L", sans-serif;
+
+  font-family: "Courier New", "DejaVu Sans Mono", monospace;
+
+   */
+
+  font-family: Verdana, Tahoma, "DejaVu Sans", sans-serif;
+}
+
+pre,
+code {
+  font-size: 1.1em; /* Monospace fonts can be hard to read */
+  font-family: "Courier New", "DejaVu Sans Mono", monospace;
+}
+
+/*
+ * Headings
+ */
+h1 {
+  font-size: 2em;
+  line-height: 1.3em;
+  margin-top: 0;
+  margin-bottom: 0.5em; /* 0.5em is equavalent to 1em in the page's base font.
+                           Remember, a margin specified in ems is relative to
+                           the element's font-size, not to the pages' base
+                           font size. So, for example, if we want a 1em margin
+                           (relative to the base font), we have to divide that
+                           length by the element's font-size:
+                           1em / 2em = 0.5em */
+}
+
+h2 {
+  font-size: 1.5em;
+  line-height: 1.3em;
+  margin-top: 0.667em; /* Equivalent to 1em in the page's base font: 1 / 1.5 = 0.667em */
+  margin-bottom: 0.667em;
+}
+
+h3 {
+  font-size: 1.3em;
+  line-height: 1.3em;
+  margin-top: 0.769em; /* Equivalent to 1em in the page's base font: 1 / 1.3 = 0.769 */
+  margin-bottom: 0.769em;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 1.1em;
+  line-height: 1.3em;
+  margin-top: 0.909em; /* Equivalent to 1em in the page's base font: 1 / 1.1 = 0.909 */
+  margin-bottom: 0.909em;
+}
+
+/*
+ * Block-level elements
+ */
+p,
+ul,
+ol,
+dl,
+pre,
+table,
+fieldset {
+  margin: 1em 0;
+}
+
+blockquote {
+  margin: 1em 2em;
+}
+
+#content .node h2,
+#content .node h3,
+#content .node h4,
+#content .node h5 {
+  margin-bottom: 0;
+  margin-top: 1em;
+}
+
+#content .node h2 + p,
+#content .node h3 + p,
+#content .node h4 + p,
+#content .node h5 + p {
+  margin-top: 0;
+}
+
+/*
+ * Lists
+ *
+ * We need to standardize the list item indentation.
+ */
+ul,
+ol {
+  margin-left: 2em;
+  padding-left: 2em; /* LTR */
+}
+
+.block ul,
+.item-list ul /* Drupal overrides */ {
+  margin: 0;
+  padding: 0; /* LTR */
+}
+
+ul ul, ul ol,
+ol ol, ol ul,
+.block ul ul, .block ul ol,
+.block ol ol, .block ol ul,
+.item-list ul ul, .item-list ul ol,
+.item-list ol ol, .item-list ol ul {
+  margin: 0;
+}
+
+li {
+  margin: 0;
+  padding: 0;
+}
+
+.item-list ul li /* Drupal override */ {
+  padding: 0;
+  list-style: inherit;
+}
+
+ul          { list-style-type: disc; }
+ul ul       { list-style-type: circle; }
+ul ul ul    { list-style-type: square; }
+ul ul ul ul { list-style-type: circle; }
+ol          { list-style-type: decimal; }
+ol ol       { list-style-type: lower-alpha; }
+ol ol ol    { list-style-type: decimal; }
+
+ul.menu li,
+li.expanded,
+li.collapsed,
+li.leaf /* Drupal override */ {
+  margin: 0;
+  padding: 0;
+  list-style-image: none;
+  list-style-type: none;
+  list-style: none;
+}
+
+dt {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+dd {
+  margin: 0 0 2em;
+  padding: 0;
+}
+
+/*
+ * Links
+ *
+ * The order of link states are based on Eric Meyer's article:
+ * http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states
+ */
+a:link {
+  border-bottom: 1px dotted #333333;
+  color: #333333;
+  text-decoration: none;
+}
+
+a:visited {
+  border-bottom: 1px dotted #333333;
+  color: #333333;
+  text-decoration: none;
+}
+
+a:hover,
+a:focus,
+a:active {
+  border-bottom: 1px dotted #E3038D;
+  color: #E3038D;
+  text-decoration: none;
+}
+
+a:active {
+}
+
+/*
+ * Tables
+ *
+ * Drupal provides table styling which is only useful for its admin section
+ * forms, so we override this default CSS. (We set it back in forms.css.)
+ */
+table {
+  border-collapse: collapse;
+  width: 100%; /* Prevent cramped-looking tables */
+}
+
+th,
+thead th,
+tbody th {
+  text-align: left; /* LTR */
+  padding: 0;
+  border-bottom: 2px solid #ccc;
+}
+
+tbody {
+  border-top: none;
+}
+
+table th,
+table td {
+  padding: 8px;
+}
+
+/*
+ * Abbreviations
+ */
+abbr {
+  border-bottom: 1px dotted #666;
+  cursor: help;
+  white-space: nowrap;
+}
+
+abbr.created /* Date-based "abbreviations" show computer-friendly timestamps which are not human-friendly. */ {
+  border: none;
+  cursor: auto;
+  white-space: normal;
+}
+
+/*
+ * Images
+ */
+img,
+a img,
+a.imagecache {
+  border: 0;
+}
+
+
+/*
+ * Horizontal rules
+ */
+hr {
+  height: 1px;
+  border: 1px solid #666;
+}
+
+/*
+ * Forms
+ */
+form {
+  margin: 0;
+  padding: 0;
+}
+
+fieldset {
+  margin: 1em 0;
+  padding: 0.5em;
+}

diff --git a/snapdiff/static/css/layout-liquid.css b/snapdiff/static/css/layout-liquid.css
new file mode 100644 (file)
index 0000000..9aba94f
--- /dev/null
+++ b/snapdiff/static/css/layout-liquid.css
@@ -0,0 +1,84 @@
+/* $Id: meego.css,v 1.18.2.1 2010/04/05 12:45:00 mshaver Exp $ */
+
+/**
+ * @file
+ * MeeGo Staic Layout Styling (DIV Positioning)
+ *
+ * Define CSS classes to create a table-free, 3-column, 2-column, or single
+ * column layout depending on whether blocks are enabled in the left or right
+ * columns.
+ *
+ * This layout is based on the Zen Columns layout method.
+ *   http://drupal.org/node/201428
+ *
+ * Only CSS that affects the layout (positioning) of major elements should be
+ * listed here.  Such as:
+ *   display, position, float, clear, width, height, min-width, min-height
+ *   margin, border, padding, overflow
+ */
+
+
+/*
+ * Body
+ */
+#page-wrapper {
+  min-width: 960px; /* Don't allow the browser to make the site unreadable. */
+}
+
+/*
+ * Main (container for everything else)
+ */
+#main-wrapper {
+  position: relative;
+}
+
+/*
+ * Content
+ */
+#content {
+  float: left; /* LTR */
+  width: 100%;
+  margin-left: 0; /* LTR */
+  margin-right: -100%; /* LTR */ /* Negative value of #content's width + left margin. */
+  padding: 0; /* DO NOT CHANGE. Add padding or margin to #content .section. */
+}
+
+/*
+ * Navigation
+ */
+#navigation {
+  width: 100%;
+  margin-left: 0; /* LTR */
+  margin-right: -100%; /* LTR */ /* Negative value of #navigation's width + left margin. */
+  padding: 0; /* DO NOT CHANGE. Add padding or margin to #navigation .section. */
+/* The navigation can have any arbritrary height. We picked one
+that is the line-height plus 1em: 1.3 + 1 = 2.3
+Set this to the same value as the margin-top below. */
+}
+
+#navigation ul /* Primary and secondary links */ {
+  margin: 0;
+  padding: 0;
+  text-align: left; /* LTR */
+}
+
+#navigation li /* A simple method to get navigation links to appear in one line. */ {
+  float: left; /* LTR */
+  padding: 0 10px 0 0; /* LTR */
+}
+
+/*
+ * Prevent overflowing content
+ */
+#header,
+#content,
+#navigation,
+#footer,
+.region-page-closure {
+  overflow: visible;
+  word-wrap: break-word; /* A very nice CSS3 property */
+}
+
+#navigation {
+  overflow: hidden; /* May need to be removed if using a dynamic drop-down menu */
+}

diff --git a/snapdiff/static/css/shCore.css b/snapdiff/static/css/shCore.css
new file mode 100644 (file)
index 0000000..4f0021e
--- /dev/null
+++ b/snapdiff/static/css/shCore.css
@@ -0,0 +1,226 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ *
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter a,
+.syntaxhighlighter div,
+.syntaxhighlighter code,
+.syntaxhighlighter table,
+.syntaxhighlighter table td,
+.syntaxhighlighter table tr,
+.syntaxhighlighter table tbody,
+.syntaxhighlighter table thead,
+.syntaxhighlighter table caption,
+.syntaxhighlighter textarea {
+  -moz-border-radius: 0 0 0 0 !important;
+  -webkit-border-radius: 0 0 0 0 !important;
+  background: none !important;
+  border: 0 !important;
+  bottom: auto !important;
+  float: none !important;
+  height: auto !important;
+  left: auto !important;
+  line-height: 1.1em !important;
+  margin: 0 !important;
+  outline: 0 !important;
+  overflow: visible !important;
+  padding: 0 !important;
+  position: static !important;
+  right: auto !important;
+  text-align: left !important;
+  top: auto !important;
+  vertical-align: baseline !important;
+  width: auto !important;
+  box-sizing: content-box !important;
+  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  font-size: 1em !important;
+  min-height: inherit !important;
+  min-height: auto !important;
+}
+
+.syntaxhighlighter {
+  width: 100% !important;
+  margin: 1em 0 1em 0 !important;
+  position: relative !important;
+  overflow: auto !important;
+  font-size: 1em !important;
+}
+.syntaxhighlighter.source {
+  overflow: hidden !important;
+}
+.syntaxhighlighter .bold {
+  font-weight: bold !important;
+}
+.syntaxhighlighter .italic {
+  font-style: italic !important;
+}
+.syntaxhighlighter .line {
+  white-space: pre !important;
+}
+.syntaxhighlighter table {
+  width: 100% !important;
+}
+.syntaxhighlighter table caption {
+  text-align: left !important;
+  padding: .5em 0 0.5em 1em !important;
+}
+.syntaxhighlighter table td.code {
+  width: 100% !important;
+}
+.syntaxhighlighter table td.code .container {
+  position: relative !important;
+}
+.syntaxhighlighter table td.code .container textarea {
+  box-sizing: border-box !important;
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border: none !important;
+  background: white !important;
+  padding-left: 1em !important;
+  overflow: hidden !important;
+  white-space: pre !important;
+}
+.syntaxhighlighter table td.gutter .line {
+  text-align: right !important;
+  padding: 0 0.5em 0 1em !important;
+}
+.syntaxhighlighter table td.code .line {
+  padding: 0 1em !important;
+}
+.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
+  padding-left: 0em !important;
+}
+.syntaxhighlighter.show {
+  display: block !important;
+}
+.syntaxhighlighter.collapsed table {
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  padding: 0.1em 0.8em 0em 0.8em !important;
+  font-size: 1em !important;
+  position: static !important;
+  width: auto !important;
+  height: auto !important;
+}
+.syntaxhighlighter.collapsed .toolbar span {
+  display: inline !important;
+  margin-right: 1em !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a {
+  padding: 0 !important;
+  display: none !important;
+}
+.syntaxhighlighter.collapsed .toolbar span a.expandSource {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar {
+  position: absolute !important;
+  right: 1px !important;
+  top: 1px !important;
+  width: 11px !important;
+  height: 11px !important;
+  font-size: 10px !important;
+  z-index: 10 !important;
+}
+.syntaxhighlighter .toolbar span.title {
+  display: inline !important;
+}
+.syntaxhighlighter .toolbar a {
+  display: block !important;
+  text-align: center !important;
+  text-decoration: none !important;
+  padding-top: 1px !important;
+}
+.syntaxhighlighter .toolbar a.expandSource {
+  display: none !important;
+}
+.syntaxhighlighter.ie {
+  font-size: .9em !important;
+  padding: 1px 0 1px 0 !important;
+}
+.syntaxhighlighter.ie .toolbar {
+  line-height: 8px !important;
+}
+.syntaxhighlighter.ie .toolbar a {
+  padding-top: 0px !important;
+}
+.syntaxhighlighter.printing .line.alt1 .content,
+.syntaxhighlighter.printing .line.alt2 .content,
+.syntaxhighlighter.printing .line.highlighted .number,
+.syntaxhighlighter.printing .line.highlighted.alt1 .content,
+.syntaxhighlighter.printing .line.highlighted.alt2 .content {
+  background: none !important;
+}
+.syntaxhighlighter.printing .line .number {
+  color: #bbbbbb !important;
+}
+.syntaxhighlighter.printing .line .content {
+  color: black !important;
+}
+.syntaxhighlighter.printing .toolbar {
+  display: none !important;
+}
+.syntaxhighlighter.printing a {
+  text-decoration: none !important;
+}
+.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
+  color: black !important;
+}
+.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
+  color: #008200 !important;
+}
+.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
+  color: blue !important;
+}
+.syntaxhighlighter.printing .keyword {
+  color: #006699 !important;
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .preprocessor {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter.printing .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter.printing .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter.printing .script {
+  font-weight: bold !important;
+}
+.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
+  color: red !important;
+}
+.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
+  color: black !important;
+}

diff --git a/snapdiff/static/css/shThemeDefault.css b/snapdiff/static/css/shThemeDefault.css
new file mode 100644 (file)
index 0000000..8a870e4
--- /dev/null
+++ b/snapdiff/static/css/shThemeDefault.css
@@ -0,0 +1,117 @@
+/**
+ * SyntaxHighlighter
+ * http://alexgorbatchev.com/SyntaxHighlighter
+ *
+ * SyntaxHighlighter is donationware. If you are using it, please donate.
+ * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
+ *
+ * @version
+ * 3.0.83 (July 02 2010)
+ *
+ * @copyright
+ * Copyright (C) 2004-2010 Alex Gorbatchev.
+ *
+ * @license
+ * Dual licensed under the MIT and GPL licenses.
+ */
+.syntaxhighlighter {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.alt1 {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.alt2 {
+  background-color: white !important;
+}
+.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
+  background-color: #e0e0e0 !important;
+}
+.syntaxhighlighter .line.highlighted.number {
+  color: black !important;
+}
+.syntaxhighlighter table caption {
+  color: black !important;
+}
+.syntaxhighlighter .gutter {
+  color: #afafaf !important;
+}
+.syntaxhighlighter .gutter .line {
+  border-right: 3px solid #6ce26c !important;
+}
+.syntaxhighlighter .gutter .line.highlighted {
+  background-color: #6ce26c !important;
+  color: white !important;
+}
+.syntaxhighlighter.printing .line .content {
+  border: none !important;
+}
+.syntaxhighlighter.collapsed {
+  overflow: visible !important;
+}
+.syntaxhighlighter.collapsed .toolbar {
+  color: blue !important;
+  background: white !important;
+  border: 1px solid #6ce26c !important;
+}
+.syntaxhighlighter.collapsed .toolbar a {
+  color: blue !important;
+}
+.syntaxhighlighter.collapsed .toolbar a:hover {
+  color: red !important;
+}
+.syntaxhighlighter .toolbar {
+  color: white !important;
+  background: #6ce26c !important;
+  border: none !important;
+}
+.syntaxhighlighter .toolbar a {
+  color: white !important;
+}
+.syntaxhighlighter .toolbar a:hover {
+  color: black !important;
+}
+.syntaxhighlighter .plain, .syntaxhighlighter .plain a {
+  color: black !important;
+}
+.syntaxhighlighter .comments, .syntaxhighlighter .comments a {
+  color: #008200 !important;
+}
+.syntaxhighlighter .string, .syntaxhighlighter .string a {
+  color: blue !important;
+}
+.syntaxhighlighter .keyword {
+  color: #006699 !important;
+}
+.syntaxhighlighter .preprocessor {
+  color: gray !important;
+}
+.syntaxhighlighter .variable {
+  color: #aa7700 !important;
+}
+.syntaxhighlighter .value {
+  color: #009900 !important;
+}
+.syntaxhighlighter .functions {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .constants {
+  color: #0066cc !important;
+}
+.syntaxhighlighter .script {
+  font-weight: bold !important;
+  color: #006699 !important;
+  background-color: none !important;
+}
+.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {
+  color: gray !important;
+}
+.syntaxhighlighter .color2, .syntaxhighlighter .color2 a {
+  color: #ff1493 !important;
+}
+.syntaxhighlighter .color3, .syntaxhighlighter .color3 a {
+  color: red !important;
+}
+
+.syntaxhighlighter .keyword {
+  font-weight: bold !important;
+}

diff --git a/snapdiff/static/css/style.css b/snapdiff/static/css/style.css
new file mode 100644 (file)
index 0000000..33b8ee4
--- /dev/null
+++ b/snapdiff/static/css/style.css
@@ -0,0 +1,311 @@
+body {
+  background-color:#FFFFFF;
+  color:#333333;
+  font-size:100%;
+}
+#skip-to-nav, #page {
+  font-size:0.875em;
+  line-height:1.286em;
+}
+body, caption, th, td, input, textarea, select, option, legend, fieldset {
+  font-family:Verdana, Tahoma, 'DejaVu Sans', sans-serif;
+}
+pre, code {
+  font-family:'Courier New', 'DejaVu Sans Mono', monospace;
+  font-size:1.1em;
+}
+
+h1 {
+  font-size:2em;
+  line-height:1.3em;
+  margin-bottom:0.5em;
+  margin-top:0;
+}
+h2 {
+  font-size:1.5em;
+  line-height:1.3em;
+  margin-bottom:0.667em;
+  margin-top:0.667em;
+}
+h3 {
+  font-size:1.3em;
+  line-height:1.3em;
+  margin-bottom:0.769em;
+  margin-top:0.769em;
+}
+h4, h5, h6 {
+  font-size:1.1em;
+  line-height:1.3em;
+  margin-bottom:0.909em;
+  margin-top:0.909em;
+}
+span {
+  color:#E3038D;
+}
+
+p, ul, ol, dl, pre, table, fieldset {
+  margin-bottom:1em;
+  margin-left:0;
+  margin-right:0;
+  margin-top:1em;
+}
+blockquote {
+  margin-bottom:1em;
+  margin-left:2em;
+  margin-right:2em;
+  margin-top:1em;
+}
+
+
+table{
+  border: 0px solid black;
+  border-spacing: 0px;
+}
+
+table thead tr{
+  font-family: Arial, monospace;
+  font-size: 14px;
+}
+
+table thead tr th{
+  border-bottom: 2px solid black;
+  border-top: 1px solid black;
+  margin: 0px;
+  padding: 2px;
+  background-color: #cccccc;
+  vertical-align: text-top;
+  hori-align: text-left;
+}
+
+table tr {
+  font-family: arial, monospace;
+  color: black;
+  font-size:12px;
+  background-color: white;
+}
+
+tr:nth-child(even) {
+  background-color: #ccc;
+}
+
+table tr td, th{
+  border-bottom: 1px solid black;
+  padding: 5px;
+  vertical-align: text-top;
+}
+
+a:link{
+  font-family:arial, monospace;
+  text-decoration: none;
+  color: teal;
+}
+
+a:hover{
+  text-decoration: underline;
+}
+
+a:visited{
+  color:black;
+  text-decoration: none;
+}
+ul, ol {
+  margin-left:2em;
+  padding-left:2em;
+}
+.block ul, .item-list ul {
+  margin-bottom:0;
+  margin-left:0;
+  margin-right:0;
+  margin-top:0;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+}
+ul ul, ul ol, ol ol, ol ul, .block ul ul, .block ul ol, .block ol ol, .block ol ul, .item-list ul ul, .item-list ul ol, .item-list ol ol, .item-list ol ul {
+  margin-bottom:0;
+  margin-left:0;
+  margin-right:0;
+  margin-top:0;
+}
+li {
+  margin-bottom:0;
+  margin-left:0;
+  margin-right:0;
+  margin-top:0;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+}
+.item-list ul li {
+  list-style:inherit;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+}
+ul {
+  list-style-type:disc;
+}
+ul ul {
+  list-style-type:circle;
+}
+ul ul ul {
+  list-style-type:square;
+}
+ul ul ul ul {
+  list-style-type:circle;
+}
+ol {
+  list-style-type:decimal;
+}
+ol ol {
+  list-style-type:lower-alpha;
+}
+ol ol ol {
+  list-style-type:decimal;
+}
+ul.menu li, li.expanded, li.collapsed, li.leaf {
+  list-style-image:initial;
+  list-style-position:initial;
+  list-style-type:none;
+  margin-bottom:0;
+  margin-left:0;
+  margin-right:0;
+  margin-top:0;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+}
+dt {
+  font-weight:bold;
+  margin-bottom:0;
+  margin-left:0;
+  margin-right:0;
+  margin-top:0;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+}
+dd {
+  margin-bottom:2em;
+  margin-left:0;
+  margin-right:0;
+  margin-top:0;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+}
+a:link {
+  border-bottom-color:#333333;
+  border-bottom-style:dotted;
+  border-bottom-width:1px;
+  color:#333333;
+  text-decoration:none;
+}
+a:visited {
+  border-bottom-color:#333333;
+  border-bottom-style:dotted;
+  border-bottom-width:1px;
+  color:#333333;
+  text-decoration:none;
+}
+a:hover, a:focus, a:active {
+  border-bottom-color:#E3038D;
+  border-bottom-style:dotted;
+  border-bottom-width:1px;
+  color:#E3038D;
+  text-decoration:none;
+}
+a:active {
+}
+table {
+  border-collapse:collapse;
+  width:100%;
+}
+th, thead th, tbody th {
+  border-bottom-color:#CCCCCC;
+  border-bottom-style:solid;
+  border-bottom-width:2px;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+  text-align:left;
+}
+tbody {
+  border-top-color:initial;
+  border-top-style:none;
+  border-top-width:initial;
+}
+table th, table td {
+  padding-bottom:8px;
+  padding-left:8px;
+  padding-right:8px;
+  padding-top:8px;
+}
+abbr {
+  border-bottom-color:#666666;
+  border-bottom-style:dotted;
+  border-bottom-width:1px;
+  cursor:help;
+  white-space:nowrap;
+}
+abbr.created {
+  border-bottom-style:none;
+  border-color:initial;
+  border-left-style:none;
+  border-right-style:none;
+  border-top-style:none;
+  border-width:initial;
+  cursor:auto;
+  white-space:normal;
+}
+img, a img, a.imagecache {
+  border-bottom-width:0;
+  border-color:initial;
+  border-left-width:0;
+  border-right-width:0;
+  border-style:initial;
+  border-top-width:0;
+}
+hr {
+  border-bottom-color:#666666;
+  border-bottom-style:solid;
+  border-bottom-width:1px;
+  border-left-color:#666666;
+  border-left-style:solid;
+  border-left-width:1px;
+  border-right-color:#666666;
+  border-right-style:solid;
+  border-right-width:1px;
+  border-top-color:#666666;
+  border-top-style:solid;
+  border-top-width:1px;
+  height:1px;
+}
+form {
+  margin-bottom:0;
+  margin-left:0;
+  margin-right:0;
+  margin-top:0;
+  padding-bottom:0;
+  padding-left:0;
+  padding-right:0;
+  padding-top:0;
+}
+fieldset {
+  margin-bottom:1em;
+  margin-left:0;
+  margin-right:0;
+  margin-top:1em;
+  padding-bottom:0.5em;
+  padding-left:0.5em;
+  padding-right:0.5em;
+  padding-top:0.5em;
+}
+

diff --git a/snapdiff/static/css/tizen.css b/snapdiff/static/css/tizen.css
new file mode 100644 (file)
index 0000000..ac4c7ee
--- /dev/null
+++ b/snapdiff/static/css/tizen.css
@@ -0,0 +1,209 @@
+/**
+ * @file
+ * Tizen Static Page Styling (inherit from meego.css)
+ * Style the markup found in static HTML pages for Tizen.
+ */
+
+/*
+ * Body
+ */
+body {
+  margin: 2em;
+  padding: 0;
+}
+
+/*
+ * Header
+ */
+#logo /* Wrapping link for logo */ {
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+#logo a {
+  border: none;
+}
+
+#logo{
+    width:200px;
+    height:50px;
+    background-position:10px 4px;
+    background: transparent;
+}
+
+div#header {
+    background: -moz-linear-gradient(left center , #292929 0%, #7B7B7B 50%, #AAAAAA 100%) repeat scroll 0 0 transparent;
+    border-bottom: 1px solid #7B7B7B;
+    border-top: 2px solid #292929;
+    box-shadow: 0 1px 6px 0 gray;
+    background-attachment: scroll;
+    background-clip: border-box;
+    background-color: black;
+    background-origin: padding-box;
+    box-sizing: border-box;
+    color: #596874;
+}
+
+a.img {
+    background: transparent;
+}
+/*
+ * Content
+ */
+h1.title, /* The title of the page */
+h2.title, /* Block title or the title of a piece of content when it is given in a list of content */
+h3.title /* Comment title */ {
+  margin: 0;
+}
+
+ul.links /* List of links */ {
+  margin: 1em 0;
+  padding: 0;
+}
+
+ul.links.inline {
+  margin: 0;
+  display: inline;
+}
+
+ul.links li {
+  display: inline;
+  list-style-type: none;
+  padding: 0 0.7em 0 .5em;
+  margin: 0;
+}
+
+/*
+ * Navigation bar
+ */
+#navigation {
+  border-top: 4px solid #333333;
+}
+
+/*
+ * Primary menu links
+ */
+#navigation .section {
+  border-bottom: 1px solid #333333;
+  height: 42px;
+}
+
+#main-menu {
+  background-color: #EAEAEA;
+  height: 41px;
+  line-height: 40px;
+  white-space:nowrap;
+}
+
+#main-menu li {
+  padding: 0;
+  font-size: 1.1em;
+}
+
+#main-menu a {
+  color: #333333;
+  padding: 0 10px;
+  text-decoration: none;
+  border: none;
+  height: 41px;
+  display: block;
+}
+
+#main-menu a:hover,
+#main-menu li.active-trail a {
+  color: #fff;
+  background: #333333 none repeat scroll 0 0;
+  border: none;
+  font-weight: normal;
+}
+
+/*
+ * Footer
+ */
+#footer {
+  background-color: #DDDDDD;
+  margin-top: 20px;
+  font-size: .9em;
+}
+
+#footer .section {
+  padding-top: 10px;
+  -moz-box-shadow: inset 0 1px 1px 0 gray;
+       -webkit-box-shadow: inset 0 1px 1px 0 gray;
+}
+
+#footer-message /* Wrapper for the footer message from Drupal's "Site information"
+                   and for any blocks placed in the footer region */ {
+  color: #666;
+  padding: 0 0 10px 10px;
+  margin-top: 10px;
+}
+
+#footer .block {
+  float: left;
+  width: 186px;
+  margin-right: 5px;
+}
+
+/* Sponsor: Linux Foundation */
+.sponsor {
+  float: right;
+  text-align: right;
+  margin-right: 20px;
+}
+
+.sponsor a:link,
+.sponsor a:visited,
+.sponsor a:hover,
+.sponsor a:focus,
+.sponsor a:active {
+  border: none;
+}
+
+#footer .block ul.menu {
+       margin: 0;
+  padding: 0 0 0 10px;
+}
+
+#footer .block ul.menu li {
+  border-bottom: none;
+  padding: .1em 0;
+}
+
+/*
+ * Markup free clearing (See: http://www.positioniseverything.net/easyclearing.html )
+ */
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+/**
+ * Hide elements from all users.
+ *
+ * Used for elements which should not be immediately displayed to any user. An
+ * example would be a collapsible fieldset that will be expanded with a click
+ * from a user. The effect of this class can be toggled with the jQuery show()
+ * and hide() functions.
+ */
+.element-hidden {
+  display: none;
+}
+
+/**
+ * Hide elements visually, but keep them available for screen-readers.
+ *
+ * Used for information required for screen-reader users to understand and use
+ * the site where visual display is undesirable. Information provided in this
+ * manner should be kept concise, to avoid unnecessary burden on the user. Must
+ * not be used for focusable elements (such as links and form elements) as this
+ * causes issues for keyboard only or voice recognition users.
+ */
+.element-invisible {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+}

diff --git a/snapdiff/static/img/tizen-logo.png b/snapdiff/static/img/tizen-logo.png
new file mode 100644 (file)
index 0000000..e2325b4
Binary files /dev/null and b/snapdiff/static/img/tizen-logo.png differ

diff --git a/snapdiff/templates/diff.html b/snapdiff/templates/diff.html
index 664bc0e8d4332622bf969104ef87697f53ffe0c5..968ae953b0e8fd0092a45f6633980b64c5a3875f 100644 (file)
--- a/snapdiff/templates/diff.html
+++ b/snapdiff/templates/diff.html
@@ -2,23 +2,20 @@
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <link href="theme/html-reset.css" media="screen" rel="stylesheet" type="text/css" />
-    <link href="theme/layout-liquid.css" media="screen" rel="stylesheet" type="text/css" />
-    <link href="theme/tizen.css" media="screen" rel="stylesheet" type="text/css" />
-    <link href="theme/style.css" media="screen" rel="stylesheet" type="text/css" />
-    <script type="text/javascript" src="theme/js/shCore.js"></script>
-    <script type="text/javascript" src="theme/js/shBrushDiff.js"></script>
-    <link href="theme/css/shCore.css" rel="stylesheet" type="text/css" />
-    <link href="theme/css/shThemeDefault.css" rel="stylesheet" type="text/css" />
+    <link href="./css/html-reset.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./css/layout-liquid.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./css/tizen.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./css/style.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="./css/shCore.css" rel="stylesheet" type="text/css" />
+    <link href="./css/shThemeDefault.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-    <script type="text/javascript">SyntaxHighlighter.all()</script>
     <div id="page-wrapper">
       <div id="page">
         <div id="header">
           <div class="section clearfix">
             <h1 id="logo">
-              <a href="http://www.tizen.org"><img alt="Tizen-logo" src="theme/tizen-logo.png" width="180px" height="50px"></a>
+              <a href="http://www.tizen.org"><img alt="Tizen-logo" src="./img/tizen-logo.png" width="180px" height="50px"></a>
             </h1>
           </div>
         </div>
@@ -38,6 +35,71 @@
         <li><a href="#modified">Modified packages: {{ diff['modified']|count }}</a></li>
         <li><a href="#rebuilded">Packages with Rebuilds: {{ diff['rebuilded']|count }}</a></li>
     </ul>
+    <h3><a>Added Packages</a></h3>
+    {% if diff['added'] %}
+        <table>
+            <tr>
+                <th>Package</th><th>Version</th><th>VCS</th>
+            </tr>
+            {% for item in diff['added'] %}
+                <tr>
+                    <td>{{ item['newpkg']['name'] }}</td>
+                    <td>{{ item['newpkg']['version']['ver'] }}-{{item['newpkg']['version']['rel']}}</td>
+                    <td>{{ item['newpkg']['vcs'] }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endif %}
+    <h3><a>Removed Packages</a></h3>
+    {% if diff['removed'] %}
+         <table>
+            <tr>
+                <th>Package</th><th>Version</th><th>VCS</th>
+            </tr>
+            {% for item in diff['removed'] %}
+                <tr>
+                    <td>{{ item['oldpkg']['name'] }}</td>
+                    <td>{{ item['oldpkg']['version']['ver'] }}-{{item['oldpkg']['version']['rel']}}</td>
+                    <td>{{ item['oldpkg']['vcs'] }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endif %}
+    <h3><a>Modified Packages</a></h3>
+    {% if diff['modified'] %}
+         <table>
+            <tr>
+                <th>Package</th><th>Version</th><th>VCS</th>
+            </tr>
+            {% for item in diff['modified'] %}
+                <tr>
+                    <td>{{ item['oldpkg']['name'] }}</td>
+                    <td>{{ item['oldpkg']['version']['ver'] }}-{{item['oldpkg']['version']['rel']}}~{{ item['newpkg']['version']['ver'] }}-{{item['newpkg']['version']['rel']}}</td>
+                    <td>
+                        <ul>
+                            <li>{{ item['oldpkg']['vcs'] }}</li>
+                            <li>{{ item['newpkg']['vcs'] }}</li>
+                        </ul>
+                    </td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endif %}
+    <h3><a>Packages with Rebuilds</a></h3>
+    {% if diff['rebuilded'] %}
+         <table>
+            <tr>
+                <th>Package</th><th>Version</th><th>VCS</th>
+            </tr>
+            {% for item in diff['rebuilded'] %}
+                <tr>
+                    <td>{{ item['oldpkg']['name'] }}</td>
+                    <td>{{ item['oldpkg']['version']['ver'] }}-{{item['oldpkg']['version']['rel']}}~{{ item['newpkg']['version']['ver'] }}-{{item['newpkg']['version']['rel']}}</td>
+                    <td>{{ item['oldpkg']['vcs'] }}</td>
+                </tr>
+            {% endfor %}
+        </table>
+    {% endif %}
 </body>
 </html>