Overhauled "filter" sections

diff --git a/wcfsetup/install/files/acp/templates/attachmentList.tpl b/wcfsetup/install/files/acp/templates/attachmentList.tpl
index 35e74d87a996d2ab42affa83a1756970079da611..150a19e5034fdf39863d4a1c45e311c61926223c 100644 (file)
--- 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 f0cd8c0c0f1b165ba83e879bfe16b80381c25a44..cf1c1d1649de3d6445cb8a14929f0e41103dac47 100644 (file)
--- 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 bc653aa38ac71d0eb737ef24b4f3bcf75953308f..1a21f4067ca7e8a13941d702034496ebf0cc08e3 100644 (file)
--- 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 4300ed4eb0aea4972c4dedf20eacde46816709cd..445d2af4c75163f39289588363c7c58ec894fe19 100644 (file)
--- 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 e8461949a699649db0eb037b9274b0287107811e..e557cfb72421c1047f9d1639fae8eafe0384d160 100644 (file)
--- 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 0cad8b927f9b81a1a003c8e82f894b79cae6da73..e1dc20d6f7bc4602969db569113aecab1f89ff1d 100644 (file)
--- 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;
+       }
+}