Chronos

Topic: Improved Admin layout Guide

This small modification (or more like a mini-theme) for 1.6 that changes the admin panel to better looking and slightly more useful version. It's not much more than a bit of theme tweaking and adding data.

For a screenshot, see: JobberBase Improved Admin Screenshot.

This mod should be fully compatible with the spotlight v2 mod, but only if this is installed *before* installing the spotlight update.

1. Open /admin/index.php

Find:

Code:
$smarty->assign('HTTP_REFERER', $_SERVER['HTTP_REFERER']);

Add Under:

Code:
$smarty->assign('jobs_count_all', $job->CountJobs());
$smarty->assign('jobs_count_all_categs', $job->GetJobsCountForAllCategs());

2. Open /admin/page_home.php

Find:

Code:
$smarty->assign('jobs', $the_jobs);

Add Under:

Code:
$smarty->assign('latest_jobs', $job->GetJobs(0, 0, 5, 0, 0));

3. Open /admin/screen.css (NOT the one in the root!)

Find and Remove:

Code:
.sidebar_page_edit {
    padding-top: 430px;
}

Also Add:

Code:
.admin-menu { width: 165px; }
    #job-posts, .admin-menu { border: 1px solid #0897C6; }
    #job-posts th, .admin-menu th { background-color: #0897C6; color: #FFF; font-weight: bold; }
    #sidebar { padding-left: 20px; }
    #sidebar h2 { margin-top: 0; margin-bottom: 7px; }
    #stats {    margin-left: 5px; }

4. Open /admin/_templates/posts-loop.tpl

Find:

Code:
{if !$jobs}
<div id="no-ads">
    {if $CURRENT_PAGE != 'search'}
    No jobs, yet.<br />
    {else}
    No jobs were found.<br />
    {/if}
</div><!-- #no-ads -->
{/if}

Replace with:

Code:
    <tr>
    <th>{$translations.adminpanel.details}</th>
    <th>{$translations.adminpanel.spotlight}</th>
    <th>{$translations.adminpanel.edit}</th>
    <th>{$translations.adminpanel.state}</th>
    <th>{$translations.adminpanel.delete}</th>
</tr>
{if !$jobs}
        {if $CURRENT_PAGE != 'search'}
        <tr><td colspan="5">No jobs, yet.</td></tr>
        {else}
        <tr><td colspan="5">No jobs where found.</td></tr>
        {/if}
{/if}

Find:

Code:
{foreach item=job from=$jobs name=tmp}
..lots of code...
{/foreach}

Replace With:

