Jingga/oms-Calendar
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Calendar.git synced 2026-02-07 12:08:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

started with template fixes

Browse Source
This commit is contained in:
Dennis Eichhorn 2024-03-29 15:25:59 +00:00
parent fc5a877fd1
commit eb4d92e44c
3 changed files with 93 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Theme/Backend/calendar-dashboard.tpl.php
View File

@ -18,17 +18,19 @@ $calendar = $this->data['calendar'];
<div class="col-xs-12 col-md-9"> <div class="col-xs-12 col-md-9">
<div class="box wf-100"> <div class="box wf-100">
<ul class="btns lf"> <ul class="btns lf">
<li><a href="<?= $this->printHtml(\phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, -1, 0)->format('Y-m-d'))); ?>"><i class="g-icon">arrow_back</i></a> <li><a href="<?= \phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, -1, 0)->format('Y-m-d')); ?>"><i class="g-icon">arrow_back</i></a>
<li><a href="<?= $this->printHtml(\phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, 1, 0)->format('Y-m-d'))); ?>"><i class="g-icon">arrow_forward</i></a> <li><a href="<?= \phpOMS\Uri\UriFactory::build('calendar/dashboard?date=' . $calendar->date->createModify(0, 1, 0)->format('Y-m-d')); ?>"><i class="g-icon">arrow_forward</i></a>
</ul> </ul>
<!-- @feature implement different views
<ul class="btns rf"> <ul class="btns rf">
<li><a href=""><?= $this->getHtml('Day'); ?></a> <li><a href=""><?= $this->getHtml('Day'); ?></a>
<li><a href=""><?= $this->getHtml('Week'); ?></a> <li><a href=""><?= $this->getHtml('Week'); ?></a>
<li><a href=""><?= $this->getHtml('Month'); ?></a> <li><a href=""><?= $this->getHtml('Month'); ?></a>
<li><a href=""><?= $this->getHtml('Year'); ?></a> <li><a href=""><?= $this->getHtml('Year'); ?></a>
</ul> </ul>
-->
</div> </div>
<div class="box wf-100"> <div class="portlet">
<div id="calendar" class="m-calendar" data-action='[ <div id="calendar" class="m-calendar" data-action='[
{ {
"listener": "click", "selector": "#calendar span.tag", "action": [ "listener": "click", "selector": "#calendar span.tag", "action": [
@ -36,7 +38,7 @@ $calendar = $this->data['calendar'];
] ]
} }
]'> ]'>
<ul class="weekdays green"> <ul class="weekdays">
<li><?= $this->getHtml('Sunday'); ?> <li><?= $this->getHtml('Sunday'); ?>
<li><?= $this->getHtml('Monday'); ?> <li><?= $this->getHtml('Monday'); ?>
<li><?= $this->getHtml('Tuesday'); ?> <li><?= $this->getHtml('Tuesday'); ?>
@ -75,23 +77,18 @@ $calendar = $this->data['calendar'];
</div> </div>
<div class="col-xs-12 col-md-3"> <div class="col-xs-12 col-md-3">
<section class="box wf-100"> <!-- @feature create additional styles -->
<header><h1>Title</h1></header> <section class="portlet">
<div class="portlet-body">
<div class="inner">
<form> <form>
<table class="layout wf-100"> <select name="layout">
<tr> <option><?= $this->getHtml('Month'); ?>
<td><label>Layout</label> </select>
<tr>
<td><select name="layout">
<option>
</select>
</table>
</form> </form>
</div> </div>
</section> </section>
<!-- @todo allow multiple calendars
<section class="box wf-100"> <section class="box wf-100">
<header><h1>Calendars</h1></header> <header><h1>Calendars</h1></header>
@ -103,6 +100,7 @@ $calendar = $this->data['calendar'];
<button><i class="g-icon">calendar_add_on</i> <?= $this->getHtml('Add', '0', '0'); ?></button> <button><i class="g-icon">event_available</i> <?= $this->getHtml('Create', '0', '0'); ?></button> <button><i class="g-icon">calendar_add_on</i> <?= $this->getHtml('Add', '0', '0'); ?></button> <button><i class="g-icon">event_available</i> <?= $this->getHtml('Create', '0', '0'); ?></button>
</div> </div>
</section> </section>
-->
</div> </div>
</div> </div>

