EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 quiz: Add fake item styles to avoid ion items problems

main
Pau Ferrer Ocaña 2021-06-14 13:54:53 +02:00
parent 5f0e9d619b
commit a281ce2d4f
2 changed files with 102 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/addons/qtype/multianswer/component/addon-qtype-multianswer.html
View File

@ -1,10 +1,8 @@
<ion-list class="addon-qtype-multianswer-container" *ngIf="question && (question.text || question.text === '')">
<ion-item class="ion-text-wrap">
<ion-label>
<core-format-text [component]="component" [componentId]="componentId" [text]="question.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="questionRendered()">
</core-format-text>
</ion-label>
</ion-item>
<div class="fake-ion-item ion-text-wrap">
<core-format-text [component]="component" [componentId]="componentId" [text]="question.text"
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="questionRendered()">
</core-format-text>
</div>
</ion-list>

98
src/theme/theme.base.scss
View File

@ -146,13 +146,15 @@ ion-app.ios ion-header h2 {
// Correctly inherit ion-text-wrap onto labels.
.item ion-label core-format-text .core-format-text-content > * {
.item ion-label core-format-text .core-format-text-content > *,
.fake-ion-item core-format-text .core-format-text-content > * {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item.ion-text-wrap ion-label core-format-text .core-format-text-content > * {
.item.ion-text-wrap ion-label core-format-text .core-format-text-content > *,
.fake-ion-item.ion-text-wrap core-format-text .core-format-text-content > * {
white-space: normal;
}
@ -783,6 +785,98 @@ audio.core-media-adapt-width {
width: 100%;
}
// Fake item.
div.fake-ion-item {
position: relative;
align-items: center;
justify-content: space-between;
outline: none;
color: var(--ion-text-color);
background: var(--ion-item-background);
text-align: initial;
text-decoration: none;
overflow: hidden;
box-sizing: border-box;
}
html.md div.fake-ion-item {
font-size: 16px;
font-weight: normal;
text-transform: none;
@include padding(null, 16px, null, 16px);
@include margin(11px, null, 10px, null);
h1 {
@include margin(0, 0, 2px);
font-size: 24px;
font-weight: normal;
}
h2 {
@include margin(2px, 0);
font-size: 16px;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
@include margin(2px, 0);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
p {
@include margin(0, 0, 2px);
font-size: 14px;
line-height: 20px;
text-overflow: inherit;
overflow: inherit;
}
}
html.ios div.fake-ion-item {
font-size: 14px;
@include padding(null, 10px, null, 20px);
@include margin(10px, 8px, 10px, null);
h1 {
@include margin(3px, 0, 2px);
font-size: 22px;
font-weight: normal;
}
h2 {
@include margin(0, 0, 2px);
font-size: 17px;
font-weight: normal;
}
h3,
h4,
h5,
h6 {
@include margin(0, 0, 3px);
font-size: 14px;
font-weight: normal;
line-height: normal;
}
p {
@include margin(0, 0, 2px 0);
font-size: 14px;
line-height: normal;
text-overflow: inherit;
overflow: inherit;
}
}
// Make links clickable when inside radio or checkbox items. Style part.
@media (hover: hover) {
ion-item.item-multiple-inputs:hover::part(native) {