Changed layout of download page to accommodate the growing number of languages
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
diff --git a/components.js b/components.js
index dea30bc..ea4c035 100644
--- a/components.js
+++ b/components.js
@@ -20,6 +20,17 @@ var components = {
'prism-funky': 'Funky',
'prism-okaidia': 'Okaidia'
},
+ plugins: {
+ meta: {
+ path: 'plugins/{id}/prism-{id}',
+ link: 'plugins/{id}/',
+ hasCSS: true
+ },
+ 'line-highlight': 'Line Highlight',
+ 'show-invisibles': 'Show Invisibles',
+ 'autolinker': 'Autolinker',
+ 'wpd': 'WebPlatform Docs'
+ },
languages: {
meta: {
path: 'components/prism-{id}'
@@ -79,16 +90,5 @@ var components = {
title: 'Groovy',
require: 'clike'
}
- },
- plugins: {
- meta: {
- path: 'plugins/{id}/prism-{id}',
- link: 'plugins/{id}/',
- hasCSS: true
- },
- 'line-highlight': 'Line Highlight',
- 'show-invisibles': 'Show Invisibles',
- 'autolinker': 'Autolinker',
- 'wpd': 'WebPlatform Docs'
}
};
\ No newline at end of file
diff --git a/download.html b/download.html
index da20da5..ebf4bdf 100644
--- a/download.html
+++ b/download.html
@@ -51,6 +51,19 @@ section.options {
float: left;
}
+section.options#category-languages {
+ width: 100%;
+ float: none;
+ column-count: 3;
+ padding-top: 2em;
+ overflow: visible;
+}
+
+ section.options#category-languages > h1 {
+ margin-top: 0;
+ column-span: all;
+ }
+
section.download {
width: 50%;
float: left;
diff --git a/download.js b/download.js
index 57b6d01..d5d8d1e 100644
--- a/download.js
+++ b/download.js
@@ -2,7 +2,6 @@
* Manage downloads
*/
-
(function() {
var cache = {};
@@ -16,6 +15,7 @@ for (var category in components) {
all.meta.section = $u.element.create('section', {
className: 'options',
+ id: 'category-' + category,
contents: {
tag: 'h1',
contents: category.charAt(0).toUpperCase() + category.slice(1)
diff --git a/utopia.js b/utopia.js
index 2bdfc52..2843d2d 100644
--- a/utopia.js
+++ b/utopia.js
@@ -185,9 +185,10 @@ var _ = window.Utopia = {
element = document.createElement(options.tag);
}
- if(options.className) {
+ if (options.className || options.id) {
options.properties = options.properties || {};
options.properties.className = options.className;
+ options.properties.id = options.id;
}
// Set properties, attributes and contents