Merge pull request #2669 from oat-sa/feature/TR-6452/vertical-item-la…

…yout Feature/tr 6452/vertical item layout
oat-sa · Feb 19, 2025 · 952e7fd · 952e7fd
2 parents c23499a + ec2f1c5
commit 952e7fd
Show file tree

Hide file tree

Showing 19 changed files with 204 additions and 62 deletions.
diff --git a/composer.json b/composer.json
@@ -66,7 +66,7 @@
         "oat-sa/oatbox-extension-installer": "~1.1||dev-master",
         "naneau/semver": "~0.0.7",
         "oat-sa/generis": ">=16.0.0",
-        "oat-sa/tao-core": ">=54.30.0",
+        "oat-sa/tao-core": ">=54.32.1",
         "oat-sa/extension-tao-item": ">=12.4.0",
         "oat-sa/extension-tao-test": ">=16.3.0"
     },

diff --git a/views/css/qti-runner.css b/views/css/qti-runner.css
diff --git a/views/css/qti-runner.css.map b/views/css/qti-runner.css.map
diff --git a/views/js/loader/qtiLoader.min.js.map b/views/js/loader/qtiLoader.min.js.map
diff --git a/views/js/loader/taoQtiItem.min.js b/views/js/loader/taoQtiItem.min.js
diff --git a/views/js/loader/taoQtiItem.min.js.map b/views/js/loader/taoQtiItem.min.js.map
diff --git a/views/js/loader/taoQtiItemRunner.es5.min.js b/views/js/loader/taoQtiItemRunner.es5.min.js
diff --git a/views/js/loader/taoQtiItemRunner.es5.min.js.map b/views/js/loader/taoQtiItemRunner.es5.min.js.map
diff --git a/views/js/loader/taoQtiItemRunner.min.js b/views/js/loader/taoQtiItemRunner.min.js
diff --git a/views/js/loader/taoQtiItemRunner.min.js.map b/views/js/loader/taoQtiItemRunner.min.js.map
diff --git a/views/js/qtiCreator/widgets/item/states/Active.js b/views/js/qtiCreator/widgets/item/states/Active.js
@@ -52,7 +52,7 @@ define([
             const disableIdentifier = qtiIdentifier.isDisabled;
 
             const itemElements = [$itemBody, item];
-            const itemHasClass = classes => classes.some(cls => $itemBody.hasClass(cls));
+            const itemHasClass = classes => classes.some(cls => item.hasClass(cls));
             const itemAddClass = cls => itemElements.forEach(el => el.addClass(cls));
             const itemRemoveClass = cls => itemElements.forEach(el => el.removeClass(cls));
             const itemRemoveClasses = classes => classes.forEach(itemRemoveClass);
@@ -98,6 +98,8 @@ define([
                     translationStatus: _widget.options.translationStatus
                 })
             );
+            //don't apply vertical class in editor widget ($itemBody), only save it to QTI attribute
+            $itemBody.removeClass(writingModeVerticalRlClass);
             toggleVerticalWritingModeByLang(initialXmlLang);
 
             //init widget
@@ -144,7 +146,7 @@ define([
                 },
                 writingMode(i, mode) {
                     if (mode === 'vertical') {
-                        itemAddClass(writingModeVerticalRlClass);
+                        item.addClass(writingModeVerticalRlClass);
                     } else {
                         itemRemoveClasses([writingModeVerticalRlClass]);
                     }

diff --git a/views/package-lock.json b/views/package-lock.json
diff --git a/views/package.json b/views/package.json
@@ -9,6 +9,6 @@
     },
     "dependencies": {
         "@oat-sa/tao-item-runner": "^1.0.0",
-        "@oat-sa/tao-item-runner-qti": "^2.5.3"
+        "@oat-sa/tao-item-runner-qti": "^2.6.0"
     }
 }
diff --git a/views/scss/qti/_choice.scss b/views/scss/qti/_choice.scss
@@ -26,6 +26,7 @@
             left: auto;
             right: $elimCbOffsetLeft * 1px;
         }
