feat: enhance team store page layout and styling for improved user experience
This commit is contained in:
Frank John Begornia
@@ -7,14 +7,17 @@
|
||||
@endif
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
h2 {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
margin-top: 34px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
/* h2:after {
|
||||
display: inline-block;
|
||||
@@ -41,6 +44,15 @@
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.6px;
|
||||
color: #111827;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.price{
|
||||
font-size: 25px;
|
||||
margin: 0 auto;
|
||||
@@ -51,19 +63,107 @@
|
||||
border-bottom: 2px solid #4B8E4B;
|
||||
}
|
||||
.thumbnail{
|
||||
/* opacity:0.70; */
|
||||
-webkit-transition: all 0.5s;
|
||||
-webkit-transition: all 0.5s;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.thumbnail:hover{
|
||||
opacity:1.00;
|
||||
box-shadow: 0px 0px 10px #4bc6ff;
|
||||
}
|
||||
.line{
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.thumbnail>img{
|
||||
height:201.84px;
|
||||
.products-grid {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.product-col {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
height: 100%;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: #d1d5db;
|
||||
box-shadow: 0 10px 24px rgba(2, 6, 23, 0.08);
|
||||
}
|
||||
|
||||
.product-image-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16px;
|
||||
min-height: 240px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-height: 202px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.product-card-body {
|
||||
padding: 12px 14px 14px;
|
||||
}
|
||||
|
||||
.product-name-holder {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: #111827;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.product-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-top: 12px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.price {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.price small,
|
||||
.price-currency {
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-view-details {
|
||||
border-radius: 8px;
|
||||
min-height: 36px;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 8px 12px;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
margin: 50px 0;
|
||||
color: #6b7280;
|
||||
font-size: 15px;
|
||||
}
|
||||
@media screen and (max-width: 770px) {
|
||||
.right{
|
||||
@@ -130,10 +230,13 @@
|
||||
|
||||
/* ── Category nav ──────────────────────────────────────────────────────── */
|
||||
.cat-nav {
|
||||
background: #f8f8f8;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
padding: 0;
|
||||
margin-bottom: 24px;
|
||||
overflow: visible;
|
||||
}
|
||||
.cat-nav ul {
|
||||
list-style: none;
|
||||
@@ -209,10 +312,13 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 10px 0 14px;
|
||||
padding: 10px 12px 14px;
|
||||
margin-bottom: 18px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
align-items: center;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
}
|
||||
.league-filter .lf-label {
|
||||
font-size: 11px;
|
||||
@@ -246,6 +352,38 @@
|
||||
color: #fff;
|
||||
border-color: #4B8E4B;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.product-image-link {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
.btn-view-details {
|
||||
padding: 7px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
h2 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.featured-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.product-card-footer {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-view-details {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
[v-cloak] { display: none; }
|
||||
</style>
|
||||
|
||||
@@ -267,7 +405,7 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h2>FEATURED PRODUCTS</h2>
|
||||
<h2 class="featured-title">Featured Products</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -376,26 +514,23 @@
|
||||
@endif
|
||||
|
||||
{{-- ── Product grid ── --}}
|
||||
<div class="row">
|
||||
<div class="row products-grid">
|
||||
<div class="col-md-12 text-center" v-if="filtered.length === 0">
|
||||
<p style="margin:40px 0;color:#888;">No products found in this category.</p>
|
||||
<p class="empty-state">No products found in this category.</p>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-6" v-for="p in filtered" :key="p.id">
|
||||
<span class="thumbnail">
|
||||
<a :href="productUrl(p)">
|
||||
<img style="height:201.84px;" :src="imgUrl(p)" :alt="p.name">
|
||||
<div class="col-md-3 col-sm-6 product-col" v-for="p in filtered" :key="p.id">
|
||||
<div class="product-card">
|
||||
<a :href="productUrl(p)" class="product-image-link">
|
||||
<img class="product-image" :src="imgUrl(p)" :alt="p.name">
|
||||
</a>
|
||||
<h4 class="text-center product-name-holder">@{{ p.name }}</h4>
|
||||
<hr class="line">
|
||||
<div class="row">
|
||||
<div class="col-md-7 col-sm-7">
|
||||
<p class="price">@{{ p.price }} <small style="font-size:15px;">@{{ store.currency }}</small></p>
|
||||
</div>
|
||||
<div class="col-md-5 col-sm-5">
|
||||
<a :href="productUrl(p)" class="btn btn-success right">View Details</a>
|
||||
<div class="product-card-body">
|
||||
<h4 class="text-center product-name-holder">@{{ p.name }}</h4>
|
||||
<div class="product-card-footer">
|
||||
<p class="price">@{{ p.price }} <small class="price-currency">@{{ store.currency }}</small></p>
|
||||
<a :href="productUrl(p)" class="btn btn-success btn-view-details">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -419,22 +554,22 @@
|
||||
// ── league / conference keyword map ──────────────────────────────────
|
||||
// Order matters: more specific phrases first
|
||||
const LEAGUES = [
|
||||
{ key: 'NBA', terms: ['nba'] },
|
||||
{ key: 'NFL', terms: ['nfl'] },
|
||||
{ key: 'MLB', terms: ['mlb'] },
|
||||
{ key: 'NHL', terms: ['nhl'] },
|
||||
{ key: 'MLS', terms: ['mls'] },
|
||||
{ key: 'WNBA', terms: ['wnba'] },
|
||||
{ key: 'Big Ten', terms: ['big ten','big10','big 10'] },
|
||||
{ key: 'ACC', terms: ['acc'] },
|
||||
{ key: 'SEC', terms: ['sec'] },
|
||||
{ key: 'Big 12', terms: ['big 12','big12'] },
|
||||
{ key: 'Pac-12', terms: ['pac-12','pac12','pac 12'] },
|
||||
{ key: 'AAC', terms: ['aac'] },
|
||||
{ key: 'CUSA', terms: ['cusa','c-usa'] },
|
||||
{ key: 'MAC', terms: ['\bmac\b'] },
|
||||
{ key: 'Sun Belt',terms: ['sun belt'] },
|
||||
{ key: 'Mountain West', terms: ['mountain west','mwc'] },
|
||||
{ key: 'WNBA', terms: ['\\bwnba\\b'] },
|
||||
{ key: 'NBA', terms: ['\\bnba\\b'] },
|
||||
{ key: 'NFL', terms: ['\\bnfl\\b'] },
|
||||
{ key: 'MLB', terms: ['\\bmlb\\b'] },
|
||||
{ key: 'NHL', terms: ['\\bnhl\\b'] },
|
||||
{ key: 'MLS', terms: ['\\bmls\\b'] },
|
||||
{ key: 'Big Ten', terms: ['\\bbig\\s*ten\\b','\\bbig\\s*10\\b','\\bbig10\\b'] },
|
||||
{ key: 'ACC', terms: ['\\bacc\\b'] },
|
||||
{ key: 'SEC', terms: ['\\bsec\\b'] },
|
||||
{ key: 'Big 12', terms: ['\\bbig\\s*12\\b','\\bbig12\\b'] },
|
||||
{ key: 'Pac-12', terms: ['\\bpac[-\\s]*12\\b','\\bpac12\\b'] },
|
||||
{ key: 'AAC', terms: ['\\baac\\b'] },
|
||||
{ key: 'CUSA', terms: ['\\bcusa\\b','\\bc-usa\\b'] },
|
||||
{ key: 'MAC', terms: ['\\bmac\\b'] },
|
||||
{ key: 'Sun Belt',terms: ['\\bsun\\s+belt\\b'] },
|
||||
{ key: 'Mountain West', terms: ['\\bmountain\\s+west\\b','\\bmwc\\b'] },
|
||||
];
|
||||
|
||||
function classify(name) {
|
||||
|
||||
Reference in New Issue
Block a user