45
Theme/Backend/css/styles.css
View File

@ -1,3 +1,37 @@
ul.btns {
list-style: none;
overflow: hidden;
display: flex;
li {
background: var(--box-bg);;
border-left: 1px solid var(--bborder);
border-top: 1px solid var(--bborder);
border-bottom: 1px solid var(--bborder);
float: left;
padding: 0 10px 0 10px;
height: 2.5rem;
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
&:last-child {
border-right: 1px solid var(--bborder);
}
&:before {
border-left-color: var(--bborder);
margin-left: 1px;
}
}
.active, li:hover {
background: var(--btn-bg);
color: #fff;
}
}
.m-calendar { .m-calendar {
width: 100%; } width: 100%; }
.m-calendar ul { .m-calendar ul {
@ -14,6 +48,7 @@
border: none; border: none;
color: #fff; color: #fff;
padding: 10px 6px; padding: 10px 6px;
background: var(--thead-bg);
font-size: 13px; } font-size: 13px; }
.m-calendar li { .m-calendar li {
display: block; display: block;
@ -21,10 +56,10 @@
width: 14.285%; width: 14.285%;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #ccc; border-right: 1px solid var(--bborder);;
border-bottom: 1px solid #ccc; } border-bottom: 1px solid var(--bborder);; }
.m-calendar li:first-child { .m-calendar li:first-child {
border-left: 1px solid #ccc; } border-left: 1px solid var(--bborder);; }
.m-calendar .days li { .m-calendar .days li {
height: 150px; height: 150px;
overflow-y: auto; } overflow-y: auto; }
@ -44,7 +79,7 @@
padding: 5px; padding: 5px;
margin-top: 5px; margin-top: 5px;
background: #e4f2f2; background: #e4f2f2;
border: 1px solid #b5dbdc; border: 1px solid var(--bborder);;
color: #009aaf; color: #009aaf;
text-decoration: none; } text-decoration: none; }
.m-calendar .event-desc { .m-calendar .event-desc {
@ -70,7 +105,7 @@
display: none; } display: none; }
.m-calendar li { .m-calendar li {
height: auto !important; height: auto !important;
border: 1px solid #ededed; border: 1px solid var(--bborder);;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
margin-bottom: -1px; } margin-bottom: -1px; }

43
Theme/Backend/css/styles.scss
View File

@ -1,3 +1,37 @@
ul.btns {
list-style: none;
overflow: hidden;
display: flex;
li {
background: var(--box-bg);;
border-left: 1px solid var(--bborder);
border-top: 1px solid var(--bborder);
border-bottom: 1px solid var(--bborder);
float: left;
padding: 0 10px 0 10px;
height: 2.5rem;
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
&:last-child {
border-right: 1px solid var(--bborder);
}
&:before {
border-left-color: var(--bborder);
margin-left: 1px;
}
}
.active, li:hover {
background: var(--btn-bg);
color: #fff;
}
}
.m-calendar { .m-calendar {
width: 100%; width: 100%;
@ -18,6 +52,7 @@
color: #fff; color: #fff;
padding: 10px 6px; padding: 10px 6px;
font-size: 13px; font-size: 13px;
background: var(--thead-bg);
} }
} }
} }
@ -28,11 +63,11 @@
width:14.285%; width:14.285%;
padding: 5px; padding: 5px;
box-sizing: border-box; box-sizing: border-box;
border-right: 1px solid #ccc; border-right: 1px solid var(--bborder);
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--bborder);
&:first-child { &:first-child {
border-left: 1px solid #ccc; border-left: 1px solid var(--bborder);
} }
} }
@ -106,7 +141,7 @@
li { li {
height: auto !important; height: auto !important;
border: 1px solid #ededed; border: 1px solid var(--bborder);
width: 100%; width: 100%;
padding: 10px; padding: 10px;
margin-bottom: -1px; margin-bottom: -1px;