feat: implement store layout with header and footer components, update tenant service URL
This commit is contained in:
@@ -0,0 +1,54 @@
|
|||||||
|
<footer class="store-layout__footer mt-auto text-light">
|
||||||
|
<div class="container-xl px-3 px-md-4 py-4 py-md-5">
|
||||||
|
<div class="row g-4">
|
||||||
|
<div class="col-12 col-md-6 col-xl-5 d-grid gap-3 align-content-start">
|
||||||
|
<div
|
||||||
|
class="store-layout__brand-slot d-inline-flex align-items-center gap-3"
|
||||||
|
data-testid="store-footer-brand-slot"
|
||||||
|
aria-label="Espacio reservado para logo de Sonder"
|
||||||
|
>
|
||||||
|
<span class="store-layout__brand-mark store-layout__brand-mark--footer" aria-hidden="true">
|
||||||
|
S
|
||||||
|
</span>
|
||||||
|
<span class="store-layout__brand-text store-layout__brand-text--footer">SONDER</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-grid gap-2">
|
||||||
|
<div class="d-flex align-items-center gap-2 text-light-emphasis">
|
||||||
|
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
|
||||||
|
<span>Av. San Lorenzo 1542, Rosario</span>
|
||||||
|
</div>
|
||||||
|
<div class="d-flex align-items-center gap-2 text-light-emphasis">
|
||||||
|
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
||||||
|
<span>54 9 (0341) 6658247</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mb-0 small text-white-50">Copyright © {{ currentYear }} - Sonder</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@for (section of footerSections; track section.heading) {
|
||||||
|
<div class="col-12 col-md-6 col-xl-2 d-grid gap-3 align-content-start">
|
||||||
|
<h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
|
||||||
|
<div class="d-grid gap-2">
|
||||||
|
@for (link of section.links; track link) {
|
||||||
|
<span class="text-light-emphasis">{{ link }}</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="col-12 col-md-6 col-xl-3 d-grid gap-3 align-content-start">
|
||||||
|
<h2 class="store-layout__footer-heading">Seguinos:</h2>
|
||||||
|
<div class="d-flex align-items-center gap-3">
|
||||||
|
@for (social of socialLinks; track social.label) {
|
||||||
|
<span class="fs-5 text-white">
|
||||||
|
<i [class]="social.iconClass" aria-hidden="true"></i>
|
||||||
|
<span class="visually-hidden">{{ social.label }}</span>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
.store-layout__footer {
|
||||||
|
background-color: #323232;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__brand-slot {
|
||||||
|
min-width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__brand-mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 2.75rem;
|
||||||
|
height: 2.75rem;
|
||||||
|
border: 1px dashed rgba(255, 255, 255, 0.35);
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__brand-text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.08em;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__footer-heading {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.store-layout__brand-slot {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__brand-text {
|
||||||
|
font-size: 1.45rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
|
||||||
|
export type StoreFooterSection = {
|
||||||
|
heading: string;
|
||||||
|
links: string[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type StoreSocialLink = {
|
||||||
|
label: string;
|
||||||
|
iconClass: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-store-footer',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './store-footer.component.html',
|
||||||
|
styleUrl: './store-footer.component.scss'
|
||||||
|
})
|
||||||
|
export class StoreFooterComponent {
|
||||||
|
@Input({ required: true }) currentYear = new Date().getFullYear();
|
||||||
|
@Input({ required: true }) footerSections: StoreFooterSection[] = [];
|
||||||
|
@Input({ required: true }) socialLinks: StoreSocialLink[] = [];
|
||||||
|
}
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
<header class="store-layout__header bg-white border-bottom">
|
||||||
|
<div class="border-bottom">
|
||||||
|
<div class="container-xl px-3 px-md-4 py-3 py-lg-4 d-flex flex-wrap align-items-center justify-content-between gap-3">
|
||||||
|
<div
|
||||||
|
class="store-layout__brand-slot d-inline-flex align-items-center gap-3 flex-shrink-0"
|
||||||
|
data-testid="store-header-brand-slot"
|
||||||
|
aria-label="Espacio reservado para logo de Sonder"
|
||||||
|
>
|
||||||
|
<span class="store-layout__brand-mark" aria-hidden="true">S</span>
|
||||||
|
<span class="store-layout__brand-text">SONDER</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex flex-column flex-md-row align-items-stretch align-items-md-center gap-3 ms-auto w-100 w-lg-auto">
|
||||||
|
<div class="input-group store-layout__search" role="search">
|
||||||
|
<label class="visually-hidden" for="store-search-input">Buscar productos</label>
|
||||||
|
<input
|
||||||
|
id="store-search-input"
|
||||||
|
type="search"
|
||||||
|
class="form-control border-dark border-end-0 rounded-start"
|
||||||
|
placeholder="Buscar productos"
|
||||||
|
/>
|
||||||
|
<button type="button" class="btn btn-outline-dark border-start-0 rounded-end px-3" aria-label="Buscar">
|
||||||
|
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex align-items-center justify-content-end gap-1" aria-label="Acciones de usuario">
|
||||||
|
@for (action of headerActions; track action.label) {
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-link text-dark p-2 text-decoration-none"
|
||||||
|
[attr.aria-label]="action.label"
|
||||||
|
[attr.title]="action.label"
|
||||||
|
>
|
||||||
|
<i [class]="action.iconClass" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="container-xl px-3 px-md-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-link d-inline-flex align-items-center gap-2 px-0 py-2 text-dark text-uppercase fw-bold text-decoration-none store-layout__category-trigger"
|
||||||
|
aria-label="Categorias"
|
||||||
|
>
|
||||||
|
<span>Categorias</span>
|
||||||
|
<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
.store-layout__brand-slot {
|
||||||
|
min-width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__brand-mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 2.75rem;
|
||||||
|
height: 2.75rem;
|
||||||
|
border: 1px dashed #bbbbbb;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: #373737;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__brand-text {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: -0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__search {
|
||||||
|
width: min(100%, 24rem);
|
||||||
|
min-width: 18rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__category-trigger {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767.98px) {
|
||||||
|
.store-layout__brand-slot {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__brand-text {
|
||||||
|
font-size: 1.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-layout__search {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
import { Component, Input } from '@angular/core';
|
||||||
|
|
||||||
|
export type StoreHeaderAction = {
|
||||||
|
label: string;
|
||||||
|
iconClass: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-store-header',
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './store-header.component.html',
|
||||||
|
styleUrl: './store-header.component.scss'
|
||||||
|
})
|
||||||
|
export class StoreHeaderComponent {
|
||||||
|
@Input({ required: true }) headerActions: StoreHeaderAction[] = [];
|
||||||
|
}
|
||||||
@@ -1,110 +1,13 @@
|
|||||||
<div class="store-layout">
|
<div class="store-layout d-flex flex-column flex-grow-1">
|
||||||
<header class="store-layout__header">
|
<app-store-header [headerActions]="headerActions" />
|
||||||
<div class="store-layout__top-bar">
|
|
||||||
<div class="store-layout__container store-layout__top-content">
|
|
||||||
<div
|
|
||||||
class="store-layout__brand-slot"
|
|
||||||
data-testid="store-header-brand-slot"
|
|
||||||
aria-label="Espacio reservado para logo de Sonder"
|
|
||||||
>
|
|
||||||
<span class="store-layout__brand-mark" aria-hidden="true">S</span>
|
|
||||||
<span class="store-layout__brand-text">SONDER</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="store-layout__tools">
|
<main class="flex-grow-1 d-block">
|
||||||
<div class="store-layout__search" role="search">
|
|
||||||
<label class="visually-hidden" for="store-search-input">Buscar productos</label>
|
|
||||||
<input
|
|
||||||
id="store-search-input"
|
|
||||||
type="search"
|
|
||||||
class="store-layout__search-input"
|
|
||||||
placeholder="Buscar productos"
|
|
||||||
/>
|
|
||||||
<button type="button" class="store-layout__search-button" aria-label="Buscar">
|
|
||||||
<i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="store-layout__actions" aria-label="Acciones de usuario">
|
|
||||||
@for (action of headerActions; track action.label) {
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="store-layout__header-action"
|
|
||||||
[attr.aria-label]="action.label"
|
|
||||||
[attr.title]="action.label"
|
|
||||||
>
|
|
||||||
<i [class]="action.iconClass" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="store-layout__category-bar">
|
|
||||||
<div class="store-layout__container">
|
|
||||||
<button type="button" class="store-layout__category-trigger" aria-label="Categorias">
|
|
||||||
<span>Categorias</span>
|
|
||||||
<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main class="store-layout__main">
|
|
||||||
<router-outlet />
|
<router-outlet />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="store-layout__footer">
|
<app-store-footer
|
||||||
<div class="store-layout__container store-layout__footer-content">
|
[currentYear]="currentYear"
|
||||||
<div class="store-layout__footer-brand-group">
|
[footerSections]="footerSections"
|
||||||
<div
|
[socialLinks]="socialLinks"
|
||||||
class="store-layout__brand-slot store-layout__brand-slot--footer"
|
/>
|
||||||
data-testid="store-footer-brand-slot"
|
|
||||||
aria-label="Espacio reservado para logo de Sonder"
|
|
||||||
>
|
|
||||||
<span class="store-layout__brand-mark store-layout__brand-mark--footer" aria-hidden="true">
|
|
||||||
S
|
|
||||||
</span>
|
|
||||||
<span class="store-layout__brand-text store-layout__brand-text--footer">SONDER</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="store-layout__contact-list">
|
|
||||||
<div class="store-layout__contact-item">
|
|
||||||
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
|
|
||||||
<span>Av. San Lorenzo 1542, Rosario</span>
|
|
||||||
</div>
|
|
||||||
<div class="store-layout__contact-item">
|
|
||||||
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
|
||||||
<span>54 9 (0341) 6658247</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p class="store-layout__copyright">Copyright © {{ currentYear }} - Sonder</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
@for (section of footerSections; track section.heading) {
|
|
||||||
<div class="store-layout__footer-section">
|
|
||||||
<h2 class="store-layout__footer-heading">{{ section.heading }}</h2>
|
|
||||||
<div class="store-layout__footer-links">
|
|
||||||
@for (link of section.links; track link) {
|
|
||||||
<span class="store-layout__footer-link">{{ link }}</span>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
<div class="store-layout__social-group">
|
|
||||||
<h2 class="store-layout__footer-heading">Seguinos:</h2>
|
|
||||||
<div class="store-layout__social-links">
|
|
||||||
@for (social of socialLinks; track social.label) {
|
|
||||||
<span class="store-layout__social-link">
|
|
||||||
<i [class]="social.iconClass" aria-hidden="true"></i>
|
|
||||||
<span class="visually-hidden">{{ social.label }}</span>
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,285 +4,3 @@
|
|||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
color: #202020;
|
color: #202020;
|
||||||
}
|
}
|
||||||
|
|
||||||
.store-layout {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__container {
|
|
||||||
width: min(100% - 3rem, 75rem);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__header {
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-bottom: 1px solid #e9e9e9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__top-bar {
|
|
||||||
border-bottom: 1px solid #efefef;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__top-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 1.5rem;
|
|
||||||
min-height: 5.5rem;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-slot {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.75rem;
|
|
||||||
min-width: 10rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-mark {
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
width: 2.75rem;
|
|
||||||
height: 2.75rem;
|
|
||||||
border: 1px dashed #bbbbbb;
|
|
||||||
border-radius: 999px;
|
|
||||||
font-size: 1.05rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
color: #373737;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-text {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: -0.08em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__tools {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__search {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: min(100%, 24rem);
|
|
||||||
min-width: 18rem;
|
|
||||||
border: 1px solid #313131;
|
|
||||||
border-radius: 0.35rem;
|
|
||||||
background-color: #ffffff;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__search-input {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0.7rem 0.85rem;
|
|
||||||
border: 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
background: transparent;
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__search-button,
|
|
||||||
.store-layout__header-action,
|
|
||||||
.store-layout__category-trigger {
|
|
||||||
border: 0;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__search-button {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 2.75rem;
|
|
||||||
height: 2.75rem;
|
|
||||||
color: #2c2c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__actions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__header-action {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 2.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: #2c2c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__category-bar {
|
|
||||||
min-height: 2.35rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__category-trigger {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.4rem;
|
|
||||||
min-height: 2.35rem;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
color: #202020;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__main {
|
|
||||||
flex: 1;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer {
|
|
||||||
margin-top: auto;
|
|
||||||
background-color: #323232;
|
|
||||||
color: #f3f3f3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer-content {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(16rem, 1.6fr) repeat(2, minmax(10rem, 1fr)) auto;
|
|
||||||
gap: 2rem;
|
|
||||||
padding: 2.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer-brand-group,
|
|
||||||
.store-layout__footer-section,
|
|
||||||
.store-layout__social-group {
|
|
||||||
display: grid;
|
|
||||||
align-content: start;
|
|
||||||
gap: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-slot--footer {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-mark--footer {
|
|
||||||
border-color: rgba(255, 255, 255, 0.35);
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-text--footer {
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__contact-list {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.45rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__contact-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.6rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
color: #ececec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__copyright {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: #d3d3d3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer-heading {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #f8f8f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer-links {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.55rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer-link {
|
|
||||||
font-size: 0.95rem;
|
|
||||||
color: #ececec;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__social-group {
|
|
||||||
justify-items: start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__social-links {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.85rem;
|
|
||||||
padding-top: 0.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__social-link {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 991.98px) {
|
|
||||||
.store-layout__top-content {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__tools {
|
|
||||||
flex: 1 1 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__search {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer-content {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 767.98px) {
|
|
||||||
.store-layout__container {
|
|
||||||
width: min(100% - 1.5rem, 75rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-slot {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__brand-text {
|
|
||||||
font-size: 1.45rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__tools {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__search {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__actions {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.store-layout__footer-content {
|
|
||||||
grid-template-columns: minmax(0, 1fr);
|
|
||||||
gap: 1.5rem;
|
|
||||||
padding: 2rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -17,10 +17,10 @@ describe('StoreLayoutComponent', () => {
|
|||||||
|
|
||||||
const compiled = fixture.nativeElement as HTMLElement;
|
const compiled = fixture.nativeElement as HTMLElement;
|
||||||
|
|
||||||
expect(compiled.querySelector('.store-layout__header')).not.toBeNull();
|
expect(compiled.querySelector('app-store-header .store-layout__header')).not.toBeNull();
|
||||||
expect(compiled.querySelector('.store-layout__category-trigger')).not.toBeNull();
|
expect(compiled.querySelector('.store-layout__category-trigger')).not.toBeNull();
|
||||||
expect(compiled.querySelector('router-outlet')).not.toBeNull();
|
expect(compiled.querySelector('router-outlet')).not.toBeNull();
|
||||||
expect(compiled.querySelector('.store-layout__footer')).not.toBeNull();
|
expect(compiled.querySelector('app-store-footer .store-layout__footer')).not.toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders the placeholder branding and action icons', () => {
|
it('renders the placeholder branding and action icons', () => {
|
||||||
|
|||||||
@@ -1,24 +1,11 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { RouterOutlet } from '@angular/router';
|
import { RouterOutlet } from '@angular/router';
|
||||||
|
import { StoreFooterComponent, StoreFooterSection, StoreSocialLink } from './store-footer/store-footer.component';
|
||||||
type StoreHeaderAction = {
|
import { StoreHeaderComponent, StoreHeaderAction } from './store-header/store-header.component';
|
||||||
label: string;
|
|
||||||
iconClass: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type StoreFooterSection = {
|
|
||||||
heading: string;
|
|
||||||
links: string[];
|
|
||||||
};
|
|
||||||
|
|
||||||
type StoreSocialLink = {
|
|
||||||
label: string;
|
|
||||||
iconClass: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-store-layout',
|
selector: 'app-store-layout',
|
||||||
imports: [RouterOutlet],
|
imports: [RouterOutlet, StoreHeaderComponent, StoreFooterComponent],
|
||||||
templateUrl: './store-layout.component.html',
|
templateUrl: './store-layout.component.html',
|
||||||
styleUrl: './store-layout.component.scss'
|
styleUrl: './store-layout.component.scss'
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -23,7 +23,7 @@ export class TenantService {
|
|||||||
|
|
||||||
const domain = this.resolveDomain();
|
const domain = this.resolveDomain();
|
||||||
const response = await firstValueFrom(
|
const response = await firstValueFrom(
|
||||||
this.http.get<TenantBootstrapResponse>(`${environment.url}tennants/bootstrap/${domain}`)
|
this.http.get<TenantBootstrapResponse>(`${environment.url}tenants/bootstrap/${domain}`)
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!response?.data) {
|
if (!response?.data) {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
export const environment = {
|
export const environment = {
|
||||||
production: false,
|
production: false,
|
||||||
nombre:"Desarrollo - activo",
|
nombre:"Desarrollo - activo",
|
||||||
url:"url/api/",
|
url:"http://localhost:8000/api/",
|
||||||
urlDescarga:"url/"
|
urlDescarga:"url/"
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user