Code:
{foreach item=job from=$jobs name=tmp}

        <tr id="item{$job.id}">
            <td>
                {if $job.type_id == $smarty.const.JOBTYPE_FULLTIME}
                <img src="{$BASE_URL}img/icon-fulltime.png" alt="full-time" />
                {elseif $job.type_id == $smarty.const.JOBTYPE_PARTTIME}
                <img src="{$BASE_URL}img/icon-parttime.png" alt="part-time" />
                {elseif $job.type_id == $smarty.const.JOBTYPE_FREELANCE}
                <img src="{$BASE_URL}img/icon-freelance.png" alt="freelance" />
                {/if}
                <a href="{$BASE_URL_ADMIN}job/{$job.id}/{$job.url_title}/" title="{$job.title}">{$job.title}</a> <em>({$job.location})</em><br />
                <strong>{$translations.adminpanel.date}:</strong> {$job.created_on}
                <strong>{$translations.adminpanel.company}:</strong> {$job.company}<br />
            </td>
            <td style="font-size: 11px;">
                 {if $job.is_spotlight == 0}
                    <a id="activateSpotlight{$job.id}" href="javascript:void(0);" onclick="Jobber.SpotlightActivate('{$BASE_URL_ADMIN}activate-spotlight/', {$job.id}, {if $CURRENT_PAGE == ''}1{else}0{/if});" title="activate-spotlight"><img src="{$BASE_URL}img/icon_spotlight_activate.gif" alt="activate" /></a>
                {else}
                    <a id="deactivateSpotlight{$job.id}" href="javascript:void(0);" onclick="Jobber.SpotlightDeactivate('{$BASE_URL_ADMIN}deactivate-spotlight/', {$job.id});" title="deactivate-spotlight"><img src="{$BASE_URL}img/icon_spotlight_deactivate.gif" alt="deactivate" /></a>
                {/if}
            </td>
            </td>
            <td>
                <a href="{$BASE_URL_ADMIN}edit-post/{$job.id}/" title="edit"><img src="{$BASE_URL}img/icon_edit.gif" alt="edit" /></a>
            </td>
            <td>
                {if $job.is_active == 0}
                    <a id="activateLink{$job.id}" href="javascript:void(0);" onclick="Jobber.Activate('{$BASE_URL_ADMIN}activate/', {$job.id}, {if $CURRENT_PAGE == ''}1{else}0{/if});" title="activate"><img src="{$BASE_URL}img/icon_accept.gif" alt="activate" /></a>
                {else}
                    <a id="deactivateLink{$job.id}" href="javascript:void(0);" onclick="Jobber.Deactivate('{$BASE_URL_ADMIN}deactivate/', {$job.id});" title="deactivate"><img src="{$BASE_URL}img/icon_deactivate.gif" alt="deactivate" /></a>
                {/if}&nbsp;
            </td>
            <td>
                <a href="javascript:void(0);" onclick="Jobber.Delete('{$BASE_URL_ADMIN}delete/', {$job.id});" title="delete"><img src="{$BASE_URL}img/icon-delete.png" alt="delete" /></a>
            </td>
        </tr>
    {/foreach}

Find:

Code:
{$pages}
    {/if}

Add Under:

Code:
{if $CURRENT_PAGE == '' || $CURRENT_PAGE == 'home'}
    <h2>Latest Jobs</h2>
    <table id="job-posts" class="job-posts" cellspacing="0">
    <tr>
        <th>{$translations.adminpanel.details}</th>
        <th>{$translations.adminpanel.edit}</th>
        <th>{$translations.adminpanel.state}</th>
        <th>{$translations.adminpanel.delete}</th>
    </tr>
    {if !$latest_jobs}
        <tr><td colspan="5">No jobs, yet.</td></tr>
    {/if}

    {foreach item=latest_jobs from=$latest_jobs name=tmp}

        <tr id="item{$latest_jobs.id}">
            <td>
                {if $latest_jobs.type_id == $smarty.const.JOBTYPE_FULLTIME}
                <img src="{$BASE_URL}img/icon-fulltime.png" alt="full-time" />
                {elseif $latest_jobs.type_id == $smarty.const.JOBTYPE_PARTTIME}
                <img src="{$BASE_URL}img/icon-parttime.png" alt="part-time" />
                {elseif $latest_jobs.type_id == $smarty.const.JOBTYPE_FREELANCE}
                <img src="{$BASE_URL}img/icon-freelance.png" alt="freelance" />
                {/if}
                <a href="{$BASE_URL_ADMIN}job/{$latest_jobs.id}/{$latest_jobs.url_title}/" title="{$latest_jobs.title}">{$latest_jobs.title}</a> <em>({$latest_jobs.location})</em><br />
                <strong>{$translations.adminpanel.date}:</strong> {$latest_jobs.created_on}
                <strong>{$translations.adminpanel.company}:</strong> {$latest_jobs.company}<br />
            </td>
            </td>
            <td>
                <a href="{$BASE_URL_ADMIN}edit-post/{$latest_jobs.id}/" title="edit"><img src="{$BASE_URL}img/icon_edit.gif" alt="edit" /></a>
            </td>
            <td>
                {if $latest_jobs.is_active == 0}
                    <a id="activateLink{$latest_jobs.id}" href="javascript:void(0);" onclick="Jobber.Activate('{$BASE_URL_ADMIN}activate/', {$latest_jobs.id}, {if $CURRENT_PAGE == ''}1{else}0{/if});" title="activate"><img src="{$BASE_URL}img/icon_accept.gif" alt="activate" /></a>
                {else}
                    <a id="deactivateLink{$latest_jobs.id}" href="javascript:void(0);" onclick="Jobber.Deactivate('{$BASE_URL_ADMIN}deactivate/', {$latest_jobs.id});" title="deactivate"><img src="{$BASE_URL}img/icon_deactivate.gif" alt="deactivate" /></a>
                {/if}&nbsp;
            </td>
            <td>
                <a href="javascript:void(0);" onclick="Jobber.Delete('{$BASE_URL_ADMIN}delete/', {$latest_jobs.id});" title="delete"><img src="{$BASE_URL}img/icon-delete.png" alt="delete" /></a>
            </td>
        </tr>
    {/foreach}
    </table>
    <br />
    {/if}

