migrate shift overview cards to panels
migrate shift overview cards to panels
This commit is contained in:
Michael Weimann
parent
d51edb6092
commit
82f640896e
|
|
@ -276,7 +276,7 @@ function view_user_shifts()
|
|||
. __('Description of the jobs.')
|
||||
. '</a>',
|
||||
'shifts_table' => msg() . $shiftCalendarRenderer->render(),
|
||||
'ical_text' => ical_hint(),
|
||||
'ical_text' => div('mt-3', ical_hint()),
|
||||
'filter' => __('Filter'),
|
||||
'filter_toggle' => __('shifts.filter.toggle'),
|
||||
'set_yesterday' => __('Yesterday'),
|
||||
|
|
|
|||
|
|
@ -204,8 +204,13 @@ class ShiftCalendarRenderer
|
|||
$rendered_until += ShiftCalendarRenderer::SECONDS_PER_ROW;
|
||||
}
|
||||
|
||||
$bg = '';
|
||||
if (theme_type() === 'light') {
|
||||
$bg = 'bg-light';
|
||||
}
|
||||
|
||||
return div('lane', [
|
||||
div('header', $lane->getHeader()),
|
||||
div('header ' . $bg, $lane->getHeader()),
|
||||
$html
|
||||
]);
|
||||
}
|
||||
|
|
@ -244,8 +249,13 @@ class ShiftCalendarRenderer
|
|||
*/
|
||||
private function renderTimeLane()
|
||||
{
|
||||
$bg = '';
|
||||
if (theme_type() === 'light') {
|
||||
$bg = 'bg-light';
|
||||
}
|
||||
|
||||
$time_slot = [
|
||||
div('header', [
|
||||
div('header ' . $bg, [
|
||||
__('Time')
|
||||
])
|
||||
];
|
||||
|
|
@ -311,7 +321,7 @@ class ShiftCalendarRenderer
|
|||
*/
|
||||
private function renderLegend()
|
||||
{
|
||||
return div('legend', [
|
||||
return div('legend mt-3', [
|
||||
badge(__('Your shift'), 'primary'),
|
||||
badge(__('Help needed'), 'danger'),
|
||||
badge(__('Other angeltype needed / collides with my shifts'), 'warning'),
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@ namespace Engelsystem;
|
|||
use Engelsystem\Models\Room;
|
||||
use Engelsystem\Models\User\User;
|
||||
|
||||
use function config;
|
||||
use function theme_type;
|
||||
|
||||
/**
|
||||
* Renders a single shift for the shift calendar
|
||||
*/
|
||||
|
|
@ -23,7 +26,7 @@ class ShiftCalendarShiftRenderer
|
|||
{
|
||||
$info_text = '';
|
||||
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(
|
||||
$shift,
|
||||
|
|
@ -48,10 +51,10 @@ class ShiftCalendarShiftRenderer
|
|||
. ($blocks * ShiftCalendarRenderer::BLOCK_HEIGHT - ShiftCalendarRenderer::MARGIN)
|
||||
. 'px;',
|
||||
div(
|
||||
'shift panel panel-' . $class,
|
||||
'shift card bg-' . $class,
|
||||
[
|
||||
$this->renderShiftHead($shift, $class, $shift_signup_state->getFreeEntries()),
|
||||
div('panel-body', [
|
||||
div('card-body ' . $this->classBg(), [
|
||||
$info_text,
|
||||
Room_name_render($room)
|
||||
]),
|
||||
|
|
@ -79,7 +82,7 @@ class ShiftCalendarShiftRenderer
|
|||
case ShiftSignupState::NOT_ARRIVED:
|
||||
case ShiftSignupState::NOT_YET:
|
||||
case ShiftSignupState::SHIFT_ENDED:
|
||||
return 'default';
|
||||
return 'light';
|
||||
|
||||
case ShiftSignupState::ANGELTYPE:
|
||||
case ShiftSignupState::COLLIDES:
|
||||
|
|
@ -133,7 +136,7 @@ class ShiftCalendarShiftRenderer
|
|||
}
|
||||
|
||||
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),
|
||||
icon('plus-lg') . __('Add more angels'),
|
||||
'btn-sm'
|
||||
|
|
@ -143,7 +146,7 @@ class ShiftCalendarShiftRenderer
|
|||
if ($html != '') {
|
||||
return [
|
||||
$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 = [];
|
||||
foreach ($shift_entries as $entry) {
|
||||
$style = $entry['freeloaded'] ? ' text-decoration: line-through;' : '';
|
||||
$entry_list[] = '<span style="' . $style . '">' . User_Nick_render($entry) . '</span>';
|
||||
$class = $entry['freeloaded'] ? 'text-decoration-line-through' : '';
|
||||
$entry_list[] = '<span class="text-nowrap ' . $class . '">' . User_Nick_render($entry) . '</span>';
|
||||
}
|
||||
$shift_signup_state = Shift_signup_allowed(
|
||||
$user,
|
||||
|
|
@ -186,14 +189,14 @@ class ShiftCalendarShiftRenderer
|
|||
case ShiftSignupState::ADMIN:
|
||||
case ShiftSignupState::FREE:
|
||||
// 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)
|
||||
. '">'
|
||||
. $inner_text
|
||||
. '</a> '
|
||||
. button(
|
||||
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;
|
||||
|
||||
|
|
@ -240,8 +243,8 @@ class ShiftCalendarShiftRenderer
|
|||
break;
|
||||
}
|
||||
|
||||
$shifts_row = '<li class="list-group-item">';
|
||||
$shifts_row .= '<strong>' . AngelType_name_render($angeltype) . ':</strong> ';
|
||||
$shifts_row = '<li class="list-group-item d-flex flex-wrap align-items-center ' . $this->classBg() . '">';
|
||||
$shifts_row .= '<strong class="me-1">' . AngelType_name_render($angeltype) . ':</strong> ';
|
||||
$shifts_row .= join(', ', $entry_list);
|
||||
$shifts_row .= '</li>';
|
||||
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
|
||||
*
|
||||
|
|
@ -261,16 +278,16 @@ class ShiftCalendarShiftRenderer
|
|||
{
|
||||
$header_buttons = '';
|
||||
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(
|
||||
page_link_to('user_shifts', ['edit_shift' => $shift['SID']]),
|
||||
icon('pencil'),
|
||||
"btn-$class btn-sm"
|
||||
"btn-$class btn-sm border-light"
|
||||
),
|
||||
button(
|
||||
page_link_to('user_shifts', ['delete_shift' => $shift['SID']]),
|
||||
icon('trash'),
|
||||
"btn-$class btn-sm"
|
||||
"btn-$class btn-sm border-light"
|
||||
)
|
||||
]) . '</div>';
|
||||
}
|
||||
|
|
@ -278,12 +295,12 @@ class ShiftCalendarShiftRenderer
|
|||
. date('H:i', $shift['end']) . ' — '
|
||||
. $shift['name'];
|
||||
|
||||
if($needed_angeltypes_count > 0) {
|
||||
$shift_heading = '<span class="badge">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
|
||||
if ($needed_angeltypes_count > 0) {
|
||||
$shift_heading = '<span class="badge bg-light text-danger me-1">' . $needed_angeltypes_count . '</span> ' . $shift_heading;
|
||||
}
|
||||
|
||||
return div('panel-heading', [
|
||||
'<a href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
|
||||
return div('card-header d-flex align-items-center', [
|
||||
'<a class="d-flex align-items-center text-white" href="' . shift_link($shift) . '">' . $shift_heading . '</a>',
|
||||
$header_buttons
|
||||
]);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -170,7 +170,6 @@ table a > .icon-icon_angel {
|
|||
flex-shrink: 1;
|
||||
|
||||
.header {
|
||||
background: $dark; //@todo bs5
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
height: 30px;
|
||||
padding: 5px 5px 5px 16px;
|
||||
|
|
@ -252,14 +251,6 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
|||
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] {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="inline-form-spacing">
|
||||
<div class="mb-3">
|
||||
<form method="POST" action="{{ url('/admin/logs') }}" class="form-inline">
|
||||
{{ csrf() }}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
<div class="row">
|
||||
<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 %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if url == request.url() %}active{% endif %}" href="{{ url }}">{{ __(title) }}</a>
|
||||
|
|
|
|||
|
|
@ -4,32 +4,36 @@
|
|||
<div class="col-md-6">
|
||||
<h1>%title%</h1>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-2">%start_select%</div>
|
||||
<div class="col-2">
|
||||
<div class="input-group time" data-target-input="nearest">
|
||||
<input
|
||||
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">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
<div class="col-12 col-xxl-5 row pe-xxl-0">
|
||||
<div class="col-6 pe-xxl-0">%start_select%</div>
|
||||
<div class="col-6">
|
||||
<div class="input-group time" data-target-input="nearest">
|
||||
<input
|
||||
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">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
–
|
||||
<div class="col-2">%end_select%</div>
|
||||
<div class="col-2">
|
||||
<div class="input-group time" data-target-input="nearest">
|
||||
<input
|
||||
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">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
<div class="col-12 col-xxl-1 text-center px-xxl-0">–</div>
|
||||
<div class="col-12 col-xxl-5 row px-xxl-0">
|
||||
<div class="col-6 pe-xxl-0">%end_select%</div>
|
||||
<div class="col-6">
|
||||
<div class="input-group time" data-target-input="nearest">
|
||||
<input
|
||||
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">
|
||||
<span class="bi bi-clock"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue