[locationinfo] Two column view for location settings (for md and lg)

2 files changed, 223 insertions, 216 deletions

diff --git a/modules-available/locationinfo/templates/config.html b/modules-available/locationinfo/templates/config.html
index 9d088d6c..0c970f2a 100644
--- a/modules-available/locationinfo/templates/config.html
+++ b/modules-available/locationinfo/templates/config.html
@@ -1,74 +1,74 @@
-<div>
-	<form method="post" action="?do=locationinfo" id="configForm">
-		<input type="hidden" name="token" value="{{token}}">
-		<input type="hidden" name="action" value="updateConfig">
-		<input type="hidden" name="id" value="{{id}}">
+<form method="post" action="?do=locationinfo" id="configForm">
+	<input type="hidden" name="token" value="{{token}}">
+	<input type="hidden" name="action" value="updateConfig">
+	<input type="hidden" name="id" value="{{id}}">
 
-		<div class="panel panel-default">
-			<div class="panel-heading">{{lang_server}}</div>
-			<div class="panel-body">
-				<div class="list-group">
-
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_server}}</label>
-							</div>
-							<div class="col-md-7">
-								<select class="form-control" name="serverid">
-									<option value="0">{{lang_noServer}}</option>
-									{{#serverlist}}
-									<option value="{{sid}}" {{selected}}>{{servername}}</option>
-									{{/serverlist}}
-								</select>
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default helptext" title="{{lang_serverTooltip}}">
-									<span class="glyphicon glyphicon-question-sign"></span>
-								</a>
+	<div class="row">
+		<div class="col-md-6">
+			<div class="panel panel-default">
+				<div class="panel-heading">{{lang_server}}</div>
+				<div class="panel-body">
+					<div class="list-group">
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-sm-3">
+									<label>{{lang_server}}</label>
+								</div>
+								<div class="col-sm-7">
+									<select class="form-control" name="serverid">
+										<option value="0">{{lang_noServer}}</option>
+										{{#serverlist}}
+											<option value="{{sid}}" {{selected}}>{{servername}}</option>
+										{{/serverlist}}
+									</select>
+								</div>
+								<div class="col-sm-2">
+									<a class="btn btn-default helptext" title="{{lang_serverTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="list-group-item">
-						<div class="row">
-							<div class="col-md-3">
-								<label>{{lang_roomId}}</label>
-							</div>
-							<div class="col-md-7">
-								<input class="form-control" name="serverroomid" id="serverroomid" value="{{serverroomid}}">
-							</div>
-							<div class="col-md-2">
-								<a class="btn btn-default helptext" title="{{lang_roomIdTooltip}}">
-									<span class="glyphicon glyphicon-question-sign"></span>
-								</a>
+						<div class="list-group-item">
+							<div class="row">
+								<div class="col-sm-3">
+									<label>{{lang_roomId}}</label>
+								</div>
+								<div class="col-sm-7">
+									<input class="form-control" name="serverroomid" id="serverroomid" value="{{serverroomid}}">
+								</div>
+								<div class="col-sm-2">
+									<a class="btn btn-default helptext" title="{{lang_roomIdTooltip}}">
+										<span class="glyphicon glyphicon-question-sign"></span>
+									</a>
+								</div>
 							</div>
 						</div>
 					</div>
-
 				</div>
 			</div>
 		</div>
 
-		<div class="modify-inputs">
-			<div class="panel panel-default">
+		<div class="col-md-6">
+			<div class="modify-inputs panel panel-default">
 				<div class="panel-heading">{{lang_display}}</div>
 				<div class="panel-body">
 					<div class="list-group">
 
 						<div class="list-group-item">
 							<div class="row">
-								<div class="col-md-3">
+								<div class="col-sm-3">
 									<label>{{lang_language}}</label>
 								</div>
-								<div class="col-md-7">
+								<div class="col-sm-7">
 									<select class="form-control" name="language" id="language">
 										{{#languages}}
 											<option value="{{cc}}" id="lang-{{cc}}" {{selected}}>{{name}}</option>
 										{{/languages}}
 									</select>
 								</div>
-								<div class="col-md-2">
+								<div class="col-sm-2">
 									<a class="btn btn-default helptext" title="{{lang_languageTooltip}}">
 										<span class="glyphicon glyphicon-question-sign"></span>
 									</a>
@@ -78,10 +78,10 @@
 
 						<div class="list-group-item">
 							<div class="row">
-								<div class="col-md-3">
+								<div class="col-sm-3">
 									<label>{{lang_mode}}</label>
 								</div>
-								<div class="col-md-7">
+								<div class="col-sm-7">
 									<select class="form-control" name="mode" id="mode" onchange="modeChange()">
 										<option value="1" id="mode1">{{lang_mode1}}</option>
 										<option value="2" id="mode2">{{lang_mode2}}</option>
@@ -89,7 +89,7 @@
 										<option value="4" id="mode4">{{lang_mode4}}</option>
 									</select>
 								</div>
-								<div class="col-md-2">
+								<div class="col-sm-2">
 									<a class="btn btn-default helptext" title="{{lang_modeTooltip}}">
 										<span class="glyphicon glyphicon-question-sign"></span>
 									</a>
@@ -99,220 +99,224 @@
 
 						<div class="list-group-item">
 							<div class="row">
-								<div class="col-md-3">
+								<div class="col-sm-3">
 									<label>{{lang_ecoMode}}</label>
 								</div>
-								<div class="col-md-7">
+								<div class="col-sm-7">
 									<input type="checkbox" name="eco" {{eco_checked}}>
 								</div>
-								<div class="col-md-2">
+								<div class="col-sm-2">
 									<a class="btn btn-default helptext" title="{{lang_ecoTooltip}}">
 										<span class="glyphicon glyphicon-question-sign"></span>
 									</a>
 								</div>
 							</div>
 						</div>
-
 					</div>
 				</div>
 			</div>
-
-
-			<div class="panel panel-default" id="extra-div">
-				<div class="panel-heading">{{lang_mode}}</div>
-				<div class="panel-body">
-					<div class="list-group">
-
-						<div class="list-group-item m1-s m2-h m3-h m4-h">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_vertical}}</label>
-								</div>
-								<div class="col-md-7">
-									<input type="checkbox" name="vertical" {{vertical_checked}}>
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_verticalTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+		</div>
+	</div>
+
+	<div class="modify-inputs">
+		<div class="row">
+			<div class="col-md-6">
+				<div class="panel panel-default" id="extra-div">
+					<div class="panel-heading">{{lang_mode}}</div>
+					<div class="panel-body">
+						<div class="list-group">
+
+							<div class="list-group-item m1-s m2-h m3-h m4-h">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_vertical}}</label>
+									</div>
+									<div class="col-sm-7">
+										<input type="checkbox" name="vertical" {{vertical_checked}}>
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_verticalTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="list-group-item m1-s m2-s m3-h m4-s">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_autoScale}}</label>
-								</div>
-								<div class="col-md-7">
-									<input id="scaledaysauto" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}>
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_autoscaleTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+							<div class="list-group-item m1-s m2-s m3-h m4-s">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_autoScale}}</label>
+									</div>
+									<div class="col-sm-7">
+										<input id="scaledaysauto" type="checkbox" name="scaledaysauto" {{scaledaysauto_checked}}>
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_autoscaleTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="list-group-item m1-s m2-s m3-h m4-s">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_daysToShow}}</label>
-								</div>
-								<div class="col-md-7">
-									<select class="form-control" id="daystoshow" name="daystoshow">
-										<option value="1">1</option>
-										<option value="2">2</option>
-										<option value="3">3</option>
-										<option value="4">4</option>
-										<option value="5">5</option>
-										<option value="6">6</option>
-										<option value="7">7</option>
-									</select>
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_daysToShowTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+							<div class="list-group-item m1-s m2-s m3-h m4-s">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_daysToShow}}</label>
+									</div>
+									<div class="col-sm-7">
+										<select class="form-control" id="daystoshow" name="daystoshow">
+											<option value="1">1</option>
+											<option value="2">2</option>
+											<option value="3">3</option>
+											<option value="4">4</option>
+											<option value="5">5</option>
+											<option value="6">6</option>
+											<option value="7">7</option>
+										</select>
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_daysToShowTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="list-group-item m1-s m2-h m3-s m4-s">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_rotation}}</label>
-								</div>
-								<div class="col-md-7">
-									<select class="form-control" id="rotation" name="rotation">
-										<option value="0">{{lang_rotation0}}</option>
-										<option value="3">{{lang_rotation3}}</option>
-										<option value="2">{{lang_rotation2}}</option>
-										<option value="1">{{lang_rotation1}}</option>
-									</select>
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_rotationTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+							<div class="list-group-item m1-s m2-h m3-s m4-s">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_rotation}}</label>
+									</div>
+									<div class="col-sm-7">
+										<select class="form-control" id="rotation" name="rotation">
+											<option value="0">{{lang_rotation0}}</option>
+											<option value="3">{{lang_rotation3}}</option>
+											<option value="2">{{lang_rotation2}}</option>
+											<option value="1">{{lang_rotation1}}</option>
+										</select>
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_rotationTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="list-group-item m1-s m2-h m3-h m4-h">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_scale}}</label>
-								</div>
-								<div class="col-md-7">
-									<span><span class="range-display"></span>&thinsp;%</span>
-									<input name="scale" type="range" step="1" min="10" max="90" value="{{scale}}">
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_scaleTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+							<div class="list-group-item m1-s m2-h m3-h m4-h">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_scale}}</label>
+									</div>
+									<div class="col-sm-7">
+										<span><span class="range-display"></span>&thinsp;%</span>
+										<input name="scale" type="range" step="1" min="10" max="90" value="{{scale}}">
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_scaleTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="list-group-item m1-h m2-h m3-h m4-s">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_switchTime}}</label>
-								</div>
-								<div class="col-md-7">
-									<span><span class="range-display"></span>&thinsp;{{lang_sec}}</span>
-									<input name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}">
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_switchTimeTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+							<div class="list-group-item m1-h m2-h m3-h m4-s">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_switchTime}}</label>
+									</div>
+									<div class="col-sm-7">
+										<span><span class="range-display"></span>&thinsp;{{lang_sec}}</span>
+										<input name="switchtime" type="range" step="1" min="1" max="120" value="{{switchtime}}">
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_switchTimeTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
 						</div>
