poprhythm
a9036d5d04
This commit introduces a new StateScheduleHandout component for generating printable schedules for students, including a combined master list of events. It adds configuration options in appsettings.json for state abbreviations and special event filters, enhancing the scheduling functionality. The Program.cs file is updated to register the new StateScheduleHandoutOptions, and the Calendar and Teams components are modified to include links to the new handout feature. Additionally, utility methods for filtering event occurrences are implemented to support the new functionality, improving the overall user experience in managing state schedules.
317 lines
6.7 KiB
CSS
317 lines
6.7 KiB
CSS
|
|
|
|
@media print {
|
|
/* body .container {
|
|
max-width: 1200px;
|
|
}*/
|
|
|
|
div.mud-main-content > div {
|
|
font-size: 11px;
|
|
margin: 30pt;
|
|
color: #000;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
.nobrk {
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.pagebreak {
|
|
page-break-after: always;
|
|
}
|
|
}
|
|
|
|
.ranked-event-column > div:only-child{
|
|
height:100%;
|
|
}
|
|
|
|
.ranked-event-column > div > div:nth-child(1) > .mud-card-content { background-color: #dd7e6b; }
|
|
.ranked-event-column > div > div:nth-child(2) > .mud-card-content { background-color: #ea9999; }
|
|
.ranked-event-column > div > div:nth-child(3) > .mud-card-content { background-color: #f9cb9c; }
|
|
.ranked-event-column > div > div:nth-child(4) > .mud-card-content { background-color: #ffe599; }
|
|
.ranked-event-column > div > div:nth-child(5) > .mud-card-content { background-color: #fff2cc; }
|
|
.ranked-event-column > div > div:nth-child(6) > .mud-card-content { background-color: #fffaea; }
|
|
|
|
.event-rank-1 { background-color: #dd7e6b; }
|
|
.event-rank-2 { background-color: #ea9999; }
|
|
.event-rank-3 { background-color: #f9cb9c; }
|
|
.event-rank-4 { background-color: #ffe599; }
|
|
.event-rank-5 { background-color: #fff2cc; }
|
|
.event-rank-6 { background-color: #fffaea; }
|
|
|
|
|
|
.pre-wrap-text {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.state-schedule-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.state-schedule-table th,
|
|
.state-schedule-table td {
|
|
vertical-align: top;
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.page-header-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.page-header-actions {
|
|
justify-content: flex-end;
|
|
margin-top: 0.5rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* Hide button text on small screens by setting font-size to 0 */
|
|
.page-header-actions .mud-button {
|
|
min-width: auto;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
font-size: 0;
|
|
}
|
|
|
|
/* Restore icon size - MudBlazor uses material-icons font */
|
|
.page-header-actions .mud-button .mud-icon-root {
|
|
font-size: 1.5rem !important;
|
|
display: inline-flex !important;
|
|
}
|
|
|
|
.page-header-actions .mud-button .mud-icon-root .mud-icon,
|
|
.page-header-actions .mud-button .mud-icon-root .material-icons {
|
|
font-size: 1.5rem !important;
|
|
width: 1.5rem !important;
|
|
height: 1.5rem !important;
|
|
line-height: 1.5rem !important;
|
|
}
|
|
|
|
.page-header > div > div:first-of-type {
|
|
flex-direction: column;
|
|
align-items: flex-start !important;
|
|
}
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.form-actions {
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-actions > * {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.icon-button-hover-error:hover {
|
|
color: var(--mud-palette-error) !important;
|
|
}
|
|
|
|
/* Micro-interactions: Table row transitions */
|
|
.mud-table-row {
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
/* Micro-interactions: Page transitions */
|
|
.page-enter {
|
|
animation: fadeIn 0.3s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Toolbar title responsive styling */
|
|
.appbar-title {
|
|
max-width: calc(100vw - 150px);
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.appbar-title {
|
|
font-size: 0.875rem;
|
|
max-width: calc(100vw - 120px);
|
|
}
|
|
|
|
/* Reduce base font size on mobile */
|
|
body {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
|
|
/* Markdown content styling */
|
|
.markdown-content {
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.markdown-content h1,
|
|
.markdown-content h2,
|
|
.markdown-content h3,
|
|
.markdown-content h4,
|
|
.markdown-content h5,
|
|
.markdown-content h6 {
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-content h1 {
|
|
font-size: 2em;
|
|
border-bottom: 1px solid var(--mud-palette-divider);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
font-size: 1.5em;
|
|
border-bottom: 1px solid var(--mud-palette-divider);
|
|
padding-bottom: 0.3em;
|
|
}
|
|
|
|
.markdown-content p {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.markdown-content ul,
|
|
.markdown-content ol {
|
|
margin: 1em 0;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color: var(--mud-palette-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-content code {
|
|
background-color: var(--mud-palette-background-grey);
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.markdown-content pre {
|
|
background-color: var(--mud-palette-background-grey);
|
|
padding: 1em;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid var(--mud-palette-primary);
|
|
padding-left: 1em;
|
|
margin: 1em 0;
|
|
color: var(--mud-palette-text-secondary);
|
|
}
|
|
|
|
.markdown-content table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.markdown-content table th,
|
|
.markdown-content table td {
|
|
border: 1px solid var(--mud-palette-divider);
|
|
padding: 0.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
.markdown-content table th {
|
|
background-color: var(--mud-palette-background-grey);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* Note color classes - pastel background colors */
|
|
.note-color-0 {
|
|
background-color: #e3f2fd;
|
|
}
|
|
|
|
.note-color-1 {
|
|
background-color: #fff9e6;
|
|
}
|
|
|
|
.note-color-2 {
|
|
background-color: #f3e5f5;
|
|
}
|
|
|
|
/* Calendar event item styling */
|
|
.calendar-event-item {
|
|
background-color: var(--mud-palette-primary);
|
|
color: var(--mud-palette-primary-text);
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.875rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
display: block !important;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Ensure tooltip wrapper doesn't constrain width or height and adds spacing */
|
|
.event-calendar .mud-tooltip-root {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
padding: 2px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.calendar-event-item:hover {
|
|
background-color: var(--mud-palette-primary-darken);
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.calendar-event-item:active {
|
|
background-color: var(--mud-palette-primary-darken);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
} |