DIV-Layout with more space on time page

Discussion forum about Anuko Time Tracker
Post Reply
danklee
Posts: 3
Joined: Thu Mar 28, 2019 8:11 am
Location: Germany

DIV-Layout with more space on time page

Post by danklee » Fri Sep 13, 2019 1:32 pm

TimeTracker is a really good tool for management of time and projects. I'm providing and using it for more than 1,5 years. But I think, some things can be modified.

In my case 'time' page is main page for using TimeTracker. And 'week' page is a new feature for faster and more efficient time entries.
Both pages are limited through the table layout/design. In some other threads or on GitHub I have found some keywords like 'CSS' or responsive. So it can be easier to customizing layout. And it would be more modern, relating to separation of content and design.

For this reason I started with 'time' page (time.tpl) and replaced <table> by <div>s. So only the record-table left.
Now there is space on the left and right usable for further information or wider <input>s. In my example I use a three-column-div-layout.

Maybe there are some volunteers for testing and customizing. Just have a look to 'custom field on time page': viewtopic.php?t=1748

Feedback are welcome, after that I'll modify week.tpl.

@Admins: Or should I add all files to GitHub?

Thanks - Dan

PS: ttTimeHelper.class.php ==> you can find it on GitHub

Just one line:
config.php --> define('DIV_CSS', 'time_div.css'); // for additional CSS
header.tpl --> <link href="{$smarty.const.DIV_CSS}" rel="stylesheet" type="text/css"> // include additional CSS-file

time.tpl --> with less table-layout, so you can use more space on time page for showing time entries

Code: Select all

<!-- /** Version 2 - completly new **/ -->
{include file="time_script.tpl"}

<style>
.not_billable td {
  color: #ff6666;
}
</style>
{if $show_navigation}
    <div class="dayweek">
      <a href="time.php?date={$selected_date->toString()}">{$i18n.label.day_view}</a>&nbsp;/&nbsp;<a href="week.php?date={$selected_date->toString()}">{$i18n.label.week_view}</a>
    </div>
{/if}

{$forms.timeRecordForm.open}
<div class="left">
{if $user_dropdown}
    <label>{$i18n.label.user}:</label>
    {$forms.timeRecordForm.user.control}
    <br class="clearall">
{/if}
{if $show_client}
    <label>{$i18n.label.client}{if $user->isOptionEnabled('client_required')} (*){/if}:</label>
    {$forms.timeRecordForm.client.control}
    <br class="clearall">
{/if}
{if $user->isPluginEnabled('iv')}
    <label>&nbsp;</label>
    {$forms.timeRecordForm.billable.control}{$i18n.form.time.billable}
    <br class="clearall">      
{/if}
{if $custom_fields && $custom_fields->timeFields}
  {foreach $custom_fields->timeFields as $timeField}
    <div id="cfzeile">
      <label>{$timeField['label']|escape}{if $timeField['required']} (*){/if}:</label>
      {assign var="control_name" value='time_field_'|cat:$timeField['id']}
      {$forms.timeRecordForm.$control_name.control}
    </div>  
    <br class="clearall">        
  {/foreach}
{/if}
{if $show_project}
    <label>{$i18n.label.project} (*):</label>
    {$forms.timeRecordForm.project.control}
    <br class="clearall">      
{/if}
{if $show_task}
    <label>{$i18n.label.task}{if $user->task_required} (*){/if}:</label>
    {$forms.timeRecordForm.task.control}
    <br class="clearall">              
{/if}
{if $show_start}
    <label>{$i18n.label.start}:</label>
    <div class="startfinish">{$forms.timeRecordForm.start.control}&nbsp;<input onclick="setNow('start');" type="button" tabindex="-1" value="{$i18n.button.now}"></div>
    <br class="clearall">                    
{/if}
{if $show_finish}
    <label>{$i18n.label.finish}:</label>
    <div class="startfinish">{$forms.timeRecordForm.finish.control}&nbsp;<input onclick="setNow('finish');" type="button" tabindex="-1" value="{$i18n.button.now}"></div>
    <br class="clearall">                          
{/if}
{if $show_duration}
    <label>{$i18n.label.duration}:</label>
    <div class="startfinish">{$forms.timeRecordForm.duration.control}&nbsp;{if $user->getDecimalMark() == ','}{str_replace('.', ',', $i18n.form.time.duration_format)}{else}{$i18n.form.time.duration_format}{/if}</div>
    <br class="clearall">                                
{/if}
{if $show_files}
    <label>{$i18n.label.file}:</label>
    <div>{$forms.timeRecordForm.newfile.control}</div>
    <br class="clearall">                                
{/if}
{if $template_dropdown}
    <label>{$i18n.label.template}:</label>
    {$forms.timeRecordForm.template.control}
    <br class="clearall">                                      
{/if}
    <label>{$i18n.label.note}:</label>
    {$forms.timeRecordForm.note.control}
    <br class="clearall">                                      

    <div>{$forms.timeRecordForm.btn_submit.control}</div>

