LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(css) Improve Calendar views

pull/110/head
Francis Lachapelle 2015-10-15 10:50:24 -04:00
parent 24ad2493a4
commit 2c2c5241eb
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
UI/Templates/SchedulerUI/UIxCalDayTable.wox
View File

@ -6,7 +6,7 @@
xmlns:const="http://www.skyrix.com/od/constant"
xmlns:rsrc="OGo:url"
xmlns:label="OGo:label">
<md-toolbar class="daysView md-hue-1" md-scroll-shrink="true" var:sg-view="currentView">
<md-toolbar class="daysView md-hue-1" var:sg-view="currentView">
<!-- Display today abreviation and date -->
<div class="days dayLabels">
@ -14,7 +14,7 @@
<div var:class="dayClasses">
<!-- Week view day header -->
<var:if condition="isWeekView">
<div class="sg-md-caption"><var:string value="labelForDay"/></div>
<div class="sg-md-caption md-default-theme md-fg md-primary md-hue-1"><var:string value="labelForDay"/></div>
<var:if condition="currentTableDay.isToday">
<div class="sg-md-display-2 md-default-theme md-fg md-accent md-hue-2"><var:string value="currentTableDay.dayOfMonth"/></div>
</var:if>

2
UI/Templates/SchedulerUI/UIxCalMonthView.wox
View File

@ -42,7 +42,7 @@
<div layout="row" layout-align="center center"
class="md-flex md-default-theme md-fg md-hue-2">
<var:foreach list="headerDaysToDisplay" item="currentTableDay">
<div class="md-flex-fix dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
<div class="dayLabels"><var:string value="labelForCurrentDayToDisplay"/></div>
</var:foreach>
</div>
</md-toolbar>

25
UI/WebServerResources/scss/views/SchedulerUI.scss
View File

@ -59,6 +59,7 @@ $scrollbar_width: 16px;
// The days labels appear in the toolbar
md-toolbar {
&.daysView, &.monthView {
background-color: #fff;
overflow: hidden;
z-index: $z-index-toolbar - 1;
.days {
@ -124,8 +125,9 @@ $scrollbar_width: 16px;
text-overflow: ellipsis;
white-space: nowrap;
font-size: $sg-font-size-2;
padding: 2px;
min-height: $sg-font-size-2 + 4px;
padding: 4px;
min-height: $sg-font-size-2 + 8px;
text-align: right;
//font-weight: $sg-font-light;
overflow: hidden;
}
@ -195,6 +197,7 @@ $scrollbar_width: 16px;
// Multicolumn day cell that contains the calendar name
.multicolumnDay {
color: $colorGrey900;
font-size: $subhead-font-size-base;
font-weight: $sg-font-light;
overflow: hidden;
@ -204,22 +207,28 @@ $scrollbar_width: 16px;
}
.monthView {
.dayLabels {
// Cells of week days of all the same width
flex: 1 1 0;
text-align: center;
}
md-grid-tile {
//border: 1px solid sg-color($sogoPaper, 300);
border-right: 1px solid rgb(242, 242, 242);
border-bottom: 1px solid rgb(242, 242, 242);
// Border of month day cell
border-right: 1px solid $colorGrey100;
border-bottom: 1px solid $colorGrey100;
overflow: auto;
// Cells of another month
&.dayOfAnotherMonth {
background-color: rgb(250, 250, 250);
//border-color: #ddd;
background-color: $colorGrey50;
.sg-calendar-tile-header,
.sg-calendar-tile-header > span {
color: rgb(221, 221, 221) !important; // Overwrite dynamic CSS theme
color: $colorGrey300 !important;
}
}
&.dayOfToday {
.sg-calendar-tile-header {
> span {
// Circle today's date
border-radius: 50%;
color: #fff;
display: inline-block;