...
Modifications Client
Modifications à prendre en compte dans les fichiers environment*.ts
Personnaliser l'affichage de la widget Schedule
Il est désormais possible de choisir entre 2 modes d'affichage pour la widget Schedule en page d'accueil
 Image Added
Vue 'slider' |  Image Added
Vue 'list' |
Pour prendre en compte cette nouvelle fonctionnalité, il est nécessaire d'ajouter la variable de configuration display au module ScheduleModule :
| Bloc de code |
|---|
| firstline | 114 |
|---|
| title | dev/user-frontend-ionic/src/environments/environment.ts |
|---|
| linenumbers | true |
|---|
|
ScheduleModule.forRoot({
nextEventsWidget: {
numberOfEventsLimit: 2,
numberOfDaysLimit: 7,
display: 'slider|list'
},
previousWeeksInCache: 1,
nextWeeksInCache: 2,
managerRoles: ['schedule-manager', 'multi-admin']
}), |
Modifications à prendre en compte dans les fichiers de theming
Prise en compte des images SVG dans les Widgets
...
| Bloc de code |
|---|
| firstline | 57 |
|---|
| title | dev/user-frontend-ionic/src/theme/app-theme/styles/features/widget-internal-feature.component.scss |
|---|
| linenumbers | true |
|---|
|
.feature-title {
padding: 1rem 1rem 0.2rem;
app-custom-icon {
vertical-align: text-top;
}
} |
Le fichier dev/user-frontend-ionic/src/theme/app-theme-dist/styles/schedule/next-events.component.scss a été revu complètement pour gérer 2 blocs .next-events-list-style ou .next-events-slider-style pour pouvoir prendre en compte les 2 types d'affichage possible pour la widget
| Bloc de code |
|---|
| language | css |
|---|
| title | dev/user-frontend-ionic/src/theme/app-theme-dist/styles/schedule/next-events.component.scss |
|---|
| linenumbers | true |
|---|
| collapse | true |
|---|
|
.next-events-list-style {
ion-card {
overflow: visible;
box-shadow: var(--app-border-no-box-shadow);
border-radius: var(--app-border-no-radius);
margin-top: 0 !important;
margin-bottom: 0 !important;
background: transparent;
}
.last-card {
padding-bottom: 0.8rem !important;
}
.events-container {
padding-left: 1rem !important;
padding-bottom: 0 !important;
}
.dashed-line{
position: absolute;
top: 0.77rem;
left: 0;
width: 2rem;
height: 100%;
background-image: linear-gradient(rgb(255, 255, 255) 43%, rgba(255, 255, 255, 0) 0%);
background-position: left;
background-size: 0.13rem 0.9rem;
background-repeat: repeat-y;
overflow: visible;
z-index: 10 !important;
}
.event-day {
position: relative;
padding-bottom: 0.5rem !important;
padding-top: 0.5rem !important;
padding-left: 0 !important;
z-index: 12;
}
ion-card-header {
padding-top: 0;
padding-left: 1.2rem;
padding-bottom: 0;
}
ion-card-content {
padding-left: 2.3rem;
}
.circle-top-left {
position: absolute;
top: 0.30rem;
left: -0.18rem;
width: 0.5rem;
height: 0.5rem;
background-color: var(--ion-color-dark-contrast);
border-radius: 50%;
}
.card-labels {
margin-right: 0.6rem;
}
.card-labels-icons {
margin-right: 0.3rem;
}
.light-font-color {
color: var(--app-font-color-for-dark-background-from-cms) !important;
}
.dark-font-color {
color: var(--app-font-color-for-light-background-from-cms) !important;
}
}
.next-events-slider-style {
display: block;
ion-card {
scroll-snap-align: center;
}
ion-card.slider-theme-color {
box-shadow: var(--app-border-no-box-shadow);
//border: var(--app-border-width-7) solid var(--app-border-color-primary);
background-color: var(--ion-color-tertiary);
}
ion-card-content {
padding: 0.7rem 0;
height: 100%;
display: flex;
flex-direction: column;
}
.empty-container {
padding-left: 1rem !important;
padding-bottom: 0 !important;
}
.events-container {
padding: .5rem 0 0;
display: grid;
gap: 1rem;
grid-auto-flow: column;
grid-template-columns: 10px;
grid-auto-columns: 85%;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
&::-webkit-scrollbar {
display: none;
}
&::before,
&::after {
content: '';
width: 10px;
}
.event-day-hour {
display: flex;
flex-direction: row;
border-left-width: 4px;
border-left-style: solid;
align-items: center;
flex-wrap: nowrap;
.hour {
padding-left: 1rem;
display: block;
}
.day {
padding-left: 1rem;
display: block;
ion-text {
display: block;
}
}
}
}
.card-labels {
margin-right: 0.6rem;
}
.card-labels-icons {
margin-right: 0.3rem;
}
.event-label {
padding: 1rem 1rem 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.event-additional {
display: flex;
padding: 0.2rem 0.5rem 0.2rem 2rem;
justify-content: flex-start;
flex-wrap: wrap;
flex-grow: 2;
align-items: center;
ion-row:last-child {
margin-right: 0;
}
}
.slider-font-color{
color: var(--app-font-fix-light-color) !important;
}
.light-font-color {
color: var(--app-font-color-for-dark-background-from-cms) !important;
}
.dark-font-color {
color: var(--app-font-color-for-light-background-from-cms) !important;
}
} |
Modifications à prendre en compte dans les fichiers de traduction
Personnaliser l'affichage de la widget Schedule
| Bloc de code |
|---|
| firstline | 44 |
|---|
| title | dev/user-frontend-ionic/src/theme/app-theme-dist/i18n/schedule/en.json |
|---|
|
"NEXT_EVENTS": {
"NO_EVENTS": "No courses soon",
"LIMIT_TEACHERS": "others"
} |
...