CSS: improve day view UI when calendar has many desks (#52464)
This commit is contained in:
parent
5fe731d1ec
commit
15d1e227f4
|
@ -120,7 +120,7 @@ a.timeperiod-exception-all {
|
|||
|
||||
|
||||
table.agenda-table {
|
||||
border-spacing: 1vw 0;
|
||||
border-spacing: 0.5vw 0;
|
||||
table-layout: fixed;
|
||||
background-color: white;
|
||||
padding: 0.5em 0;
|
||||
|
@ -130,6 +130,7 @@ table.agenda-table {
|
|||
.agenda-table thead th {
|
||||
padding-bottom: 1ex;
|
||||
font-weight: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@for $i from 1 through 7 {
|
||||
|
@ -173,7 +174,7 @@ table.agenda-table {
|
|||
|
||||
.agenda-table tbody tr.odd th.hour,
|
||||
.agenda-table tbody tr.odd td {
|
||||
background: hsla(0, 0%, 0%, 0.04);
|
||||
background-color: #f5f5f5;
|
||||
@media print {
|
||||
border-top: 1px solid #aaa;
|
||||
}
|
||||
|
@ -209,8 +210,8 @@ table.agenda-table {
|
|||
hsla(65, 65%, 94%, 0.4) 20%,
|
||||
hsla(65, 55%, 92%, 0.7) 70%,
|
||||
hsl(65, 50%, 90%) 90%) fixed;
|
||||
left: 0.5ex;
|
||||
width: calc(100% - 1ex);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.opening-hours {
|
||||
border-left: 0.5em solid hsl(57, 65%, 85%);
|
||||
|
@ -226,7 +227,7 @@ table.agenda-table {
|
|||
text-align: center;
|
||||
}
|
||||
&.booking {
|
||||
left: 0.5ex;
|
||||
left: 0;
|
||||
color: hsl(210, 84%, 40%);
|
||||
padding: 1ex;
|
||||
background:
|
||||
|
@ -235,15 +236,23 @@ table.agenda-table {
|
|||
hsla(0, 0%, 100%, 0.85) 0%,
|
||||
hsla(0, 0%, 100%, 0.65) 100%)
|
||||
currentColor;
|
||||
width: calc(100% - 1ex);
|
||||
width: 100%;
|
||||
border-left: .5em solid;
|
||||
border-bottom: 1px solid;
|
||||
border-color: currentColor;
|
||||
|
||||
box-shadow: 0 0 0 0 #888;
|
||||
transition:
|
||||
width 150ms ease-in,
|
||||
min-width 150ms ease-in,
|
||||
left 150ms ease-in,
|
||||
right 150ms ease-in,
|
||||
padding 150ms ease-in,
|
||||
box-shadow 250ms ease-in;
|
||||
z-index: 2;
|
||||
&:hover {
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
height: auto !important;
|
||||
box-shadow: 0 0 1em 0 #888;
|
||||
}
|
||||
> * {
|
||||
color: hsla(0, 0%, 0%, 0.6);
|
||||
|
@ -262,13 +271,6 @@ table.agenda-table {
|
|||
}
|
||||
|
||||
.monthview tbody td div.booking {
|
||||
box-shadow: 0 0 0 0 #888;
|
||||
transition:
|
||||
width 100ms ease-in,
|
||||
left 100ms ease-in,
|
||||
color 200ms ease-in,
|
||||
box-shadow 200ms ease-in,
|
||||
padding 100ms ease-in;
|
||||
text-indent: -9999px;
|
||||
&:not(:hover) {
|
||||
padding-top: 0;
|
||||
|
@ -278,7 +280,6 @@ table.agenda-table {
|
|||
text-indent: 0;
|
||||
left: 0% !important;
|
||||
width: 100% !important;
|
||||
box-shadow: 0 0 1em 0 #888;
|
||||
}
|
||||
span.desk {
|
||||
display: block;
|
||||
|
@ -289,6 +290,31 @@ table.agenda-table {
|
|||
text-indent: 0;
|
||||
}
|
||||
|
||||
.day-view.agenda-table {
|
||||
width: auto;
|
||||
min-width: 100%;
|
||||
thead th {
|
||||
min-width: 25px;
|
||||
}
|
||||
// sticky hour cells
|
||||
thead td,
|
||||
tbody th {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
background-color: white;
|
||||
}
|
||||
.booking {
|
||||
min-width: 0;
|
||||
right: 0;
|
||||
left: auto;
|
||||
&:hover {
|
||||
right: 0;
|
||||
min-width: 8.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.start-time {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue