iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

migrate shift overview cards to panels 

migrate shift overview cards to panels
This commit is contained in:
Michael Weimann 2021-07-24 20:42:19 +02:00
parent d51edb6092
commit 82f640896e
No known key found for this signature in database
GPG Key ID: 34F0524D4DA694A1
7 changed files with 79 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
includes/pages/user_shifts.php
View File

@ -276,7 +276,7 @@ function view_user_shifts()
. __('Description of the jobs.') . __('Description of the jobs.')
. '</a>', . '</a>',
'shifts_table' => msg() . $shiftCalendarRenderer->render(), 'shifts_table' => msg() . $shiftCalendarRenderer->render(),
'ical_text' => ical_hint(), 'ical_text' => div('mt-3', ical_hint()),
'filter' => __('Filter'), 'filter' => __('Filter'),
'filter_toggle' => __('shifts.filter.toggle'), 'filter_toggle' => __('shifts.filter.toggle'),
'set_yesterday' => __('Yesterday'), 'set_yesterday' => __('Yesterday'),

16
includes/view/ShiftCalendarRenderer.php
View File

@ -204,8 +204,13 @@ class ShiftCalendarRenderer
$rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW; $rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
} }
$bg = '';
if (theme_type() === 'light') {
$bg = 'bg-light';
}
return div('lane', [ return div('lane', [
div('header', $lane->getHeader()), div('header ' . $bg, $lane->getHeader()),
$html $html
]); ]);
} }
@ -244,8 +249,13 @@ class ShiftCalendarRenderer
*/ */
private function renderTimeLane() private function renderTimeLane()
{ {
$bg = '';
if (theme_type() === 'light') {
$bg = 'bg-light';
}
$time_slot = [ $time_slot = [
div('header', [ div('header ' . $bg, [
__('Time') __('Time')
]) ])
]; ];
@ -311,7 +321,7 @@ class ShiftCalendarRenderer
*/ */
private function renderLegend() private function renderLegend()
{ {
return div('legend', [ return div('legend mt-3', [
badge(__('Your shift'), 'primary'), badge(__('Your shift'), 'primary'),
badge(__('Help needed'), 'danger'), badge(__('Help needed'), 'danger'),
badge(__('Other angeltype needed / collides with my shifts'), 'warning'), badge(__('Other angeltype needed / collides with my shifts'), 'warning'),

55
includes/view/ShiftCalendarShiftRenderer.php
View File

@ -5,6 +5,9 @@ namespace Engelsystem;
use Engelsystem\Models\Room; use Engelsystem\Models\Room;
use Engelsystem\Models\User\User; use Engelsystem\Models\User\User;
use function config;
use function theme_type;
/** /**
* Renders a single shift for the shift calendar * Renders a single shift for the shift calendar
*/ */
@ -23,7 +26,7 @@ class ShiftCalendarShiftRenderer
{ {
$info_text = ''; $info_text = '';
if ($shift['title'] != '') { if ($shift['title'] != '') {
$info_text = icon('info') . $shift['title'] . '<br>'; $info_text = icon('info-circle') . $shift['title'] . '<br>';
} }
list($shift_signup_state, $shifts_row) = $this->renderShiftNeededAngeltypes( list($shift_signup_state, $shifts_row) = $this->renderShiftNeededAngeltypes(
$shift, $shift,
@ -48,10 +51,10 @@ class ShiftCalendarShiftRenderer
. ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN) . ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN)
. 'px;', . 'px;',
div( div(
'shift panel panel-' . $class, 'shift card bg-' . $class,
[ [
$this->renderShiftHead($shift, $class, $shift_signup_state->getFreeEntries()), $this->renderShiftHead($shift, $class, $shift_signup_state->getFreeEntries()),
div('panel-body', [ div('card-body ' . $this->classBg(), [
$info_text, $info_text,
Room_name_render($room) Room_name_render($room)
]), ]),
@ -79,7 +82,7 @@ class ShiftCalendarShiftRenderer
case ShiftSignupState::NOT_ARRIVED: case ShiftSignupState::NOT_ARRIVED:
case ShiftSignupState::NOT_YET: case ShiftSignupState::NOT_YET:
case ShiftSignupState::SHIFT_ENDED: case ShiftSignupState::SHIFT_ENDED:
return 'default'; return 'light';
case ShiftSignupState::ANGELTYPE: case ShiftSignupState::ANGELTYPE:
case ShiftSignupState::COLLIDES: case ShiftSignupState::COLLIDES:
@ -133,7 +136,7 @@ class ShiftCalendarShiftRenderer
} }
if (auth()->can('user_shifts_admin')) { if (auth()->can('user_shifts_admin')) {
$html .= '<li class="list-group-item">'; $html .= '<li class="list-group-item d-flex align-items-center ' . $this->classBg() . '">';
$html .= button(shift_entry_create_link_admin($shift), $html .= button(shift_entry_create_link_admin($shift),
icon('plus-lg') . __('Add more angels'), icon('plus-lg') . __('Add more angels'),
'btn-sm' 'btn-sm'
@ -143,7 +146,7 @@ class ShiftCalendarShiftRenderer
if ($html != '') { if ($html != '') {
return [ return [
$shift_signup_state, $shift_signup_state,
'<ul class="list-group">' . $html . '</ul>' '<ul class="list-group list-group-flush">' . $html . '</ul>'
]; ];
} }
@ -167,8 +170,8 @@ class ShiftCalendarShiftRenderer
{ {
$entry_list = []; $entry_list = [];
foreach ($shift_entries as $entry) { foreach ($shift_entries as $entry) {
$style = $entry['freeloaded'] ? ' text-decoration: line-through;' : ''; $class = $entry['freeloaded'] ? 'text-decoration-line-through' : '';
$entry_list[] = '<span style="' . $style . '">' . User_Nick_render($entry) . '</span>'; $entry_list[] = '<span class="text-nowrap ' . $class . '">' . User_Nick_render($entry) . '</span>';
} }
$shift_signup_state = Shift_signup_allowed( $shift_signup_state = Shift_signup_allowed(
$user, $user,
@ -186,14 +189,14 @@ class ShiftCalendarShiftRenderer
case ShiftSignupState::ADMIN: case ShiftSignupState::ADMIN:
case ShiftSignupState::FREE: case ShiftSignupState::FREE:
// When admin or free display a link + button for sign up // When admin or free display a link + button for sign up
$entry_list[] = '<a href="' $entry_list[] = '<a class="me-1 text-nowrap" href="'
. shift_entry_create_link($shift, $angeltype) . shift_entry_create_link($shift, $angeltype)
. '">' . '">'
. $inner_text . $inner_text
. '</a> ' . '</a> '
. button( . button(
shift_entry_create_link($shift, $angeltype), shift_entry_create_link($shift, $angeltype),
__('Sign up'), 'btn-sm btn-primary d-print-none' __('Sign up'), 'btn-sm btn-primary text-nowrap d-print-none'
); );
break; break;
@ -240,8 +243,8 @@ class ShiftCalendarShiftRenderer
break; break;
} }
$shifts_row = '<li class="list-group-item">'; $shifts_row = '<li class="list-group-item d-flex flex-wrap align-items-center ' . $this->classBg() . '">';
$shifts_row .= '<strong>' . AngelType_name_render($angeltype) . ':</strong> '; $shifts_row .= '<strong class="me-1">' . AngelType_name_render($angeltype) . ':</strong> ';
$shifts_row .= join(', ', $entry_list); $shifts_row .= join(', ', $entry_list);
$shifts_row .= '</li>'; $shifts_row .= '</li>';
return [ return [
@ -250,6 +253,20 @@ class ShiftCalendarShiftRenderer
]; ];
} }
/**
* Return the corresponding bg class
*
* @return string
*/
private function classBg(): string
{
if (theme_type() === 'light') {
return 'bg-white';
}
return 'bg-dark';
}
/** /**
* Renders the shift header * Renders the shift header
* *
@ -261,16 +278,16 @@ class ShiftCalendarShiftRenderer
{ {
$header_buttons = ''; $header_buttons = '';
if (auth()->can('admin_shifts')) { if (auth()->can('admin_shifts')) {
$header_buttons = '<div class="float-end d-print-none">' . table_buttons([ $header_buttons = '<div class="ms-auto d-print-none">' . table_buttons([
button( button(
page_link_to('user_shifts', ['edit_shift' => $shift['SID']]), page_link_to('user_shifts', ['edit_shift' => $shift['SID']]),
icon('pencil'), icon('pencil'),
"btn-$class btn-sm" "btn-$class btn-sm border-light"
), ),
button( button(
page_link_to('user_shifts', ['delete_shift' => $shift['SID']]), page_link_to('user_shifts', ['delete_shift' => $shift['SID']]),
icon('trash'), icon('trash'),
"btn-$class btn-sm" "btn-$class btn-sm border-light"
) )
]) . '</div>'; ]) . '</div>';
} }
@ -278,12 +295,12 @@ class ShiftCalendarShiftRenderer
. date('H:i', $shift['end']) . ' &mdash; ' . date('H:i', $shift['end']) . ' &mdash; '
. $shift['name']; . $shift['name'];
if($needed_angeltypes_count > 0) { if ($needed_angeltypes_count > 0) {
$shift_heading = '<span class="badge">' . $needed_angeltypes_count . '</span> ' . $shift_heading; $shift_heading = '<span class="badge bg-light text-danger me-1">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
} }
return div('panel-heading', [ return div('card-header d-flex align-items-center', [
'<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>', '<a class="d-flex align-items-center text-white" href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
$header_buttons $header_buttons
]); ]);
} }

65
resources/assets/themes/base.scss
View File

@ -170,7 +170,6 @@ table a > .icon-icon_angel {
flex-shrink: 1; flex-shrink: 1;
.header { .header {
background: $dark; //@todo bs5
border-bottom: 1px solid $table-border-color; border-bottom: 1px solid $table-border-color;
height: 30px; height: 30px;
padding: 5px 5px 5px 16px; padding: 5px 5px 5px 16px;
@ -252,14 +251,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
overflow-x: inherit; overflow-x: inherit;
} }
.inline-form-spacing {
margin-bottom: map-get($spacers, 3);
}
.user-settings .settings-menu ul {
margin-top: map-get($spacers, 3); //@todo bs5
}
span.ref-id[id] { span.ref-id[id] {
padding-top: 50px; padding-top: 50px;
} }
@ -352,59 +343,3 @@ span.ref-id[id] {
} }
} }
} }
@media screen and (max-width: map-get($grid-breakpoints, 'xxl')) {
#navbar-offcanvas {
display: block;
position: absolute;
width: 90%;
height: calc(100vh - #{$navbar-height});
max-height: unset;
left: 101%;
top: $navbar-height + 1;
// extra padding because mobile Safari displays a bottom bar hiding parts of the menu
padding-bottom: 75px;
transition: left .3s ease-in-out;
background: $light; // @todo bs5
margin: 0 !important; // Overridden in theme with high specifity:
// .container > .navbar-header,
// .container-fluid > .navbar-header,
// .container > .navbar-collapse,
// .container-fluid > .navbar-collapse
// Is open
&.collapse.in {
left: 10%;
display: block;
overflow-y: auto;
box-shadow: -5px 20px 20px 0 rgba(0, 0, 0, 0.5), 5px 0 5px -5px rgba(0, 0, 0, 0.5);
}
// Hide current page in nav.
.nav > li.active {
display: none;
}
.caret {
float: right;
margin-top: 7px;
}
}
.navbar-toggle {
align-items: center;
font-size: 18px;
display: flex;
height: 38px;
justify-content: center;
padding: 0;
transform: none;
width: 38px;
.icon-close {
padding: 0;
}
}
}

2
resources/views/admin/log.twig
View File

@ -10,7 +10,7 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="inline-form-spacing"> <div class="mb-3">
<form method="POST" action="{{ url('/admin/logs') }}" class="form-inline"> <form method="POST" action="{{ url('/admin/logs') }}" class="form-inline">
{{ csrf() }} {{ csrf() }}

2
resources/views/pages/settings/settings.twig
View File

@ -14,7 +14,7 @@
<div class="row"> <div class="row">
<div class="col-md-3 settings-menu"> <div class="col-md-3 settings-menu">
<ul class="nav nav-pills flex-column"> <ul class="nav nav-pills flex-column mt-3">
{% for url,title in settings_menu %} {% for url,title in settings_menu %}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {% if url == request.url() %}active{% endif %}" href="{{ url }}">{{ __(title) }}</a> <a class="nav-link {% if url == request.url() %}active{% endif %}" href="{{ url }}">{{ __(title) }}</a>

50
resources/views/pages/user-shifts.html
View File

@ -4,32 +4,36 @@
<div class="col-md-6"> <div class="col-md-6">
<h1>%title%</h1> <h1>%title%</h1>
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-2">%start_select%</div> <div class="col-12 col-xxl-5 row pe-xxl-0">
<div class="col-2"> <div class="col-6 pe-xxl-0">%start_select%</div>
<div class="input-group time" data-target-input="nearest"> <div class="col-6">
<input <div class="input-group time" data-target-input="nearest">
type="time" class="form-control" id="start_time" name="start_time" size="5" <input
pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%" type="time" class="form-control" id="start_time" name="start_time" size="5"
> pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%start_time%"
<div class="input-group-btn"> >
<button class="btn btn-secondary" title="Now" type="button"> <div class="input-group-btn">
<span class="bi bi-clock"></span> <button class="btn btn-secondary" title="Now" type="button">
</button> <span class="bi bi-clock"></span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
&#8211; <div class="col-12 col-xxl-1 text-center px-xxl-0">&#8211;</div>
<div class="col-2">%end_select%</div> <div class="col-12 col-xxl-5 row px-xxl-0">
<div class="col-2"> <div class="col-6 pe-xxl-0">%end_select%</div>
<div class="input-group time" data-target-input="nearest"> <div class="col-6">
<input <div class="input-group time" data-target-input="nearest">
type="time" class="form-control" id="end_time" name="end_time" size="5" <input
pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%" type="time" class="form-control" id="end_time" name="end_time" size="5"
> pattern="^\d{1,2}:\d{2}$" placeholder="HH:MM" maxlength="5" value="%end_time%"
<div class="input-group-btn"> >
<button class="btn btn-secondary" title="Now" type="button"> <div class="input-group-btn">
<span class="bi bi-clock"></span> <button class="btn btn-secondary" title="Now" type="button">
</button> <span class="bi bi-clock"></span>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>