display TOC if display linear

Author: alistairwheeler

others/vuejs-frontend/src/App.vue

@@ -11,8 +11,6 @@
                 <div class="page-content">
                     <router-view v-if="!isFetching" class="page-content__router-view" :key="$route.fullPath"/>
                     <Spinner v-else/>
-                    <TableOfContents class="page-content_toc" v-if="!isFetching"/>
-                    <Spinner v-else/>
                 </div>
             </main>
             <LightBox/>
@@ -31,7 +29,6 @@
     import {useLessonStore} from '@/stores/lesson';
     import {useUiStore} from '@/stores/ui';
     import {useTreeStore} from '@/stores/tree';
-    import TableOfContents from "./components/UI/TableOfContents.vue";
 
     export default {
         name: 'App',
@@ -42,7 +39,7 @@
                 treeStore: useTreeStore()
             }
         },
-        components: {LightBox, CustomHeader, TreeViewNode, Spinner, MenuSearchBar, TableOfContents},
+        components: {LightBox, CustomHeader, TreeViewNode, Spinner, MenuSearchBar},
         data: () => ({
             isFetching: true,
             isStyleLoaded: false,
@@ -177,7 +174,7 @@ button
             width: 100%
 
             &__router-view 
-                width: 80%
+                width: 100%
                 height: 100%
             
         .drawer-enter-active 

others/vuejs-frontend/src/components/Pages/Lesson.vue

@@ -20,6 +20,7 @@
 					<EmptyContent v-else />
 				</div>
 			</div>
+			<TableOfContents class="grid-item toc-block" v-if="lesson.viz == 'LINEAR'"/>
 			<div v-if="lesson.viz !== 'LINEAR'" class="grid-item slider-block" :style="{background: bg_color}">
 				<Slider v-if="lessonImages.length" :slides="lessonImages" ref="slider" />
 				<EmptyContent v-else />
@@ -67,6 +68,8 @@ import nginx from 'highlight.js/lib/languages/nginx';
 import apache from 'highlight.js/lib/languages/apache';
 import sql from 'highlight.js/lib/languages/sql';
 import mermaid from "mermaid";
+import TableOfContents from "../UI/TableOfContents.vue";
+
 // manually importing required languages for performances reasons
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('java', java);
@@ -112,7 +115,7 @@ export default {
 			uiStore: useUiStore()
         }
     },
-	components: { Slider, Spinner, EmptyContent },
+	components: { Slider, Spinner, EmptyContent, TableOfContents },
 	data: () => ({
 		alreadyScrolledImages: [],
 		lessonViz: 'linear',
@@ -615,16 +618,20 @@ export default {
 		line-height: 1.6
 
 .linear
+	.grid
+		grid-template-columns: 80% 20%
 	.lesson-wrapper
 		//@include fillParent()
 		padding-right: 25px
 		padding-left: 25px
 	.lesson-block
-		grid-column: 1/3
+		grid-column: 1
 	.lesson-html-content
 		line-height: 1.7
 		& :deep(video)
 			max-width: 100%
-	
+	.toc-block
+		grid-column: 2
+		grid-row: 1/3
 
 </style>

others/vuejs-frontend/src/components/UI/TableOfContents.vue

@@ -28,7 +28,6 @@
 <script>
 import { mapState } from "pinia";
 import { useUiStore } from '@/stores/ui';
-import { useLessonStore } from '@/stores/lesson';
 import Spinner from "./Spinner.vue";
 
 export default {
@@ -37,7 +36,6 @@ export default {
     setup() {
         return {
             uiStore: useUiStore(),
-            lessonStore: useLessonStore()
         }
     },
     computed: {
@@ -250,11 +248,7 @@ export default {
 @import "../../assets/sass/mixins"
 
 .toc-wrapper
-    top: $header-height // Use the header height variable
-    padding: 1rem 1rem 1rem 0
-    width: 20%
     z-index: 5
-    height: calc(100vh - #{$header-height}) // Use the header height variable
 
 .toc
     position: relative