LP: Refactoring viewer styles - refs BT#21588

assets/css/scorm.scss

@@ -6,8 +6,114 @@ See https://support.chamilo.org/issues/6976
 /* LP SCORM */
 /* Default LP left column values */
 
-body {
+#learning_path_main {
-    padding-top: 0px;
+    @apply flex min-w-full max-h-screen m-0 overflow-hidden;
+}
+
+#learning_path_left_zone,
+#learning_path_right_zone {
+    @apply m-0 p-0 duration-200;
+
+    .lp-view-zone-container {
+        @apply flex flex-col h-full;
+    }
+}
+
+#learning_path_left_zone {
+    @apply min-w-full min-h-screen pt-14
+        md:min-w-96 md:w-96 md:border-r md:border-gray-25;
+
+    .lp-view-collapsed & {
+        @apply -ml-[100%]
+            md:-ml-80
+        ;
+
+        .lp-view-zone-container {
+            @apply invisible;
+        }
+    }
+
+    #scorm-info {
+        @apply flex-grow-0 p-4 border-b border-gray-25;
+
+        #panel-scorm {
+        }
+
+        .image-avatar {
+            @apply text-center text-gray-90 mb-6;
+
+            img {
+                @apply m-auto h-[40px] w-auto;
+            }
+
+            .media-author {
+                @apply text-left flex gap-2;
+
+                .media-author-avatar {
+                    @apply flex-grow-0 flex-shrink-0;
+
+                    img {
+                        @apply h-auto w-[40px];
+                    }
+                }
+
+                .media-author-description {
+                    @apply text-tiny flex-grow;
+                }
+            }
+        }
+    }
+
+    .scorm-body{
+        @apply flex-grow overflow-y-auto;
+    }
+}
+
+#learning_path_right_zone {
+    @apply min-w-full max-h-screen pt-14
+        md:min-w-min md:w-full md:pt-0
+    ;
+
+    .lp-view-collapsed & {
+
+        .lp-view-zone-container {
+        }
+    }
+
+    .lp-view-tabs {
+        @apply flex flex-col min-h-full p-4;
+
+        #tab-iframe {
+            @apply h-full;
+        }
+    }
+
+    #lp-view-content {
+        @apply h-full relative;
+    }
+
+    #wrapper-iframe {
+        @apply h-full;
+
+        iframe {
+        }
+    }
+}
+
+.sidebar-scorm {
+
+}
+
+
+.inner_lp_toc {
+    @apply text-gray-90 bg-gray-10;
+}
+
+#scorm-info hr {
+    width: 100%;
+    border-top: 1px solid #d7d7d7;
+    margin-top: 5px;
+    margin-bottom: 10px;
 }
 
 .audio-scorm #container {
@@ -50,10 +156,6 @@ body {
     padding-bottom: 5px;
 }
 
