Commit b1c2f4df0737a5a455a3fc98af4c0da9f6b33aef
2018-07-21T21:48:45
Improve download page typography (#1484) Fix some of the texts from breaking in weird ways.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
diff --git a/download.html b/download.html
index b6fd7ab..3b43f8e 100644
--- a/download.html
+++ b/download.html
@@ -11,11 +11,25 @@
form label {
display: block;
padding: .2em;
+ padding-left: 1.9em;
+ page-break-inside: avoid;
+ break-inside: avoid;
+ -webkit-column-break-inside: avoid;
}
-form input {
- margin-right: .7em;
-}
+ form label .name {
+ margin-right: .3em;
+ }
+
+ form label a.owner {
+ margin-left: 0;
+ hyphens: none;
+ }
+
+ form label input {
+ margin-right: .7em;
+ margin-left: -1.7em;
+ }
form > p:first-of-type > label {
font-size: 150%;
@@ -24,7 +38,7 @@ form > p:first-of-type > label {
form > p:first-of-type > label input {
vertical-align: .3em;
}
-
+
.filesize:empty {
display: none;
}
@@ -113,7 +127,7 @@ section.download {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
-
+
#download-css .download-button {
background-color: #dc9e23;
border-top-left-radius: 0;
@@ -129,7 +143,7 @@ section.download {
<header>
<div class="intro" data-src="templates/header-main.html" data-type="text/html"></div>
-
+
<h2>Customize your download</h2>
<p>Select your compression level, as well as the languages and plugins you need.</p>
</header>
@@ -141,29 +155,29 @@ section.download {
<label><input type="radio" name="compression" value="0" /> Development version</label>
<label><input type="radio" name="compression" value="1" checked /> Minified version</label>
</p>
-
+
<section id="components"></section>
-
+
<p>
Total filesize: <strong id="filesize"></strong> (<strong id="percent-js"></strong> JavaScript + <strong id="percent-css"></strong> CSS)
</p>
<p><strong>Note:</strong> The filesizes displayed refer to non-gizipped files and include any CSS code required. The CSS code is not minified.</p>
-
+
<section id="download">
<div class="error"></div>
<section id="download-js" class="download">
<pre><code class="language-javascript"></code></pre>
<a href="#" class="download-button" download="prism.js" target="_blank">Download JS</a>
</section>
-
+
<section id="download-css" class="download">
<pre><code class="language-css"></code></pre>
<a href="#" class="download-button" download="prism.css" target="_blank">Download CSS</a>
</section>
</section>
-
+
</form>
-
+
</section>
<footer data-src="templates/footer.html" data-type="text/html"></footer>
@@ -176,4 +190,4 @@ section.download {
<script src="download.js"></script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/download.js b/download.js
index 5db493a..7bc05d0 100644
--- a/download.js
+++ b/download.js
@@ -220,10 +220,18 @@ for (var category in components) {
all.meta.link? {
tag: 'a',
properties: {
- href: all.meta.link.replace(/\{id}/g, id)
+ href: all.meta.link.replace(/\{id}/g, id),
+ className: 'name'
},
contents: info.title
- } : info.title,
+ } : {
+ tag: 'span',
+ properties: {
+ className: 'name'
+ },
+ contents: info.title
+ },
+ ' ',
all[id].owner? {
tag: 'a',
properties: {
@@ -574,4 +582,4 @@ function getVersion() {
});
}
-})();
\ No newline at end of file
+})();