Amended the static site so that it is responsive

ThisIsManta · May 1, 2017 · b31372e · b31372e
1 parent 90bb6aa
commit b31372e
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 40 deletions.
diff --git a/docs/demo.js b/docs/demo.js
@@ -4,9 +4,18 @@ $(document).ready(function () {
 	const $input = $('#demo-input')
 	const $output = $('#demo-output')
 	$input.on('input', reformat)
+	$input.on('input', saveToLocalStorage)
+	$input.on('keydown', insertTwoSpacesInsteadOfTab)
+	$('#demo-options input, #demo-options select').on('change', reformat)
+	setTimeout(reformat, 600)
 
+	// Load saved input from local storage
+	if (window.localStorage) {
+		$input.val(window.localStorage.getItem('input'))
+	}
+
 	// Set default input
-	if ($input.val().trim() === '') {
+	if ($input.val().trim().length === 0) {
 		$input.val([
 			'@require "./file.styl"',
 			'.class1, .class2',
@@ -19,13 +28,9 @@ $(document).ready(function () {
 			'    background blue',
 			'  block =',
 			'    display none',
-		].join('\n'))
-
-		setTimeout(reformat)
+		].join('\n'))	
 	}
 
-	$('#demo-options input, #demo-options select').on('change', reformat)
-
 	function reformat() {
 		const options = {}
 		$('#demo input[type=checkbox]').toArray().forEach(elem => {
@@ -54,4 +59,26 @@ $(document).ready(function () {
 			$output.addClass('error').text(ex.message).prepend('<b>ERROR</b>: <br>')
 		}
 	}
+
+	function saveToLocalStorage(e) {
+		if (window.localStorage) {
+			if (e.target.value.trim().length > 0) {
+				window.localStorage.setItem('input', e.target.value)
+			} else {
+				window.localStorage.removeItem('input')
+			}
+		}
+	}
+
+	function insertTwoSpacesInsteadOfTab(e) {
+		if (e.which === 9 /* Tab */) {
+			// Insert 2 spaces instead of a tab
+			const cursor = e.target.selectionStart
+			e.target.value = e.target.value.substring(0, cursor) + '  ' + e.target.value.substring(e.target.selectionEnd)
+			e.target.selectionStart = cursor + 2
+			e.target.selectionEnd = cursor + 2
+
+			e.preventDefault()
+		}
+	}
 })
diff --git a/docs/format.js b/docs/format.js
diff --git a/docs/index.css b/docs/index.css
@@ -5,13 +5,18 @@ html {
 	cursor: default;
 }
 
+* {
+	font-size: 1em;
+}
+
 body {
 	font-family: 'Roboto', sans-serif;
 	margin: 0;
 	color: #212121;
+	overflow-x: hidden;
 }
 
-mark, data, code, samp {
+mark, code, samp {
 	font-family: 'Roboto Mono', monospace;
 	padding: 0 5px 2px 5px;
 }
@@ -29,7 +34,7 @@ a.nada {
 	text-decoration: none;
 }
 
-data {
+code.default-value {
 	background: #FFC400;
 }
 
@@ -73,7 +78,7 @@ s {
 	text-decoration: none;
 }
 
-.nobr {
+.no-break {
 	white-space: nowrap;
 }
 
@@ -345,11 +350,6 @@ table + table {
 	margin-top: 1rem;
 }
 
-#options data {
-	padding-left: 10px;
-	padding-right: 10px;
-}
-
 table {
 	width: 100%;
 	border-spacing: 0;
@@ -414,3 +414,22 @@ tr:nth-child(even) td:nth-child(odd) {
 		transform: translate3d(4px, 0, 0);
 	}
 }
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
+	html {
+		font-size: 20px;
+	}
+
+	main {
+		padding-bottom: 2rem;
+	}
+
+	article > code {
+		word-break: break-all;
+	}
+
+	#demo-options {
+		width: 100%;
+		left: 0;
+	}
+}
diff --git a/docs/index.html b/docs/index.html
diff --git a/edge/getCodeForFormatting.js b/edge/getCodeForFormatting.js
@@ -1,13 +1,11 @@
-const _ = require('lodash')
-
 function getCodeForFormatting(code) {
 	let lines = code.split(/\r?\n/)
 
 	while (lines[0].trim() === '') {
 		lines.shift()
 	}
 
-	const indent = _.get(lines[0].match(/(\s|\t)+/g), '0', '')
+	const indent = (lines[0].match(/(\s|\t)+/g) || [''])[0]
 	lines = lines.map(line => line.substring(indent.length))
 
 	return lines.join('\n')

diff --git a/edge/reviseDocumentation.js b/edge/reviseDocumentation.js
@@ -75,11 +75,11 @@ function createFormattingDescription() {
 		.map((item, name) => [
 			`<section id="option-${_.kebabCase(name)}">`,
 			`<h2>`,
-			`<mark>${name}</mark>`,
+			`<mark>${getBreakableLastWord(name)}</mark>`,
 			`<wbr>`,
-			`<data>${getNonBreakableForFirstWord('= ', JSON.stringify(item.default))}</data>`,
+			`<code class="default-value">${getNonBreakableFirstWord('= ', JSON.stringify(item.default))}</code>`,
 			`<wbr>`,
-			`<code>${getNonBreakableForFirstWord(': ', getType(item))}</code>`,
+			`<code>${getNonBreakableFirstWord(': ', getType(item))}</code>`,
 			`</h2>`,
 			item.description && item.description.split('\n').map(line => `<p>${line}</p>`).join(''),
 			item.hideInVSCE ? '<p>This option is not available in the Visual Studio Code extension.</p>' : '',
@@ -126,8 +126,13 @@ function createStylintConversionTable() {
 		}, {})
 
 	return _.map(stylintOptions, (item, name) =>
-		'<tr><td><mark class="alt">' + name + '</mark></td>' +
-		'<td>' + (_.some(stylintOptionMap[name]) ? (stylintOptionMap[name].map(item => `<mark>${item}</mark>`).join(', ')) : 'Not applicable') + '</td>'
+		'<tr>' +
+		'<td><mark class="alt">' + getBreakableLastWord(name) + '</mark></td>' +
+		'<td>' + (_.some(stylintOptionMap[name])
+			? (stylintOptionMap[name].map(item => '<mark>' + getBreakableLastWord(item) + '</mark>').join(', '))
+			: 'Not applicable') +
+		'</td>' +
+		'</tr>'
 	).join('')
 }
 
@@ -143,12 +148,25 @@ function getType(item) {
 	}
 }
 
-function getNonBreakableForFirstWord(prefix, text) {
+function getNonBreakableFirstWord(prefix, text) {
 	let pivot = text.indexOf(' ')
 	if (pivot === -1) {
 		pivot = text.length
 	}
-	return '<span class="nobr">' + prefix + text.substring(0, pivot) + '</span>' + text.substring(pivot)
+	return '<span class="no-break">' + prefix + text.substring(0, pivot) + '</span>' + text.substring(pivot)
+}
+
+function getBreakableLastWord(text) {
+	const pattern = _.camelCase(text)
+	if (text === pattern) {
+		return _.kebabCase(text)
+			.split('-')
+			.map((word, rank) => rank === 0 ? word : _.upperFirst(word))
+			.join('<wbr>')
+
+	} else {
+		return text
+	}
 }
 
 function getCodeForHTML(code) {