-#learning_path_left_zone .description-autor {
-    text-align: left;
-}
-
 .inner_lp_toc .scorm_item a {
     font-weight: bold;
     font-size: 14px;
@@ -130,43 +232,6 @@ body {
     margin: 0 0.5em 0 10em;
 }
 
-.scorm_item_normal {
-    line-height: 25px;
-    border-bottom: 1px solid #DDD;
-    padding: 10px 0;
-}
-
-.level_0 {
-    margin: 0;
-    padding-left: 30px;
-}
-
-.level_1 {
-    margin: 0 0.5em 0 20px;
-    padding-left: 30px;
-}
-
-.level_2 {
-    margin: 0 0.5em 0 40px;
-    padding-left: 30px;
-}
-
-.level_3 {
-    margin: 0 0.5em 0 60px;
-    padding: 5px 5px 5px 30px;
-    line-height: 14px;
-}
-
-.level_4 {
-    margin: 0 0.5em 0 70px;
-    padding-left: 30px;
-}
-
-.level_5 {
-    margin: 0 0.5em 0 90px;
-    padding-left: 30px;
-}
-
 #learning_path_breadcrumb_zone .breadcrumb {
     background-color: #2b3d53;
     border-radius: 0;
@@ -233,187 +298,24 @@ body {
     font-size: 12px;
 }
 
-/* for section */
-.scorm_item_section {
-    border-bottom: 1px solid #DDD;
-    font-size: 14px;
-    font-weight: bold;
-}
-
-.scorm_item_section .section {
-    background: url("../../public/img/scorm/folder-item-closed.png") no-repeat 10px center;
-    padding: 10px 20px 10px 35px;
-}
-
-.scorm_item_section.scorm_completed .section {
-    background: url("../../public/img/scorm/folder-item-open.png") no-repeat 10px center;
-    padding-right: 1.5em;
-}
-
-.scorm_item_normal a:hover {
-    text-decoration: none;
-}
-
-.scorm_completed .item {
-    background: url("../../public/img/scorm/scorm_completed.png") no-repeat 10px center;
-}
-
-.scorm_failed .item {
-    background: url("../../public/img/scorm/scorm_failed.png") no-repeat 10px center;
-}
-
-.scorm_not_attempted .item {
-    background: url("../../public/img/scorm/scorm_not_attempted.png") no-repeat 10px center;
-}
 
 /* END SCORM CSS BASE*/
-#scorm-info {
-    padding: 0;
-    display: inline-block;
-    width: 100%;
-}
-
-#scorm-info .description-autor p {
-    font-size: 12px;
-    line-height: 20px;
-    color: #666666;
-}
-
-#scorm-info hr {
-    width: 100%;
-    border-top: 1px solid #d7d7d7;
-    margin-top: 5px;
-    margin-bottom: 10px;
-}
-
-#scorm-info #progress_bar {
-  @apply mb-2;
-}
-
-#scorm-info #progress_bar .progress {
-    @apply rounded-sm ring-1 bg-white text-center min-h-full ml-12 mr-4;
-}
-
-#scorm-info .progress-bar {
-  line-height: 17px;
-}
-
 .scorm-title {
     padding: 10px;
     display: inline-block;
     width: 100%;
 }
 
-.scorm-body{
-    display: inline-block;
-    width: 100%;
-}
-
 .scorm-title h4 {
     font-size: 18px;
     font-weight: bold;
     color: #686f7a;
 }
 
-.image-avatar {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    margin-left: 3rem;
-    margin-right: 1rem;
-}
-.image-avatar .media-author .media-author-avatar{
-    text-align: center;
-    margin-bottom: 1.5rem;
-}
-.image-avatar .media-author .media-author-avatar img{
-    border: 1px solid #cdcdcd;
-    border-radius: 10px;
-}
-
-.lp-view-tabs{
-    margin-top: 4px;
-}
-
 #learning_path_right_zone .lp-view-tabs li a {
     padding: 5px;
 }
 
-#learning_path_main {
-    height: 100%;
-    margin: 0;
-    overflow: hidden;
-    position: absolute;
-    width: 100%;
-}
-
-#learning_path_left_zone,
-#learning_path_right_zone {
-    bottom: 0;
-    box-sizing: content-box;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition-property: left, width;
-    transition-duration: 0.5s;
-}
-
-#learning_path_right_zone #wrapper-iframe {
-    height: 100%;
-    width: 100%;
-}
-
-#learning_path_left_zone .lp-view-zone-container,
-#learning_path_right_zone .lp-view-zone-container {
-    bottom: 0;
-    left: 0;
-    padding: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
-#learning_path_toc {
-    bottom: 0;
-    left: 0;
-    overflow: auto;
-    position: absolute;
-    right: 0;
-    top: 100%;
-    transition-property: top;
-    transition-duration: 0.1s;
-}
-
-#learning_path_right_zone {
-    left: 100%;
-    width: 100%;
-}
-
-#learning_path_right_zone.no-right-col {
-    left: 0;
-}
-
-#learning_path_right_zone .tab-pane {
-    height: 100%;
-    position: relative;
-}
-
-#learning_path_right_zone .tab-pane iframe {
-    border: 0 none;
-    height: 100%;
-    width: 100%;
-}
-
-#learning_path_main.lp-view-collapsed #learning_path_left_zone {
-    left: -100%;
-}
-
-#learning_path_main.lp-view-collapsed #learning_path_right_zone {
-    left: 0;
-    width: 100%;
-}
 .iframe_sco{
     top: 0 !important;
 }
