mbirth/LuckyCoinkydink
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

Rewrite positioning of .field_info.

Browse Source 
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
This commit is contained in:
Matthias Mees
2014-06-20 18:01:48 +02:00
parent f79ae2f3ae
commit 67213c247e
6 changed files with 40 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/2k11/admin/category.inc.tpl
View File

@ -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>

12
templates/2k11/admin/config_template.tpl
View File

@ -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}

4
templates/2k11/admin/groups.inc.tpl
View File

@ -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">

26
templates/2k11/admin/plugin_config_item.tpl
View File

@ -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}

3
templates/2k11/admin/serendipity_editor.js.tpl
View File

@ -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();
});

18
templates/2k11/admin/style.css
View File

@ -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;