verdnatura/floranet
verdnatura
/
floranet
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajustar diseño y cambiar proyecto a js #3

Merged
pablone merged 7 commits from develop into master 2024-01-11 06:20:29 +00:00
Conversation 0 Commits 7 Files Changed 100 +121 -124
5 changed files with 121 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a73d16c728 - Show all commits

40
src/components/footer/FooterComponent.vue
View File

@ -1,3 +1,16 @@
<script>
import { defineComponent } from 'vue';
import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue';
import LogoWhite from '../logo/LogoWhite.vue';
import Container from '../ui/Container.vue';
export default defineComponent({
name: 'footer-component',
components: { Container, LogoWhite, IconArrowCircleRight },
});
</script>
<template> <template>
<q-footer class="custom-q-footer" elevated> <q-footer class="custom-q-footer" elevated>
<container class="footer-container"> <container class="footer-container">
@ -29,8 +42,8 @@
<RouterLink to="/">Ramos</RouterLink><br /> <RouterLink to="/">Ramos</RouterLink><br />
<RouterLink to="/">Plantas</RouterLink><br /> <RouterLink to="/">Plantas</RouterLink><br />
<RouterLink to="/">Nosotros</RouterLink><br /> <RouterLink to="/">Nosotros</RouterLink><br />
<RouterLink to="/faq">FAQs</RouterLink><br /> <!-- <RouterLink to="/faq">FAQs</RouterLink><br /> -->
<RouterLink to="/contacta">Contacta</RouterLink> <RouterLink to="/#question-section">Contacta</RouterLink>
</li> </li>
<li class="footer-list-item"> <li class="footer-list-item">
@ -67,19 +80,6 @@
</q-footer> </q-footer>
</template> </template>
<script>
import { defineComponent } from 'vue';
import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue';
import LogoWhite from '../logo/LogoWhite.vue';
import Container from '../ui/Container.vue';
export default defineComponent({
name: 'footer-component',
components: { Container, LogoWhite, IconArrowCircleRight },
});
</script>
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-q-footer { .custom-q-footer {
position: static; position: static;
@ -100,18 +100,22 @@ a:hover {
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
padding-block: 66px 31px; padding-block: 66px 31px;
& .footer-body { & .footer-body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
gap: 86px; gap: 86px;
& .footer-list { & .footer-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
&.footer-primary { &.footer-primary {
gap: 56px; gap: 56px;
position: relative; position: relative;
flex: 0 0 min(100%, 560px); flex: 0 0 min(100%, 560px);
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -130,8 +134,10 @@ a:hover {
&.footer-secondary { &.footer-secondary {
gap: 79px; gap: 79px;
flex: 0 0 min(100%, 800px); flex: 0 0 min(100%, 800px);
& .footer-list-item { & .footer-list-item {
flex: 0 0 min(100%, 250px); flex: 0 0 min(100%, 250px);
&.list-links { &.list-links {
flex: 0 0 min(100%, 133px); flex: 0 0 min(100%, 133px);
} }
@ -140,6 +146,7 @@ a:hover {
@media only screen and (max-width: $med-md) { @media only screen and (max-width: $med-md) {
justify-content: space-evenly; justify-content: space-evenly;
&.footer-primary { &.footer-primary {
flex: 1; flex: 1;
gap: 20px; gap: 20px;
@ -152,6 +159,7 @@ a:hover {
height: 1px; height: 1px;
width: 100%; width: 100%;
} }
& .footer-list-item { & .footer-list-item {
flex: 1 0 min(100%, 150px); flex: 1 0 min(100%, 150px);
} }
@ -159,8 +167,10 @@ a:hover {
&.footer-secondary { &.footer-secondary {
gap: 59px; gap: 59px;
& .footer-list-item { & .footer-list-item {
flex: 1; flex: 1;
&:last-child { &:last-child {
flex: 1; flex: 1;
} }

46
src/components/header/HeaderPrimary.vue
View File

@ -1,28 +1,3 @@
<template>
<q-header
class="header-container transparent"
:class="isOpenNav && 'mobile-nav'"
>
<send-banner
left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia"
mobile-text="ENVÍO GRATIS a partir de 60€"
v-if="!isOpenNav"
/>
<div class="header-container-wrapper custom-container">
<RouterLink to="/">
<LogoWhite v-if="!isOpenNav" />
<LogoGreenLight v-if="isOpenNav" />
</RouterLink>
<nav-links />
<user-area />
</div>
</q-header>
</template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
@ -48,15 +23,36 @@ export default defineComponent({
}); });
</script> </script>
<template>
<q-header class="header-container transparent" :class="isOpenNav && 'mobile-nav'">
<send-banner left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia" mobile-text="ENVÍO GRATIS a partir de 60€"
v-if="!isOpenNav" />
<div class="header-container-wrapper custom-container">
<RouterLink to="/">
<LogoWhite v-if="!isOpenNav" />
<LogoGreenLight v-if="isOpenNav" />
</RouterLink>
<nav-links />
<user-area />
</div>
</q-header>
</template>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-container { .header-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 23px; gap: 23px;
&.mobile-nav { &.mobile-nav {
background-color: $primary !important; background-color: $primary !important;
padding-block: 21px 15px; padding-block: 21px 15px;
} }
& .header-container-wrapper { & .header-container-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

43
src/components/header/HeaderSecondary.vue
View File

@ -1,26 +1,3 @@
<template>
<q-header class="header-container transparent">
<send-banner
left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia"
mobile-text="ENVÍO GRATIS a partir de 60€"
class="remove-mobile"
/>
<div class="header-menu">
<div class="header-container-wrapper custom-container">
<RouterLink to="/">
<LogoWhite />
</RouterLink>
<nav-links />
<user-area />
</div>
</div>
</q-header>
</template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
@ -44,6 +21,26 @@ export default defineComponent({
}); });
</script> </script>
<template>
<q-header class="header-container transparent">
<send-banner left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia" mobile-text="ENVÍO GRATIS a partir de 60€"
class="remove-mobile" />
<div class="header-menu">
<div class="header-container-wrapper custom-container">
<RouterLink to="/">
<LogoWhite />
</RouterLink>
<nav-links />
<user-area />
</div>
</div>
</q-header>
</template>
<style lang="scss" scoped> <style lang="scss" scoped>
.header-container { .header-container {
display: flex; display: flex;

47
src/components/header/UserArea.vue
View File

@ -1,29 +1,3 @@
<template>
<div class="user-area">
<!-- <dropdown-group class="user-area-lang" label="Idioma">
<dropdown-item current-lang="en"> EN </dropdown-item>
<dropdown-item current-lang="pt"> PT </dropdown-item>
<dropdown-item current-lang="es"> ES </dropdown-item>
</dropdown-group> -->
<RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
<RouterLink class="user-area-link cart" to="/checkout">
<icon-cart />
</RouterLink>
<q-btn
class="user-area-hamburg"
@click="handleOpenMobileNav"
size="sm"
color="white"
flat
round
>
<IconHamburger />
</q-btn>
</div>
</template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useMobileStore } from '../../stores/mobileNav'; import { useMobileStore } from '../../stores/mobileNav';
@ -50,6 +24,25 @@ export default defineComponent({
}); });
</script> </script>
<template>
<div class="user-area">
<!-- <dropdown-group class="user-area-lang" label="Idioma">
<dropdown-item current-lang="en"> EN </dropdown-item>
<dropdown-item current-lang="pt"> PT </dropdown-item>
<dropdown-item current-lang="es"> ES </dropdown-item>
</dropdown-group> -->
<RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
<RouterLink class="user-area-link cart" to="/checkout">
<icon-cart />
</RouterLink>
<q-btn class="user-area-hamburg" @click="handleOpenMobileNav" size="sm" color="white" flat round>
<IconHamburger />
</q-btn>
</div>
</template>
<style lang="scss" scoped> <style lang="scss" scoped>
.user-area { .user-area {
display: flex; display: flex;
@ -58,6 +51,7 @@ export default defineComponent({
& .user-area-link { & .user-area-link {
color: $white; color: $white;
&.user, &.user,
&.cart { &.cart {
width: 16px; width: 16px;
@ -71,6 +65,7 @@ export default defineComponent({
@media only screen and (max-width: $med-md) { @media only screen and (max-width: $med-md) {
gap: 27px; gap: 27px;
& .user-area-link { & .user-area-link {
&.help { &.help {
display: none; display: none;

65
src/components/ui/MobileNav.vue
View File

@ -1,36 +1,3 @@
<template>
<div class="mobile-nav-container" :class="!isOpenNav && 'hide'">
<header class="mobile-nav-links">
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/ramos"
>Ramos</RouterLink
>
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/plantas">
Plantas
</RouterLink>
<RouterLink @click="closeNav" class="mobile-link" to="/"
>Floranet</RouterLink
>
<RouterLink @click="closeNav" class="mobile-link" to="/">FAQs</RouterLink>
<RouterLink @click="closeNav" class="mobile-link" to="/"
>Contacta</RouterLink
>
</header>
<!--<div class="mobile-nav-lang">
<p class="mobile-lang-paragraph">Idioma</p>
<select class="mobile-lang-select" name="lang">
<option value="">Español</option>
</select>
</div>-->
<footer class="mobile-nav-footer">
<RouterLink to="/" class="btn outlined rounded sm-btn">
¿Tienes dudas? hablemos <IconChatRoundedFill />
</RouterLink>
</footer>
</div>
</template>
<script lang="ts"> <script lang="ts">
import { useMobileStore } from 'src/stores/mobileNav'; import { useMobileStore } from 'src/stores/mobileNav';
@ -68,6 +35,32 @@ export default defineComponent({
}); });
</script> </script>
<template>
<div class="mobile-nav-container" :class="!isOpenNav && 'hide'">
<header class="mobile-nav-links">
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/ramos">Ramos</RouterLink>
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/plantas">Plantas</RouterLink>
<RouterLink @click="closeNav" class="mobile-link" to="/">Floranet</RouterLink>
<!-- <RouterLink @click="closeNav" class="mobile-link" to="/">FAQs</RouterLink> -->
<RouterLink @click="closeNav" class="mobile-link" to="/">Contacta</RouterLink>
</header>
<!--<div class="mobile-nav-lang">
<p class="mobile-lang-paragraph">Idioma</p>
<select class="mobile-lang-select" name="lang">
<option value="">Español</option>
</select>
</div>-->
<footer class="mobile-nav-footer">
<RouterLink to="/" class="btn outlined rounded sm-btn">
¿Tienes dudas? hablemos
<IconChatRoundedFill />
</RouterLink>
</footer>
</div>
</template>
<style lang="scss" scoped> <style lang="scss" scoped>
.mobile-nav-container { .mobile-nav-container {
position: absolute; position: absolute;
@ -83,20 +76,24 @@ export default defineComponent({
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: 70px; margin-bottom: 70px;
& .mobile-link { & .mobile-link {
color: $text-muted; color: $text-muted;
font-family: $font-roboto; font-family: $font-roboto;
line-height: 40px; line-height: 40px;
&:not(:last-child) { &:not(:last-child) {
border-bottom: 1px solid $primary-light; border-bottom: 1px solid $primary-light;
} }
} }
} }
& .mobile-nav-lang { & .mobile-nav-lang {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 28px; gap: 28px;
margin-bottom: 42px; margin-bottom: 42px;
& .mobile-lang-paragraph { & .mobile-lang-paragraph {
color: $text-muted; color: $text-muted;
} }
@ -108,11 +105,13 @@ export default defineComponent({
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
&:focus-visible { &:focus-visible {
outline: 2px solid $primary-light; outline: 2px solid $primary-light;
} }
} }
} }
& .mobile-nav-footer { & .mobile-nav-footer {
display: flex; display: flex;
justify-content: center; justify-content: center;