</div>
<div class="middle">
<hr />
</div>
<div class="right">{$forms.timeRecordForm.date.control}</div>

{$forms.timeRecordForm.close}

{if $time_records}
      <table border="0" cellpadding="3" cellspacing="1" width="100%" class="records">
      <tr>
  {if $show_client}
        <td class="tableHeader">{$i18n.label.client}</td>
  {/if}
  {if $show_project}
        <td class="tableHeader">{$i18n.label.project}</td>
  {/if}
  {if $show_task}
        <td class="tableHeader">{$i18n.label.task}</td>
  {/if}

  {if $custom_fields && $custom_fields->timeFields}
    {foreach $custom_fields->timeFields as $timeField}
      <td class="tableHeader">{{$timeField['label']|escape}}</td>
    {/foreach}
  {/if}
  
  {if $show_start}
        <td width="5%" class="tableHeader" align="right">{$i18n.label.start}</td>
  {/if}
  {if $show_finish}
        <td width="5%" class="tableHeader" align="right">{$i18n.label.finish}</td>
  {/if}
        <td width="5%" class="tableHeader">{$i18n.label.duration}</td>
  {if $show_note_column}
        <td class="tableHeader">{$i18n.label.note}</td>
  {/if}
  {if $show_files}
        <td></td>
  {/if}
        <td></td>
        <td></td>
    
  {foreach $time_records as $record}
      <tr bgcolor="{cycle values="#f5f5f5,#ffffff"}" {if !$record.billable} class="not_billable" {/if}>
    {if $show_client}
        <td valign="top">{$record.client|escape}</td>
    {/if}
    {if $show_project}
        <td valign="top">{$record.project|escape}</td>
    {/if}
    {if $show_task}
        <td valign="top">{$record.task|escape}</td>
    {/if}

    {if $custom_fields && $custom_fields->timeFields}
      {foreach $custom_fields->timeFields as $timeField}
        {assign var="control_name" value='time_field_'|cat:$timeField['id']}
        <td>{$record.$control_name|escape}</td>
      {/foreach}
    {/if}
    
    {if $show_start}
        <td nowrap align="right" valign="top">{if $record.start}{$record.start}{else}&nbsp;{/if}</td>
    {/if}
    {if $show_finish}
        <td nowrap align="right" valign="top">{if $record.finish}{$record.finish}{else}&nbsp;{/if}</td>
    {/if}
        <td align="right" valign="top">{if ($record.duration == '0:00' && $record.start <> '')}<font color="#ff0000">{$i18n.form.time.uncompleted}</font>{else}{$record.duration}{/if}</td>
    {if $show_note_column}
        <td valign="top">{if $record.comment}{$record.comment|escape}{else}&nbsp;{/if}</td>
    {/if}
    {if $show_files}
      {if $record.has_files}
        <td valign="top" align="center"><a href="time_files.php?id={$record.id}"><img class="table_icon" alt="{$i18n.label.files}" src="images/icon_files.png"></a></td>
      {else}
        <td valign="top" align="center"><a href="time_files.php?id={$record.id}"><img class="table_icon" alt="{$i18n.label.files}" src="images/icon_file.png"></a></td>
      {/if}
    {/if}
        <td valign="top" align="center">
    {if $record.approved || $record.timesheet_id || $record.invoice_id}
          &nbsp;
    {else}
          <a href="time_edit.php?id={$record.id}"><img class="table_icon" alt="{$i18n.label.edit}" src="images/icon_edit.png"></a>
      {if ($record.duration == '0:00' && $record.start <> '')}
          <input type="hidden" name="record_id" value="{$record.id}">
          <input type="hidden" name="browser_date" value="">
          <input type="hidden" name="browser_time" value="">
          <input type="submit" id="btn_stop" name="btn_stop" onclick="browser_date.value=get_date();browser_time.value=get_time()" value="{$i18n.button.stop}">
      {/if}
    {/if}
        </td>
        <td valign="top" align="center">
    {if $record.approved || $record.timesheet_id || $record.invoice_id}
          &nbsp;
    {else}
          <a href="time_delete.php?id={$record.id}"><img class="table_icon" alt="{$i18n.label.delete}" src="images/icon_delete.png"></a>
    {/if}
        </td>
     </tr>
    {if $show_note_row && $record.comment}
      <tr>
        <td align="right" valign="top">{$i18n.label.note}:</td>
        <td colspan="{$colspan}" align="left" valign="top">{$record.comment|escape}</td>
      </tr>
    {/if}
  {/foreach}
    </table>
{/if}
<br class="clearall" />
<div class="sumleft">{$i18n.label.week_total}: {$week_total}</div>
<div class="sumright">{$i18n.label.day_total}: {$day_total}</div>
<br class="clearall" />                                      