5. Open /_includes/translations.ini

Add:

Code:
[adminpanel]
    welcome = "Welcome Admin"
    details = "Job details"
    date = "Date"
    company = "Company"
    spotlight = "Spotlight"
    edit = "Edit"
    state = "Status"
    delete = "Delete"
    home = "Admin Home"
    pages = "Custom Pages"
    categories = "Categories"
    statistics = "Statistics"
    changepass = "Change Password"
    logout = "Log Out"
    total = "total jobs"

6. Open /admin/_templates/page_edit.tpl

Find and Remove:

Code:
<div id="sidebar">..stuff..</div> (just before <div id="content">)

7. Make a new file named /admin/_templates/sidebar.tpl

Add:

Code:
{if $isAuthenticated == 1}
<h2>{$translations.adminpanel.welcome}</h2>
    <table class='admin-menu'>
    <tr><th>Menu</th></tr>
    <tr><td>
        <ul>
                <li>&raquo; <a href="{$BASE_URL_ADMIN}">{$translations.adminpanel.home}</a></li>
                <li>&raquo; <a href="{$BASE_URL_ADMIN}pages">{$translations.adminpanel.pages}</a></li>
                <li>&raquo; <a href="{$BASE_URL_ADMIN}categories">{$translations.adminpanel.categories}</a></li>
                <li>&raquo; <a href="{$BASE_URL_ADMIN}stats">{$translations.adminpanel.statistics}</a></li>
                <li>&raquo; <a href="{$BASE_URL_ADMIN}password">{$translations.adminpanel.changepass}</a></li>
                <li>&raquo; <a href="{$BASE_URL_ADMIN}logout">{$translations.adminpanel.logout}</a></li>
        </ul>
    </td></tr>
    </table>
        
    <br />
    
    <table class='admin-menu'>
    <tr><th>Statistics</th></tr>
    <tr><td>
            <div id="stats">
            <strong>{$jobs_count_all} {$translations.adminpanel.total}</strong>
            <br />
            {foreach item=job from=$jobs_count_all_categs}
            <strong>{$job.categ_count}</strong> in <a href="{$BASE_URL_ADMIN}jobs/{$job.categ_varname}/">{$job.categ_name}</a><br />
            {/foreach}
            </div><!-- #stats -->
    </td></tr>
    </table>
    
    <br /><br />
            
    {if $CURRENT_PAGE == 'pages' && $current_page}
            <div class="sidebar_page_edit">
                    <h3>Links</h3>
                    <p>Make a selection in the editor or select an existing link and click on one of the links bellow.</p>
                    <dl id="links_list">
                        <dt><strong>Internal</strong></dt>
                        <dd><a href="#" rel="{$BASE_URL}post/">Post a job</a></dd>
                        <dd><a href="#" rel="{$BASE_URL}ideal-vacature/">Ideal job</a></dd>
                        <dd><a href="#" rel="{$BASE_URL}rss/">RSS Feed</a></dd>
                        <dd><a href="#" rel="{$BASE_URL}companies/">Companies</a></dd>
                        <dt><strong>Categories</strong></dt>
                        {section name=tmp loop=$categories}
                        <dd><a href="#" rel="{$BASE_URL}jobs/{$categories[tmp].var_name}/">{$categories[tmp].name}</a></dd>
                        {/section}
                        <dt><strong>Pages</strong></dt>
                        {foreach from=$pages item=page}
                        <dd><a href="#" rel="{$BASE_URL}{$page.url}/">{$page.title}</a></dd>
                        {/foreach}
                    </dl>
                </div>
    {/if}
{/if}

