-
@@ -65,6 +69,7 @@ export default class StoryPreviewV extends Vue {
loadStatus = 'loading';
activeChapterIndex = -1;
lang = 'en';
+ headerHeight = 0;
uid = '';
created(): void {
@@ -100,6 +105,11 @@ export default class StoryPreviewV extends Vue {
updateActiveIndex(idx: number): void {
this.activeChapterIndex = idx;
+ //determine header height
+ const headerH = document.getElementById('story-header');
+ if (headerH) {
+ this.headerHeight = headerH.clientHeight;
+ }
}
}
@@ -125,6 +135,10 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-bottom: 0px;
}
+ .story-header {
+ z-index: 60;
+ }
+
.storyramp-modified {
max-width: 1536px;
margin: 0 auto;
diff --git a/src/definitions.ts b/src/definitions.ts
index d320b15c0..13e23986b 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -7,6 +7,7 @@ export interface StoryRampConfig {
slides: Slide[];
contextLink: string;
contextLabel: string;
+ tocOrientation: string;
dateModified: string;
}
@@ -38,6 +39,7 @@ export interface MetadataContent {
logoAltText: string;
contextLink: string;
contextLabel: string;
+ tocOrientation: string;
dateModified: string;
}
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index f564e2569..48db89320 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -111,4 +111,8 @@ editor.slides.select,Please select a slide to edit,1,Veuillez sélectionner une
editor.slides.panel.body,Panel body,1,Corps du panneau,1
editor.slides.panel.title,Panel title,1,Titre du panneau,1
editor.slides.intro,Intro subtitle,1,Sous-titre de l’introduction,1
-editor.slides.title,Intro title,1,Titre de l’introduction,1
\ No newline at end of file
+editor.slides.title,Intro title,1,Titre de l’introduction,1
+editor.tocOrientation,Table of Contents Orientation,1,Orientation de la table des matières,0
+editor.tocOrientation.info,The table of contents orientation will be set to vertical in mobile view.,1,L'orientation de la table des matières sera définie sur verticale en vue mobile.,0
+editor.tocOrientation.vertical,Vertical,1,Vertical,0
+editor.tocOrientation.horizontal,Horizontal,1,Horizontal,0
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 98aa11f2a..7b089643d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -30,8 +30,8 @@ import HighchartsVue from 'highcharts-vue';
import Message from 'vue-m-message';
import 'vue-m-message/dist/style.css';
-import StorylinesViewer from 'ramp-storylines';
-import 'ramp-storylines/dist/storylines-viewer.css';
+import StorylinesViewer from 'ramp-storylines_demo-scenarios-pcar';
+import 'ramp-storylines_demo-scenarios-pcar/dist/storylines-viewer.css';
const app = createApp(App);
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index 0a5a4f0e6..0ef9fd7fe 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -6,7 +6,7 @@ declare module '*.vue' {
declare module '@kangc/v-md-editor';
declare module '@kangc/v-md-editor/lib/lang/en-US';
declare module '@kangc/v-md-editor/lib/theme/github.js';
-declare module 'ramp-storylines';
+declare module 'ramp-storylines_demo-scenarios-pcar';
declare module 'vue-m-message';
declare module 'highcharts-vue';
declare module 'vue-tippy';
diff --git a/tailwind.config.js b/tailwind.config.js
index e316636ae..5df5cd3ad 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,7 +9,7 @@ module.exports = {
purge: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
- './node_modules/ramp-storylines/**/*.{vue,js,ts,jsx,tsx}'
+ './node_modules/ramp-storylines_demo-scenarios-pcar/**/*.{vue,js,ts,jsx,tsx}'
],
darkMode: false, // or 'media' or 'class'
theme: {