+
         &:after {
             content: '0';
             visibility: hidden;
@@ -195,7 +196,7 @@
         max-height: 100%;
         display: flex;
         align-items: center;
-        top: 0px;
+        top: 0;
         -webkit-tap-highlight-color: transparent; // mobile safari fix
         &:before {
             content: '0';
@@ -310,3 +311,154 @@
     }
     //END IE specific
 }
+
+.writing-mode-vertical-rl {
+    writing-mode: vertical-rl;
+
+    .qti-choiceInteraction {
+        &.maskable {
+            .qti-choice {
+                padding-top: 3rem;
+                .answer-mask {
+                    text-align: start;
+                    width: 100%;
+                    height: 2.5rem;
+                    padding-right: 0.1rem;
+                    &.masked {
+                        height: 100%;
+                    }
+                }
+                .label-content {
+                    padding-right: 0;
+                }
+                .pseudo-label-box {
+                    margin-top: 2rem;
+                }
+            }
+            .choice-area.list-style-upper-alpha .qti-choice::before {
+                top: 5.5rem;
+            }
+        }
+        &.eliminable {
+            .choice-area {
+                margin-top: 0;
+                &.plain.block-listing {
+                    .qti-choice {
+                        .label-box {
+                            margin-top: 7rem;
+                        }
+                        [data-eliminable='container'] {
+                            &:before {
+                                display: none;
+                            }
+                            width: calc(100% - 1rem);
+                            display: flex;
+                            align-items: center;
+                            margin: 0;
+                            left: 0.5rem;
+                            [data-eliminable='trigger'] {
+                                display: block;
+                                position: relative;
+                                padding: 0;
+                                top: 5rem;
+                                left: 0.8rem;
+                                &:after {
+                                    left: 0;
+                                }
+                            }
+                        }
+                    }
+                }
+                &.list-style-upper-alpha.plain.block-listing {
+                    .qti-choice {
+                        [data-eliminable='container'] {
+                            [data-eliminable='trigger'] {
+                                top: 7.5rem;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .item-instruction {
+            padding: 4rem 1rem 1rem 1rem;
+            margin: 0 0.5rem;
+
+            .icon {
+                left: 0;
+                width: 100%;
+                display: flex;
+                align-items: center;
+            }
+        }
+        .choice-area {
+            &.plain.block-listing {
+                display: flex;
+                flex-direction: column;
+                gap: 1rem;
+                height: 100%;
+
+                & > li {
+                    border: 1px solid #e0e0e0;
+                    padding-top: 1rem;
+                    height: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    &:first-child {
+                        margin-top: 0;
+                    }
+                }
+
+                .qti-choice {
+                    .real-label {
+                        width: 100%;
+                        margin-left: 0.1rem;
+                    }
+                    .label-box {
+                        margin-top: 4rem;
+                        margin-left: 0;
+                    }
+                    .icon-checkbox {
+                        &:after {
+                            left: 0;
+                        }
+                        &:before {
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+            &.list-style-upper-alpha {
+                .qti-choice {
+                    &::before {
+                        transform: rotate(270deg);
+                        top: 3.5rem;
+                        left: calc(50% - 1rem);
+                        display: block;
+                        height: min-content;
+                        position: absolute;
+                    }
+
+                    .real-label {
+                        .icon-radio:after {
+                            left: 0;
+                        }
+                        .icon-radio:before {
+                            position: absolute;
+                        }
+                    }
+
+                    .pseudo-label-box {
+                        .label-box {
+                            margin-left: 0;
+                            .label-content {
+                                margin-top: 2rem;
+                                margin-left: 0;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/views/scss/qti/_extended-text.scss b/views/scss/qti/_extended-text.scss
@@ -3,7 +3,7 @@
 .qti-extendedTextInteraction {
 
     .text-container {
-        min-height: 50px;
+        min-block-size: 50px;
 
         &.text-preformatted {
             font-family: $monospaceFont;
@@ -49,9 +49,9 @@
     }
 
     textarea {
-        max-width: 100%!important;
-        width: 100%;
-        height: 150px;
+        max-inline-size: 100%!important;
+        inline-size: 100%;
+        block-size: 150px;
         resize: none;
 
         &[disabled="disabled"] {

diff --git a/views/scss/qti/_inline-choice.scss b/views/scss/qti/_inline-choice.scss
@@ -1,23 +1,17 @@
 @import "inc/bootstrap";
 
 select.qti-inlineChoiceInteraction {
-    min-width: 150px;
-    max-width: 100%;
-    width: auto;
-    padding-right: 20px;
+    min-inline-size: 150px;
+    max-inline-size: 100%;
+    inline-size: auto;
+    padding-inline-end: 20px;
     font-size: 14px;
 }
 
-.qti-inlineChoiceInteraction {
-    &.rtl {
-        .select2-chosen {
-            margin: 0 0 0 30px;
-        }
-    }
-    &.ltr {
-        .select2-chosen {
-            margin: 0 30px 0 0;
-        }
+.qti-inlineChoiceInteraction.qti-inlineChoiceInteraction {
+    .select2-chosen {
+        margin-block: 0;
+        margin-inline: 0 30px;
     }
 }
 .qti-inlineChoiceInteraction .select2-chosen,
@@ -27,8 +21,13 @@ select.qti-inlineChoiceInteraction,
     font-weight: normal !important;
 }
 
-// shadow like focused element
+
 .qti-inlineChoiceInteraction {
+    &.select2-container {
+        max-inline-size: 100%;
+    }
+
+    // shadow like focused element
     .select2-container-active {
         outline-color: $colorWheel-05;
         outline-style: auto;
@@ -37,29 +36,19 @@ select.qti-inlineChoiceInteraction,
 
     // needed to adjust select2 height to the math content
     .select2-choice {
-        min-width: 150px;
-        min-height: 26px;
-        height: 100%;
+        min-inline-size: 150px;
+        min-block-size: 26px;
+        block-size: 100%;
     }
 }
-.select2-container {
-    &.rtl {
-        .select2-choice {
-            padding: 0 8px 0 0;
+.select2-container.select2-container {
+    .select2-choice {
+        padding-inline: 8px 0;
+        padding-block: 0;
 
-            .select2-arrow {
-                left: 0;
-                right: auto;
-            }
-        }
-    }
-    &.ltr {
-        .select2-choice {
-                padding: 0 0 0 8px;
-            .select2-arrow {
-                right: 0;
-                left: auto;
-            }
+        .select2-arrow {
+            inset-inline-end: 0;
+            inset-inline-start: auto;
         }
     }
 }
diff --git a/views/scss/qti/_qti-base.scss b/views/scss/qti/_qti-base.scss
@@ -244,7 +244,7 @@ $mainContainer : '.qti-item';
             outline-color: $colorWheel-05;
         }
         .text-container{
-            min-height: 50px;
+            min-block-size: 50px;
 
             &.text-preformatted{
                 font-family: $monospaceFont;
@@ -263,7 +263,7 @@ $mainContainer : '.qti-item';
         }
         .empty {
             border: 1px $uiClickableHoverBg dashed !important;
-            min-height: 50px;
+            min-block-size: 50px;
             cursor: default;
         }
 

diff --git a/views/scss/qti/_text-entry.scss b/views/scss/qti/_text-entry.scss
@@ -51,6 +51,7 @@
         line-height: 2.5;
         border: 2px solid black;
         padding: 5px;
-        margin: 0 5px;
+        margin-block: 0;
+        margin-inline: 5px;
     }
 }
diff --git a/views/scss/qtiCreator/_choice.scss b/views/scss/qtiCreator/_choice.scss
@@ -79,5 +79,3 @@
         }
     }
 }
-
-