Admin-area with dropdown-menu

[onli]

I rewrote the admin-area of bulletproof to no longer use a sidebar, but a dropdown-menu in the banner instead.

It's pure css, so it should be accessible. Maybe you have a use for it. I had to get rid of the table-layout of the index.tpl to realize this, so this could be a good starting-point to think the admin-area over once again - but I tried not to break the old look

I'm not confident with the language. At the moment, I had to name the "personal" and the "logout"-menu manually because they don't exist in the normal design. And one thing I noticed: The menu-point for plugins and templates is labeled wrong as appearance. Ain't there a better language-constant to name this menu? I suggest something like "Enhancements".

As I'm not allowed to upload these files, I will paste them here:

style.css:

Code: Select all

/**********************************************************************/
/* Template: Bulletproof for Serendipity (http://www.s9y.org)         */
/* Authors: Matthias Mees, David Cummins and Don Chambers             */
/*                                                                    */
/* Stylesheet for the Bulletproof admin interface by Don Chambers     */
/* Fluid width design                                                 */
/*                                                                    */
/* http://s9y-bulletproof.com                                         */
/**********************************************************************/

body {
    font: 100.01% Verdana, Arial, Helvetica, sans-serif;
    margin: 5px 0 0 0;
    background: #888888;
    text-align: center;
}

/* body ID */
/* styles to this ID or body would have the same effect */
#serendipity_admin_page {
    height: 100%;
}

/* these are a default for headings not styled more specifically through an additional class */
h1 {font-size: 170%;}
h2 {font-size: 150%;}
h3 {font-size: 140%;}
h4 {font-size: 125%;}

/* all links except those specifically overridden by other class or id further down*/
a:link, a:visited, a:active {
   text-decoration: none;
   color: #055BC6;
}

a:hover {
    text-decoration: none;
    color: #FF6600;
}

/* approximately equal to frontend #wrapper but does not include footer         */
#serendipityAdminFrame {
    text-align: left;
    margin: 0px auto;
    border: 0;
    width: 96%;
    min-height: 96%;
    margin: 0% 2% 0% 2%;
    background: #ffffff;
}

#serendipityAdminFrame {
}

/* equal to frontend #serendipity_banner */
#serendipityAdminBanner {
    color: #ffffff;
    background: #5792D8 url('{TEMPLATE_PATH}img/bp_admin_banner_fluid.png') top left repeat-x;
    border: 3px solid #ffffff;
    line-height: 0.7em;
}

/* First line in banner, ie 'Serendipity Administration Suite' */
#serendipityAdminBanner h1 {
    font-weight: bold;
    padding: 0;
    margin: 17px 0 0 5px;
    color: #ffffff;
}

/* Second line in banner, ie blog name */ 
#serendipityAdminBanner h2 {
    font-weight: normal;
    padding: 0;
    margin-left: 5px;
    color: #ffffff;
}

/* approximately equal to BP frontend #sitenav when located below header */
#serendipityAdminInfopane {
    background: #CCCCCC url('{TEMPLATE_PATH}img/bp_admin_infopane_fluid.png') top left repeat-x;
    border-left: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    height: 24px;
    color: #055BC6;
}

/* approximately equal to frontend #content */
.serendipityAdminContent {
    padding: 3px 3px 10px 8px;
    text-align: left;
}

/* all content identified as a span, notably config descriptions */
/* !important required to override in-line styles                */
.serendipityAdminContent span{
    color: #055BC6 !important;
}

/* all fieldsets in admin content, such as "advanced options" */
.serendipityAdminContent fieldset {
    border: 1px solid #72878A;
}

.serendipityAdminContent legend {
    border: 1px solid #72878A;
    padding: 2px 5px;
    background-color: #DFDFDF;
}

/* welcome message on sign-on screen, ie */
/* 'welcome to serendipity admin suite'  */
/* 'please enter your credentials'       */
#serendipityAdminWelcome{
    color: #055BC6;
}

/* 'back to blog' link in bottom left of sign-on screen */
#serendipityBackToBlog {
    padding: 0 0 10px 10px;
}
/* welcome back text displayed after successfully logging in */
.serendipityWelcomeBack {
    color: #055BC6;
    margin: 0;
}

.further_links {
    float: right;
}

/***** SIDEBAR STYLES *****/

#sideBarMenu {
    position: absolute;
    text-align: center;
    width: 80%;
    font-size: 0.5em;
}

