Merge pull request #17 from jovialcore/fix/company-logo

fixed company long and added read more to long company about texts
jovialcore · Dec 24, 2023 · 0c8baf0 · 0c8baf0
2 parents ffb2821 + a52f8cf
commit 0c8baf0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/components/header/HeaderComponent.vue b/src/components/header/HeaderComponent.vue
@@ -9,7 +9,7 @@
       <div class="collapse navbar-collapse justify-content-end" id="navbarTogglerDemo02">
         <ul class="navbar-nav mb-2 mb-lg-0">
           <li class="nav-item">
-            <a href="https://github.com/jovialcore/whatcompstack-BE" class="nav-link">Github </a>
+            <a href="https://github.com/jovialcore/whatcompstack-BE" target="_blank" class="nav-link">Github </a>
           </li>
         </ul>
       </div>

diff --git a/src/views/DetailsComponent.vue b/src/views/DetailsComponent.vue
@@ -6,7 +6,7 @@
 			</div>
 		</div>
 		<div v-else>
-			<div class="d-flex justify-content-start align-items-center gap-2" style="margin-bottom: 50px;">
+			<div class="d-flex justify-content-start align-items-center gap-2 ms-md-5 mb-3 mb-md-5">
 				<router-link to="/" class="text-black">
 					Home
 				</router-link>
@@ -16,10 +16,16 @@
 			<div class="row g-0 justify-content-center justify-content-md-evenly">
 				<div class="col-12 col-md-5 col-lg-3">
 					<div class="card company-card">
-						<img :src="company.logo" class="card-img-top company-logo" alt="" >
+						<img :src="company.logo" class="card-img-top h-50 mx-100" alt="" >
 						<div class="company-card-body w-100">
 							<span class="company-name">{{ company.company.toUpperCase() }}</span>
-							<span class="company-info">{{ company.about }}</span>
+							<div class="d-inline">
+								<span v-if="showLess" class="company-info">{{ company.about.slice(0, 200) }}...</span>
+								<span v-else class="company-info">{{ company.about }}</span>
+								<span @click="toggleShowLess" style="color: #17A1FA; cursor: pointer;">
+									{{ showLess ? "read more" : "read less" }}
+								</span>
+							</div>
 						</div>
 						<a :href="company.company_url" target="_blank" class="company-link">
 							<span>Visit company website</span>
@@ -68,6 +74,7 @@
 			const store = useStore();
 			const router = useRouter();
 			const id = ref(store.state.companyId);
+			const showLess = ref(true);
 
 			const goBack = () => {
 				router.go(-1);
@@ -77,6 +84,10 @@
 				id.value
 			);
 
+			const toggleShowLess = () => {
+				showLess.value = !showLess.value;
+			};
+
 			return {
 				company,
 				isLoading,
@@ -85,17 +96,14 @@
 				be_framework,
 				mobile_stacks,
 				goBack,
+				showLess,
+				toggleShowLess
 			};
 		},
 	};
 </script>
 
 <style>
-.company-logo {
-	object-fit: fit-content;
-	object-position: center;
-	height: 246.521px;
-}
 .company-card {
 	border-radius: 20px;
 	border: 0.2px solid #3A3A3A;
@@ -125,6 +133,7 @@
 	font-weight: 400;
 	line-height: 23px;
 	letter-spacing: 0.5px;
+	margin-right: 10px;
 }
 .company-link-container {
 	display: flex;