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

19
events/index.html
View file

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