From a6bed3e9efbeb4a8ae0f470feb97560460f51e48 Mon Sep 17 00:00:00 2001 From: Quantum Date: Sat, 15 Jul 2023 17:26:51 -0400 Subject: [PATCH] Factor out common month CSS --- common/package.json | 1 + common/src/ui/MonthBasedCalendar.scss | 49 +++++++++++++++++++++++++++ frcal/src/Calendar.scss | 49 +-------------------------- jcal/src/Calendar.scss | 49 +-------------------------- package-lock.json | 37 +++++++------------- 5 files changed, 65 insertions(+), 120 deletions(-) create mode 100644 common/src/ui/MonthBasedCalendar.scss diff --git a/common/package.json b/common/package.json index a2432ba..83a7e5a 100644 --- a/common/package.json +++ b/common/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.11.24", "@types/react": "^17.0.39", "@types/react-dom": "^17.0.11", + "bootstrap": "~5.1.3", "react": "^17.0.2", "react-dom": "^17.0.2", "typescript": "^4.5.5", diff --git a/common/src/ui/MonthBasedCalendar.scss b/common/src/ui/MonthBasedCalendar.scss new file mode 100644 index 0000000..ff58416 --- /dev/null +++ b/common/src/ui/MonthBasedCalendar.scss @@ -0,0 +1,49 @@ +@import 'bootstrap/scss/variables'; + +.Calendar-head { + display: flex; + justify-content: center; + font-size: 2em; + font-weight: 600; + position: sticky; + top: 0; + z-index: 20; + background: white; + margin-top: -$spacer * 4; + padding-top: $spacer * 4; + + .btn { + margin: 0 1px; + } +} + +.Calendar-prev, .Calendar-next { + flex: 0 2.5em; +} + +.Calendar-prev { + text-align: right; +} + +.Calendar-month-name { + flex: 1; + max-width: 30rem; + text-align: center; +} + +.Calendar-month-name.input-group { + justify-content: center; + font-size: 0.75em; +} + +.Calendar-month-input { + max-width: 12.5em; +} + +.Calendar-year-input { + max-width: 6em; +} + +.Calendar-today-button { + max-width: 5em; +} diff --git a/frcal/src/Calendar.scss b/frcal/src/Calendar.scss index bc0971b..aec8426 100644 --- a/frcal/src/Calendar.scss +++ b/frcal/src/Calendar.scss @@ -5,42 +5,12 @@ @import 'bootstrap/scss/grid'; @import 'bootstrap/scss/buttons'; @import './consts'; +@import '@common/ui/MonthBasedCalendar.scss'; .Calendar { @include make-container(); } -.Calendar-head { - display: flex; - justify-content: center; - font-size: 2em; - font-weight: 600; - position: sticky; - top: 0; - z-index: 1; - background: white; - margin-top: -$spacer * 4; - padding-top: $spacer * 4; - - .btn { - margin: 0 1px; - } -} - -.Calendar-prev, .Calendar-next { - flex: 0 2.5em; -} - -.Calendar-prev { - text-align: right; -} - -.Calendar-month-name { - flex: 1; - max-width: 30rem; - text-align: center; -} - .Month-decadeHead { display: none; } @@ -146,20 +116,3 @@ .Day-today { background: $gray-300; } - -.Calendar-month-name.input-group { - justify-content: center; - font-size: 0.75em; -} - -.Calendar-month-input { - max-width: 12.5em; -} - -.Calendar-year-input { - max-width: 6em; -} - -.Calendar-today-button { - max-width: 5em; -} diff --git a/jcal/src/Calendar.scss b/jcal/src/Calendar.scss index dfd84fb..a775a66 100644 --- a/jcal/src/Calendar.scss +++ b/jcal/src/Calendar.scss @@ -5,42 +5,12 @@ @import 'bootstrap/scss/grid'; @import 'bootstrap/scss/buttons'; @import './consts'; +@import '@common/ui/MonthBasedCalendar.scss'; .Calendar { @include make-container(); } -.Calendar-head { - display: flex; - justify-content: center; - font-size: 2em; - font-weight: 600; - position: sticky; - top: 0; - z-index: 20; - background: white; - margin-top: -$spacer * 4; - padding-top: $spacer * 4; - - .btn { - margin: 0 1px; - } -} - -.Calendar-prev, .Calendar-next { - flex: 0 2.5em; -} - -.Calendar-prev { - text-align: right; -} - -.Calendar-month-name { - flex: 1; - max-width: 30rem; - text-align: center; -} - .Month-weekdayHead { display: none; } @@ -150,20 +120,3 @@ .Day-today { background: $gray-300; } - -.Calendar-month-name.input-group { - justify-content: center; - font-size: 0.75em; -} - -.Calendar-month-input { - max-width: 12.5em; -} - -.Calendar-year-input { - max-width: 6em; -} - -.Calendar-today-button { - max-width: 5em; -} diff --git a/package-lock.json b/package-lock.json index 07e96ad..4fd3220 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "@types/node": "^16.11.24", "@types/react": "^17.0.39", "@types/react-dom": "^17.0.11", + "bootstrap": "~5.1.3", "react": "^17.0.2", "react-dom": "^17.0.2", "typescript": "^4.5.5", @@ -1855,18 +1856,6 @@ "react-app-rewired": "^2.2.1" } }, - "frcal/node_modules/bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - }, - "peerDependencies": { - "@popperjs/core": "^2.10.2" - } - }, "jcal": { "version": "0.1.0", "dependencies": { @@ -1892,18 +1881,6 @@ "react-app-rewired": "^2.2.1" } }, - "jcal/node_modules/bootstrap": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - }, - "peerDependencies": { - "@popperjs/core": "^2.10.2" - } - }, "node_modules/@adobe/css-tools": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz", @@ -6709,6 +6686,18 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + }, + "peerDependencies": { + "@popperjs/core": "^2.10.2" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",