@@ -432,21 +334,6 @@ body {
     margin: 0;
 }
 
-.icon-toolbar .fa,
-.icon-toolbar .mdi {
-    width: 35px;
-    height: 35px;
-    line-height: 35px;
-    text-align: center;
-    border-radius: 100%;
-    font-size: 20px;
-}
-
-.icon-toolbar .fa:hover,
-.icon-toolbar .mdi:hover {
-  color: #666666;
-}
-
 .expand .fa,
 .expand .mdi {
 }
@@ -468,12 +355,46 @@ body {
 /** MENU FLOAT **/
 
 .c-menu-left {
-    height: auto;
+    @apply fixed h-14 w-full left-0 top-0 p-2 border-b border-gray-30 flex items-center gap-2
-    left: 0;
+        md:w-96 md:border-r md:bg-white
-    top: 0;
+    ;
-    position: fixed;
+
-    z-index: 5;
+    .circle {
+        @apply flex-grow duration-200 ease-out -translate-x-full opacity-0 transition-opacity
+            md:order-2
+        ;
+
+        &.open {
+            @apply translate-x-0 opacity-100;
+        }
+    }
+
+    .menu-button {
+        @apply flex-grow-0 flex-shrink-0 z-10
+            md:order-1
+        ;
     }
+
+    .menu-button,
+    .icon-toolbar {
+        @apply text-center text-gray-50 w-8 h-8 inline-flex items-center justify-center
+            hover:text-gray-90
+            active:text-gray-90
+        ;
+
+        font-size: 24px;
+        line-height: 32px;
+    }
+
+    .lp-view-collapsed & {
+        @apply md:w-16 md:flex-col md:text-center md:h-auto;
+
+        .circle:not(.open) {
+            @apply md:hidden;
+        }
+    }
+}
+
 .c-menu-right {
     display: inline-flex;
     position: relative;
@@ -481,20 +402,6 @@ body {
     left: 0;
     z-index: 5;
 }
-.c-menu-left .circle {
-    opacity: 0;
-    margin-left: 50px;
-    margin-top: 4px;
-    padding: 2px;
-    border-radius: 20px;
-    -webkit-transform: translate(-100%);
-    -moz-transform:  translate(-100%);
-    -transform:  translate(-100%);
-    -webkit-transition: all 0.4s ease-out;
-    -moz-transition: all 0.4s ease-out;
-    transition: all 0.4s ease-out;
-    @apply border-2;
-}
 .c-menu-right .circle {
     opacity: 0;
     margin-left: 50px;
@@ -505,17 +412,11 @@ body {
     @apply border-2;
 }
 
-.c-menu-left .open.circle {
-    opacity: 1;
-    -webkit-transform:  translate(0%);
-    -moz-transform: translate(0%);
-    -transform: translate(0%);
-}
 .c-menu-right .open.circle {
     opacity: 1;
 }
 
-.c-menu-left .circle a, .c-menu-right .circle a {
+.c-menu-right .circle a {
     text-decoration: none;
     display: inline-block;
     height: 35px;
@@ -525,29 +426,10 @@ body {
     border-radius: 100%;
 }
 
-.c-menu-left .circle a:hover {
+.btn-open-pdf {
-    color: #eef;
+    @apply text-tiny absolute -top-4 right-0 text-gray-90;
-}
-
-.menu-button {
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    text-align: center;
-    border-radius: 50%;
-    display: block;
-    height: 40px;
-    width: 40px;
-    line-height: 19px;
-    padding: 7px;
-    background: #ffffff;
-    font-size: 16px;
-    @apply border-2;
-}
 
-.menu-button:hover {
+    line-height: 32px;
-}
-.menu-button-selected {
 }
 
 /* LP VIEW COLLAPSE */
@@ -601,18 +483,6 @@ body {
     border-bottom: none;
 }
 
-.scorm_item_normal.scorm_completed:not(.scorm_item_section) {
-    background: url(../../public/img/icons/svg/check-completed.svg) #F5F5F5 right center no-repeat;
-}
-
-.scorm_item_normal.scorm_not_attempted:not(.scorm_item_section) {
-    background: url(../../public/img/icons/svg/check-not-attempted.svg) #FFFFFF right center no-repeat;
-}
-
-.sidebar-scorm {
-    border-right: 1px solid #e6e6e6;
-}
-
 .scorm-collapse-list {
     padding: 0;
     margin: 0 0 10px 0;
@@ -684,186 +554,270 @@ body {
 }
 
 // Using preset styles from SCSS
-.scorm_item_normal a.items-list {
-  display: inline-block;
-  width: 100%;
-}
 .scorm_completed .item a{
 }
 .scorm_completed .item a.scorm_highlighted{
 }
-.scorm_highlight .item {
+
-  background: url("../../public/img/scorm/scorm_highlight.png") no-repeat 10px center !important;
-}
-.scorm_highlight.scorm_completed .item {
-  background: url("../../public/img/scorm/scorm_current.png") no-repeat 10px center !important;
-}
-.scorm_highlight.scorm_failed .item {
-  background: url("../../public/img/scorm/scorm_failed.png") no-repeat 10px center !important;
-}
-.scorm_item_normal.scorm_highlight {
-}
-.scorm_item_normal.scorm_highlight.scorm_not_attempted {
-  background: url(../../public/img/icons/svg/check-not-attempted.svg) #00829C right center no-repeat;
-}
-.scorm_item_normal.scorm_highlight.scorm_completed {
-  background: url(../../public/img/icons/svg/check-highlight.svg) #00829C right center no-repeat;
-}
-.scorm_item_normal.scorm_highlight a {
-  color: #FFF;
-}
 #learning_path_toc .root_item.lp_item_type_document.scorm_highlight{
 }
 #learning_path_toc .child_item.lp_item_type_document.scorm_highlight{
 }
-#learning_path_right_zone .lp-view-tabs .tab-content {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  top: 70px;
-  right: 0;
-}
 
 #item-parent-names {
   margin: 5px 0px;
 }
 
+/* Medium devices (desktops, 992px and up) */
+@media (min-width: 992px) {
+}
 
-/* END LP VIEW COLLAPSE */
+/* Large devices (large desktops, 1200px and up) */
-/* Small devices (tablets, 768px and up) */
+@media (min-width: 480px) and (max-width: 767px) {
-@media (min-width: 768px) {
+    #scorm-info {
-    #learning_path_left_zone {
+        padding: 0;
-        width: 250px;
+        margin: 0;
+    }
+
+    #scorm-info {
+        padding: 30px 0 0 0;
+        margin: 0;
     }
 
-    #learning_path_right_zone {
-        left: 250px;
-        width: calc(100% - 250px);
 }
 
-    #learning_path_right_zone.no-right-col {
+/* Landscape phones and down */
+@media (max-width: 480px) {
+    .scorm-title {
+        font-size: 14px;
+        padding: 10px;
+    }
+
+    .movil-toolbar {
         width: 100%;
+        height: auto;
     }
 
-    #learning_path_main.lp-view-include-breadcrumb #learning_path_left_zone,
+    .btn-movil {
-    #learning_path_main.lp-view-include-breadcrumb #learning_path_right_zone {
+        width: 130px;
-        top: 0;
+        margin: auto;
     }
 
-    #learning_path_right_zone .tab-pane {
+    #scorm-info {
+        padding: 30px 0 0 0;
+        margin: 0;
     }
 
-    #learning_path_right_zone .tab-pane iframe {
+    #scorm-info hr {
+        display: none;
     }
 }
 