ul.serendipitySideBarMenu {
    list-style: none;
    width: 16%;
    padding: 0em;
    float: left;
    margin: 0em;
    cursor: default;
}


.serendipitySideBarMenuLink {
    display: none;
    /*padding: 0.3em 0 0.5em 0;*/
    margin-top: 0.2em;
    line-height: 2em;
    background: #EEEEEE;
}

.serendipitySideBarMenuLink a {
    display: block;
}

ul.serendipitySideBarMenu:hover .serendipitySideBarMenuLink {
    display: block;
    border: 1px solid black;
}

/***** END OF SIDEBAR STYLES *****/
span.user_info {
    float: right;
    font-size: 0.5em;
}

/* Admin items presented consecutively such as entries  */
/* comments, users, groups, templates etc.              */
/* first class common to both odd and even items        */
.serendipity_admin_list_item {
    border: 1px solid #72878A;
    margin: 0 0 5px 0;
}
/* only the uneven/odd list items */
.serendipity_admin_list_item_uneven {
    background: #DFDFDF;
}

/* only the even list items */
.serendipity_admin_list_item_even {
    background: #EEEEEE;
}

/* admin messages reporting an error */
.serendipityAdminMsgError {
    text-align: center; 
    font-weight: bold;
    margin: 10px 0;
    color: red;
    font-size: 100%;
    width: 22px;
    height: 22px;
    border: 0px;
    padding-right: 4px;
    vertical-align: middle
}

/* any message indicating no error */
.serendipityAdminMsgSuccess {
    text-align: center;
    font-weight: bold;
    margin: 10px 0; 
    color: green;
    font-size: 100%;
}

/* used in spartacus and plugin config*/
.serendipityAdminMsgNotice,
.serendipityAdminMsgNote {
    text-align: center;
    font-weight: bold;
    margin: 10px 0;
    color: blue;
    font-size: 100%;
}

/* installation and upgrade admin messages */
/* defined here due to this template's styling of all other spans */
/* these classes are available in s9y v1.3.2 and above */
.serendipityAdminContent span.serendipityAdminMsgSuccessInstall {
    color: green !important;
    font-weight: bold !important;
}

.serendipityAdminContent span.serendipityAdminMsgWarningInstall {
    color: orange !important;
    font-weight: bold !important;
}

.serendipityAdminContent span.serendipityAdminMsgErrorInstall{
    color: red !important;
    font-weight: bold !important;
}

/* Pending comments in the admins comment list */
.serendipity_admin_comment_pending {
    border: 2px solid #FF0000;
}

.serendipity_admin_comment_pending_header{
    background: #FFFF9D;
    border: 2px solid #FF0000;
    border-bottom: 0;
}

/* new input classes available in s9y v1.2 */
.input_checkbox, .input_radio, .input_file, .input_textbox, .input_button, label, select, textarea{
    font: 100% Verdana, Arial, Helvetica, sans-serif;
}
.input_textbox, select, textarea {
    border: 1px solid #72878A;
    background: #F8F9FA;
}

/* style for text of input buttons */
/* new class of input_button also exists for all input buttons */
input.serendipityPrettyButton,
a.serendipityPrettyButton {
    text-decoration: none;
    font-weight: bold;
    padding: 2px;
    margin: 2px 2px 0px 2px;
    color: #ffffff;
    cursor: pointer;
    background: #055BC6 url('{TEMPLATE_PATH}img/bp_admin_prettybutton.png') 0% 50%;
    border: 1px solid #055BC6;
    font-size: 90%;
}

/* make anchor version look more like the input version */
a.serendipityPrettyButton {
    padding: 3px;
}

/* entry preview window  */
#serendipity_iframe {
    border: 1px solid #72878A !important;
    text-align: left !important;
    margin: 0; }


/* this exists exclusively in /templates/default/admin/media_items.tpl */
.serendipityImageButton {
    cursor: pointer; }

/* icon links, such as edit, delete, reply, etc     */
/* IconLink is used when icon is left of link text  */
/* IconLinkRight is when icon is right of link text */
/* Style approx the same except for margin settings */
/* which provide separation between icon and text   */
a:link.serendipityIconLink,
a:visited.serendipityIconLink {
    border: 0;
    font-weight: bold;
    text-decoration: none;
    margin-right: 4px; }

.serendipityIconLink img {
    margin-right: 2px;
    vertical-align: bottom;
    border: 0; }

