From a44dd9c3d3f4f4eaaf28c809ffa13bd341586f22 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 16 Apr 2016 12:50:56 +0200
Subject: [PATCH] Added proper styling for form grids

---
 .../install/files/acp/templates/pageList.tpl  | 84 ++++++++++---------
 wcfsetup/install/files/style/layout/form.scss | 12 +++
 2 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/pageList.tpl b/wcfsetup/install/files/acp/templates/pageList.tpl
index 65639ca559..1972e72de7 100644
--- a/wcfsetup/install/files/acp/templates/pageList.tpl
+++ b/wcfsetup/install/files/acp/templates/pageList.tpl
@@ -44,59 +44,61 @@
 	<section class="section">
 		<h2 class="sectionTitle">{lang}wcf.global.filter{/lang}</h2>
 		
-		<div class="row rowColGap">
-			<div class="row rowColGap col-xs-12 col-md-10">
-				<dl class="col-xs-12 col-md-4 wide">
-					<dt></dt>
-					<dd>
-						<input type="text" id="name" name="name" value="{$name}" placeholder="{lang}wcf.global.name{/lang}" class="long" />
-					</dd>
-				</dl>
-				
-				<dl class="col-xs-12 col-md-4 wide">
-					<dt></dt>
-					<dd>
-						<input type="text" id="pageTitle" name="title" value="{$title}" placeholder="{lang}wcf.acp.page.title{/lang}" class="long" />
-					</dd>
-				</dl>
-				
-				<dl class="col-xs-12 col-md-4 wide">
-					<dt></dt>
-					<dd>
-						<input type="text" id="pageContent" name="content" value="{$content}" placeholder="{lang}wcf.acp.page.content{/lang}" class="long" />
-					</dd>
-				</dl>
-				
-				<dl class="col-xs-12 col-md-4 wide">
-					<dt></dt>
-					<dd>
+		<div class="row rowColGap formGrid">
+			<dl class="col-xs-12 col-md-4">
+				<dt></dt>
+				<dd>
+					<input type="text" id="name" name="name" value="{$name}" placeholder="{lang}wcf.global.name{/lang}" class="long" />
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt></dt>
+				<dd>
+					<input type="text" id="pageTitle" name="title" value="{$title}" placeholder="{lang}wcf.acp.page.title{/lang}" class="long" />
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt></dt>
+				<dd>
+					<input type="text" id="pageContent" name="content" value="{$content}" placeholder="{lang}wcf.acp.page.content{/lang}" class="long" />
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt></dt>
+				<dd>
+					<label class="selectDropdown">
 						<select name="packageID" id="packageID">
 							<option value="0">{lang}wcf.acp.page.packageID{/lang}</option>
 							{foreach from=$availableApplications item=availableApplication}
 								<option value="{@$availableApplication->packageID}"{if $availableApplication->packageID == $packageID} selected="selected"{/if}>{$availableApplication->getAbbreviation()}: {$availableApplication->domainName}{$availableApplication->domainPath}</option>
 							{/foreach}
 						</select>
-					</dd>
-				</dl>
-				
-				<dl class="col-xs-12 col-md-4 wide">
-					<dt></dt>
-					<dd>
+					</label>
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt></dt>
+				<dd>
+					<label class="selectDropdown">
 						<select name="pageType" id="pageType">
 							<option value="">{lang}wcf.acp.page.pageType{/lang}</option>
 							<option value="static"{if $pageType == 'static'} selected="selected"{/if}>{lang}wcf.acp.page.pageType.static{/lang}</option>
 							<option value="system"{if $pageType == 'system'} selected="selected"{/if}>{lang}wcf.acp.page.pageType.system{/lang}</option>
 						</select>
-					</dd>
-				</dl>
-				
-				{event name='filterFields'}
-			</div>
+					</label>
+				</dd>
+			</dl>
 			
-			<div class="col-xs-12 col-md-2">
-				<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
-				{@SECURITY_TOKEN_INPUT_TAG}
-			</div>
+			{event name='filterFields'}
+		</div>
+		
+		<div class="formSubmit">
+			<input type="submit" value="{lang}wcf.global.button.submit{/lang}" accesskey="s" />
+			{@SECURITY_TOKEN_INPUT_TAG}
 		</div>
 	</section>
 </form>
diff --git a/wcfsetup/install/files/style/layout/form.scss b/wcfsetup/install/files/style/layout/form.scss
index b8adc56af1..8732e33fc2 100644
--- a/wcfsetup/install/files/style/layout/form.scss
+++ b/wcfsetup/install/files/style/layout/form.scss
@@ -208,3 +208,15 @@ input {
 		width: 100%;
 	}
 }
+
+/* grid-based form controls */
+.formGrid {
+	dt {
+		display: none;
+	}
+	
+	.selectDropdown,
+	select {
+		width: 100%;
+	}
+}
-- 
2.20.1