From 2e8a4c2b7d3c572df524183905ea24b91853d4d7 Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Wed, 9 Mar 2016 18:11:38 +0100
Subject: [PATCH] Overhauled "filter" sections

---
 .../files/acp/templates/attachmentList.tpl    | 50 ++++++-----
 .../files/acp/templates/languageItemList.tpl  | 84 +++++++++----------
 .../install/files/acp/templates/mediaList.tpl | 62 +++++++-------
 .../paidSubscriptionTransactionLogList.tpl    | 52 ++++++------
 .../files/acp/templates/templateList.tpl      | 60 ++++++-------
 wcfsetup/install/files/style/layout/grid.scss | 14 +++-
 6 files changed, 173 insertions(+), 149 deletions(-)

diff --git a/wcfsetup/install/files/acp/templates/attachmentList.tpl b/wcfsetup/install/files/acp/templates/attachmentList.tpl
index 35e74d87a9..150a19e503 100644
--- a/wcfsetup/install/files/acp/templates/attachmentList.tpl
+++ b/wcfsetup/install/files/acp/templates/attachmentList.tpl
@@ -22,29 +22,33 @@
 	<section class="section">
 		<h2 class="sectionTitle">{lang}wcf.global.filter{/lang}</h2>
 		
-		<dl>
-			<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
-			<dd>
-				<input type="text" id="username" name="username" value="{$username}" class="long" />
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="filename">{lang}wcf.attachment.filename{/lang}</label></dt>
-			<dd>
-				<input type="text" id="filename" name="filename" value="{$filename}" class="long" />
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="fileType">{lang}wcf.attachment.fileType{/lang}</label></dt>
-			<dd>
-				<select name="fileType" id="fileType">
-					<option value="">{lang}wcf.global.noSelection{/lang}</option>
-					{htmlOptions options=$availableFileTypes selected=$fileType}
-				</select>
-			</dd>
-		</dl>
+		<div class="row rowColGap">
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
+				<dd>
+					<input type="text" id="username" name="username" value="{$username}" class="long" />
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="filename">{lang}wcf.attachment.filename{/lang}</label></dt>
+				<dd>
+					<input type="text" id="filename" name="filename" value="{$filename}" class="long" />
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="fileType">{lang}wcf.attachment.fileType{/lang}</label></dt>
+				<dd>
+					<select name="fileType" id="fileType">
+						<option value="">{lang}wcf.global.noSelection{/lang}</option>
+						{htmlOptions options=$availableFileTypes selected=$fileType}
+					</select>
+				</dd>
+			</dl>
+			
+			{event name='filterFields'}
+		</div>	
 	</section>
 	
 	<div class="formSubmit">
diff --git a/wcfsetup/install/files/acp/templates/languageItemList.tpl b/wcfsetup/install/files/acp/templates/languageItemList.tpl
index f0cd8c0c0f..cf1c1d1649 100644
--- a/wcfsetup/install/files/acp/templates/languageItemList.tpl
+++ b/wcfsetup/install/files/acp/templates/languageItemList.tpl
@@ -19,49 +19,47 @@
 	<section class="section">
 		<h2 class="sectionTitle">{lang}wcf.global.filter{/lang}</h2>
 		