{if $user->isPluginEnabled('mq')}
  <div class="sumleft">{$i18n.label.month_total}: {$month_total}</div>
  {if $over_balance}
  <div class="sumright">{$i18n.form.time.over_balance}: <span style="color: green;">{$balance_remaining}</span></div>
  {else}
  <div class="sumright">{$i18n.form.time.remaining_balance}: <span style="color: red;">{$balance_remaining}</span></div>
  {/if}
  <br class="clearall">                                      

  <div class="sumleft">{$i18n.label.quota}: {$month_quota}</div>
  {if $over_quota}
  <div class="sumright">{$i18n.form.time.over_quota}: <span style="color: green;">{$quota_remaining}</span></div>
  {else}
  <div class="sumright">{$i18n.form.time.remaining_quota}: <span style="color: red;">{$quota_remaining}</span></div>
  {/if}
  <br class="clearall" />                                        
{/if}
One new file: time_div.css --> for separating custom styling and layouts

Code: Select all

/*
*** custom CSS for DIV-Layout ***
*
*/

.dayweek {
    padding: 8px;
}

.left {
    float: left;
    text-align: left;
    margin-bottom: 20px;
/*    width: 40%; */
}

.middle {
    float: left;
    width: 30%;
    padding: 0;
    padding-right: 10px;
    text-align: left;
/*    min-height: 300px;
    width: 300px; */
}

.middle hr {
    border:0;
}

.right {
    float: left;
/*    width: 38%;*/
/*    float:right;*/
/*    padding: 0 20px;*/
}   

.clearall {
    clear: both;
}

.left label {
    float: left;
    display: block;
    width: 200px;
    text-align: right;
    padding: 5px;
} 

.left input, .left select {
    width: 350px;
    float: left;
}

.startfinish > input {
/*    clear: left; 
    text-align: left; */
    width: 168px;  
}

.jetzt {
}

#note {
    width: 400px !important;
    height: 60px !important;
}

#btn_submit {
    margin-top: 20px;
    margin-left: 210px;
    width: 350px;
}

.sumleft {
    float: left;
    text-align: left;
    padding: 3px 100px;    
}

.sumright {
    float: right;
    text-align: right;
    padding: 3px 100px;    
}

table.records {
    width: 90%;
    margin: 20px 0;
}

Post Reply