diff --git a/public/styles/styles.css b/public/styles/styles.css index 751b6a1..fcce0a9 100644 --- a/public/styles/styles.css +++ b/public/styles/styles.css @@ -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; } diff --git a/server/routes/install-routes.js b/server/routes/install-routes.js index 38caaa2..c382662 100644 --- a/server/routes/install-routes.js +++ b/server/routes/install-routes.js @@ -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')); diff --git a/shared/CalendarView.js b/shared/CalendarView.js index 8c81c95..6ffbbf7 100644 --- a/shared/CalendarView.js +++ b/shared/CalendarView.js @@ -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), diff --git a/shared/RightPanelContentView.js b/shared/RightPanelContentView.js index e9097f9..95c1e7a 100644 --- a/shared/RightPanelContentView.js +++ b/shared/RightPanelContentView.js @@ -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)),