-		<dl>
-			<dt><label for="languageID">{lang}wcf.user.language{/lang}</label></dt>
-			<dd>
-				<select name="id" id="languageID">
-					{foreach from=$availableLanguages item=availableLanguage}
-						<option value="{@$availableLanguage->languageID}"{if $availableLanguage->languageID == $languageID} selected="selected"{/if}>{$availableLanguage->languageName} ({$availableLanguage->languageCode})</option>
-					{/foreach}
-				</select>
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="languageCategoryID">{lang}wcf.acp.language.category{/lang}</label></dt>
-			<dd>
-				<select name="languageCategoryID" id="languageCategoryID">
-					<option value="0">{lang}wcf.global.noSelection{/lang}</option>
-					{foreach from=$availableLanguageCategories item=availableLanguageCategory}
-						<option value="{@$availableLanguageCategory->languageCategoryID}"{if $availableLanguageCategory->languageCategoryID == $languageCategoryID} selected="selected"{/if}>{$availableLanguageCategory->languageCategory}</option>
-					{/foreach}
-				</select>
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="languageItem">{lang}wcf.global.name{/lang}</label></dt>
-			<dd>
-				<input type="text" id="languageItem" name="languageItem" value="{$languageItem}" class="long" />
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="languageItemValue">{lang}wcf.acp.language.item.value{/lang}</label></dt>
-			<dd>
-				<input type="text" id="languageItemValue" name="languageItemValue" value="{$languageItemValue}" class="long" />
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt></dt>
-			<dd>
-				<label><input type="checkbox" name="hasCustomValue" value="1" {if $hasCustomValue == 1}checked="checked" {/if}/> {lang}wcf.acp.language.item.customValues{/lang}</label>
-			</dd>
-		</dl>
+		<div class="row rowColGap">
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="languageID">{lang}wcf.user.language{/lang}</label></dt>
+				<dd>
+					<select name="id" id="languageID">
+						{foreach from=$availableLanguages item=availableLanguage}
+							<option value="{@$availableLanguage->languageID}"{if $availableLanguage->languageID == $languageID} selected="selected"{/if}>{$availableLanguage->languageName} ({$availableLanguage->languageCode})</option>
+						{/foreach}
+					</select>
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="languageCategoryID">{lang}wcf.acp.language.category{/lang}</label></dt>
+				<dd>
+					<select name="languageCategoryID" id="languageCategoryID">
+						<option value="0">{lang}wcf.global.noSelection{/lang}</option>
+						{foreach from=$availableLanguageCategories item=availableLanguageCategory}
+							<option value="{@$availableLanguageCategory->languageCategoryID}"{if $availableLanguageCategory->languageCategoryID == $languageCategoryID} selected="selected"{/if}>{$availableLanguageCategory->languageCategory}</option>
+						{/foreach}
+					</select>
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="languageItem">{lang}wcf.global.name{/lang}</label></dt>
+				<dd>
+					<input type="text" id="languageItem" name="languageItem" value="{$languageItem}" class="long" />
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="languageItemValue">{lang}wcf.acp.language.item.value{/lang}</label></dt>
+				<dd>
+					<input type="text" id="languageItemValue" name="languageItemValue" value="{$languageItemValue}" class="long" />
+					<label><input type="checkbox" name="hasCustomValue" value="1" {if $hasCustomValue == 1}checked="checked" {/if}/> {lang}wcf.acp.language.item.customValues{/lang}</label>
+				</dd>
+			</dl>
+			
+			{event name='filterFields'}
+		</div>
 	</section>
 	
 	<div class="formSubmit">
diff --git a/wcfsetup/install/files/acp/templates/mediaList.tpl b/wcfsetup/install/files/acp/templates/mediaList.tpl
index bc653aa38a..1a21f4067c 100644
--- a/wcfsetup/install/files/acp/templates/mediaList.tpl
+++ b/wcfsetup/install/files/acp/templates/mediaList.tpl
@@ -51,38 +51,40 @@
 {include file='formError'}
 
 <form method="post" action="{link controller='MediaList'}{/link}">
-	<section>
-		<h1 class="subHeadline">{lang}wcf.global.filter{/lang}</h1>
+	<section class="section">
+		<h2 class="sectionTitle">{lang}wcf.global.filter{/lang}</h2>
 		
