Commit 868f66da8f77e95323c301b2754c2aebbbbed00a

Lea Verou 2013-05-19T01:48:17

Changed layout of download page to accommodate the growing number of languages

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