c-ctrl/infoscreens
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve calendar readability

Browse source
This commit is contained in:
Henri Bergius 2017-12-01 17:32:06 +01:00
parent 275a4d6e19
commit 9f7436f60a
2 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
events/calendar.js
View file

@ -1,7 +1,5 @@
import dateformat from 'dateformat';
import timeElement from '../elements/time';
export default timeElement;
import '../elements/time';
function getEvents(number) {
const now = new Date();
@ -68,7 +66,7 @@ function renderEvent(event, container) {
time.innerHTML = dateformat(startDate, timeFormat);
}
code.innerHTML = `CB${pad(event.id)}`;
code.innerHTML = `C${pad(event.id)}`;
destination.innerHTML = event.title;
if (startDate.toDateString() !== prevDate.toDateString()) {

19
events/index.html
View file

@ -15,13 +15,16 @@
margin-left: auto;
margin-right: auto;
overflow-y: hidden;
margin-left: 3vw;
margin-right: 3vw;
}
#events td {
font-size: 7vmin;
vertical-align: top;
text-shadow: #000000 1px 0 10px;
}
#events tr {
margin-bottom: 6vh;
margin-bottom: 16vh;
}
#events tr.today {
color: #fff;
@ -30,6 +33,8 @@
color: hsl(35, 98%, 36%);
font-weight: bold;
max-width: 46vw;
max-height: 17vmin;
padding-right: 2vw;
overflow: hidden;
text-overflow: ellipsis;
}
@ -39,15 +44,21 @@
#events td.code {
font-family: 'ceva', sans-serif;
}
#events td.time {
padding-left: 2vw;
padding-right: 2vw;
}
#events td.status {
text-align: right;
text-transform: lowercase;
white-space: nowrap;
padding-right: 2vw;
padding-top: 2vmin;
font-size: 5vmin;
}
#events tr.today td.status {
background-color: hsl(35, 98%, 46%);
text-align: center;
text-shadow: none;
padding-top: 0px;
font-size: 7vmin;
color: #000;
@ -68,12 +79,14 @@
position: absolute;
left: 0px;
bottom: 0px;
margin-left: 3vw;
}
#current-time {
position: absolute;
right: 0px;
bottom: 0px;
text-align: right;
margin-right: 3vw;
}
@media (orientation: portrait) {
#events td.code {
@ -82,7 +95,7 @@
}
</style>
</head>
<body>
<body class="station">
<h1 id="screen-title">c-base events</h1>
<table id="events">
</table>