-		<dl>
-			<dt><label for="filename">{lang}wcf.media.filename{/lang}</label></dt>
-			<dd>
-				<div class="inputAddon dropdown" id="mediaSearch">
-					<span class="button dropdownToggle inputPrefix">
-						<span class="active">{lang}wcf.media.search.filetype{/lang}</span>
-					</span>
-					<ul class="dropdownMenu">
-						<li data-file-type="image"><span>{lang}wcf.media.search.filetype.image{/lang}</span></li>
-						<li data-file-type="text"><span>{lang}wcf.media.search.filetype.text{/lang}</span></li>
-						<li data-file-type="pdf"><span>{lang}wcf.media.search.filetype.pdf{/lang}</span></li>
-						<li data-file-type="other"><span>{lang}wcf.media.search.filetype.other{/lang}</span></li>
-						{event name='filetype'}
-						<li class="dropdownDivider"></li>
-						<li data-file-type="all"><span>{lang}wcf.media.search.filetype.all{/lang}</span></li>
-					</ul>
-					<input type="text" id="filename" name="filename" value="{$filename}" class="long" />
-				</div>
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
-			<dd>
-				<input type="text" id="username" name="username" value="{$username}" class="long" />
-			</dd>
-		</dl>
+		<div class="row rowColGap">
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="filename">{lang}wcf.media.filename{/lang}</label></dt>
+				<dd>
+					<div class="inputAddon dropdown" id="mediaSearch">
+						<span class="button dropdownToggle inputPrefix">
+							<span class="active">{lang}wcf.media.search.filetype{/lang}</span>
+						</span>
+						<ul class="dropdownMenu">
+							<li data-file-type="image"><span>{lang}wcf.media.search.filetype.image{/lang}</span></li>
+							<li data-file-type="text"><span>{lang}wcf.media.search.filetype.text{/lang}</span></li>
+							<li data-file-type="pdf"><span>{lang}wcf.media.search.filetype.pdf{/lang}</span></li>
+							<li data-file-type="other"><span>{lang}wcf.media.search.filetype.other{/lang}</span></li>
+							{event name='filetype'}
+							<li class="dropdownDivider"></li>
+							<li data-file-type="all"><span>{lang}wcf.media.search.filetype.all{/lang}</span></li>
+						</ul>
+						<input type="text" id="filename" name="filename" value="{$filename}" class="long" />
+					</div>
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
+				<dd>
+					<input type="text" id="username" name="username" value="{$username}" class="long" />
+				</dd>
+			</dl>
 		
-		{event name='filterFields'}
+			{event name='filterFields'}
+		</div>	
 	</section>
 	
 	{event name='sections'}
diff --git a/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLogList.tpl b/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLogList.tpl
index 4300ed4eb0..445d2af4c7 100644
--- a/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLogList.tpl
+++ b/wcfsetup/install/files/acp/templates/paidSubscriptionTransactionLogList.tpl
@@ -17,33 +17,37 @@
 	<section class="section">
 		<h2 class="sectionTitle">{lang}wcf.global.filter{/lang}</h2>
 		
-		<dl>
-			<dt><label for="transactionID">{lang}wcf.acp.paidSubscription.transactionLog.transactionID{/lang}</label></dt>
-			<dd>
-				<input type="text" id="transactionID" name="transactionID" value="{$transactionID}" class="long" />
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
-			<dd>
-				<input type="text" id="username" name="username" value="{$username}" class="long" />
-			</dd>
-		</dl>
-		
-		{if $availableSubscriptions|count}
-			<dl>
-				<dt><label for="subscriptionID">{lang}wcf.acp.paidSubscription.subscription{/lang}</label></dt>
+		<div class="row rowColGap">
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="transactionID">{lang}wcf.acp.paidSubscription.transactionLog.transactionID{/lang}</label></dt>
+				<dd>
+					<input type="text" id="transactionID" name="transactionID" value="{$transactionID}" class="long" />
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="username">{lang}wcf.user.username{/lang}</label></dt>
 				<dd>
-					<select name="subscriptionID" id="subscriptionID">
-						<option value="0">{lang}wcf.global.noSelection{/lang}</option>
-						{foreach from=$availableSubscriptions item=availableSubscription}
-							<option value="{@$availableSubscription->subscriptionID}"{if $availableSubscription->subscriptionID == $subscriptionID} selected="selected"{/if}>{$availableSubscription->title|language}</option>
-						{/foreach}
-					</select>
+					<input type="text" id="username" name="username" value="{$username}" class="long" />
 				</dd>
 			</dl>
-		{/if}
+			
+			{if $availableSubscriptions|count}
+				<dl class="col-xs-12 col-md-4">
+					<dt><label for="subscriptionID">{lang}wcf.acp.paidSubscription.subscription{/lang}</label></dt>
+					<dd>
+						<select name="subscriptionID" id="subscriptionID">
+							<option value="0">{lang}wcf.global.noSelection{/lang}</option>
+							{foreach from=$availableSubscriptions item=availableSubscription}
+								<option value="{@$availableSubscription->subscriptionID}"{if $availableSubscription->subscriptionID == $subscriptionID} selected="selected"{/if}>{$availableSubscription->title|language}</option>
+							{/foreach}
+						</select>
+					</dd>
+				</dl>
+			{/if}
+			
+			{event name='filterFields'}
+		</div>
 	</section>
 	
 	<div class="formSubmit">
