Calendar styles and server hydrogen assets
This commit is contained in:
parent
b401cbbc3a
commit
fe3f515862
|
@ -1,3 +1,13 @@
|
|||
/* apply a natural box layout model to all elements, but allowing components to change */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/* Based on .SessionView from Hydrogen */
|
||||
.ArchiveView {
|
||||
/* this takes into account whether or not the url bar is hidden on mobile
|
||||
|
@ -61,8 +71,26 @@
|
|||
}
|
||||
|
||||
.CalendarView_dayLink {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px 5px;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.CalendarView_dayLink:hover {
|
||||
background-color: rgba(141, 151, 165, 0.1);
|
||||
}
|
||||
|
||||
.CalendarView_dayLink_active {
|
||||
background-color: #f00;
|
||||
background-color: #0dbd8b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.CalendarView_dayLink_active:hover {
|
||||
background-color: #0a8f69;
|
||||
}
|
||||
|
||||
.CalendarView_dayLink_disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
const assert = require('assert');
|
||||
const path = require('path');
|
||||
const urlJoin = require('url-join');
|
||||
const express = require('express');
|
||||
const asyncHandler = require('../lib/express-async-handler');
|
||||
const StatusError = require('../lib/status-error');
|
||||
|
||||
|
@ -58,11 +59,18 @@ function parseArchiveRangeFromReq(req) {
|
|||
}
|
||||
|
||||
function installRoutes(app) {
|
||||
// We have to disable no-missing-require lint because it doesn't take into
|
||||
// account `package.json`. `exports`, see
|
||||
// https://github.com/mysticatea/eslint-plugin-node/issues/255
|
||||
// eslint-disable-next-line node/no-missing-require
|
||||
app.use(express.static(path.dirname(require.resolve('hydrogen-view-sdk/assets/'))));
|
||||
|
||||
app.get('/hydrogen-styles.css', async function (req, res) {
|
||||
res.set('Content-Type', 'text/css');
|
||||
res.sendFile(require.resolve('hydrogen-view-sdk/style.css'));
|
||||
});
|
||||
|
||||
// Our own archive app styles
|
||||
app.get('/styles.css', async function (req, res) {
|
||||
res.set('Content-Type', 'text/css');
|
||||
res.sendFile(path.join(__dirname, '../../public/styles/styles.css'));
|
||||
|
|
|
@ -101,6 +101,7 @@ class CalendarView extends TemplateView {
|
|||
t.li(
|
||||
{
|
||||
className: { CalendarView_day: true },
|
||||
// Offset the first day of the month to the proper day of the week
|
||||
style: i === 0 ? `grid-column-start: ${gridColumnStart};` : null,
|
||||
},
|
||||
[
|
||||
|
@ -109,6 +110,7 @@ class CalendarView extends TemplateView {
|
|||
className: {
|
||||
CalendarView_dayLink: true,
|
||||
CalendarView_dayLink_active: isActive,
|
||||
CalendarView_dayLink_disabled: isDayInFuture,
|
||||
},
|
||||
// Disable navigation to future days
|
||||
href: isDayInFuture ? null : vm.linkForDate(dayNumberDate),
|
||||
|
|
|
@ -15,7 +15,7 @@ class RightPanelContentView extends TemplateView {
|
|||
[
|
||||
t.div('test'),
|
||||
t.input({
|
||||
type: 'date',
|
||||
type: 'month',
|
||||
value: vm.calendarViewModel.activeDate.toISOString().split('T')[0],
|
||||
}),
|
||||
t.view(new CalendarView(vm.calendarViewModel)),
|
||||
|
|
Loading…
Reference in New Issue