8. Open /admin/_templates/header.tpl

Add at the bottom:

Code:
        <div id="sidebar">
            {include file="sidebar.tpl"}
        </div><!-- #sidebar -->

9. Open /admin/page_edit_post.php

Find:

Code:
$smarty->assign_by_ref('job', $jobToEdit);

Replace with:

Code:
$smarty->assign('job', $jobToEdit);

Last edited by Chronos (2009-04-29 12:11:34)

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

evertsemeijn

Re: Improved Admin layout Guide

Looking good. Did a similar thing ad also added 'All jobs' so I can see everything in one page if i want to.

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

marc-oliver

Re: Improved Admin layout Guide

Hello Chronos,

I don't get it – somethings aleways missing – see a BLANK screen after updating all files.

Could you please send me OR post all changed files as a .zip package for download?

Would be nice.

Thank you very much – appreciate it.

Warmest Regards,
Marc-Oliver, Whistler, BC, Canada

raghavsoni

Re: Improved Admin layout Guide

chronos could you have a relook at your code because after implementing this my job edit feature wont'work meaning it only shows the title on job data ....theproblem seems to be the tpl codes...whenever sidebar is included in header the post edit feature problem occurs

Last edited by raghavsoni (2009-04-04 05:57:26)

Chronos

Re: Improved Admin layout Guide

I've fixed the mod guide and after a test install on a clean jobberbase installation I didn't encounter any bugs.

@ marc-oliver - Blank pages usually appear if there's something basic as a closing ; missing in a PHP file, please check those adjustments (and that you didn't do replace instead of add and such).

@ raghavsoni - Check the new step #9, that's all that was needed to fix the empty job page.

Last edited by Chronos (2009-04-28 16:07:13)

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

iqglobal

Re: Improved Admin layout Guide

Hi there,

I've made all the code amends as listed, however my page layout seems wrong.... i get the sidebar modules, then beneath that the job listings start? Any suggestions?

Thanks in advance,

Paul

jobsin

Re: Improved Admin layout Guide

Hi Paul,

Is there an exact error you get? ...I used the exact codes seen above and all is working fine for me, really had no issue.

Regards,
Ruben

Jobs in Belgium & Jobs in the Netherlands - Jobs that most people love!

iqglobal

Re: Improved Admin layout Guide

Apologies, I got it solved; appears to be a compatability issue between IE7 and IE8

McLovin

Re: Improved Admin layout Guide

Thanks - Works fine for me

Chronos

Re: Improved Admin layout Guide

iqglobal, did you solve the IE8 problem, or are you using compatibility mode now? If you've found what caused it I'll update the guide, else I'll have a look on how to fix it.

Member of Jobberbase Development Team - Implementation and Coding

Visit my Blog: ChronoScripts (JobberBase scripts, support and freelance)
JobBoards: Telefonisch Werk and Top Bijbaan

spikescot20057800

Re: Improved Admin layout Guide

Iv'e gone wrong somewhere and don't know where as i get this error message:

Code:

Fatal error: Smarty error: [in posts-loop.tpl line 46]: syntax error: mismatched tag {/foreach}. expected {/if} (opened line 4). (Smarty_Compiler.class.php, line 2284) in /home/sites/dressmeupuk.com/public_html/jobs/_includes/smarty/libs/Smarty.class.php on line 1088

evertsemeijn

Re: Improved Admin layout Guide