diff --git a/wcfsetup/install/files/acp/templates/templateList.tpl b/wcfsetup/install/files/acp/templates/templateList.tpl
index e8461949a6..e557cfb724 100644
--- a/wcfsetup/install/files/acp/templates/templateList.tpl
+++ b/wcfsetup/install/files/acp/templates/templateList.tpl
@@ -30,34 +30,38 @@
 	<section class="section">
 		<h2 class="sectionTitle">{lang}wcf.global.filter{/lang}</h2>
 		
-		<dl>
-			<dt><label for="templateGroupID">{lang}wcf.acp.template.group{/lang}</label></dt>
-			<dd>
-				<select name="templateGroupID" id="templateGroupID">
-					<option value="0">{lang}wcf.acp.template.group.default{/lang}</option>
-					{htmlOptions options=$availableTemplateGroups selected=$templateGroupID disableEncoding=true}
-				</select>
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="application">{lang}wcf.acp.template.application{/lang}</label></dt>
-			<dd>
-				<select name="application" id="application">
-					<option value="">{lang}wcf.acp.template.application.all{/lang}</option>
-					{foreach from=$availableApplications key=abbreviation item=availableApplication}
-						<option value="{$abbreviation}"{if $abbreviation == $application} selected="selected"{/if}>{$availableApplication}</option>
-					{/foreach}
-				</select>
-			</dd>
-		</dl>
-		
-		<dl>
-			<dt><label for="searchTemplateName">{lang}wcf.global.name{/lang}</label></dt>
-			<dd>
-				<input type="text" id="searchTemplateName" name="searchTemplateName" value="{$searchTemplateName}" class="long" />
-			</dd>
-		</dl>
+		<div class="row rowColGap">
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="templateGroupID">{lang}wcf.acp.template.group{/lang}</label></dt>
+				<dd>
+					<select name="templateGroupID" id="templateGroupID">
+						<option value="0">{lang}wcf.acp.template.group.default{/lang}</option>
+						{htmlOptions options=$availableTemplateGroups selected=$templateGroupID disableEncoding=true}
+					</select>
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="application">{lang}wcf.acp.template.application{/lang}</label></dt>
+				<dd>
+					<select name="application" id="application">
+						<option value="">{lang}wcf.acp.template.application.all{/lang}</option>
+						{foreach from=$availableApplications key=abbreviation item=availableApplication}
+							<option value="{$abbreviation}"{if $abbreviation == $application} selected="selected"{/if}>{$availableApplication}</option>
+						{/foreach}
+					</select>
+				</dd>
+			</dl>
+			
+			<dl class="col-xs-12 col-md-4">
+				<dt><label for="searchTemplateName">{lang}wcf.global.name{/lang}</label></dt>
+				<dd>
+					<input type="text" id="searchTemplateName" name="searchTemplateName" value="{$searchTemplateName}" class="long" />
+				</dd>
+			</dl>
+			
+			{event name='filterFields'}
+		</div>
 	</section>
 	
 	<div class="formSubmit">
diff --git a/wcfsetup/install/files/style/layout/grid.scss b/wcfsetup/install/files/style/layout/grid.scss
index 0cad8b927f..e1dc20d6f7 100644
--- a/wcfsetup/install/files/style/layout/grid.scss
+++ b/wcfsetup/install/files/style/layout/grid.scss
@@ -6,7 +6,7 @@
 
 /*
  * Heads up! This is a modified version containing only the sizes
- * "xs" (mobile) and "md" (desktop). Additionally the "push", "pulL",
+ * "xs" (mobile) and "md" (desktop). Additionally the "push", "pull",
  * "first" and "last" classes have been left out.
  */
 
@@ -335,3 +335,15 @@
 		align-self: flex-end;
 	}
 }
+
+// WoltLab's custom definitions below
+
+/* vertical gap between wrapped columns */
+.rowColGap {
+	margin-bottom: -1.875rem;
+	
+	> .col-xs-1, > .col-xs-2, > .col-xs-3, > .col-xs-4, > .col-xs-5, > .col-xs-6, > .col-xs-7, > .col-xs-8, > .col-xs-9, > .col-xs-10, > .col-xs-11, > .col-xs-12,
+	> .col-md-1, > .col-md-2, > .col-md-3, > .col-md-4, > .col-md-5, > .col-md-6, > .col-md-7, > .col-md-8, > .col-md-9, > .col-md-10, > .col-md-11, > .col-md-12 {
+		margin-bottom: 1.875rem !important;
+	}
+}
-- 
2.20.1