Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update calendar view to be more mobile friendly #5

Merged
merged 1 commit into from
May 9, 2024
Merged

Update calendar view to be more mobile friendly #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 88 additions & 57 deletions views/calendar.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@

{{> header }}

<h1>Employee calendar</h1>

<div class="row">
<div class="col-md-6 lead">{{logged_user.name}} {{logged_user.lastname}}'s calendar for {{current_year}}</div>
<div class="col-md-6">
</div>
<div class="col-md-6 lead">{{logged_user.name}} {{logged_user.lastname}}'s calendar for {{current_year}}</div>
<div class="col-md-6">
</div>
</div>

{{> show_flash_messages }}

<div class="row">
<div class="col-xs-3">
<a class="btn btn-default" href="/calendar/?year={{previous_year}}"><span aria-hidden="true"
class="fa fa-chevron-left"></span> {{previous_year}} </a>
</div>
<div class="col-xs-3">
<a class="btn btn-default pull-right" href="/calendar/?year={{next_year}}">{{next_year}} <span aria-hidden="true"
class="fa fa-chevron-right"></span></a>
</div>
</div>

<div class="row">&nbsp;</div>

<div class="row main-row_header hidden-xs">
Expand All @@ -19,46 +29,56 @@

<div class="row">

<div class="col-md-3 top-leave-type-statistics">
<div class="col-md-6 top-leave-type-statistics">
<dl>
{{#with current_user }}
<dt data-tom-days-available-in-allowance>{{ ../user_allowance.number_of_days_available_in_allowance }}</dt>
<dd>Personal remaining: {{ ../user_allowance.total_personal_available }}</dd>
<dd>out of <span data-tom-total-days-in-allowance>{{ ../user_allowance.total_number_of_days_in_allowance }}</span> in total allowance</dd>
<dd>Personal remaining: {{ ../user_allowance.total_personal_available }}</dd>
<dd>out of <span data-tom-total-days-in-allowance>{{ ../user_allowance.total_number_of_days_in_allowance }}</span>
in total allowance</dd>
{{/with}}
</dl>
</div>

<div class="col-md-3 secondary-leave-type-statistics hidden-xs">
<div class="col-md-6 secondary-leave-type-statistics">
{{> user_details/allowance_breakdown user_allowance = user_allowance }}
</div>

<div class="col-md-3 secondary-leave-type-statistics hidden-xs">
</div>

<div class="row">

<div class="col-md-6 secondary-leave-type-statistics">
<dl>
<dt>Used so far</dt>

{{# if leave_type_statistics }}
{{# each leave_type_statistics }}
<dd><em>{{this.leave_type.name}}:</em> <span class="pull-right">{{this.days_taken}}{{# if this.limit}} out of {{this.limit}}{{/if}}</span></dd>
{{/each}}
{{# each leave_type_statistics }}
<dd><em>{{this.leave_type.name}}:</em> <span class="pull-right">{{this.days_taken}}{{# if this.limit}} out of
{{this.limit}}{{/if}}</span></dd>
{{/each}}
{{else}}

<dd class="text-muted">No approved requests so far.</dd>
<dd class="text-muted">No approved requests so far.</dd>
{{/if}}
</dl>
</div>

<div class="col-md-3 secondary-leave-type-statistics hidden-xs">
<dl>
<div class="col-md-6 secondary-leave-type-statistics">
<dl class="details">
<dt>Details</dt>
{{~# each supervisors ~}}
{{~# each supervisors ~}}
<dd>
<em>{{# if @first }} Supervisor: {{ else }} &nbsp; {{/ if }}</em>
<em>{{# if @first }} Supervisor: {{ else }} &nbsp; {{/ if }}</em>
<span class="pull-right"><a href="mailto:{{this.email}}">{{ this.full_name }}</a></span>
</dd>
{{~/ each ~}}
<dd><em>Department:</em> <span class="pull-right"><a href="/calendar/teamview/?department={{ current_user.department.id }}">{{ current_user.department.name }}</a></span></dd>
<dd><em>Allowance in {{current_year}}:</em><span class="pull-right"> {{ user_allowance.total_number_of_days_in_allowance }} days</span><dd>
<dd><em>Department:</em> <span class="pull-right"><a
href="/calendar/teamview/?department={{ current_user.department.id }}">{{ current_user.department.name
}}</a></span></dd>
<dd><em>Allowance in {{current_year}}:</em><span class="pull-right"> {{
user_allowance.total_number_of_days_in_allowance }} days</span>
<dd>
</dl>
</div>

Expand All @@ -67,82 +87,93 @@
<div class="row">
</div>

{{#if show_full_year }}
<div class="row main-row_header">
<p class="col-md-12">All my absences in {{current_year}}</p>
</div>

{{> user_requests leaves=current_user.my_leaves }}
{{/if}}

<div class="row main-row_header">
<div class="col-md-12">Calendar <a href="/calendar/feeds/" data-toggle="tooltip" data-placement="right" title="Export absences to external calendars"><span class="fa fa-rss"></span></a></div>
<div class="col-md-12">Calendar <a href="/calendar/feeds/" data-toggle="tooltip" data-placement="right"
title="Export absences to external calendars"><span class="fa fa-rss"></span></a></div>
</div>

<div class="row">
<div class="col-xs-2">
{{#if show_full_year}}
<a class="btn btn-default" href="/calendar/?year={{previous_year}}{{#if show_full_year}}&show_full_year=1{{/if}}"><span aria-hidden="true" class="fa fa-chevron-left"></span> {{previous_year}} </a>
<a class="btn btn-default"
href="/calendar/?year={{previous_year}}{{#if show_full_year}}&show_full_year=1{{/if}}"><span aria-hidden="true"
class="fa fa-chevron-left"></span> {{previous_year}} </a>
{{/if}}
</div>
<div class="col-xs-8 calendar-section-caption">

<strong>{{#if show_full_year}}January - December {{current_year}}{{else}}Upcoming Months{{/if}}</strong>
&nbsp;

<strong>{{#if show_full_year}}Jan - Dec {{current_year}}{{else}}Upcoming Months{{/if}}</strong>
</div>
<div class="col-xs-2">
{{#if show_full_year}}
<a class="btn btn-default pull-right"
href="/calendar/?year={{next_year}}{{#if show_full_year}}&show_full_year=1{{/if}}">{{next_year}} <span
aria-hidden="true" class="fa fa-chevron-right"></span></a>
{{/if}}
</div>
<div class="col-xs-12 calendar-section-caption">
{{# unless show_full_year}}
<a class="btn btn-default" href="/calendar/?show_full_year=1">More... &nbsp;<span class="fa fa-plus"></span></a>
{{else}}
<a class="btn btn-default" href="/calendar/">Less... &nbsp;<span class="fa fa-minus"></span></a>
{{/unless}}


</div>
<div class="col-xs-2">
{{#if show_full_year}}
<a class="btn btn-default pull-right" href="/calendar/?year={{next_year}}{{#if show_full_year}}&show_full_year=1{{/if}}">{{next_year}} <span aria-hidden="true" class="fa fa-chevron-right"></span></a>
{{/if}}
</div>
</div>

<div class="row">&nbsp;</div>

<div class="row clearfix">

{{# each calendar}}
<div class="col-md-3 month_container">
<table class="calendar_month month_{{ this.month }}">
<thead>
{{# each calendar}}
<div class="col-md-3 month_container">
<table class="calendar_month month_{{ this.month }}">
<thead>
<tr>
<td colspan="14">{{#if ../show_full_year}}{{this.month}}{{else}}{{as_date_formatted this.moment 'MMMM, YYYY'}}{{/if}}</td>
<td colspan="14">{{#if ../show_full_year}}{{this.month}}{{else}}{{as_date_formatted this.moment 'MMMM,
YYYY'}}{{/if}}</td>
</tr>
<tr>
<td colspan="2">M</td>
<td colspan="2">T</td>
<td colspan="2">W</td>
<td colspan="2">T</td>
<td colspan="2">F</td>
<td colspan="2">S</td>
<td colspan="2">S</td>
<td colspan="2">M</td>
<td colspan="2">T</td>
<td colspan="2">W</td>
<td colspan="2">T</td>
<td colspan="2">F</td>
<td colspan="2">S</td>
<td colspan="2">S</td>
</tr>
</thead>
<tbody>
</thead>
<tbody>
{{#each this.weeks }}
<tr>
{{#each this}}
{{> calendar_cell day = this}}
{{/each}}
{{#each this}}
{{> calendar_cell day = this}}
{{/each}}
</tr>
{{/each}}

</tbody></table>
</div>
{{/each}}
</tbody>
</table>
</div>
{{/each}}

</div>

{{# unless show_full_year}}

<div class="row main-row_header">
<p class="col-md-12">All my absences in {{current_year}}</p>
</div>
<div class="row main-row_header">
<p class="col-md-12">All my absences in {{current_year}}</p>
</div>

{{> user_requests leaves=current_user.my_leaves }}
{{> user_requests leaves=current_user.my_leaves }}

{{/unless}}


{{> footer }}
{{> footer }}