Rewrite positioning of .field_info.

Positioning of the info text was not ideal because it could be
placed way below the associated label if the associated config
element was larger than expected.

References #190

templates/2k11/admin/category.inc.tpl

@@ -82,6 +82,8 @@
                 <fieldset class="clearfix inputs">
                     <span class="wrap_legend"><legend>{$CONST.CATEGORY_HIDE_SUB} <a class="toggle_info button_link" href="#hide_subcats_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a></legend></span>
 
+                    <span id="hide_subcats_info" class="field_info additional_info">{$CONST.CATEGORY_HIDE_SUB_DESC}</span>
+
                     <div class="clearfix grouped">
                         <div class="form_radio">
                             <input id="hide_sub_yes" name="serendipity[cat][hide_sub]" type="radio" value="1"{if $this_cat.hide_sub== 1} checked="checked"{/if}>
@@ -93,8 +95,6 @@
                             <label for="hide_sub_no">{$CONST.NO}</label>
                         </div>
                     </div>
-
-                    <span id="hide_subcats_info" class="field_info additional_info">{$CONST.CATEGORY_HIDE_SUB_DESC}</span>
                 </fieldset>
             </div>
 

templates/2k11/admin/config_template.tpl

@@ -26,22 +26,22 @@
             {cycle assign='zebra_class' values='odd,even'}
             {if $item.guessedInput}
                 {if $item.type == 'bool'}
-                <fieldset class="clearfix {$zebra_class}">
+                <fieldset class="clearfix {$zebra_class}{if $item.description != ''} has_info{/if}">
                     <span class="wrap_legend"><legend>{$item.title}{if $item.description != ''} <button class="toggle_info button_link" type="button" data-href="#{$item.var}_info"><span class="icon-info-circled"></span><b>i</b><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</legend></span>
+                    {if $item.description != ''}
+                    <span id="{$item.var}_info" class="field_info additional_info">{$item.description}</span>
+                    {/if}
                     <div class="clearfix grouped">
                     {$item.guessedInput}
                     </div>
-                    {if $item.description != ''}
-                    <span id="{$item.var}_info" class="field_info additional_info">{$item.description}</span>
-                    {/if}
                 </fieldset>
                 {else}
-                <div class="clearfix {$zebra_class} form_{if $item.type == 'list'}select{elseif $item.type == 'multilist'}multiselect{elseif $item.type == 'textarea'}area{else}field{/if}">
+                <div class="clearfix {$zebra_class} form_{if $item.type == 'list'}select{elseif $item.type == 'multilist'}multiselect{elseif $item.type == 'textarea'}area{else}field{/if}{if $item.description != ''} has_info{/if}">
                     <label for="{$item.var}">{$item.title}{if $item.description != ''} <button class="toggle_info button_link" type="button" data-href="#{$item.var}_info"><span class="icon-info-circled"></span><b>i</b><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
-                    {$item.guessedInput}
                     {if $item.description != ''}
                     <span id="{$item.var}_info" class="field_info additional_info">{$item.description}</span>
                     {/if}
+                    {$item.guessedInput}
                 </div>
                 {/if}
             {/if}

templates/2k11/admin/groups.inc.tpl

@@ -35,10 +35,10 @@
     {if $edit}
         <input name="serendipity[group]" type="hidden" value="{$from.id}">
     {/if}
-        <div class="clearfix odd form_field">
+        <div class="clearfix odd form_field has_info">
             <label for="group_name">{$CONST.NAME} <button class="toggle_info button_link" type="button" data-href="#groupName_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button></label>
-            <input id="group_name" name="serendipity[name]" type="text" value="{$from.name|escape}">
             <span id="groupName_info" class="field_info additional_info">{$CONST.GROUP_NAME_DESC}</span>
+            <input id="group_name" name="serendipity[name]" type="text" value="{$from.name|escape}">
         </div>
 
         <div class="clearfix even form_select">

templates/2k11/admin/plugin_config_item.tpl

@@ -1,8 +1,9 @@
 {if $ctype == 'seperator'}
     <hr>
 {elseif $ctype == 'select'}
-    <div class="clearfix form_select">
+    <div class="clearfix form_select{if $cdesc != ''} has_info{/if}">
         <label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <button class="toggle_info button_link" type="button" data-href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
+        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
         {* Make sure id creation actually produces unique identifiers *}
         <select id="serendipity_{$config_item}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]{($is_multi_select) ? '[]' : ''}" {($is_multi_select) ? 'multiple' : ''} {($is_multi_select && ($select_size > 0)) ? "size='{$select_size}'" : ''}>
         {foreach $select AS $select_value => $select_desc}
@@ -11,11 +12,11 @@
             <option value="{$select_value}" {(in_array($select_value, $selected_options) || in_array($select_value, $pre_selected)) ? 'selected' : ''} title="{$select_desc|escape}">{$select_desc|escape}</option>
         {/foreach}
         </select>
-        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </div>
 {elseif $ctype == 'radio'}