@spikescot20057800 The error says that you have an unclosed {/if} around/on line 46 which was opened on line 4 in the file _templates/post-loop.tpl.

Looks like you need to add or move an {/if} to fix it. Maybe now can find the error yourself big_smile

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

spikescot20057800

Re: Improved Admin layout Guide

ok i'll add a {/if} on line 46

EDIT:

That didn't work so i restarted on that file and edited it 3 times but still get the same error message.

Last edited by spikescot20057800 (2009-06-14 14:08:03)

evertsemeijn

Re: Improved Admin layout Guide

Could you post your first 50-60 lines of the file? The way you hacked it of course...!

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

spikescot20057800

Re: Improved Admin layout Guide

Here it is -

Code:

{if $is_home == 1}
<div><a href="{$BASE_URL}">&laquo; home</a></div>
{/if}
{if $no_categ != 1}
<table id="job-posts" class="job-posts" cellspacing="0">
{if $keywords}
    <tr><td colspan="3" class="search_results_label">
        Search results for <strong>{$keywords}</strong>:
    </td></tr>
 <tr>
    <th>{$translations.adminpanel.details}</th>
    <th>{$translations.adminpanel.spotlight}</th>
    <th>{$translations.adminpanel.edit}</th>
    <th>{$translations.adminpanel.state}</th>
    <th>{$translations.adminpanel.delete}</th>
</tr>
{if !$jobs}
        {if $CURRENT_PAGE != 'search'}
        <tr><td colspan="5">No jobs, yet.</td></tr>
        {else}
        <tr><td colspan="5">No jobs where found.</td></tr>
        {/if}
{/if}
{foreach item=job from=$jobs name=tmp}

<tr id="item{$job.id}">
            <td>
                {if $job.type_id == $smarty.const.JOBTYPE_FULLTIME}
                <img src="{$BASE_URL}img/icon-fulltime.png" alt="full-time" />
                {elseif $job.type_id == $smarty.const.JOBTYPE_PARTTIME}
                <img src="{$BASE_URL}img/icon-parttime.png" alt="part-time" />
                {elseif $job.type_id == $smarty.const.JOBTYPE_FREELANCE}
                <img src="{$BASE_URL}img/icon-freelance.png" alt="freelance" />
                {/if}
                <a href="{$BASE_URL_ADMIN}job/{$job.id}/{$job.url_title}/" title="{$job.title}">{$job.title}</a> <em>({$job.location})</em><br />
                <strong>{$translations.adminpanel.date}:</strong> {$job.created_on}
                <strong>{$translations.adminpanel.company}:</strong> {$job.company}<br />
            </td>
            <td style="font-size: 11px;">
                 {if $job.is_spotlight == 0}
                    <a id="activateSpotlight{$job.id}" href="javascript:void(0);" onclick="Jobber.SpotlightActivate('{$BASE_URL_ADMIN}activate-spotlight/', {$job.id}, {if $CURRENT_PAGE == ''}1{else}0{/if});" title="activate-spotlight"><img src="{$BASE_URL}img/icon_spotlight_activate.gif" alt="activate" /></a>
                {else}
                    <a id="deactivateSpotlight{$job.id}" href="javascript:void(0);" onclick="Jobber.SpotlightDeactivate('{$BASE_URL_ADMIN}deactivate-spotlight/', {$job.id});" title="deactivate-spotlight"><img src="{$BASE_URL}img/icon_spotlight_deactivate.gif" alt="deactivate" /></a>
                {/if}
            </td>
            </td>
            <td>
                <a href="{$BASE_URL_ADMIN}edit-post/{$job.id}/" title="edit"><img src="{$BASE_URL}img/icon_edit.gif" alt="edit" /></a>
            </td>
            <td>
                {if $job.is_active == 0}
                    <a id="activateLink{$job.id}" href="javascript:void(0);" onclick="Jobber.Activate('{$BASE_URL_ADMIN}activate/', {$job.id}, {if $CURRENT_PAGE == ''}1{else}0{/if});" title="activate"><img src="{$BASE_URL}img/icon_accept.gif" alt="activate" /></a>
                {else}
                    <a id="deactivateLink{$job.id}" href="javascript:void(0);" onclick="Jobber.Deactivate('{$BASE_URL_ADMIN}deactivate/', {$job.id});" title="deactivate"><img src="{$BASE_URL}img/icon_deactivate.gif" alt="deactivate" /></a>
                {/if}&nbsp;
            </td>
            <td>
                <a href="javascript:void(0);" onclick="Jobber.Delete('{$BASE_URL_ADMIN}delete/', {$job.id});" title="delete"><img src="{$BASE_URL}img/icon-delete.png" alt="delete" /></a>
            </td>
        </tr>
    {/foreach}
