chore: add toggle bool for features and tools

src/views/Home.vue

@@ -200,7 +200,7 @@
 			</main>
 			<div
 				v-if="show_content && cvdata.core && cvdata.core.name" 
-				class="mr-auto w-full lg:w-1/2 text-center text-sm py-2 pr-5 text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-lg"
+				class="noprint mr-auto w-full lg:w-1/2 text-center text-sm py-2 pr-5 text-gray-600 border-gray-300 border-1 border-b-0 rounded-t-lg"
 			>
 				<nav-menu
 					:position="NavPosition.footer"

src/views/cv/Projects.vue

@@ -17,6 +17,7 @@
 				</div>
 			</button>
 		</div>
+		<div class="project-name" v-html="item.name"></div>
 		<div v-if="item.auth.show" :id="`project-${index}`">
 			<div v-for="(info,key,infoindex) in showinfo" :key="infoindex">
 				<section
@@ -24,7 +25,7 @@
 					:class="key === 'purpose' ? 'mt-2' : 'mb-0'"
 				>
 					<div class="left-item">
-						<div v-if="key === 'name'" class="project-name text-center">
+						<div v-if="key === 'name'" class="text-center">
 							<tiptap-editor
 								v-if="authinfo.editable"
 								:data="item.name"
@@ -34,7 +35,6 @@
 								:idx="index"
 								@onEditorBlur="onEditor"
 							/>
-							<div v-else v-html="item.name"></div>
 						</div>
 						<span v-else class="text-gray-400 dark:text-gray-500">{{ t(key).toLocaleLowerCase() }}</span>
 					</div>
@@ -87,9 +87,17 @@
 						</span>
 					</div>
 				</section>
-				<section v-if="key === 'features' && item.features && Object.keys(item.features).length > 0">
+				<section v-if="key === 'features' && item.features && Object.keys(item.features).length > 0"
+					:class="authinfo.toggle ? 'mt-2' : ''"
+				>
 					<div class="left-item">
-						<span class="text-gray-400 dark:text-gray-500">{{ t(key, key).toLocaleLowerCase() }}</span>
+						<span 
+							:class="authinfo.toggle ? 'btn-toggle noprint text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'"
+							:data="`project-${index}-${key}`"	
+							@click="onClick"
+						>
+						{{ t(key, key).toLocaleLowerCase() }}
+						</span>
 					</div>
 					<div class="right-item features">
 						<tiptap-editor
@@ -102,14 +110,23 @@
 							:idx="index"
 							@onEditorBlur="onEditor"
 						/>
-						<span v-else v-html="`<li>${item[key].join('</li><li>')}</li>`" />
+						<span v-else >
+							<span
+								:id="`project-${index}-${key}`"
+								:class="authinfo.toggle ? 'hidden' : ''"
+								v-html="`<li>${item[key].join('</li><li>')}</li>`" />
+						</span>
 					</div>
 				</section>
-				<section v-if="key === 'builtwith' && item.builtwith && Object.keys(item.builtwith).length > 0">
+				<section v-if="key === 'builtwith' && item.builtwith && Object.keys(item.builtwith).length > 0"
+					:class="authinfo.toggle ? 'mt-2' : ''"
+				>
 					<span
-						class="text-gray-400 dark:text-gray-500"
+						:class="authinfo.toggle ? 'btn-toggle noprint text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'"
+						:data="`project-${index}-${key}`"	
+						@click="onClick"
 					>{{ t('builtwith', 'Builtwith').toLocaleLowerCase() }}</span>
-					<div class="tag-list my-3">
+					<div class="my-3">
 						<tiptap-editor
 							v-if="authinfo.editable"
 							:data="`<b>${item[key].join('</b> <b>')}</b> `"
@@ -120,7 +137,10 @@
 							:htmlattrs="{ ...useState().htmlAttrs, bold: 'tag-item font-light mb-2' }"
 							@onEditorBlur="onEditor"
 						/>
-						<div v-else>
+						<div v-else 
+							:id="`project-${index}-${key}`"
+							:class="authinfo.toggle ? 'tag-list noprint hidden' : 'tag-list '"
+						>
 							<span
 								v-for="(built ,builtindex) in item[key]"
 								:key="builtindex"