-    <fieldset>
+    <fieldset{if $cdesc != ''} class="has_info"{/if}>
         <span class="wrap_legend"><legend>{$cname}{if $cdesc != ''} <button class="toggle_info button_link" type="button" data-href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</legend></span>
+        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
         <div class="clearfix grouped">
         {foreach $radio_button AS $r}
             <div class="form_radio">
@@ -25,20 +26,18 @@
             </div>
         {/foreach}
         </div>
-        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </fieldset>
 {elseif $ctype == 'string'}
-    <div class="clearfix form_field">
+    <div class="clearfix form_field{if $cdesc != ''} has_info{/if}">
         <label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <button class="toggle_info button_link" type="button" data-href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
-        <input id="serendipity_{$config_item}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" type="{$input_type}" value="{$hvalue}">
         {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
+        <input id="serendipity_{$config_item}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" type="{$input_type}" value="{$hvalue}">
     </div>
 {elseif (($ctype == 'html') || ($ctype == 'text'))}
-    <div class="clearfix form_area">
+    <div class="clearfix form_area{if $cdesc != ''} has_info{/if}">
         <label for="nuggets{$elcount}">{$cname}{if $cdesc != '' && !$backend_wysiwyg} <button class="toggle_info button_link" type="button" data-href="#nuggets{$elcount}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
-
-        <textarea id="nuggets{$elcount}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" rows="{$text_rows}">{$hvalue}</textarea>
         {if $cdesc != ''}<span id="nuggets{$elcount}_info" class="field_info additional_info">{$cdesc}</span>{/if}
+        <textarea id="nuggets{$elcount}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" rows="{$text_rows}">{$hvalue}</textarea>
     </div>
 {elseif $ctype == 'content'}
     <div class="clearfix">
@@ -54,23 +53,23 @@
         <input name="serendipity[{$postKey}][{$config_item}]" type="hidden" value="{$cbag_value}">
     </div>
 {elseif $ctype == 'media'}
-    <div class="clearfix form_field media_choose">
+    <div class="clearfix form_field media_choose{if $cdesc != ''} has_info{/if}">
         <label for="serendipity[{$postKey}][{$config_item}]">{$cname}{if $cdesc != ''} <button class="toggle_info button_link" type="button" data-href="#{$postKey}_{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
+        {if $cdesc != ''}<span id="{$postKey}_{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
 
         <input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" value="{$value}">{* This should maybe be input[type=file] *}
 
         <button class="choose_media" type="button" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden">{$CONST.MEDIA_LIBRARY}</span></button>
 
-        {if $cdesc != ''}<span id="{$postKey}_{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
-
         <figure id="{$config_item}_preview">
             <figcaption>{$CONST.PREVIEW}</figcaption>
             <img src="{$value}" alt="">
         </figure>
     </div>
 {elseif $ctype == 'sequence'}
-    <fieldset>
+    <fieldset{if $cdesc != ''} class="has_info"{/if}>
         <span class="wrap_legend"><legend>{$cname}{if $cdesc != ''} <button class="toggle_info button_link" type="button" data-href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</legend></span>
+        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
         <input id="{$config_item}_value" name="serendipity[{$postKey}][{$config_item}]" type="hidden" value="{$value}">
 
         <noscript>
@@ -114,6 +113,5 @@
     {if isset($no_sequence)}
         {$no_sequence}
     {/if}
-        {if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
     </fieldset>
 {/if}

templates/2k11/admin/serendipity_editor.js.tpl

@@ -1297,6 +1297,9 @@ $(function() {
         } else {
             $($el.data('href')).toggleClass('additional_info');
         }
+        if (mq_small.matches) {
+            $el.closest('.has_info').toggleClass('info_expanded');
+        }
         $el.toggleClass('active');
         e.preventDefault();
     });

templates/2k11/admin/style.css

@@ -1840,7 +1840,11 @@ form > .button_link:first-of-type,
 .option_list .even,
 .configure_plugin .config_optiongroup .odd,
 .configure_plugin .config_optiongroup .even {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
     padding-left: .4em;
+    padding-right: .4em;
 }
 
 .theme_options .odd,
@@ -1881,7 +1885,7 @@ form > .button_link:first-of-type,
 .field_info {
     clear: both;
     display: block;
-    margin: .75em 0 0;
+    margin: .75em 0;
 }
 
 .installer .toggle_info {
@@ -2868,7 +2872,6 @@ img.mfp-img {
 
     #hide_subcats_info {
         float: none;
-        margin: .85715em 0 0;
         width: 100%;
     }
 
@@ -2897,7 +2900,7 @@ img.mfp-img {
     }
 
     .field_info {
-        margin: .85715em 2% 0 0;
+        margin: .75em 2% .75em 0;
     }
 
     .configuration_group .form_select select,
@@ -2914,6 +2917,15 @@ img.mfp-img {
         max-width: 41.5%;
     }
 
+    .info_expanded select,
+    .info_expanded > input,
+    .info_expanded textarea,
+    .info_expanded .grouped,
+    .info_expanded .sequence_container {
+        position: relative;
+        top: -1.5em;
+    }
+
     .media_choose .button_link {
         position: relative;
         top: 2px;