-/* Medium devices (desktops, 992px and up) */
+.scorm_item_normal {
-@media (min-width: 992px) {
+    @apply bg-no-repeat bg-transparent bg-right;
-    #learning_path_left_zone {
+
-        width: 300px;
+    background-position-x: calc(100% - 1rem);
+
+    a {
+        @apply hover:no-underline;
+
+        &.items-list {
+            @apply block;
+        }
     }
 
-    #learning_path_right_zone {
+    &.scorm_completed:not(.scorm_item_section) {
-        left: 300px;
+        background-image: url(../../public/img/icons/svg/check-completed.svg);
-        width: calc(100% - 300px);
     }
+
+    &.scorm_not_attempted:not(.scorm_item_section) {
+        background-image: url(../../public/img/icons/svg/check-not-attempted.svg);
     }
 
-/* Large devices (large desktops, 1200px and up) */
+    &.scorm_highlight {
-@media (min-width: 1200px) {
+        &.scorm_not_attempted {
-    #learning_path_left_zone {
+            background-image: url(../../public/img/icons/svg/check-not-attempted.svg) !important;
-        width: 450px;
         }
 
-    #learning_path_right_zone {
+        &.scorm_completed {
-        left: 465px;
+            background-image: url(../../public/img/icons/svg/check-highlight.svg) !important;
-        width: calc(100% - 465px);
         }
     }
 
-@media (min-width: 979px) and (max-width: 1024px) {
+    &.scorm_item_section {
-    #panel-scorm .image-avatar {
+        .section {
-        display: none;
+            @apply py-3 pr-4 bg-no-repeat bg-left relative bg-gray-10
+                after:block after:absolute after:bottom-0 after:left-0 after:right-0 after:mr-4 after:border-b after:border-gray-25
+            ;
+
+            background-image: url("../../public/img/scorm/folder-item-closed.png");
+
+            &.level_0 {
+                @apply pl-[2.5rem]
+                    after:ml-[1rem]
+                ;
+
+                background-position-x: 1rem;
             }
+
+            &.level_1 {
+                @apply pl-[3.5rem]
+                    after:ml-[2rem]
+                ;
+
+                background-position-x: 2rem;
             }
 
-@media (min-width: 768px) and (max-width: 978px) {
+            &.level_2 {
-    #panel-scorm .image-avatar {
+                @apply pl-[4.5rem]
-        display: none;
+                    after:ml-[3rem]
+                ;
+
+                background-position-x: 3rem;
             }
+
+            &.level_3 {
+                @apply pl-[5.5rem]
+                    after:ml-[4rem]
+                ;
+
+                background-position-x: 4rem;
             }
 
-@media (min-width: 480px) and (max-width: 767px) {
+            &.level_4 {
-    #panel-scorm .image-avatar {
+                @apply pl-[6.5rem]
-        display: none;
+                    after:ml-[5rem]
+                ;
+
+                background-position-x: 5rem;
             }
 
-    #scorm-info {
+            &.level_5 {
-        padding: 0;
+                @apply pl-[7.5rem]
-        margin: 0;
+                    after:ml-[6rem]
+                ;
+
+                background-position-x: 6rem;
+            }
         }
 
-    #learning_path_left_zone .lp-view-zone-container,
+        /* Section with sub-item highlighted */
-    #learning_path_right_zone .lp-view-zone-container {
+        &:has(+ .item-children .scorm_highlight) > .section {
-        padding: 0;
+            @apply font-semibold;
+
+            &.level_0 {
+                @apply bg-primary text-white
+                    after:hidden
+                ;
+            }
         }
 
-    #scorm-info {
+        &.scorm_completed > .section {
-        padding: 30px 0 0 0;
+            background-image: url("../../public/img/scorm/folder-item-open.png");
-        margin: 0;
         }
+    }
+
+    .item {
+        @apply bg-no-repeat bg-transparent bg-left;
 
+        a.items-list {
+            @apply py-3 pr-4 relative
+                after:block after:absolute after:bottom-0 after:left-0 after:right-0 after:mr-4 after:border-b after:border-gray-25
+            ;
         }
 
-/* Landscape phones and down */
+        &.level_0 {
-@media (max-width: 480px) {
+            background-position-x: 1rem;
-    .scorm-title {
+
-        font-size: 14px;
+            a.items-list {
-        padding: 10px;
+                @apply pl-[2.5rem]
+                    after:ml-[1rem]
+                ;
+            }
         }
 
-    .movil-toolbar {
+        &.level_1 {
-        width: 100%;
+            background-position-x: 2rem;
-        height: auto;
+
+            a.items-list {
+                @apply pl-[3.5rem]
+                    after:ml-[2rem]
+                ;
+            }
         }
 
-    .scorm_item_normal {
+        &.level_2 {
-        padding: 10px 5px;
+            background-position-x: 3rem;
+
+            a.items-list {
+                @apply pl-[4.5rem]
+                    after:ml-[3rem]
+                ;
+            }
         }
 
-    .icon-toolbar .fa,
+        &.level_3 {
-    .icon-toolbar .mdi {
+            background-position-x: 4rem;
-        width: 35px;
+
-        height: 35px;
+            a.items-list {
-        line-height: 35px;
+                @apply pl-[5.5rem]
-        font-size: 22px;
+                    after:ml-[4rem]
+                ;
+            }
         }
 
-    .btn-movil {
+        &.level_4 {
-        width: 130px;
+            background-position-x: 5rem;
-        margin: auto;
+
+            a.items-list {
+                @apply pl-[6.5rem]
+                    after:ml-[5rem]
+                ;
+            }
         }
 
-    #scorm-info {
+        &.level_5 {
-        padding: 30px 0 0 0;
+            background-position-x: 6rem;
-        margin: 0;
+
+            a.items-list {
+                @apply pl-[7.5rem]
+                    after:ml-[6rem]
+                ;
+            }
+        }
     }
 
-    #learning_path_right_zone {
+    &.scorm_highlight .item {
-        left: 100%;
+        @apply bg-support-1 text-primary font-semibold;
-        width: auto;
+
+        a.items-list {
+            @apply before:block before:absolute before:top-0 before:left-0 before:w-1 before:bottom-0 before:bg-primary;
+        }
     }
 
-    #panel-scorm .image-avatar {
+    &.scorm_completed .item {
-        display: none;
+        background-image: url("../../public/img/scorm/scorm_completed.png");
     }
 
-    #learning_path_left_zone .lp-view-zone-container,
+    &.scorm_failed .item {
-    #learning_path_right_zone .lp-view-zone-container {
+        background-image: url("../../public/img/scorm/scorm_failed.png");
-        padding: 0;
     }
 
-    #scorm-info hr {
+    &.scorm_not_attempted .item {
-        display: none;
+        background-image: url("../../public/img/scorm/scorm_not_attempted.png");
     }
+
+    &.scorm_highlight .item {
+        background-image: url("../../public/img/scorm/scorm_highlight.png") !important;
+    }
+    &.scorm_highlight.scorm_completed .item {
+        background-image: url("../../public/img/scorm/scorm_current.png") !important;
+    }
+    &.scorm_highlight.scorm_failed .item {
+        background-image: url("../../public/img/scorm/scorm_failed.png") !important;
+    }
+}
+
+.item-children {
+    @apply bg-white;
 }

public/main/lp/learnpath.class.php

@@ -1357,17 +1357,17 @@ class learnpath
         if (false === $hideArrows) {
             $icon = Display::getMdiIcon('chevron-left');
             $previousIcon = '
-                <a class="icon-toolbar" id="scorm-previous" href="#"
+                <button class="icon-toolbar" id="scorm-previous" type="button"
                     onclick="switch_item('.$mycurrentitemid.',\'previous\');return false;" title="'.$previousText.'">
                     '.$icon.'<span class="sr-only">'.$previousText.'</span>
-                </a>';
+                </button>';
 
             $icon = Display::getMdiIcon('chevron-right');
             $nextIcon = '
-                <a class="icon-toolbar" id="scorm-next" href="#"
+                <button class="icon-toolbar" id="scorm-next" type="button"
                     onclick="switch_item('.$mycurrentitemid.',\'next\');return false;" title="'.$nextText.'">
                     '.$icon.'<span class="sr-only">'.$nextText.'</span>
-                </a>';
+                </button>';
         }
 
         if ('fullscreen' === $this->mode) {
@@ -2660,14 +2660,14 @@ class learnpath
         if ($isAllow && false == $hideIcons) {
             if ($this->get_lp_session_id() == api_get_session_id()) {
                 $html .= '<div id="actions_lp" class="actions_lp"><hr>';
-                $html .= '<div class="flex flex-row justify-center mb-2">';
+                $html .= '<div class="flex flex-wrap gap-1 justify-center">';
                 $html .= "<a
-                    class='btn btn-sm btn--plain mx-1'
+                    class='btn btn-sm btn--plain'
                     href='lp_controller.php?".api_get_cidreq()."&action=add_item&type=step&lp_id=".$this->lp_id."&isStudentView=false'
                     target='_parent'>".
                     Display::getMdiIcon('pencil').get_lang('Edit')."</a>";
                 $html .= '<a
-                    class="btn btn-sm btn--plain mx-1"
+                    class="btn btn-sm btn--plain"
                     href="lp_controller.php?'.api_get_cidreq()."&action=edit&lp_id=".$this->lp_id.'&isStudentView=false">'.
                     Display::getMdiIcon('hammer-wrench').get_lang('Settings').'</a>';
                 $html .= '</div>';

public/main/lp/scorm_api.php

@@ -1709,8 +1709,6 @@ function switch_item(current_item, next_item)
             if ($("#lp_media_file").length != 0) {
                 $("#lp_media_file").html(result);
             }
-
-            LPViewUtils.setHeightLPToc();
         }
     });*/
 

src/CoreBundle/Resources/views/Layout/head.html.twig

@@ -31,6 +31,10 @@
         {{ encore_entry_link_tags('vue') }}
         {{ encore_entry_link_tags('app') }}
 
+        {% if lp_view is defined %}
+            {{ encore_entry_link_tags('css/scorm') }}
+        {% endif %}
+
         {% if color_theme_link is defined %}
             {{ color_theme_link|raw }}
         {% endif %}

src/CoreBundle/Resources/views/LearnPath/menubar.html.twig

@@ -18,14 +18,14 @@
                     {% set label = "Expand" | trans %}
                     {% set icon_expand = "arrow-expand-horizontal" %}
                 {% endif %}
-                <a href="#"
+                <button type="button"
                    id="lp-view-expand-toggle"
                    class="icon-toolbar expand"
                    role="button"
                    title="{{ label }}"
                 >
                     <i class="mdi-{{ icon_expand }} mdi" aria-hidden="true"></i>
-                </a>
+                </button>
             {% endif %}
             <a id="home-course"
                title="{{ 'Home'|trans }}"
@@ -36,8 +36,8 @@
             </a>
             {{ navigation_bar }}
         </div>
-        <a title="{{ 'Options'|trans }}" class="menu-button icons" href="#">
+        <button title="{{ 'Options'|trans }}" class="menu-button icons" type="button">
             <i class="mdi-menu mdi" aria-hidden="true"></i>
-        </a>
+        </button>
     </nav>
 {% endautoescape %}

src/CoreBundle/Resources/views/LearnPath/view.html.twig

@@ -1,18 +1,18 @@
 {% extends '@ChamiloCore/Layout/no_layout.html.twig' %}
+
+{% set lp_view = true %}
+
 {% block content %}
     {% autoescape false %}
-        <link rel="stylesheet" href="{{ url('index') ~ 'build/css/scorm.css' }}"/>
         <div id="learning_path_main" class="{{ is_allowed_to_edit ? 'lp-view-include-breadcrumb' }} {{ lp_mode == 'embedframe' ? 'lp-view-collapsed' : '' }}">
             {% if show_left_column == 1 %}
                 <div id="learning_path_left_zone" class="sidebar-scorm">
                     <div class="lp-view-zone-container">
                         <div id="scorm-info">
-                            <div id="panel-scorm" class="bg-ch-primary panel-body">
+                            <div id="panel-scorm">
                                 <div class="image-avatar">
                                     {% if lp_author == '' %}
-                                        <div class="text-center">
                                         {{ lp_preview_image }}
-                                        </div>
                                     {% else %}
                                         <div class="media-author">
                                             <div class="media-author-avatar">
@@ -173,7 +173,7 @@
             <div id="learning_path_right_zone" class="{{ show_left_column == 1 ? 'content-scorm' : 'no-right-col' }}">
                 <div class="lp-view-zone-container">
                     <div class="lp-view-tabs">
-                        <div id="navTabBar" class="mt-2 mb-16 nav-tabs-bar">
+                        <div id="navTabBar" class="nav-tabs-bar">
                             <div class="text-left">
                                 <h2 class="text-h3">{{ lp_title_scorm }}</h2>
                                 <div id="item-parent-names">
@@ -203,7 +203,7 @@
                         {% include '@ChamiloCore/LearnPath/menubar.html.twig' %}
 
                         <div id="tab-iframe" class="auto tab-content">
-                            <div role="tabpanel" class="tab-pane active" id="lp-view-content">
+                            <div role="tabpanel" id="lp-view-content">
                                 <div id="wrapper-iframe">
                                     {% if lp_mode == 'fullscreen' %}
                                         <iframe id="content_id_blank" name="content_name_blank" src="blank.php"
@@ -230,15 +230,6 @@
         </div>
 
         <script>
-          var LPViewUtils = {
-            setHeightLPToc: function() {
-              var scormInfoHeight = $("#scorm-info").outerHeight(true)
-              $("#learning_path_toc").css({
-                top: scormInfoHeight
-              })
-            }
-          }
-
           $(function() {
             $(".menu-button").on("click", function() {
               $(".circle").toggleClass("open")
@@ -248,15 +239,15 @@
               if (!/Chrome/.test(navigator.userAgent)) {
                 // Fix an issue where you cannot scroll below first screen in
                 // learning paths on Apple devices
-                document.getElementById("wrapper-iframe").setAttribute(
+                /*document.getElementById("wrapper-iframe").setAttribute(
                   "style",
                   "width:100%; overflow:auto; position:auto; -webkit-overflow-scrolling:touch !important;"
-                )
+                )*/
-                $("#wrapper-iframe").before('<a style="position:fixed;right:5px;top:5px;z-index:1001;" target="_blank" href="{{ iframe_src }}" >Open PDF on Safari</a>')
+                $("#wrapper-iframe").before('<a class="btn-open-pdf" target="_blank" href="{{ iframe_src }}" >Open PDF on Safari</a>')
 
                 // Fix another issue whereby buttons do not react to click below
                 // second screen in learning paths on Apple devices
-                document.getElementById("content_id").setAttribute("style", "overflow: auto;")
+                document.getElementById("content_id").style.overflow = 'auto';
               }
             }
               {% if lp_mode == 'embedframe' %}
@@ -309,12 +300,6 @@
               icon.removeClass("mdi-chevron-down").addClass("mdi-chevron-up")
             })
 
-            LPViewUtils.setHeightLPToc()
-
-            $(".image-avatar img").on("load", function() {
-              LPViewUtils.setHeightLPToc()
-            })
-
             $(".scorm_item_normal a, #scorm-previous, #scorm-next").on("click", function() {
               //$('.lp-view-tabs').animate({opacity: 0}, 500);
             })
@@ -400,10 +385,6 @@
               }
             })
               {% endif %}
-
-            $(window).on("resize", function() {
-              LPViewUtils.setHeightLPToc()
-            })
           })
         </script>
         <script>