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.')
. '</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'),

16
includes/view/ShiftCalendarRenderer.php
View File

@ -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'),

55
includes/view/ShiftCalendarShiftRenderer.php
View File

@ -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']) . ' &mdash; '
. $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
]);
}

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

@ -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;
}
}
}

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

@ -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() }}

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

@ -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>

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

@ -4,8 +4,9 @@
<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="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"
@ -18,9 +19,11 @@
</div>
</div>
</div>
&#8211;
<div class="col-2">%end_select%</div>
<div class="col-2">
</div>
<div class="col-12 col-xxl-1 text-center px-xxl-0">&#8211;</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"
@ -34,6 +37,7 @@
</div>
</div>
</div>
</div>
<div class="form-group d-print-none" style="margin-top: .5em">
<div class="btn-group">
<a href="javascript:setDay(-1)" class="btn btn-secondary ">%set_yesterday%</a>