quantum/qcal
1
0
Fork 0
mirror of https://github.com/quantum5/qcal.git synced 2025-04-24 09:41:57 -04:00
Code Issues Packages Projects Releases Wiki Activity

Factor out common month CSS

Browse source
This commit is contained in:
Quantum 2023-07-15 17:26:51 -04:00
parent 89b3c6c4e1
commit a6bed3e9ef
5 changed files with 65 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
common/package.json
View file

@ -10,6 +10,7 @@
"@types/node": "^16.11.24", "@types/node": "^16.11.24",
"@types/react": "^17.0.39", "@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
"bootstrap": "~5.1.3",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"typescript": "^4.5.5", "typescript": "^4.5.5",

49
common/src/ui/MonthBasedCalendar.scss Normal file
View file

@ -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;
}

49
frcal/src/Calendar.scss
View file

@ -5,42 +5,12 @@
@import 'bootstrap/scss/grid'; @import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons'; @import 'bootstrap/scss/buttons';
@import './consts'; @import './consts';
@import '@common/ui/MonthBasedCalendar.scss';
.Calendar { .Calendar {
@include make-container(); @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 { .Month-decadeHead {
display: none; display: none;
} }
@ -146,20 +116,3 @@
.Day-today { .Day-today {
background: $gray-300; 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;
}

49
jcal/src/Calendar.scss
View file

@ -5,42 +5,12 @@
@import 'bootstrap/scss/grid'; @import 'bootstrap/scss/grid';
@import 'bootstrap/scss/buttons'; @import 'bootstrap/scss/buttons';
@import './consts'; @import './consts';
@import '@common/ui/MonthBasedCalendar.scss';
.Calendar { .Calendar {
@include make-container(); @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 { .Month-weekdayHead {
display: none; display: none;
} }
@ -150,20 +120,3 @@
.Day-today { .Day-today {
background: $gray-300; 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;
}

37
package-lock.json generated
View file

@ -22,6 +22,7 @@
"@types/node": "^16.11.24", "@types/node": "^16.11.24",
"@types/react": "^17.0.39", "@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
"bootstrap": "~5.1.3",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"typescript": "^4.5.5", "typescript": "^4.5.5",
@ -1855,18 +1856,6 @@
"react-app-rewired": "^2.2.1" "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": { "jcal": {
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
@ -1892,18 +1881,6 @@
"react-app-rewired": "^2.2.1" "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": { "node_modules/@adobe/css-tools": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.2.0.tgz", "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", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" "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": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",