a:link.serendipityIconLinkRight,
a:visited.serendipityIconLinkRight {
    border: 0;
    font-weight: bold;
    text-decoration: none;
    margin-left: 4px; }

.serendipityIconLinkRight img {
    margin-left: 2px;
    vertical-align: bottom;
    border: 0; }

/* this is not really implemented, but classes do exist in backend code */
.direction_ltr {direction: ltr;}
.direction_rtl {direction: rtl;}

/*style for block that appears above list of available plugins available for installation */
/* usually contains a filter dropdown box */ 
.serendipity_pluginlist_header form{
    border: 1px solid #72878A;
    padding: 10px;
    margin: 0 0 15px 0;
    background: #EEEEEE;
}

/* style for block that appears above each type of plugin (Backend: User management, Frontend: Entry Related, etc)*/
.serendipity_pluginlist_section {
    margin:20px 0 20px 0;
    padding:10px;
    border:1px solid #72878A;
    color:#505050;
    line-height:1.5em;
    background: #EEEEEE;
}

/* custom fields within Advanced Options for entries */
#serendipity_customfields {
    width: 100%; }

#serendipity_customfields .customfield_name {
    background-color: #FAFAFA;
    width: 25%;
    padding-left: 5px; }

#serendipity_customfields .customfield_value {
    background-color: #FFFFFF;
    width: 75%;
    padding: 0;
}

#serendipity_customfields .customfield_value textarea {
    width: 100%;
    height: 100px;
    padding: 0;
    margin:0; }

/* left side window for choosing media to insert into entry */
#serendipityAdminBodyImageSelectorTree {
    width: auto;
    font-size: 73%;
}

#serendipityAdminBodyImageSelectorTree tbody{
    font-size: 80%;
}

/* right side window for choosing media to insert into entry */
/* will default to body background if not specified */
#serendipityAdminBodyImageSelector {
    width: auto;
    margin: 0px;
    background: #FFFFFF;
    font-size: 80%;
}

#serendipityAdminBodyImageSelector tbody{
    font-size: 80%;
}

/* Manage Styles - template name in list of available templates */
/* !important required to override inline style */
span.serendipityTemplateSelectName {
    color: #055BC6 !important;
}

/* New v1.2 class - a hover effect in the plugin list */
.serendipity_PluginAdminHighlight {
    background: #ededed;
}
/* Added class in s9y v1.2 */
/* container between AdminFrame and AdminFooter */
/* can be used to emulate a footer while allowing */
/* "powered by" text to fall below everything else in the actual footer */
.serendipityAdminFooterSpacer {
    display: none;
}

/* Equal to frontend #footer but falls below of #serendipityAdminFrame wrapper */
#serendipityAdminFooter {
    border: 0;
/*have to pick up some of the styles from wrapper so they apply to footer div below*/
    margin: 0 auto;
    background: #ffffff
    width: 95%;
    height: 24px;
    font-size: 70%;
    line-height: 24px;
    padding: 0;
    display: block;
}

index.tpl:

Code: Select all

<html>
    <head>
<!-- ADMIN-ENTRY TEMPLATE: index.tpl START -->
        <title>{$CONST.SERENDIPITY_ADMIN_SUITE}</title>
        <meta http-equiv="Content-Type" content="text/html; charset={$CONST.LANG_CHARSET}" />
        <link rel="stylesheet" type="text/css" href="{$admin_vars.css_file}" />
        <link rel="stylesheet" type="text/css" href="{$admin_vars.admin_css_file}" />

        <script type="text/javascript">
        {literal}
        function spawn() {
            if (self.Spawnextended) {
                Spawnextended();
            }

            if (self.Spawnbody) {
                Spawnbody();
            }

            if (self.Spawnnugget) {
                Spawnnugget();
            }
        }

        function SetCookie(name, value) {
            var today  = new Date();
            var expire = new Date();
            expire.setTime(today.getTime() + (60*60*24*30*1000));
            document.cookie = 'serendipity[' + name + ']='+escape(value) + ';expires=' + expire.toGMTString();
        }

        function addLoadEvent(func) {
          var oldonload = window.onload;
          if (typeof window.onload != 'function') {
            window.onload = func;
          } else {
            window.onload = function() {
              oldonload();
              func();
            }
          }
        }
        {/literal}

        </script>
    {if $admin_vars.admin_installed}
        {serendipity_hookPlugin hook="backend_header" hookAll="true"}
    {/if}
    </head>

    <body id="serendipity_admin_page" onload="spawn()">
        <div id="serendipityAdminFrame">