</table>
<br/>
{$pages}
{/if}
<strong>{$translations.adminpanel.date}:</strong> {$latest_jobs.created_on}
                <strong>{$translations.adminpanel.company}:</strong> {$latest_jobs.company}<br />
            </td>
            </td>
            <td>
                <a href="{$BASE_URL_ADMIN}edit-post/{$latest_jobs.id}/" title="edit"><img src="{$BASE_URL}img/icon_edit.gif" alt="edit" /></a>
            </td>
            <td>
                {if $latest_jobs.is_active == 0}
                    <a id="activateLink{$latest_jobs.id}" href="javascript:void(0);" onclick="Jobber.Activate('{$BASE_URL_ADMIN}activate/', {$latest_jobs.id}, {if $CURRENT_PAGE == ''}1{else}0{/if});" title="activate"><img src="{$BASE_URL}img/icon_accept.gif" alt="activate" /></a>
                {else}
                    <a id="deactivateLink{$latest_jobs.id}" href="javascript:void(0);" onclick="Jobber.Deactivate('{$BASE_URL_ADMIN}deactivate/', {$latest_jobs.id});" title="deactivate"><img src="{$BASE_URL}img/icon_deactivate.gif" alt="deactivate" /></a>
                {/if}&nbsp;
            </td>
            <td>
                <a href="javascript:void(0);" onclick="Jobber.Delete('{$BASE_URL_ADMIN}delete/', {$latest_jobs.id});" title="delete"><img src="{$BASE_URL}img/icon-delete.png" alt="delete" /></a>
            </td>
        </tr>
    {/foreach}
    </table>
    <br />
    {/if}
{literal}
<script type="text/javascript">
    $(document).ready(function()
    {
        $(".job-posts tr").mouseover(function() {$(this).addClass("over");}).mouseout(function() {$(this).removeClass("over");});
        $(".job-posts tr:odd").addClass("alt");
    });
</script>
{/literal}

Last edited by spikescot20057800 (2009-06-14 16:02:13)

evertsemeijn

Re: Improved Admin layout Guide

Try editing the post-loop.tpl in the admin folder 'cause this is the post-loop.tpl that's being used in the frontend...!

4. Open /admin/_templates/post-loop.tpl ...

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

spikescot20057800

Re: Improved Admin layout Guide

Opps posted the wrong code. I have edited the above code to right code.

spikescot20057800

Re: Improved Admin layout Guide

Still not been able to resolve this any ideas?

Thanks in advance

evertsemeijn

Re: Improved Admin layout Guide

I would advise you to running the tutorial again on clean files.

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::

PopaWoody

Re: Improved Admin layout Guide

Pretty Nice implementation. How come it was done in table's instead of clean CSS/XHTML evert you did not use tables did you?

Im thinking of course not. lol

jobshouts.com A Jobberbased Derivative wink

evertsemeijn

Re: Improved Admin layout Guide

Hi Michael,
I didn't have anything to do with this mod wink I would have used div's (you know me)! Valid CSS and XHTML big_smile Been asked to join dev team so working on removing tables, killing bugs etc. How's JS doing? Not much change from the outside...!

Member of Jobberbase Development Team - Templates/Usability

:: Looking for a jobboard installation and/or custom design? ::