From 494eb9266c375b9bcbd43b45ab62effa5ace33d1 Mon Sep 17 00:00:00 2001
From: ivelov-vm <ivelov_vm@groupbwt.com>
Date: Tue, 21 Mar 2023 14:00:47 +0200
Subject: [PATCH] feat: add decor to blogs and blog page. update hover effects
on transparent header
---
src/components/HeaderComponent.vue | 88 ++++++++++++++++++++----------
src/pages/BlogPage.vue | 45 +++++++++------
src/pages/BlogsPage.vue | 33 ++++++++---
src/pages/HomePage.vue | 2 +-
4 files changed, 111 insertions(+), 57 deletions(-)
diff --git a/src/components/HeaderComponent.vue b/src/components/HeaderComponent.vue
index 49c4913..0390e7d 100644
--- a/src/components/HeaderComponent.vue
+++ b/src/components/HeaderComponent.vue
@@ -1,49 +1,72 @@
<template>
- <div class="sticky top-0 z-30 transition-all"
- :class="{'bg-white':!transparent, 'shadow-14x28':withShadow}">
+ <div
+ class="sticky top-0 z-30 transition-all"
+ :class="{ 'bg-white': !transparent, 'shadow-14x28': withShadow }"
+ >
<header
v-if="width > 1000"
class="flex justify-around items-center py-3.5"
- :class="transparent?'text-white':'text-dark'"
+ :class="textWhite ? 'text-white' : 'text-dark'"
>
- <LogoSvg class="flex-auto basis-[28.57%] h-[46px]"
- :class="transparent?'text-white':'text-blue'"></LogoSvg>
+ <div class="flex-auto basis-[28.57%] h-[46px] flex justify-center">
+ <router-link to="/">
+ <LogoSvg :class="textWhite ? 'text-white' : 'text-blue'"></LogoSvg>
+ </router-link>
+ </div>
<nav class="flex justify-around flex-auto basis-[42.86%] text-xl">
<router-link
to="/"
- class="hover:text-gray transition-colors"
- :class="currentPage === 'home' ? 'font-bold' : ''"
+ class="transition-colors"
+ :class="[
+ currentPage === 'home' ? 'font-bold' : '',
+ textWhite ? 'hover:text-gray-bg' : 'hover:text-gray',
+ ]"
>Home</router-link
>
<router-link
to="/services"
- class="hover:text-gray transition-colors"
- :class="currentPage === 'services' ? 'font-bold' : ''"
+ class="transition-colors"
+ :class="[
+ currentPage === 'services' ? 'font-bold' : '',
+ textWhite ? 'hover:text-gray-bg' : 'hover:text-gray',
+ ]"
>Services</router-link
>
<router-link
to="/home"
- class="hover:text-gray transition-colors"
- :class="currentPage === 'about us' ? 'font-bold' : ''"
+ class="transition-colors"
+ :class="[
+ currentPage === 'about us' ? 'font-bold' : '',
+ textWhite ? 'hover:text-gray-bg' : 'hover:text-gray',
+ ]"
>About us</router-link
>
<router-link
to="/home"
- class="hover:text-gray transition-colors"
- :class="currentPage === 'team' ? 'font-bold' : ''"
+ class="transition-colors"
+ :class="[
+ currentPage === 'team' ? 'font-bold' : '',
+ textWhite ? 'hover:text-gray-bg' : 'hover:text-gray',
+ ]"
>Team</router-link
>
<router-link
to="/home"
- class="hover:text-gray transition-colors"
- :class="currentPage === 'contact' ? 'font-bold' : ''"
+ class="transition-colors"
+ :class="[
+ currentPage === 'contact' ? 'font-bold' : '',
+ textWhite ? 'hover:text-gray-bg' : 'hover:text-gray',
+ ]"
>Contact</router-link
>
<router-link
to="/blogs"
- class="hover:text-gray transition-colors"
- :class="currentPage === 'blog' ? 'font-bold' : ''"
+ class="transition-colors"
+ :class="[
+ currentPage === 'blog' ? 'font-bold' : '',
+ textWhite ? 'hover:text-gray-bg' : 'hover:text-gray',
+ ]"
>Blog</router-link
>
</nav>
@@ -56,8 +79,15 @@
</div>
</header>
- <header v-else class="flex justify-between items-center mx-[7%] py-3.5 text-white">
- <LogoSvg class="h-[46px]" :class="transparent?'text-white':'text-blue'"></LogoSvg>
+ <header
+ v-else
+ class="flex justify-between items-center mx-[7%] py-3.5 text-white"
+ >
+ <div class="h-[46px] flex justify-center">
+ <router-link to="/">
+ <LogoSvg :class="textWhite ? 'text-white' : 'text-blue'"></LogoSvg>
+ </router-link>
+ </div>
<div class="relative">
<button @click="expand">
@@ -158,17 +188,13 @@
to="#"
class="flex justify-between items-center gap-3"
>
- <span
- class="w-24"
- >Book an online</span
- >
+ <span class="w-24">Book an online</span>
<RightArrow class="w-[7px] h-3 inline"></RightArrow>
</router-link>
</div>
</nav>
</div>
</div>
-
</header>
</div>
</template>
@@ -190,14 +216,18 @@ export default {
currentPage: {
type: String,
},
- transparent:{
+ transparent: {
type: Boolean,
- default: false
+ default: false,
},
- withShadow:{
+ withShadow: {
type: Boolean,
- default: false
- }
+ default: false,
+ },
+ textWhite: {
+ type: Boolean,
+ default: false,
+ },
},
mounted() {
window.addEventListener("resize", this.onWidthChange);
diff --git a/src/pages/BlogPage.vue b/src/pages/BlogPage.vue
index 24053c3..e85fa10 100644
--- a/src/pages/BlogPage.vue
+++ b/src/pages/BlogPage.vue
@@ -1,14 +1,24 @@
<template>
<div>
- <HeaderComponent current-page="blogs" :with-shadow="scroll > 50"></HeaderComponent>
- <div class="overflow-hidden relative">
+ <HeaderComponent
+ current-page="blogs"
+ :transparent="scroll < 50"
+ :with-shadow="scroll > 50"
+ ></HeaderComponent>
+ <div class="overflow-hidden relative mt-[-80px] pt-20">
+ <div
+ class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -right-[82px] -top-[51px]"
+ ></div>
+
<section class="relative z-10 px-[6.7%] mt-6">
- <router-link to="/blogs" class="text-dark hover:text-gray-600 flex items-center leading-6 text-lg font-light">
+ <router-link
+ to="/blogs"
+ class="text-dark hover:text-gray-600 flex items-center leading-6 text-lg font-light"
+ >
<LeftArrow class="inline w-6 h-6 mr-1"></LeftArrow>
Back to all articles
</router-link>
-
-
+
<h1 class="text-dark text-5xl mt-11 leading-[3.32.rem]">
{{ blog.title }}
</h1>
@@ -16,16 +26,15 @@
<small>{{ blog.date }}</small>
</p>
- <img :src="blog.image" alt="Title image" class="w-full mt-5">
- <p class="mt-6 text-gray-600 text-xl leading-7" v-html="blog.content">
-
- </p>
-
-
+ <img :src="blog.image" alt="Title image" class="w-full mt-5" />
+ <p
+ class="mt-6 text-gray-600 text-xl leading-7"
+ v-html="blog.content"
+ ></p>
</section>
<div
- class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[238px] h-[238px] z-0 -left-[91px] top-[50%]"
- ></div>
+ class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[238px] h-[238px] z-0 -left-[91px] top-[50%]"
+ ></div>
<FooterComponent class="mt-[92px]"></FooterComponent>
</div>
</div>
@@ -42,14 +51,14 @@ export default {
data() {
return {
scroll: window.scrollY,
- blog: {}
+ blog: {},
};
},
mounted() {
- window.addEventListener('scroll', this.onScroll);
+ window.addEventListener("scroll", this.onScroll);
- if(!this.$route.params.id || !this.blogs[this.$route.params.id - 1]){
- this.$router.push('/blogs');
+ if (!this.$route.params.id || !this.blogs[this.$route.params.id - 1]) {
+ this.$router.push("/blogs");
return;
}
@@ -59,7 +68,7 @@ export default {
window.removeEventListener("scroll", this.onScroll);
},
methods: {
- onScroll(){
+ onScroll() {
this.scroll = window.scrollY;
},
},
diff --git a/src/pages/BlogsPage.vue b/src/pages/BlogsPage.vue
index 8196cf0..56c8d9e 100644
--- a/src/pages/BlogsPage.vue
+++ b/src/pages/BlogsPage.vue
@@ -1,7 +1,15 @@
<template>
<div>
- <HeaderComponent current-page="blogs" :with-shadow="scroll > 50"></HeaderComponent>
- <div class="overflow-hidden">
+ <HeaderComponent
+ current-page="blogs"
+ :transparent="scroll < 50"
+ :with-shadow="scroll > 50"
+ ></HeaderComponent>
+ <div class="overflow-hidden mt-[-80px] pt-20">
+ <div
+ class="absolute bg-gray-bg blur-[58px] rounded-[190px] w-[380px] h-[380px] z-0 -right-[82px] -top-[51px]"
+ ></div>
+
<section class="relative z-10 px-[6.7%] mt-[63px]">
<h1 class="text-black text-[2rem]">
Blog
@@ -11,17 +19,24 @@
</h1>
<ul class="mt-2">
- <li v-for="blog in blogs" :key="blog.id" >
+ <li v-for="blog in blogs" :key="blog.id">
<article class="p-4 mt-6 rounded-2xl bg-white shadow-3x28">
- <img :src="blog.image" alt="Title image" class="w-full mb-4">
- <router-link :to="`/blogs/${blog.id}`" class="font-medium text-xl text-dark leading-[1.66rem] hover:text-blue-text transition-colors">
+ <img :src="blog.image" alt="Title image" class="w-full mb-4" />
+ <router-link
+ :to="`/blogs/${blog.id}`"
+ class="font-medium text-xl text-dark leading-[1.66rem] hover:text-blue-text transition-colors"
+ >
{{ blog.title }}
</router-link>
<p class="mt-2 leading-5 text-gray-text">
<small>{{ blog.date }}</small>
</p>
<p class="mt-4 text-gray-600">
- {{ blog.content.length > 340? blog.content.slice(0, 340) + '...' : blog.content}}
+ {{
+ blog.content.length > 340
+ ? blog.content.slice(0, 340) + "..."
+ : blog.content
+ }}
</p>
</article>
</li>
@@ -43,17 +58,17 @@ export default {
name: "BlogsPage",
data() {
return {
- scroll: window.scrollY
+ scroll: window.scrollY,
};
},
mounted() {
- window.addEventListener('scroll', this.onScroll);
+ window.addEventListener("scroll", this.onScroll);
},
beforeDestroy() {
window.removeEventListener("scroll", this.onScroll);
},
methods: {
- onScroll(){
+ onScroll() {
this.scroll = window.scrollY;
},
},
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 4507e1e..61325df 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,6 +1,6 @@
<template>
<div >
- <HeaderComponent current-page="home" :transparent="scroll < 100" :with-shadow="scroll > 100"></HeaderComponent>
+ <HeaderComponent current-page="home" :transparent="scroll < 100" :with-shadow="scroll > 100" :text-white="scroll < 100"></HeaderComponent>
<section
class="relative mt-[-80px] z-10 text-white h-[700px] sm:h-[900px] rounded-b-lg bg-cover bg-no-repeat bg-center bg-blend-multiply bg-gray-300 bg-[url('../public/img/home-header.jfif')]"
>
--
GitLab