-
 					</div>
 				</div>
 			</div>
 
-			<div class="panel panel-default">
-				<div class="panel-heading">{{lang_updateRates}}</div>
-				<div class="panel-body">
-					<div class="list-group">
-
-						<div class="list-group-item">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_calendar}}</label>
-								</div>
-								<div class="col-md-7">
-									<input class="form-control" name="calupdate" type="number" min="0"
-											 max="1440" value="{{calupdate}}">
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_calupdateTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+			<div class="col-md-6">
+				<div class="panel panel-default">
+					<div class="panel-heading">{{lang_updateRates}}</div>
+					<div class="panel-body">
+						<div class="list-group">
+
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_calendar}}</label>
+									</div>
+									<div class="col-sm-7">
+										<input class="form-control" name="calupdate" type="number" min="0"
+												 max="1440" value="{{calupdate}}">
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_calupdateTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="list-group-item">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_room}}</label>
-								</div>
-								<div class="col-md-7">
-									<input class="form-control" name="roomupdate" type="number" min="0"
-											 max="86400" value="{{roomupdate}}">
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_roomupdateTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_room}}</label>
+									</div>
+									<div class="col-sm-7">
+										<input class="form-control" name="roomupdate" type="number" min="0"
+												 max="86400" value="{{roomupdate}}">
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_roomupdateTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<div class="list-group-item">
-							<div class="row">
-								<div class="col-md-3">
-									<label>{{lang_config}}</label>
-								</div>
-								<div class="col-md-7">
-									<input class="form-control" name="configupdate" type="number" min="0"
-											 max="1440" value="{{configupdate}}">
-								</div>
-								<div class="col-md-2">
-									<a class="btn btn-default helptext" title="{{lang_configupdateTooltip}}">
-										<span class="glyphicon glyphicon-question-sign"></span>
-									</a>
+							<div class="list-group-item">
+								<div class="row">
+									<div class="col-sm-3">
+										<label>{{lang_config}}</label>
+									</div>
+									<div class="col-sm-7">
+										<input class="form-control" name="configupdate" type="number" min="0"
+												 max="1440" value="{{configupdate}}">
+									</div>
+									<div class="col-sm-2">
+										<a class="btn btn-default helptext" title="{{lang_configupdateTooltip}}">
+											<span class="glyphicon glyphicon-question-sign"></span>
+										</a>
+									</div>
 								</div>
 							</div>
 						</div>