{*** BANNER START ***}
    {if NOT $admin_vars.no_banner}
        <div id="serendipityAdminBanner">
            {if $admin_vars.admin_installed}
                <a href="serendipity_admin.php"><h1>{$CONST.SERENDIPITY_ADMIN_SUITE}</h1></a>
                <a href="{$serendipityBaseURL}"><h2>{$blogTitle}</h2></a>
            {else}
                <h1>{$CONST.SERENDIPITY_INSTALLATION}</h1>
            {/if}
        </div>
        <div id="serendipityAdminInfopane">
            {if NOT $admin_vars.no_sidebar}
    {*** MAIN LINKS START ***}
                <div id="sideBarMenu">
                    <ul class="serendipitySideBarMenu serendipitySideBarMenuMain">
                        <li class="serendipitySideBarMenuHead serendipitySideBarMenuEntryLinks">Personal</li>
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuEntryLinks serendipitySideBarMenuMainFrontpage"><a href="serendipity_admin.php">{$CONST.ADMIN_FRONTPAGE}</a></li>
                        {if 'personalConfiguration'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuEntryLinks serendipitySideBarMenuMainPersonal"><a href="serendipity_admin.php?serendipity[adminModule]=personal">{$CONST.PERSONAL_SETTINGS}</a></li>
                        {/if}
                        <li class="serendipitySideBarMenuFoot serendipitySideBarMenuMainLinks" style="display:none"></li>
                    </ul>                                                                                          
    {*** MAIN LINKS END ***}

    {*** ENTRY LINKS START ***}
                    {if 'adminEntries'|checkPermission OR 'adminEntriesPlugins'|checkPermission}
                    <ul class="serendipitySideBarMenu serendipitySideBarMenuEntry">
                        <li class="serendipitySideBarMenuHead serendipitySideBarMenuEntryLinks">{$CONST.ADMIN_ENTRIES}</li>
                        {if 'adminEntries'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuEntryLinks"><a href="serendipity_admin.php?serendipity[adminModule]=entries&serendipity[adminAction]=new">{$CONST.NEW_ENTRY}</a></li>
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuEntryLinks"><a href="serendipity_admin.php?serendipity[adminModule]=entries&serendipity[adminAction]=editSelect">{$CONST.EDIT_ENTRIES}</a></li>
                        {/if}

                        {if 'adminComments'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuEntryLinks"><a href="serendipity_admin.php?serendipity[adminModule]=comments">{$CONST.COMMENTS}</a></li>
                        {/if}

                        {if 'adminCategories'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuEntryLinks"><a href="serendipity_admin.php?serendipity[adminModule]=category&serendipity[adminAction]=view">{$CONST.CATEGORIES}</a></li>
                        {/if}

                        {if 'adminEntries'|checkPermission OR 'adminEntriesPlugins'|checkPermission}
                        {if $admin_vars.no_create !== true} {serendipity_hookPlugin hook="backend_sidebar_entries" hookAll="true"}{/if}
                        {/if}
                        <li class="serendipitySideBarMenuFoot serendipitySideBarMenuEntryLinks" style="display:none"></li>
                    </ul>
                    {/if}
                    {*** ENTRY LINKS END ***}

    {*** MEDIA LINKS START ***}
                    {if 'adminImages'|checkPermission}
                    <ul class="serendipitySideBarMenu serendipitySideBarMenuMedia">
                        <li class="serendipitySideBarMenuHead serendipitySideBarMenuMediaLinks">{$CONST.MEDIA}</li>
                        {if 'adminImagesAdd'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuMediaLinks"><a href="serendipity_admin.php?serendipity[adminModule]=media&serendipity[adminAction]=addSelect">{$CONST.ADD_MEDIA}</a></li>
                        {/if}
                        {if 'adminImagesView'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuMediaLinks"><a href="serendipity_admin.php?serendipity[adminModule]=media">{$CONST.MEDIA_LIBRARY}</a></li>
                        {/if}
                        {if 'adminImagesDirectories'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuMediaLinks"><a href="serendipity_admin.php?serendipity[adminModule]=media&serendipity[adminAction]=directorySelect">{$CONST.MANAGE_DIRECTORIES}</a></li>
                        {/if}
                        {if 'adminImagesSync'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuMediaLinks"><a href="serendipity_admin.php?serendipity[adminModule]=media&serendipity[adminAction]=sync" onclick="return confirm('{$CONST.WARNING_THIS_BLAHBLAH}');">{$CONST.CREATE_THUMBS}</a></li>
                        {/if}
                        {if $admin_vars.no_create !== true} {serendipity_hookPlugin hook="backend_sidebar_entries_images" hookAll="true"}{/if}
                        <li class="serendipitySideBarMenuFoot serendipitySideBarMenuMediaLinks" style="display:none"></li>
                    </ul>
                    {/if}
    {*** MEDIA LINKS END ***}

    {*** APPEARANCE START ***}
                    {if 'adminTemplates'|checkPermission OR 'adminPlugins'|checkPermission}
                    <ul class="serendipitySideBarMenu serendipitySideBarMenuAppearance">
                        <li class="serendipitySideBarMenuHead serendipitySideBarMenuAppearanceLinks">Enhancements</li>
                        {if 'adminTemplates'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuAppearanceLinks"><a href="serendipity_admin.php?serendipity[adminModule]=templates">{$CONST.MANAGE_STYLES}</a></li>
                        {/if}
                        {if 'adminPlugins'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuAppearanceLinks"><a href="serendipity_admin.php?serendipity[adminModule]=plugins">{$CONST.CONFIGURE_PLUGINS}</a></li>
                        {/if}
                        {if $admin_vars.no_create !== true} {serendipity_hookPlugin hook="backend_sidebar_admin_appearance" hookAll="true"}{/if}
                        <li class="serendipitySideBarMenuFoot serendipitySideBarMenuAppearance" style="display:none"></li>
                    </ul>
                    {/if}
    {*** APPEARANCE END ***}

    {*** USER MANAGEMENT START ***}
                    {if 'adminUsersGroups'|checkPermission OR 'adminImport'|checkPermission OR 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission OR 'adminUsers'|checkPermission}
                    <ul class="serendipitySideBarMenu serendipitySideBarMenuUserManagement">
                        <li class="serendipitySideBarMenuHead serendipitySideBarMenuUserManagementLinks">{$CONST.ADMIN}</li>
                        {if 'siteConfiguration'|checkPermission OR 'blogConfiguration'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuUserManagementLinks"><a href="serendipity_admin.php?serendipity[adminModule]=configuration">{$CONST.CONFIGURATION}</a></li>
                        {/if}
                        {if 'adminUsers'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuUserManagementLinks"><a href="serendipity_admin.php?serendipity[adminModule]=users">{$CONST.MANAGE_USERS}</a></li>
                        {/if}
                        {if 'adminUsersGroups'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuUserManagementLinks"><a href="serendipity_admin.php?serendipity[adminModule]=groups">{$CONST.MANAGE_GROUPS}</a></li>
                        {/if}
                        {if 'adminImport'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuUserManagementLinks"><a href="serendipity_admin.php?serendipity[adminModule]=import">{$CONST.IMPORT_ENTRIES}</a></li>
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuUserManagementLinks"><a href="serendipity_admin.php?serendipity[adminModule]=export">{$CONST.EXPORT_ENTRIES}</a></li>
                        {/if}
                        {if 'siteConfiguration'|checkPermission || 'blogConfiguration'|checkPermission}
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuUserManagementLinks"><a href="serendipity_admin.php?serendipity[adminModule]=integrity">{$CONST.INTEGRITY}</a></li>
                        {/if}
                        {if $admin_vars.no_create !== true} {serendipity_hookPlugin hook="backend_sidebar_admin" hookAll="true"}{/if}
                        <li class="serendipitySideBarMenuFoot serendipitySideBarMenuUserManagement" style="display:none"></li>
                    </ul>
                    {/if}
    {*** USER MANAGEMENT END ***}

    {*** LOGOUT START ***}
                    <ul class="serendipitySideBarMenu serendipitySideBarMenuLogout">
                        <li class="serendipitySideBarMenuHead serendipitySideBarMenuLogoutLinks" >Logout</li>
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuLogoutLinks serendipitySideBarMenuLogoutWeblog"><a href="{$serendipityBaseURL}">{$CONST.BACK_TO_BLOG}</a></li>
                        <li class="serendipitySideBarMenuLink serendipitySideBarMenuLogoutLinks serendipitySideBarMenuLogoutLogout"><a href="serendipity_admin.php?serendipity[adminModule]=logout">{$CONST.LOGOUT}</a></li>
                        <li class="serendipitySideBarMenuFoot serendipitySideBarMenuLogoutLinks"></li>
                    </ul>
    {*** LOGOUT END ***}
                </div>
            {/if}
            {if $admin_vars.is_logged_in}
                <span class="user_info">{$admin_vars.self_info}</span>
            {/if}
        </div>
    {/if}
{*** BANNER END ***}

            
{if NOT $admin_vars.is_logged_in}
{*** LOGIN-AREA START ***}

    {$admin_vars.out|@serendipity_refhookPlugin:'backend_login_page'}
                <div class="serendipityAdminContent">
                    <div id="serendipityAdminWelcome" align="center">
                        <h2>{$CONST.WELCOME_TO_ADMIN}</h2>
                        <h3>{$CONST.PLEASE_ENTER_CREDENTIALS}</h3>
                        {$admin_vars.out.header}
                    </div>
                    {if $admin_vars.post_action != '' AND NOT $admin_vars.is_logged_in}
                        <div class="serendipityAdminMsgError"><img width="22px" height="22px" style="border: 0px; padding-right: 2px; vertical-align: middle" src="{serendipity_getFile file='admin/img/admin_msg_error.png'}" alt="" />{$CONST.WRONG_USERNAME_OR_PASSWORD}</div>
                    {/if}
                    <form action="serendipity_admin.php" method="post">
                        <input type="hidden" name="serendipity[action]" value="admin" />
                        <table id="serendipityAdminCredentials" cellspacing="10" cellpadding="0" border="0" align="center">
                            <tr>
                                <td>{$CONST.USERNAME}</td>
                                <td><input class="input_textbox" type="text" name="serendipity[user]" /></td>
                            </tr>
                            <tr>
                                <td>{$CONST.PASSWORD}</td>
                                <td><input class="input_textbox" type="password" name="serendipity[pass]" /></td>
                            </tr>
                            <tr>
                                <td colspan="2"><input class="input_checkbox" id="autologin" type="checkbox" name="serendipity[auto]" /><label for="autologin"> {$CONST.AUTOMATIC_LOGIN}</label></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="right"><input type="submit" name="submit" value="{$CONST.LOGIN} >" class="input_button serendipityPrettyButton" /></td>
                            </tr>
                            {$admin_vars.out.table}
                        </table>
                    </form>
                    {$admin_vars.out.footer}
                    <p id="serendipityBackToBlog"><a href="{$serendipityHTTPPath}">{$CONST.BACK_TO_BLOG}</a></p>
{*** LOGIN-AREA END ***}
{else}
    

    
                <div class="serendipityAdminContent">

    {*** MAIN CONTENT OF THE ADMIN INTERFACE START ***}
                    {$admin_vars.main_content}
    {*** MAIN CONTENT OF THE ADMIN INTERFACE END ***}

{/if}

                </div>
        </div>
        <div id="serendipityAdminFooter">
            <span>{$admin_vars.version_info}</span>
        </div>                            
    </body>
<!-- ADMIN-ENTRY TEMPLATE: index.tpl END -->
</html>

[Don Chambers]

Interesting..... I have toyed with the idea of using a navbar for those things too... Bulletproof only provides a stylesheet - it does not provide a custom admin/index.tpl. One of the reasons was future compatibility. Most of those links are hard coded, so the template would need to be updated if the core admin code ever changes. Either that, or the core needs to be changed, but that would likely break other templates, although very few actually provide a custom admin template.

[onli]

That's true. With "based on bulletproof" I meant based on it's stylesheet - the index.tpl was grabbed from the default.

Until now, I only know of codeschmiede, which has a custom style.css but no own index.tpl. If the core would be changed that way, adding the current index.tpl to these templates would prevent breaking them. I don't know if these changes alone justify the effort, but I hoped to collect some more improvements to the admin-area. The only issue really necessary and easy to fix is the wrong-labeled menu.

[onli]

Another small improvement: The title of the page changes when entering a menu, using one line of javascript. Changed the serendipity_admin.php to insert the code.
sincerely

PS: Not sure whether this belongs in an own thread or not, cause it's kind of related but not totally fitting to the headline - feel free to move this post

[stm999999999]

Another small improvement: The title of the page changes when entering a menu, using one line of javascript. Changed the serendipity_admin.php to insert the code.
sincerely

Do we have to use js for this?

Is it possible to make this via the admin/index.tpl in this context:

Code: Select all

{*** BANNER START ***}
        {if NOT $admin_vars.no_banner}
            <tr>
                <td colspan="2" id="serendipityAdminBanner">
                {if $admin_vars.admin_installed}
                    <h1>{$CONST.SERENDIPITY_ADMIN_SUITE}</h1>
                    <h2>{$blogTitle}</h2>
                {else}
                    <h1>{$CONST.SERENDIPITY_INSTALLATION}</h1>
                {/if}
                </td>
            </tr>
            <tr>
                <td colspan="2" id="serendipityAdminInfopane">
                    {if $admin_vars.is_logged_in}
                        <span>{$admin_vars.self_info}</span>
                    {/if}
                </td>
            </tr>
        {/if}
{*** BANNER END ***}

with a $CONST.ADMIN_MENUE_ITEM?

[stm999999999]

Until now, I only know of codeschmiede, which has a custom style.css but no own index.tpl. If the core would be changed that way, adding the current index.tpl to these templates would prevent breaking them.

I suggest to make these new index.tpl in a way that the old style (left side, no pulldown) is possible, too. The pulldown-menu should be the result of css only.

[onli]

I don't know of that's possible. Or to say it straight: I don't think it's possible to set a pulldown-menu into the banner without editing the index.tpl.

edit: Thought twice, it probably is possible to do this with css or with only such changes on the index.tpl which don't break anything when used with the old style.css. But it'd be a pity to use the old table-layout when another one is existing, given that we probably want to change the admin-area once more.

I don't know how the index.tpl should get the info which Menue-Item is loaded, but that don't mean it's impossible. Garvin?

[garvinhicking]

Hi!

I like the idea, but I also dislike javascript for this. The better way would be to assign a smarty variable in serendipity_Admin.php, just inside the huge switch() part starting at around line 100. Just set a variable like $title, and later in the code where $serendipity['smarty']->assign_by_ref('admin_vars') is done, put the title into the $admin_vars array.

HTH,
Garvin

[stm999999999]

edit: Thought twice, it probably is possible to do this with css or with only such changes on the index.tpl which don't break anything when used with the old style.css. But it'd be a pity to use the old table-layout when another one is existing, given that we probably want to change the admin-area once more.

I have nothing against a replacement of the table-styled menue! I mean it could be a good idea do design a new list-styled menue which can be displayed in the actual usual way as a list left-side or the modern variante on the top with dropdown - all with css.

[Don Chambers]

My Kinetic template uses dropdown (A.K.A "suckerfish") nav bars.... you can do it with just css in modern browsers, but with IE6 or older, you need js.

[onli]

Don, I'm not sure if that was totally understandable, so I'll point it out: the current implementation already uses only css. But it depends on having the div containing the menu being placed at another location in the dom.

JavaScript is only used for setting the title of the page, but I'll try the way described by Garvin to get rid of this.

[stm999999999]

in the moment I begin to dislike the idea of a normal pulldown menu, because you only see the top-items. In the classic s9y-list you can see every sub-item at once. But then we have the problem of space wastage which was the beginning of our considerations.

I think a good compromise can be seen here: http://www.projectseven.com/tutorials/a ... /index.htm

or have a look at https://www.simyo.de/de/informieren/index.html

the effect can be seen on "Tarif" or "Von A-Z" - this works without javascript!

we have a horizontal menu for space reducing, but we we can see all the sub-items of the actual used menu-item. And, going over another top-item we see its sub-items for the moment.

What do you think about it?

perhaps an usable example: http://css.maxdesign.com.au/listamatic2 ... ntal05.htm

but I think the best source of inspiration could be the simyo-site.

[onli]

1. title: I implemented garvins suggestion, diffs are against current admin-area.

Code: Select all

diff -Nur serendipity-nightly/serendipity_admin.php /var/www/serendipity_admin.php 
--- serendipity-nightly/serendipity_admin.php	2008-12-02 13:07:46.000000000 +0100
+++ /var/www/serendipity_admin.php	2009-05-21 11:20:40.000000000 +0200
@@ -109,6 +109,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/configuration.inc.php';
+            $title = ''.CONFIGURATION - SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'media':
@@ -118,6 +119,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/images.inc.php';
+            $title = ''.MEDIA.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'templates':
@@ -126,6 +128,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/templates.inc.php';
+            $title = ''.MANAGE_STYLES.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'plugins':
@@ -134,6 +137,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/plugins.inc.php';
+            $title = ''.CONFIGURE_PLUGINS.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'users':
@@ -142,6 +146,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/users.inc.php';
+            $title = ''.MANAGE_USERS.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'groups':
@@ -150,6 +155,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/groups.inc.php';
+            $title = ''.MANAGE_GROUPS.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'personal':
@@ -158,6 +164,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/personal.inc.php';
+            $title = ''.PERSONAL_SETTINGS.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'export':
@@ -166,6 +173,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/export.inc.php';
+            $title = ''.EXPORT_ENTRIES.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'import':
@@ -174,6 +182,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/import.inc.php';
+            $title = ''.IMPORT_ENTRIES.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'entries':
@@ -182,6 +191,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/entries.inc.php';
+            $title = ''.ADMIN_ENTRIES.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'comments':
@@ -190,6 +200,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/comments.inc.php';
+            $title = ''.COMMENTS.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'category':
@@ -199,6 +210,7 @@
             }
 
             include S9Y_INCLUDE_PATH . 'include/admin/category.inc.php';
+            $title = ''.CATEGORIES.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         case 'logout':
@@ -232,10 +244,12 @@
                 }
                 echo '</ul>';
             }
+            $title = ''.INTEGRITY.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
 
         default:
             include S9Y_INCLUDE_PATH . 'include/admin/overview.inc.php';
+            $title = ''.ADMIN_FRONTPAGE.' - '.SERENDIPITY_ADMIN_SUITE.'';
             break;
     }
 
@@ -244,7 +258,7 @@
 }
 
 if (!$use_installer && !$_SESSION['no_smarty'] && serendipity_smarty_init()) {
-    $poll_admin_vars = array('css_file', 'admin_css_file', 'main_content', 'no_banner', 'no_sidebar', 'post_action', 'is_logged_in', 'admin_installed', 'self_info', 'use_installer');
+    $poll_admin_vars = array('css_file', 'admin_css_file', 'main_content', 'no_banner', 'no_sidebar', 'post_action', 'is_logged_in', 'admin_installed', 'self_info', 'use_installer', 'title');
     $admin_vars = array();
     foreach($poll_admin_vars AS $poll_admin_var) {
         $admin_vars[$poll_admin_var] =& $$poll_admin_var;
@@ -253,6 +267,8 @@
     $admin_vars['out']              = array();
     $admin_vars['no_create']        = $serendipity['no_create'];
 
+    $admin_vars['title'] = $title;
+
     if ($serendipity['expose_s9y']) {
         $admin_vars['version_info'] = sprintf(ADMIN_FOOTER_POWERED_BY, $serendipity['versionInstalled'], phpversion());
     } else {

Code: Select all

iff -Nur serendipity-nightly/templates/default/admin/index.tpl /var/www/templates/default/admin/index.tpl 
--- serendipity-nightly/templates/default/admin/index.tpl	2008-12-02 13:07:46.000000000 +0100
+++ /var/www/templates/default/admin/index.tpl	2009-05-21 11:29:00.000000000 +0200
@@ -1,7 +1,7 @@
 <html>
     <head>
 <!-- ADMIN-ENTRY TEMPLATE: index.tpl START -->
-        <title>{$CONST.SERENDIPITY_ADMIN_SUITE}</title>
+        <title>{$admin_vars.title}</title>
         <meta http-equiv="Content-Type" content="text/html; charset={$CONST.LANG_CHARSET}" />
         <link rel="stylesheet" type="text/css" href="{$admin_vars.css_file}" />
         <link rel="stylesheet" type="text/css" href="{$admin_vars.admin_css_file}" />

2. It's not easy to implement this, because the menus can get larger or smaller based on the installed plugins. Don't you think that is not that important? People using serendipity does this more than once, so they will get the overview. For them, this is wasted space.
sincerely

[garvinhicking]

Hi!

Hm, does

Code: Select all

$title = ''.CONFIGURATION - SERENDIPITY_ADMIN_SUITE.'';

really work? This should be a substraction of strings and result in an empty string?

Code: Select all

$title = CONFIGURATION . ' - ' . SERENDIPITY_ADMIN_SUITE;

looks more pleasing and correct. If you could provide a patch for this (an uploaded .txt file?) I could commit it to the s9y SVN trunk.

Regards,
Garvin

[onli]

Just look at the other strings, that's the one I oversaw. Fixed

PS: Am not allowed to upload the index.tpl, even not as index.txt.