templates/model_tree_cmp_tmpl.j2 - mcp/cfg-checker - Gitiles

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Model Tree Changes</title>
     <style>
         body {
             font-family: Verdana, Geneva, Tahoma, sans-serif;
             font-size: 90% !important;
         }
         .dot_green {
             float: left;
             color: green;
             margin-right: 0.5em;
             margin-top: 0.2em;
         }
         .dot_red {
             float: left;
             color: red;
             margin-right: 0.5em;
             margin-top: 0.2em;
         }
         .dot_empty {
             float: left;
             color: darkgray;
             margin-right: 0.5em;
             margin-top: 0.2em;
         }
         /* Style the tab */
         .tab {
             float: left;
             width: 130px;
             border: 1px solid #fff;
             background-color: #efe;
         }

         /* Style the buttons that are used to open the tab content */
         .tab button {
             display: block;
             background-color: inherit;
             color: Black;
             border: none;
             outline: none;
             font-family: "Lucida Console", Monaco, monospace;
             text-align: left;
             cursor: pointer;
             transition: 0.3s;
             font-size: 1.3em;
             width: 100%;
             padding: 1px;
             margin: 1px;
         }

         button > div.node_name {
             float: left;
             font-size: 1.3em;
         }

         .smallgreytext {
             float: right;
             font-size: 0.7em;
             color: gray;
         }

         /* Change background color of buttons on hover */
         .tab button:hover {
             background-color: #7b7;
         }

         /* Create an active/current "tab button" class */
         .tab button.active {
             background-color: #8c8;
             color: white;
         }

         /* Style the tab content */
         .tabcontent {
             display: none;
             position: absolute;
             font-size: 1em;
             padding: 0.5em;
             right: -10%;
             top: 0%;
             transform: translateX(-12%);
             width: calc(100% - 170px);
             overflow-x: scroll;
             overflow-wrap: break-word;
         }

         table {
             border: 0 hidden;
             width: 100%;
         }
         tr:nth-child(even) {
             background-color: #fff;
         }
         tr:nth-child(odd) {
             background-color: #ddd;
         }
         .Header {
             background-color: #bbb;
             color: Black;
             width: 30%;
             text-align: center;
         }
         .param {
             font-size: 0.8em;
             color: #555;
             padding-left: 50px;
             padding-right: 10px;
         }
         .class_file {
             font-size: 0.8em;
             font-weight: bold;
             min-width: 300px;
             text-align: left;
             color: black;
         }

         .pkgName {
             font-size: 1em;
             padding-left: 10px;
             max-width: 800px;
         }

         .version {
             font-size: 1em;
             text-align: left;
             max-width: 400px;
             overflow-wrap: break-word;
         }

         .differ {
             background-color: #eaa;
         }
         /* Tooltip container */
         .tooltip {
             position: relative;
             display: inline-block;
             border-bottom: 1px dotted black;
         }

         .tooltip .tooltiptext {
             visibility: hidden;
             background-color: black;
             font-family: "Lucida Console", Monaco, monospace;
             font-size: 0.5em;
             width: auto;
             color: #fff;
             border-radius: 6px;
             padding: 5px 5px;

             /* Position the tooltip */
             position: absolute;
             z-index: 1;
         }

         .tooltip:hover .tooltiptext {
             visibility: visible;
         }

     </style>
     <script language="JavaScript">
         function init() {
             // Declare all variables
             var i, tabcontent, tablinks;

             // Get all elements with class="tabcontent" and hide them
             tabcontent = document.getElementsByClassName("tabcontent");
             for (i = 1; i < tabcontent.length; i++) {
                 tabcontent[i].style.display = "none";
             }
             tabcontent[0].style.display = "block";

             // Get all elements with class="tablinks" and remove the class "active"
             tablinks = document.getElementsByClassName("tablinks");
             for (i = 1; i < tablinks.length; i++) {
                 tablinks[i].className = tablinks[i].className.replace(" active", "");
             }
             tablinks[0].className += " active";

         }
         function openTab(evt, tabName) {
             // Declare all variables
             var i, tabcontent, tablinks;

             // Get all elements with class="tabcontent" and hide them
             tabcontent = document.getElementsByClassName("tabcontent");
             for (i = 0; i < tabcontent.length; i++) {
                 tabcontent[i].style.display = "none";
             }

             // Get all elements with class="tablinks" and remove the class "active"
             tablinks = document.getElementsByClassName("tablinks");
             for (i = 0; i < tablinks.length; i++) {
                 tablinks[i].className = tablinks[i].className.replace(" active", "");
             }

             // Show the current tab, and add an "active" class to the link that opened the tab
             document.getElementById(tabName).style.display = "block";
             evt.currentTarget.className += " active";
         }
     </script>
 </head>
 <body onload="init()">
 <div class="tab">
 {% for tab in tabs.keys() | sort %}
   <button class="tablinks" onclick="openTab(event, '{{ tab }}')">
     <div class="node_name">{{ tab }}</div>
     <div class="smallgreytext">({{ counters[tab] }})</div>
   </button>
 {% endfor %}
 </div>
 {% for tab in tabs.keys() | sort %}
 <div id="{{ tab }}" class="tabcontent">
     <table class="pkgversions">
         <tbody>
         <tr>
             <td class="Header">Reclass path</td>
             <td class="Header">{{ names[0] }}</td>
             <td class="Header">{{ names[1] }}</td>
         </tr>
         <tr><td colspan=3>Changes found in {{ tabs[tab]["path"] }}</td></tr>
         {% for diff in tabs[tab]["diffs"].keys() | sort %}
         <tr>
             <td class="pkgName">
                 <div class="class_file">{{ tabs[tab]["diffs"][diff]["class_file"] }}</div>
                 <div class="param">{{ tabs[tab]["diffs"][diff]["param"] }}</div>
             </td>
             <td class="version">
                 <div><pre>{{ tabs[tab]["diffs"][diff]["str_values"][0] | linebreaks }}</pre></div>
             </td>
             <td class="version">
                 <div><pre>{{ tabs[tab]["diffs"][diff]["str_values"][1] | linebreaks }}</pre></div>
             </td>
         </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
 {% endfor %}
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Model Tree Changes</title>
	<style>
	body {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 90% !important;
	}
	.dot_green {
	float: left;
	color: green;
	margin-right: 0.5em;
	margin-top: 0.2em;
	}
	.dot_red {
	float: left;
	color: red;
	margin-right: 0.5em;
	margin-top: 0.2em;
	}
	.dot_empty {
	float: left;
	color: darkgray;
	margin-right: 0.5em;
	margin-top: 0.2em;
	}
	/* Style the tab */
	.tab {
	float: left;
	width: 130px;
	border: 1px solid #fff;
	background-color: #efe;
	}

	/* Style the buttons that are used to open the tab content */
	.tab button {
	display: block;
	background-color: inherit;
	color: Black;
	border: none;
	outline: none;
	font-family: "Lucida Console", Monaco, monospace;
	text-align: left;
	cursor: pointer;
	transition: 0.3s;
	font-size: 1.3em;
	width: 100%;
	padding: 1px;
	margin: 1px;
	}

	button > div.node_name {
	float: left;
	font-size: 1.3em;
	}

	.smallgreytext {
	float: right;
	font-size: 0.7em;
	color: gray;
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
	background-color: #7b7;
	}

	/* Create an active/current "tab button" class */
	.tab button.active {
	background-color: #8c8;
	color: white;
	}

	/* Style the tab content */
	.tabcontent {
	display: none;
	position: absolute;
	font-size: 1em;
	padding: 0.5em;
	right: -10%;
	top: 0%;
	transform: translateX(-12%);
	width: calc(100% - 170px);
	overflow-x: scroll;
	overflow-wrap: break-word;
	}

	table {
	border: 0 hidden;
	width: 100%;
	}
	tr:nth-child(even) {
	background-color: #fff;
	}
	tr:nth-child(odd) {
	background-color: #ddd;
	}
	.Header {
	background-color: #bbb;
	color: Black;
	width: 30%;
	text-align: center;
	}
	.param {
	font-size: 0.8em;
	color: #555;
	padding-left: 50px;
	padding-right: 10px;
	}
	.class_file {
	font-size: 0.8em;
	font-weight: bold;
	min-width: 300px;
	text-align: left;
	color: black;
	}

	.pkgName {
	font-size: 1em;
	padding-left: 10px;
	max-width: 800px;
	}

	.version {
	font-size: 1em;
	text-align: left;
	max-width: 400px;
	overflow-wrap: break-word;
	}

	.differ {
	background-color: #eaa;
	}
	/* Tooltip container */
	.tooltip {
	position: relative;
	display: inline-block;
	border-bottom: 1px dotted black;
	}

	.tooltip .tooltiptext {
	visibility: hidden;
	background-color: black;
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 0.5em;
	width: auto;
	color: #fff;
	border-radius: 6px;
	padding: 5px 5px;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	}

	.tooltip:hover .tooltiptext {
	visibility: visible;
	}

	</style>
	<script language="JavaScript">
	function init() {
	// Declare all variables
	var i, tabcontent, tablinks;

	// Get all elements with class="tabcontent" and hide them
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 1; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}
	tabcontent[0].style.display = "block";

	// Get all elements with class="tablinks" and remove the class "active"
	tablinks = document.getElementsByClassName("tablinks");
	for (i = 1; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}
	tablinks[0].className += " active";

	}
	function openTab(evt, tabName) {
	// Declare all variables
	var i, tabcontent, tablinks;

	// Get all elements with class="tabcontent" and hide them
	tabcontent = document.getElementsByClassName("tabcontent");
	for (i = 0; i < tabcontent.length; i++) {
	tabcontent[i].style.display = "none";
	}

	// Get all elements with class="tablinks" and remove the class "active"
	tablinks = document.getElementsByClassName("tablinks");
	for (i = 0; i < tablinks.length; i++) {
	tablinks[i].className = tablinks[i].className.replace(" active", "");
	}

	// Show the current tab, and add an "active" class to the link that opened the tab
	document.getElementById(tabName).style.display = "block";
	evt.currentTarget.className += " active";
	}
	</script>
	</head>
	<body onload="init()">
	<div class="tab">
	{% for tab in tabs.keys() \| sort %}
	<button class="tablinks" onclick="openTab(event, '{{ tab }}')">
	<div class="node_name">{{ tab }}</div>
	<div class="smallgreytext">({{ counters[tab] }})</div>
	</button>
	{% endfor %}
	</div>
	{% for tab in tabs.keys() \| sort %}
	<div id="{{ tab }}" class="tabcontent">
	<table class="pkgversions">
	<tbody>
	<tr>
	<td class="Header">Reclass path</td>
	<td class="Header">{{ names[0] }}</td>
	<td class="Header">{{ names[1] }}</td>
	</tr>
	<tr><td colspan=3>Changes found in {{ tabs[tab]["path"] }}</td></tr>
	{% for diff in tabs[tab]["diffs"].keys() \| sort %}
	<tr>
	<td class="pkgName">
	<div class="class_file">{{ tabs[tab]["diffs"][diff]["class_file"] }}</div>
	<div class="param">{{ tabs[tab]["diffs"][diff]["param"] }}</div>
	</td>
	<td class="version">
	<div><pre>{{ tabs[tab]["diffs"][diff]["str_values"][0] \| linebreaks }}</pre></div>
	</td>
	<td class="version">
	<div><pre>{{ tabs[tab]["diffs"][diff]["str_values"][1] \| linebreaks }}</pre></div>
	</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>
	{% endfor %}
	</body>
	</html>