-
 					</div>
 				</div>
 			</div>
 		</div>
-
-		<div class="panel panel-default">
-			<div class="panel-heading">
-				<a class="btn btn-default helptext pull-right" title="{{lang_customUrlTooltip}}">
-					<span class="glyphicon glyphicon-question-sign"></span>
-				</a>
-				{{lang_customUrl}}
-				<div class="clearfix"></div>
-			</div>
-			<div class="panel-body">
-				<textarea rows="5" readonly class="form-control" id="custom-url"></textarea>
-			</div>
+	</div>
+
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<a class="btn btn-sm btn-default helptext pull-right" title="{{lang_customUrlTooltip}}">
+				<span class="glyphicon glyphicon-question-sign"></span>
+			</a>
+			{{lang_customUrl}}
+			<div class="clearfix"></div>
+		</div>
+		<div class="panel-body">
+			<textarea rows="5" readonly class="form-control" id="custom-url"></textarea>
 		</div>
-	</form>
-</div>
+	</div>
+</form>
 
 <script type="text/javascript"><!--
 
diff --git a/modules-available/locationinfo/templates/location-info.html b/modules-available/locationinfo/templates/location-info.html
index 419fb817..5b5e3e24 100644
--- a/modules-available/locationinfo/templates/location-info.html
+++ b/modules-available/locationinfo/templates/location-info.html
@@ -137,7 +137,7 @@
 		</div>
 	</div>
 </div>
