Fix installer and updater for use with backend JS

- include Modernizr in the installer as well (needed for no-js/js)
- reference backend JS before body instead of in head
- added container markup for installer error msgs
- some styling for tables in the installer
- remove obsolete no-js/js styles for JS-less installer
- compensate for the lack of iconfonts (due to the style.css not
  being piped through serendipity.css.php in the installer) by
  using different markup which works with system fonts
This commit is contained in:
Matthias Mees 2014-03-09 17:17:44 +01:00
parent 7497af7022
commit cc0a590ec6
3 changed files with 38 additions and 15 deletions

View File

@ -20,14 +20,14 @@
{/if} {/if}
{/if} {/if}
<fieldset id="el{$category@index}" class="config_optiongroup{if $config_groupkeys@last} config_optiongroup_last{/if} additional_info option_list"> <fieldset id="el{$category@index}" class="config_optiongroup{if $config_groupkeys@last} config_optiongroup_last{/if}{if $admin_vars.admin_installed} additional_info{/if} option_list">
<legend class="visuallyhidden">{$category.description}</legend> <legend class="visuallyhidden">{$category.description}</legend>
{foreach $category.items as $item} {foreach $category.items as $item}
{cycle assign='zebra_class' values='odd,even'} {cycle assign='zebra_class' values='odd,even'}
{if $item.guessedInput} {if $item.guessedInput}
{if $item.type == 'bool'} {if $item.type == 'bool'}
<fieldset class="clearfix {$zebra_class}"> <fieldset class="clearfix {$zebra_class}">
<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><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</legend></span> <span class="wrap_legend"><legend>{$item.title}{if $item.description != ''} <button class="toggle_info button_link" type="button" data-href="#{$item.var}_info">{if $admin_vars.admin_installed} <span class="icon-info-circled"></span>{else}<b>i</b>{/if}<span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</legend></span>
<div class="clearfix grouped"> <div class="clearfix grouped">
{$item.guessedInput} {$item.guessedInput}
</div> </div>
@ -37,7 +37,7 @@
</fieldset> </fieldset>
{else} {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}">
<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><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label> <label for="{$item.var}">{$item.title}{if $item.description != ''} <button class="toggle_info button_link" type="button" data-href="#{$item.var}_info">{if $admin_vars.admin_installed} <span class="icon-info-circled"></span>{else}<b>i</b>{/if}<span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
{$item.guessedInput} {$item.guessedInput}
{if $item.description != ''} {if $item.description != ''}
<span id="{$item.var}_info" class="field_info additional_info">{$item.description}</span> <span id="{$item.var}_info" class="field_info additional_info">{$item.description}</span>

View File

@ -6,8 +6,8 @@
<title>{$CONST.SERENDIPITY_ADMIN_SUITE}</title> <title>{$CONST.SERENDIPITY_ADMIN_SUITE}</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{serendipity_getFile file='admin/style.css'}"> <link rel="stylesheet" href="{serendipity_getFile file='admin/style.css'}">
<script src="{serendipity_getFile file='admin/js/modernizr-2.7.1.min.js'}"></script>
<script src="{serendipity_getFile file='jquery.js'}"></script> <script src="{serendipity_getFile file='jquery.js'}"></script>
<script src="{serendipity_getFile file='admin/serendipity_editor.js'}"></script>
</head> </head>
<body id="serendipity_admin_page"> <body id="serendipity_admin_page">
<header id="top"> <header id="top">
@ -21,9 +21,11 @@
<main class="clearfix serendipityAdminContent installer"> <main class="clearfix serendipityAdminContent installer">
<div id="content" class="clearfix"> <div id="content" class="clearfix">
{if $is_errors && is_array($errors)} {if $is_errors && is_array($errors)}
<ul class="plainList">
{foreach $errors AS $error} {foreach $errors AS $error}
<span class="msg_error">{$error}</span> <li><span class="msg_error">{$error}</span></li>
{/foreach} {/foreach}
</ul>
{/if} {/if}
{if $getstepint0} {if $getstepint0}
<h2>{$CONST.WELCOME_TO_INSTALLATION}</h2> <h2>{$CONST.WELCOME_TO_INSTALLATION}</h2>
@ -290,5 +292,7 @@
<footer id="meta"> <footer id="meta">
<p>{$ADMIN_FOOTER_POWERED_BY|sprintf:$versionInstalled:$phpversion}</p> <p>{$ADMIN_FOOTER_POWERED_BY|sprintf:$versionInstalled:$phpversion}</p>
</footer> </footer>
<script src="{serendipity_getFile file='admin/serendipity_editor.js'}"></script>
</body> </body>
</html> </html>

View File

@ -1021,6 +1021,18 @@ h4,
margin: 1.3125em 0; margin: 1.3125em 0;
} }
#diagnose caption {
margin-top: 0;
}
#diagnose tr {
border-bottom: 1px solid #aaa;
}
#diagnose td h5 {
margin: .5em 0;
}
.toggle_headline, .toggle_headline,
#category_list h3, #category_list h3,
h5, h5,
@ -1048,15 +1060,8 @@ summary {
.installer .msg_notice, .installer .msg_notice,
.installer .msg_hint { .installer .msg_hint {
display: inline-block; display: inline-block;
margin: 0 0 .5em;
padding: 0 .5em;
}
.installer dd .msg_error,
.installer dd .msg_success,
.installer dd .msg_notice,
.installer dd .msg_hint {
margin: .5em 0; margin: .5em 0;
padding: 0 .5em;
} }
.msg_error { .msg_error {
@ -1823,6 +1828,22 @@ form > .button_link:first-of-type,
margin: .75em 0 0; margin: .75em 0 0;
} }
.installer .toggle_info {
padding: 1px 2px;
position: relative;
top: -1px;
}
.installer .toggle_info b {
display: inline-block;
font-family: Georgia, 'Times New Roman', serif;
font-size: .875em;
line-height: 1;
width: 1em;
speak: none;
text-align: center;
}
.installer .field_info a, .installer .field_info a,
.installer .field_info a:visited { .installer .field_info a:visited {
color: #444; color: #444;
@ -2112,7 +2133,6 @@ label .perm_name,
.no-js .toggle_info, .no-js .toggle_info,
.no-js #category_list, .no-js #category_list,
.js .additional_info, .js .additional_info,
.installer .toggle_info,
.hidden, .hidden,
.msg_error > br, .msg_error > br,
.msg_success > br, .msg_success > br,
@ -2122,7 +2142,6 @@ label .perm_name,
visibility: hidden; visibility: hidden;
} }
.js .installer .additional_info,
.no-js .mfp-hide { .no-js .mfp-hide {
display: block !important; display: block !important;
visibility: visible; visibility: visible;