From eb49898a9c8369db5d76803795a5e9b5b0d59921 Mon Sep 17 00:00:00 2001
From: psychobunny <rodrigues.andrew@gmail.com>
Date: Fri, 21 Aug 2015 10:35:55 -0400
Subject: [PATCH] mobile tweaks for settings pages

---
 public/less/admin/mobile.less              |  5 +++-
 src/views/admin/general/homepage.tpl       |  2 +-
 src/views/admin/general/languages.tpl      |  2 +-
 src/views/admin/general/sounds.tpl         |  4 +--
 src/views/admin/settings/advanced.tpl      |  8 +++---
 src/views/admin/settings/email.tpl         |  8 +++---
 src/views/admin/settings/general.tpl       | 16 +++++------
 src/views/admin/settings/group.tpl         |  4 +--
 src/views/admin/settings/guest.tpl         |  8 +++---
 src/views/admin/settings/header.tpl        |  4 +--
 src/views/admin/settings/notifications.tpl |  4 +--
 src/views/admin/settings/pagination.tpl    | 12 ++++----
 src/views/admin/settings/post.tpl          | 32 +++++++++++-----------
 src/views/admin/settings/reputation.tpl    |  8 +++---
 src/views/admin/settings/sockets.tpl       |  4 +--
 src/views/admin/settings/tags.tpl          |  4 +--
 src/views/admin/settings/user.tpl          | 24 ++++++++--------
 src/views/admin/settings/web-crawler.tpl   |  8 +++---
 18 files changed, 80 insertions(+), 77 deletions(-)

diff --git a/public/less/admin/mobile.less b/public/less/admin/mobile.less
index 1d8ca8b945..b6039b795a 100644
--- a/public/less/admin/mobile.less
+++ b/public/less/admin/mobile.less
@@ -15,5 +15,8 @@
 }
 
 @media (max-width: 768px) {
-
+	.content-header, .settings-header {
+		font-size: 200%;
+		margin-bottom: 20px;
+	}
 }
\ No newline at end of file
diff --git a/src/views/admin/general/homepage.tpl b/src/views/admin/general/homepage.tpl
index 65a55ac7da..1d7bfbd216 100644
--- a/src/views/admin/general/homepage.tpl
+++ b/src/views/admin/general/homepage.tpl
@@ -1,6 +1,6 @@
 <div class="row">
 	<div class="col-xs-2">Home Page</div>
-	<div class="col-xs-10">
+	<div class="col-sm-10 col-xs-12">
 		<p>
 			Choose what page is shown when users navigate to the root URL of your forum.
 		</p>
diff --git a/src/views/admin/general/languages.tpl b/src/views/admin/general/languages.tpl
index 7100cabeac..b7642904a0 100644
--- a/src/views/admin/general/languages.tpl
+++ b/src/views/admin/general/languages.tpl
@@ -1,7 +1,7 @@
 <div class="languages">
 	<div class="row">
 		<div class="col-xs-2">Language Settings</div>
-		<div class="col-xs-10">
+		<div class="col-sm-10 col-xs-12">
 			<p>
 				The default language determines the language settings for all users who
 				are visiting your forum. <br />
diff --git a/src/views/admin/general/sounds.tpl b/src/views/admin/general/sounds.tpl
index fedfd4ad22..ec0000e007 100644
--- a/src/views/admin/general/sounds.tpl
+++ b/src/views/admin/general/sounds.tpl
@@ -2,7 +2,7 @@
 	<form role="form">
 		<div class="row">
 			<div class="col-xs-2">Notifications</div>
-			<div class="col-xs-10">
+			<div class="col-sm-10 col-xs-12">
 				<label for="notification">Notifications</label>
 				<div class="row">
 					<div class="form-group col-xs-9">
@@ -22,7 +22,7 @@
 
 		<div class="row">
 			<div class="col-xs-2">Chat Messages</div>
-			<div class="col-xs-10">
+			<div class="col-sm-10 col-xs-12">
 				<label for="chat-incoming">Incoming Message</label>
 				<div class="row">
 					<div class="form-group col-xs-9">
