Improve layout and display of the feature matrix table (#1824)

.gitignore

@@ -23,5 +23,6 @@ stack.sh
 *.nupkg
 .DS_Store
 .vscode/launch.json
+.jekyll-cache
 
 dist/

build/generate/featureMatrix.go

@@ -140,10 +140,11 @@ var tmpl = template.Must(template.New("").Funcs(template.FuncMap{
 }).Parse(`{% comment %}
     Matrix generated by build/generate/featureMatrix.go. DO NOT HAND EDIT!
 {% endcomment %}{{$providers := .Providers}}
+<figure class="full-width">
 <table class="table-header-rotated">
 <thead>
 	<tr>
-	<th></th>
+	<th class="row-header rotate"><div><span>&nbsp;</span></div></th>
 	{{range $key,$val := $providers}}<th class="rotate"><div><span>{{$key}}</span></div></th>
 	{{end -}}
 	</tr>
@@ -163,4 +164,5 @@ var tmpl = template.Must(template.New("").Funcs(template.FuncMap{
 	{{end -}}
 </tbody>
 </table>
+</figure>
 `))

docs/_includes/matrix.html

@@ -1,10 +1,11 @@
 {% comment %}
     Matrix generated by build/generate/featureMatrix.go. DO NOT HAND EDIT!
 {% endcomment %}
+<figure class="full-width">
 <table class="table-header-rotated">
 <thead>
 	<tr>
-	<th></th>
+	<th class="row-header rotate"><div><span>&nbsp;</span></div></th>
 	<th class="rotate"><div><span>AKAMAIEDGEDNS</span></div></th>
 	<th class="rotate"><div><span>AUTODNS</span></div></th>
 	<th class="rotate"><div><span>AXFRDDNS</span></div></th>
@@ -168,6 +169,9 @@
 		<td class="danger">
 			<i class="fa fa-times text-danger" aria-hidden="true"></i>
 		</td>
+		<td class="danger">
+			<i class="fa fa-times text-danger" aria-hidden="true"></i>
+		</td>
 		<td class="success">
 			<i class="fa fa-check text-success" aria-hidden="true"></i>
 		</td>
@@ -1005,6 +1009,7 @@
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
+		<td><i class="fa fa-minus dim"></i></td>
 		<td class="danger">
 			<i class="fa fa-times text-danger" aria-hidden="true"></i>
 		</td>
@@ -1014,7 +1019,6 @@
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
-		<td><i class="fa fa-minus dim"></i></td>
 		</tr>
 	<tr>
 		<th class="row-header" style="text-decoration: underline;" data-toggle="tooltip" data-container="body" data-placement="top" title="Driver has explicitly implemented SRV record management">SRV</th>
@@ -1392,6 +1396,7 @@
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
+		<td><i class="fa fa-minus dim"></i></td>
 		</tr>
 	<tr>
 		<th class="row-header" style="text-decoration: underline;" data-toggle="tooltip" data-container="body" data-placement="top" title="Provider supports Route 53 limited ALIAS">R53_ALIAS</th>
@@ -1437,6 +1442,7 @@
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
+		<td><i class="fa fa-minus dim"></i></td>
 		<td class="success">
 			<i class="fa fa-check text-success" aria-hidden="true"></i>
 		</td>
@@ -1492,6 +1498,7 @@
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
+		<td><i class="fa fa-minus dim"></i></td>
 		<td class="danger">
 			<i class="fa fa-times text-danger" aria-hidden="true"></i>
 		</td>
@@ -1635,6 +1642,7 @@
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
 		<td><i class="fa fa-minus dim"></i></td>
+		<td><i class="fa fa-minus dim"></i></td>
 		</tr>
 	<tr>
 		<th class="row-header" style="text-decoration: underline;" data-toggle="tooltip" data-container="body" data-placement="top" title="This provider is recommended for use in &#39;dual hosting&#39; scenarios. Usually this means the provider allows full control over the apex NS records">dual host</th>
@@ -2017,6 +2025,9 @@
 		<td class="success">
 			<i class="fa fa-check text-success" aria-hidden="true"></i>
 		</td>
+		<td class="success">
+			<i class="fa fa-check text-success" aria-hidden="true"></i>
+		</td>
 		</tr>
 	<tr>
 		<th class="row-header" style="text-decoration: underline;" data-toggle="tooltip" data-container="body" data-placement="top" title="indicates the dnscontrol get-zones subcommand is implemented.">get-zones</th>
@@ -2147,3 +2158,4 @@
 		</tr>
 	</tbody>
 </table>
+</figure>

docs/css/site.css

@@ -16,6 +16,7 @@ body {
 
 .table-header-rotated {
   border-collapse: collapse;
+  margin: 0 auto;
 }
 
 .table-header-rotated td {
@@ -26,6 +27,10 @@ body {
   padding: 5px 10px;
 }
 
+.table-header-rotated th:first-child {
+  max-width: 120px;
+}
+
 .table-header-rotated td {
   text-align: center;
   padding: 10px 5px;
@@ -38,10 +43,12 @@ body {
 }
 
 .table-header-rotated th.rotate>div {
-  -webkit-transform: translate(25px, 51px) rotate(315deg);
+  -webkit-transform: translate(26px, 51px) rotate(315deg);
-  -ms-transform: translate(25px, 51px) rotate(315deg);
+  -ms-transform: translate(26px, 51px) rotate(315deg);
-  transform: translate(25px, 51px) rotate(315deg);
+  transform: translate(26px, 51px) rotate(315deg);
   width: 30px;
+  position: relative;
+  bottom: 1px;
 }
 
 .table-header-rotated th.rotate>div>span {
@@ -52,6 +59,39 @@ body {
 .table-header-rotated th.row-header {
   padding: 0 10px;
   border-bottom: 1px solid #ccc;
+  /* box-shadow since border-right doesn’t work */
+  box-shadow: 0.5px 0 0 #ccc;
+  background-color: white;
+  position: sticky;
+  left: 0;
+  z-index: 1;
+}
+.table-header-rotated thead tr:first-child th.row-header {
+  box-shadow: none;
+}
+
+.table-header-rotated th.row-header.rotate>div {
+  position: relative;
+  left: 43px;
+  bottom: 27px;
+}
+.table-header-rotated th.row-header.rotate>div>span {
+  display: inline-block;
+  width: 190px;
+  background-color: white;
+  line-height: 90px;
+}
+
+
+.full-width {
+  width: 100vw;
+  max-width: 100vw;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  left: 50%;
+  right: 50%;
+  position: relative;
+  overflow-x: auto;
 }
 
 .success {

docs/provider-list.md

@@ -2,7 +2,7 @@
 layout: default
 title: Service Providers
 ---
-<h1> Service Providers </h1>
+# Service Providers
 
 <table class='table table-bordered'>
   <thead>
@@ -17,19 +17,17 @@ title: Service Providers
 {% endfor %}
 </table>
 
-<a name="features"></a>
+## Provider Features {#features}
-<h2> Provider Features </h2>
 
-<p>The table below shows various features supported, or not supported by DNSControl providers.
+The table below shows various features supported, or not supported by DNSControl providers.
-  Underlined items have tooltips for more detailed explanation. This table is automatically generated
+Underlined items have tooltips for more detailed explanation. This table is automatically generated
-  from metadata supplied by the provider when they register themselves inside dnscontrol.
+from metadata supplied by the provider when they register themselves inside dnscontrol.
-</p>
+
-<p>
+An empty space may indicate the feature is not supported by a provider, or it may simply mean
-  An empty space may indicate the feature is not supported by a provider, or it may simply mean
+the feature has not been investigated and implemented yet. If a feature you need is missing from
-  the feature has not been investigated and implemented yet. If a feature you need is missing from
+a provider that supports it, we'd love your contribution to ensure it works correctly and add it to this matrix.
-  a provider that supports it, we'd love your contribution to ensure it works correctly and add it to this matrix.
+
-</p>
+If a feature is definitively not supported for whatever reason, we would also like a PR to clarify why it is not supported, and fill in this entire matrix.
-<p>If a feature is definitively not supported for whatever reason, we would also like a PR to clarify why it is not supported, and fill in this entire matrix.</p>
 <br/>
 <br/>