added basic template to position main elements in the page

2025-04-10 15:01:13 +05:00
parent 88e729aa87
commit c27c1c36c1
23 changed files with 1257 additions and 1136 deletions
@@ -1,6 +1,6 @@
 <template>
 	<div >
-		<h2 :id="generateSlug(block.data.content)" class="font-bold text-xl">{{ block.data.content }}</h2>
+		<h2 :id="'anchor-link-' + generateSlug(block.data.content)" class="font-bold text-xl">{{ block.data.content }}</h2>
 	</div>
 </template>

@@ -1,14 +1,13 @@
 <template>
-	<div class="w-full h-[67px] fixed pointer-events-none bvi-no-styles" id="visor"></div>
-
+  <NavigateVisor />
 	<nav class="order-last hidden w-56 shrink-0 lg:block">
 		<div v-if="headerNavs.length > 0" class="sticky top-[100px] h-[calc(100vh-121px)]">
 			<div class="text-gray-1000 mb-2 text-md font-medium">На этой странице</div>
 			<ul class="max-h-[70vh] space-y-1.5 overflow-hidden py-2 text-sm">
 				<li class="anchor-li" v-for="pageNav in headerNavs" :key="pageNav.id">
-					<a :class="{ 'translate-x-2 text-primary' : currentNavSection === generateSlug(pageNav.text), 'bg-transperant text-gray-600 hover:text-gray-900' : currentNavSection !== generateSlug(pageNav.text) }"
+					<a :class="{ 'translate-x-2 text-primary' : currentNavSection === 'anchor-link-' + generateSlug(pageNav.text), 'bg-transperant text-gray-600 hover:text-gray-900' : currentNavSection !== 'anchor-link-' + generateSlug(pageNav.text) }"
 						 class="duration-150 block py-1 px-2 leading-[1.6] rounded-md"
-						 :href="'#' + generateSlug(pageNav.text)">{{ pageNav.text }}</a>
+						 :href="'#anchor-link-' + generateSlug(pageNav.text)">{{ pageNav.text }}</a>
 				</li>
 				<transition name="fade">
 					<li class="anchor-li flex items-center py-2 border-t" v-if="scrollTop" @click.prevent="scrollToTop">
@@ -28,10 +27,11 @@
 <script>
 import { Link } from "@inertiajs/vue3";
 import slugify from "slugify";
+import NavigateVisor from "@/componentss/shared/visor/NavigateVisor.vue";

 export default {
 	name: "NavigateLinks",
-	components: { Link },
+	components: {NavigateVisor, Link },
 	data() {
 		return {
 			currentNavSection: null,
@@ -39,14 +39,6 @@ export default {
 		};
 	},
 	methods: {
-		textLimit(text, symbols) {
-			if (text.length > symbols) {
-				let LimitedText;
-				LimitedText = text.substring(0, symbols);
-				return LimitedText + "...";
-			}
-			return text;
-		},
 		generateSlug(text) {
 			return slugify(text, {
 				lower: true,
@@ -0,0 +1,15 @@
+<script>
+export default {
+	name: "NavigateVisor"
+}
+</script>
+
+<template>
+  <div class="w-full h-[67px] pointer-events-none fixed" id="visor" />
+</template>
+
+<style scoped>
+
+
+
+</style>
@@ -0,0 +1,27 @@
+<template>
+  <main class="flex-grow">
+    <div class="relative mb-auto mx-auto mt-[67px] max-w-screen-xl px-4 py-10 md:flex md:flex-row md:py-10">
+      <div class="px-0 pt-6 lg:pt-10 pb-12 sm:px-6 lg:px-8 mx-auto w-full max-w-screen-2xl">
+        <div>
+          <div :class="'max-w-screen-' + breakpoint"  class="container mx-auto xl:px-5">
+            <slot/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+
+export default {
+	name: "BasicPageContainer",
+  props: {
+    breakpoint: {
+      type: String,
+      default: "lg"
+    }
+  }
+}
+
+</script>
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col h-screen">
+    <slot/>
+  </div>
+</template>
+
+<script>
+import {Link} from "@inertiajs/vue3";
+import BasicFooter from "@/footers/BasicFooter.vue";
+import Builder from "@/componentss/shared/builder/pageBuilder/Builder.vue";
+import BackButton from "@/componentss/ui/buttons/BackButton.vue";
+import ProgramTitle from "@/componentss/features/educationalPrograms/components/ProgramTitle.vue";
+import ProgramItemBreadcrumbs from "@/componentss/features/educationalPrograms/components/ProgramItemBreadcrumbs.vue";
+
+export default {
+	name: "BasicPageWrapper",
+}
+
+</script>