diff --git a/src/views/admin/settings/advanced.tpl b/src/views/admin/settings/advanced.tpl
index e675cd7194..f6c3417082 100644
--- a/src/views/admin/settings/advanced.tpl
+++ b/src/views/admin/settings/advanced.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Maintenance Mode</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Maintenance Mode</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -23,8 +23,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Domain Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Domain Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label for="allow-from-uri">Set ALLOW-FROM to Place NodeBB in an iFrame:</label>
diff --git a/src/views/admin/settings/email.tpl b/src/views/admin/settings/email.tpl
index 33099f124c..f5ab913b2d 100644
--- a/src/views/admin/settings/email.tpl
+++ b/src/views/admin/settings/email.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Email Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Email Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<p>
 				Please ensure that you have installed a third-party emailer (e.g. PostageApp, Mailgun, Mandrill, SendGrid, etc), otherwise emails will not be sent by NodeBB
@@ -30,8 +30,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Email Subscriptions</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Email Subscriptions</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label for="disableEmailSubscriptions" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
diff --git a/src/views/admin/settings/general.tpl b/src/views/admin/settings/general.tpl
index 3fd04d15bd..dec77abf77 100644
--- a/src/views/admin/settings/general.tpl
+++ b/src/views/admin/settings/general.tpl
@@ -1,10 +1,10 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">
+	<div class="col-sm-2 col-xs-12 settings-header">
 		Site Settings
 	</div>
-	<div class="col-xs-10">
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<label>Site Title</label>
 			<input class="form-control" type="text" placeholder="Your Community Name" data-field="title" />
@@ -32,8 +32,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Site Logo</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Site Logo</div>
+	<div class="col-sm-10 col-xs-12">
 		<div class="form-group">
 			<label for="logoUrl">Image</label>
 			<div class="input-group">
@@ -58,10 +58,10 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">
+	<div class="col-sm-2 col-xs-12 settings-header">
 		Favicon
 	</div>
-	<div class="col-xs-10">
+	<div class="col-sm-10 col-xs-12">
 		<div class="form-group">
 			<div class="input-group">
 				<input id="faviconUrl" type="text" class="form-control" placeholder="favicon.ico" data-field="brand:favicon" data-action="upload" data-target="faviconUrl" data-route="{config.relative_path}/api/admin/uploadfavicon" readonly />
@@ -74,8 +74,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Miscellaneous</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Miscellaneous</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
diff --git a/src/views/admin/settings/group.tpl b/src/views/admin/settings/group.tpl
index 9c4a28ebfc..fb71beda6b 100644
--- a/src/views/admin/settings/group.tpl
+++ b/src/views/admin/settings/group.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">General</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">General</div>
+	<div class="col-sm-10 col-xs-12">
 		<form role="form">
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
diff --git a/src/views/admin/settings/guest.tpl b/src/views/admin/settings/guest.tpl
index f4280820d2..0c39066c5f 100644
--- a/src/views/admin/settings/guest.tpl
+++ b/src/views/admin/settings/guest.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Guest Handles</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Guest Handles</div>
+	<div class="col-sm-10 col-xs-12">
 		<form role="form">
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -20,8 +20,8 @@
 
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Guest Privileges</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Guest Privileges</div>
+	<div class="col-sm-10 col-xs-12">
 		<form role="form">
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
diff --git a/src/views/admin/settings/header.tpl b/src/views/admin/settings/header.tpl
index 43b5e43a5c..62848c06d5 100644
--- a/src/views/admin/settings/header.tpl
+++ b/src/views/admin/settings/header.tpl
@@ -1,9 +1,9 @@
 <div class="settings">
 	<div class="row">
-		<div class="col-xs-2">
+		<div class="col-sm-2 col-xs-12 content-header">
 			Contents
 		</div>
-		<div class="col-xs-10">
+		<div class="col-sm-10 col-xs-12">
 			<nav class="section-content">
 				<ul></ul>
 			</nav>
diff --git a/src/views/admin/settings/notifications.tpl b/src/views/admin/settings/notifications.tpl
index 84d4a7da8d..bf8f6dae2b 100644
--- a/src/views/admin/settings/notifications.tpl
+++ b/src/views/admin/settings/notifications.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Notifications</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Notifications</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<strong>Welcome Notification</strong><br /> <textarea class="form-control" data-field="welcomeNotification"></textarea><br />
 			<strong>Welcome Notification Link</strong><br /> <input type="text" class="form-control" data-field="welcomeLink"><br />
diff --git a/src/views/admin/settings/pagination.tpl b/src/views/admin/settings/pagination.tpl
index 80805d3436..7a694ced55 100644
--- a/src/views/admin/settings/pagination.tpl
+++ b/src/views/admin/settings/pagination.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Pagination Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Pagination Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -15,8 +15,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Topic Pagination</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Topic Pagination</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<strong>Posts per Page</strong><br /> <input type="text" class="form-control" value="20" data-field="postsPerPage">
 		</form>