-<script type="text/javascript">
+<script type="text/javascript"><!--
 	var lastPcSubTable = false;
 
 	/**
@@ -166,6 +166,7 @@
 	function loadSettingsModal(serverid, servername) {
 		$('#myModalHeader').text("{{lang_locationSettings}}").css("font-weight", "Bold");
 		$('#myModalSubmitButton').attr("Form", "settingsForm");
+		$('#myModal .modal-dialog').css('width', '');
 		$('#myModal').modal('show');
 		$('#myModalBody').load("?do=locationinfo&action=serverSettings&id=" + serverid);
 	}
@@ -178,6 +179,7 @@
 	 */
 	function loadTimeModal(locationId, locationName) {
 		$('#myModalHeader').text("[" + locationId + "] " + locationName).css("font-weight", "Bold");
+		$('#myModal .modal-dialog').css('width', '');
 		$('#myModal').modal('show');
 		$('#myModalBody').load("?do=locationinfo&action=timetable&id=" + locationId);
 	}
@@ -191,6 +193,7 @@
 	function loadConfigModal(locationId, locationName) {
 		$('#myModalHeader').text("[" + locationId + "] " + locationName).css("font-weight", "Bold");
 		$('#myModalSubmitButton').attr("Form", "configForm");
+		$('#myModal .modal-dialog').css('width', '90%');
 		$('#myModal').modal('show');
 		$('#myModalBody').load("?do=locationinfo&action=config&id=" + locationId);
 	}
@@ -232,4 +235,4 @@
 	function addServer() {
 		loadSettingsModal(0, '');
 	}
-</script>
+//--></script>