@@ -212,5 +232,13 @@ const onItem = (idx: number) => {
 const onLink = (e: any) => {
 	track_action(e,{ ref: 'projects',text: e.target.href || '', lng: i18n.locale.value },routeKy.toString())
 }
-
+const onClick = (e: any) => {
+	let target: string = e.target.getAttribute('data')
+	if (target) {
+		let elem = document.getElementById(target)
+		if (elem) {
+			elem.classList.toggle('hidden');
+		} 
+	}
+}
 </script>

src/views/cv/WorkExperience.vue

@@ -24,6 +24,12 @@
 					class="mb-0"
 				>
 					<div class="left-item">
+						<span
+							class="text-gray-400 dark:text-gray-500"
+							v-if="key !== 'where' && key !== 'wheredef'"
+						>{{ t(key).toLocaleLowerCase() }}</span>
+					</div>
+					<div class="right-item">
 						<h3 v-if="key === 'where'">
 							<tiptap-editor
 								v-if="authinfo.editable"
@@ -35,14 +41,7 @@
 								@onEditorBlur="onEditor"
 							/>
 							<span v-else v-html="item.where"></span>
-						</h3>
+							<span class="pr-2">: </span>
-						<span
-							class="text-gray-400 dark:text-gray-500"
-							v-if="key !== 'where' && key !== 'wheredef'"
-						>{{ t(key).toLocaleLowerCase() }}</span>
-					</div>
-					<div class="right-item">
-						<span v-if="key === 'where'">
 							<tiptap-editor
 								v-if="authinfo.editable"
 								:data="item.wheredef"
@@ -53,7 +52,7 @@
 								@onEditorBlur="onEditor"
 							/>
 							<span v-else>{{ item.wheredef }}</span>
-						</span>
+						</h3>
 						<span v-if="key !== 'wheredef' && key !== 'where'">
 							<tiptap-editor
 								v-if="authinfo.editable"
@@ -114,9 +113,17 @@
 						</ul>
 					</div>
 				</section>
-				<section v-if="key === 'tools' && item.tools && Object.keys(item.tools).length > 0" class>
+				<section v-if="key === 'tools' && item.tools && Object.keys(item.tools).length > 0"
-					<span class="text-gray-400 dark:text-gray-500">{{ t('tools', 'Tools').toLocaleLowerCase() }}</span>
+					:class="authinfo.toggle ? 'mt-2' : ''"
-					<div class="tag-list my-3">
+				>
+					<span 
+						:class="authinfo.toggle ? 'btn-toggle noprint text-gray-400 dark:text-gray-500' : 'text-gray-400 dark:text-gray-500'"
+						:data="`workexperience-${index}-${key}`"	
+						@click="onClick"
+					>
+						{{ t('tools', 'Tools').toLocaleLowerCase() }}
+					</span>
+					<div class="my-3">
 						<tiptap-editor
 							v-if="authinfo.editable"
 							:data="`<b>${item[key].join('</b> <b>')}</b> `"
@@ -127,12 +134,16 @@
 							:htmlattrs="{ ...useState().htmlAttrs, bold: 'tag-item font-light mb-2 leading-loose' }"
 							@onEditorBlur="onEditor"
 						/>
-						<span
+						<div v-else 
-							v-else
+							:id="`workexperience-${index}-${key}`"
-							v-for="tool,toolindex in item[key]"
+							:class="authinfo.toggle ? 'hidden noprint tag-list' : 'tag-list'"
-							:key="toolindex"
+						>
-							class="tag-item font-light mb-2"
+							<span
-						>{{ tool }}</span>
+								v-for="tool,toolindex in item[key]"
+								:key="toolindex"
+								class="tag-item font-light mb-2"
+							>{{ tool }}</span>
+						</div>
 					</div>
 				</section>
 			</div>
@@ -197,6 +208,15 @@ const onEditor = (info: { src: string, field: string, idx: number, data: string,
 const onItem = (idx: number) => {
 	emit('onItem', { src: 'work_experience', itm: props.data[idx], idx })
 }
+const onClick = (e: any) => {
+	let target: string = e.target.getAttribute('data')
+	if (target) {
+		let elem = document.getElementById(target)
+		if (elem) {
+			elem.classList.toggle('hidden');
+		} 
+	}
+}
 // const onItem = (e: any) => {
 // 	const el = e.target && e.target.closest ? e.target.closest('.experience-item') : null
 // 	if (el) {