@@ -24,8 +24,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Category Pagination</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Category Pagination</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<strong>Topics per Page</strong><br /> <input type="text" class="form-control" value="20" data-field="topicsPerPage"><br />
 			<strong>Initial Number of Topics to Load on Unread, Recent, and Popular</strong><br /> <input type="text" class="form-control" value="20" data-field="topicsPerList">
diff --git a/src/views/admin/settings/post.tpl b/src/views/admin/settings/post.tpl
index 0522207f84..8697b81f4b 100644
--- a/src/views/admin/settings/post.tpl
+++ b/src/views/admin/settings/post.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Post Sorting</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Post Sorting</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label>Default Post Sorting</label>
@@ -25,8 +25,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Posting Restrictions</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Posting Restrictions</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label>Seconds between Posts</label>
@@ -69,8 +69,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Teaser Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Teaser Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label>Teaser Post</label>
@@ -85,8 +85,8 @@
 
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Signature Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Signature Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -115,8 +115,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Chat Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Chat Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<strong>Chat Message Inbox Size</strong><br /> <input type="text" class="form-control" value="250" data-field="chatMessageInboxSize">
 		</form>
@@ -124,8 +124,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Upload Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Upload Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -156,8 +156,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Composer Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Composer Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<p>
 				The following settings govern the functionality and/or appearance of the post composer shown
@@ -184,8 +184,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">IP Tracking</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">IP Tracking</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
diff --git a/src/views/admin/settings/reputation.tpl b/src/views/admin/settings/reputation.tpl
index d1ebc7ded7..41637e859c 100644
--- a/src/views/admin/settings/reputation.tpl
+++ b/src/views/admin/settings/reputation.tpl
@@ -2,8 +2,8 @@
 
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Reputation Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Reputation Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -23,8 +23,8 @@
 
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Activity Thresholds</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Activity Thresholds</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<strong>Minimum reputation to downvote posts</strong><br /> <input type="text" class="form-control" placeholder="0" data-field="privileges:downvote"><br />
 			<strong>Minimum reputation to flag posts</strong><br /> <input type="text" class="form-control" placeholder="0" data-field="privileges:flag"><br />
diff --git a/src/views/admin/settings/sockets.tpl b/src/views/admin/settings/sockets.tpl
index cf4dede341..c20c17bfe7 100644
--- a/src/views/admin/settings/sockets.tpl
+++ b/src/views/admin/settings/sockets.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Reconnection Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Reconnection Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label for="maxReconnectionAttempts">Max Reconnection Attempts</label>
diff --git a/src/views/admin/settings/tags.tpl b/src/views/admin/settings/tags.tpl
index 8955c76417..6c09dab80e 100644
--- a/src/views/admin/settings/tags.tpl
+++ b/src/views/admin/settings/tags.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Tag Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Tag Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
diff --git a/src/views/admin/settings/user.tpl b/src/views/admin/settings/user.tpl
index 9bda19659e..3cef877ac1 100644
--- a/src/views/admin/settings/user.tpl
+++ b/src/views/admin/settings/user.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Authentication</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Authentication</div>
+	<div class="col-sm-10 col-xs-12">
 		<form role="form">
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -41,8 +41,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Account Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Account Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -61,8 +61,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Avatars</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Avatars</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
@@ -114,8 +114,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Account Protection</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Account Protection</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label for="loginAttempts">Login attempts per hour</label>
@@ -141,8 +141,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">User Registration</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">User Registration</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label>Minimum Username Length</label>
@@ -169,8 +169,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">User Search</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">User Search</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="form-group">
 				<label>Number of results to display</label>
diff --git a/src/views/admin/settings/web-crawler.tpl b/src/views/admin/settings/web-crawler.tpl
index 9296877167..88b41571d2 100644
--- a/src/views/admin/settings/web-crawler.tpl
+++ b/src/views/admin/settings/web-crawler.tpl
@@ -1,8 +1,8 @@
 <!-- IMPORT admin/settings/header.tpl -->
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Crawlability Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Crawlability Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<strong>Custom Robots.txt <small>Leave blank for default</small></strong><br />
 			<textarea class="form-control" data-field="robots.txt"></textarea>
@@ -11,8 +11,8 @@
 </div>
 
 <div class="row">
-	<div class="col-xs-2 settings-header">Sitemap & Feed Settings</div>
-	<div class="col-xs-10">
+	<div class="col-sm-2 col-xs-12 settings-header">Sitemap & Feed Settings</div>
+	<div class="col-sm-10 col-xs-12">
 		<form>
 			<div class="checkbox">
 				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">