Created
November 20, 2016 05:34
-
-
Save DanielOaks/8815c0d007f8cbc21460dbd75eaa45c7 to your computer and use it in GitHub Desktop.
rotated headers patch for the IRCv3 site from @dequis, applies onto 6f92921038d7252be204848a8ab938fb866fd83b
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
diff --git a/_includes/software_list.html b/_includes/software_list.html | |
index bc5a4c1..add5006 100644 | |
--- a/_includes/software_list.html | |
+++ b/_includes/software_list.html | |
@@ -2,6 +2,4 @@ | |
{% if type.note %}{{ type.note | markdownify }}{% endif %} | |
-{% for support in site.data.irc_versions %} | |
{% include support_list.html %} | |
-{% endfor %} | |
diff --git a/_includes/support_list.html b/_includes/support_list.html | |
index d8a3e55..111f024 100644 | |
--- a/_includes/support_list.html | |
+++ b/_includes/support_list.html | |
@@ -1,21 +1,5 @@ | |
-{% capture support_key %}{{ support[0] }}{% endcapture %} | |
- | |
-{% capture anysupport %} | |
- {% for sw in type.software %} | |
- {% if sw.support contains support_key or sw.partial contains support_key %} | |
- Y | |
- {% endif %} | |
- {% endfor %} | |
-{% endcapture %} | |
- | |
-{% capture supportedspecs %}{% for spec in support[1].specs %}{% if spec[1].deprecated %}{% else %}Y{% endif %}{% endfor %}{% endcapture %} | |
- | |
-{% if anysupport contains "Y" %} | |
{% if hide_support_name %}{% else %} | |
#### {% if support_name %}{{ support_name }}{% else %}{{ support[1].name }} Support{% endif %} | |
-{% endif %} | |
- | |
-{% if support[1].note %}{{ support[1].note | markdownify }}{% endif %} | |
<div class="sw-table"><table> | |
<colgroup> | |
@@ -25,9 +9,11 @@ | |
<thead> | |
<tr> | |
<th>Name</th> | |
+{% for support in site.data.irc_versions %} | |
{% for ext in support[1].specs %}{% if ext[1].deprecated %}{% else %} | |
- <th class="support-head"><a title="{{ ext[1].description }}" href="{{ ext[1].link }}">{{ ext[1].name }}</a></th> | |
+ <th class="support-head rotate"><div><span><a title="{{ ext[1].description }}" href="{{ ext[1].link }}">{{ ext[1].name }}</a></span></div></th> | |
{% endif %}{% endfor %} | |
+{% endfor %} | |
</tr> | |
</thead> | |
<tbody> | |
@@ -55,6 +41,9 @@ | |
</div> | |
{% endif %} | |
</td> | |
+ | |
+{% for support in site.data.irc_versions %} | |
+{% capture support_key %}{{ support[0] }}{% endcapture %} | |
{% for ext in support[1].specs %} | |
{% capture ext_name %}{{ ext[0] }}{% endcapture %}{% if ext[1].deprecated %}{% else %} | |
<td class="support {% if sw.support[support_key] contains ext_name %}supported{% elsif sw.partial[support_key] contains ext_name %}partial{% elsif sw.na[support_key] contains ext_name %}na{% else %}unsupported{% endif %} {% if ext[1].required %}required{% else %}optional{% endif %}"> | |
@@ -75,6 +64,7 @@ | |
{% endif %} | |
</td> | |
{% endif %}{% endfor %} | |
+{% endfor %} | |
</tr> | |
{% endfor %} | |
</tbody> | |
diff --git a/css/ircv3-style.css b/css/ircv3-style.css | |
index c80695f..207f45a 100644 | |
--- a/css/ircv3-style.css | |
+++ b/css/ircv3-style.css | |
@@ -53,12 +53,8 @@ td + td, th + th { | |
.sw-table { | |
overflow-x: auto; | |
- width: 100%; | |
margin: 0 auto; | |
} | |
-.sw-table > table { | |
- min-width: 100%; | |
-} | |
.sw-table + h3 { | |
margin-top: 2.35em; | |
} | |
@@ -107,6 +103,7 @@ a.irc-extension { | |
.sw-table .support-head { | |
text-align: center; | |
font-size: 95%; | |
+ border-left: none; | |
} | |
.sw-table .support { | |
min-width: 2em; | |
@@ -133,6 +130,9 @@ a.irc-extension { | |
background-color: #eeaaa7; | |
color: #30100E; | |
} | |
+.sw-table td.optional + td.required { | |
+ border-right: 5px solid white; | |
+} | |
.sw-table td.required + td.optional { | |
border-left: 5px solid white; | |
} | |
@@ -418,3 +418,21 @@ footer p { | |
margin: 1rem 0 0; | |
padding: 0; | |
} | |
+th.rotate { | |
+ /* Something you can count on */ | |
+ height: 140px; | |
+ white-space: nowrap; | |
+} | |
+ | |
+th.rotate > div { | |
+ transform: | |
+ /* Magic Numbers */ | |
+ translate(15px, 41px) | |
+ /* 45 is really 360 - 45 */ | |
+ rotate(315deg); | |
+ width: 20px; | |
+} | |
+th.rotate > div > span { | |
+ border-bottom: 1px solid #ccc; | |
+ padding: 0px 0px; | |
+} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment