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
|
@endif
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
body {
|
||||||
|
background: #f4f6f8;
|
||||||
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 40px;
|
margin-top: 34px;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 24px;
|
||||||
|
|
||||||
}
|
}
|
||||||
/* h2:after {
|
/* h2:after {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -41,6 +44,15 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.featured-title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
color: #111827;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
.price{
|
.price{
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
@@ -51,19 +63,107 @@
|
|||||||
border-bottom: 2px solid #4B8E4B;
|
border-bottom: 2px solid #4B8E4B;
|
||||||
}
|
}
|
||||||
.thumbnail{
|
.thumbnail{
|
||||||
/* opacity:0.70; */
|
|
||||||
-webkit-transition: all 0.5s;
|
-webkit-transition: all 0.5s;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
}
|
}
|
||||||
.thumbnail:hover{
|
|
||||||
opacity:1.00;
|
|
||||||
box-shadow: 0px 0px 10px #4bc6ff;
|
|
||||||
}
|
|
||||||
.line{
|
.line{
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
.thumbnail>img{
|
.products-grid {
|
||||||
height:201.84px;
|
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) {
|
@media screen and (max-width: 770px) {
|
||||||
.right{
|
.right{
|
||||||
@@ -130,10 +230,13 @@
|
|||||||
|
|
||||||
/* ── Category nav ──────────────────────────────────────────────────────── */
|
/* ── Category nav ──────────────────────────────────────────────────────── */
|
||||||
.cat-nav {
|
.cat-nav {
|
||||||
background: #f8f8f8;
|
background: #ffffff;
|
||||||
border-bottom: 2px solid #e0e0e0;
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
.cat-nav ul {
|
.cat-nav ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@@ -209,10 +312,13 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 10px 0 14px;
|
padding: 10px 12px 14px;
|
||||||
margin-bottom: 18px;
|
margin-bottom: 18px;
|
||||||
border-bottom: 1px solid #e8e8e8;
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
}
|
}
|
||||||
.league-filter .lf-label {
|
.league-filter .lf-label {
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@@ -246,6 +352,38 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #4B8E4B;
|
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; }
|
[v-cloak] { display: none; }
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -267,7 +405,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<h2>FEATURED PRODUCTS</h2>
|
<h2 class="featured-title">Featured Products</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -376,26 +514,23 @@
|
|||||||
@endif
|
@endif
|
||||||
|
|
||||||
{{-- ── Product grid ── --}}
|
{{-- ── Product grid ── --}}
|
||||||
<div class="row">
|
<div class="row products-grid">
|
||||||
<div class="col-md-12 text-center" v-if="filtered.length === 0">
|
<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>
|
||||||
<div class="col-md-3 col-sm-6" v-for="p in filtered" :key="p.id">
|
<div class="col-md-3 col-sm-6 product-col" v-for="p in filtered" :key="p.id">
|
||||||
<span class="thumbnail">
|
<div class="product-card">
|
||||||
<a :href="productUrl(p)">
|
<a :href="productUrl(p)" class="product-image-link">
|
||||||
<img style="height:201.84px;" :src="imgUrl(p)" :alt="p.name">
|
<img class="product-image" :src="imgUrl(p)" :alt="p.name">
|
||||||
</a>
|
</a>
|
||||||
|
<div class="product-card-body">
|
||||||
<h4 class="text-center product-name-holder">@{{ p.name }}</h4>
|
<h4 class="text-center product-name-holder">@{{ p.name }}</h4>
|
||||||
<hr class="line">
|
<div class="product-card-footer">
|
||||||
<div class="row">
|
<p class="price">@{{ p.price }} <small class="price-currency">@{{ store.currency }}</small></p>
|
||||||
<div class="col-md-7 col-sm-7">
|
<a :href="productUrl(p)" class="btn btn-success btn-view-details">View Details</a>
|
||||||
<p class="price">@{{ p.price }} <small style="font-size:15px;">@{{ store.currency }}</small></p>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="col-md-5 col-sm-5">
|
|
||||||
<a :href="productUrl(p)" class="btn btn-success right">View Details</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -419,22 +554,22 @@
|
|||||||
// ── league / conference keyword map ──────────────────────────────────
|
// ── league / conference keyword map ──────────────────────────────────
|
||||||
// Order matters: more specific phrases first
|
// Order matters: more specific phrases first
|
||||||
const LEAGUES = [
|
const LEAGUES = [
|
||||||
{ key: 'NBA', terms: ['nba'] },
|
{ key: 'WNBA', terms: ['\\bwnba\\b'] },
|
||||||
{ key: 'NFL', terms: ['nfl'] },
|
{ key: 'NBA', terms: ['\\bnba\\b'] },
|
||||||
{ key: 'MLB', terms: ['mlb'] },
|
{ key: 'NFL', terms: ['\\bnfl\\b'] },
|
||||||
{ key: 'NHL', terms: ['nhl'] },
|
{ key: 'MLB', terms: ['\\bmlb\\b'] },
|
||||||
{ key: 'MLS', terms: ['mls'] },
|
{ key: 'NHL', terms: ['\\bnhl\\b'] },
|
||||||
{ key: 'WNBA', terms: ['wnba'] },
|
{ key: 'MLS', terms: ['\\bmls\\b'] },
|
||||||
{ key: 'Big Ten', terms: ['big ten','big10','big 10'] },
|
{ key: 'Big Ten', terms: ['\\bbig\\s*ten\\b','\\bbig\\s*10\\b','\\bbig10\\b'] },
|
||||||
{ key: 'ACC', terms: ['acc'] },
|
{ key: 'ACC', terms: ['\\bacc\\b'] },
|
||||||
{ key: 'SEC', terms: ['sec'] },
|
{ key: 'SEC', terms: ['\\bsec\\b'] },
|
||||||
{ key: 'Big 12', terms: ['big 12','big12'] },
|
{ key: 'Big 12', terms: ['\\bbig\\s*12\\b','\\bbig12\\b'] },
|
||||||
{ key: 'Pac-12', terms: ['pac-12','pac12','pac 12'] },
|
{ key: 'Pac-12', terms: ['\\bpac[-\\s]*12\\b','\\bpac12\\b'] },
|
||||||
{ key: 'AAC', terms: ['aac'] },
|
{ key: 'AAC', terms: ['\\baac\\b'] },
|
||||||
{ key: 'CUSA', terms: ['cusa','c-usa'] },
|
{ key: 'CUSA', terms: ['\\bcusa\\b','\\bc-usa\\b'] },
|
||||||
{ key: 'MAC', terms: ['\bmac\b'] },
|
{ key: 'MAC', terms: ['\\bmac\\b'] },
|
||||||
{ key: 'Sun Belt',terms: ['sun belt'] },
|
{ key: 'Sun Belt',terms: ['\\bsun\\s+belt\\b'] },
|
||||||
{ key: 'Mountain West', terms: ['mountain west','mwc'] },
|
{ key: 'Mountain West', terms: ['\\bmountain\\s+west\\b','\\bmwc\\b'] },
|
||||||
];
|
];
|
||||||
|
|
||||||
function classify(name) {
|
function classify(name) {
|
||||||
|
|||||||
@@ -7,6 +7,45 @@
|
|||||||
@endif
|
@endif
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f4f6f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-page {
|
||||||
|
padding-top: 14px;
|
||||||
|
padding-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb {
|
||||||
|
margin: 0;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb > li,
|
||||||
|
.product-breadcrumb .breadcrumb > li.active,
|
||||||
|
.product-breadcrumb .breadcrumb > li + li:before {
|
||||||
|
color: #6b7280;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb > li > a {
|
||||||
|
color: #374151;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-breadcrumb .breadcrumb > li > a:hover {
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
p{
|
p{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
@@ -30,7 +69,8 @@
|
|||||||
box-shadow: 0px 0px 10px #4bc6ff;
|
box-shadow: 0px 0px 10px #4bc6ff;
|
||||||
} */
|
} */
|
||||||
.line{
|
.line{
|
||||||
margin-bottom: 5px;
|
margin: 14px 0;
|
||||||
|
border-color: #e5e7eb;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 770px) {
|
@media screen and (max-width: 770px) {
|
||||||
.right{
|
.right{
|
||||||
@@ -117,18 +157,45 @@
|
|||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-control.left {
|
#myCarousel {
|
||||||
margin-left: -35px;
|
position: relative;
|
||||||
margin-top: 7px;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.carousel-control.right {
|
|
||||||
margin-right: -35px;
|
|
||||||
margin-top: 7px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.carousel-control {
|
.carousel-control {
|
||||||
width: 0%;
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -17px;
|
||||||
|
opacity: 1;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.left {
|
||||||
|
left: -18px;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.right {
|
||||||
|
right: -18px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control .glyphicon {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(255, 255, 255, 0.95);
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
color: #374151;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control:hover .glyphicon {
|
||||||
|
background: #ffffff;
|
||||||
|
border-color: #9ca3af;
|
||||||
|
color: #111827;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-chevron-left,
|
.custom-chevron-left,
|
||||||
@@ -139,11 +206,127 @@
|
|||||||
|
|
||||||
.hide-bullets {
|
.hide-bullets {
|
||||||
list-style:none;
|
list-style:none;
|
||||||
margin-left: -40px;
|
margin-left: 0;
|
||||||
margin-top:20px;
|
margin-top: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
.hide-bullets > li {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-gallery-card,
|
||||||
|
.product-info-card,
|
||||||
|
.description-card {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-gallery-card {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-image-stage {
|
||||||
|
border: 1px solid #eef0f3;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #fcfcfd;
|
||||||
|
min-height: 430px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-product-image {
|
||||||
|
max-height: 400px;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #d1d5db;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 0;
|
||||||
|
transition: border-color 0.2s, box-shadow 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumbnail:hover {
|
||||||
|
border-color: #9ca3af;
|
||||||
|
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.a_thumbnail.active {
|
||||||
|
border-color: #3b82f6;
|
||||||
|
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-thumbnails {
|
||||||
|
border-radius: 8px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-info-card {
|
||||||
|
padding: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 1.2;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-size: 30px;
|
||||||
|
margin: 8px 0 18px;
|
||||||
|
color: #0f172a;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price small {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #6b7280;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
#frm-order-list {
|
||||||
|
padding-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-add-to-cart {
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 10px 18px;
|
||||||
|
border-radius: 9px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-card {
|
||||||
|
margin-top: 18px;
|
||||||
|
padding: 18px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-title {
|
||||||
|
margin: 0 0 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-text {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.65;
|
||||||
|
color: #4b5563;
|
||||||
|
}
|
||||||
|
|
||||||
.spacer-top{
|
.spacer-top{
|
||||||
margin-top: 40px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
.roster-input{
|
.roster-input{
|
||||||
border-radius: 0px;
|
border-radius: 0px;
|
||||||
@@ -208,12 +391,49 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 991px) {
|
||||||
|
.product-info-card {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-image-stage {
|
||||||
|
min-height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#btn-add-to-cart {
|
||||||
|
width: 100%;
|
||||||
|
float: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.main-image-stage {
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.left {
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-control.right {
|
||||||
|
right: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-title {
|
||||||
|
font-size: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="container">
|
<div class="container product-page">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<nav aria-label="breadcrumb">
|
<nav aria-label="breadcrumb" class="product-breadcrumb">
|
||||||
<ol class="breadcrumb">
|
<ol class="breadcrumb">
|
||||||
<li class="breadcrumb-item"><a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}">Home</a></li>
|
<li class="breadcrumb-item"><a href="{{ url('teamstore') }}/{{ $store_array[0]->StoreUrl }}">Home</a></li>
|
||||||
<li class="breadcrumb-item active" aria-current="page">{{ $product_array[0]->ProductName }}</li>
|
<li class="breadcrumb-item active" aria-current="page">{{ $product_array[0]->ProductName }}</li>
|
||||||
@@ -224,23 +444,23 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-md-5 col-sm-5">
|
<div class="col-md-5 col-sm-5">
|
||||||
<div class="row">
|
<div class="main-gallery-card">
|
||||||
<div class="col-sm-12" id="carousel-bounding-box">
|
<div id="carousel-bounding-box">
|
||||||
|
<div class="main-image-stage">
|
||||||
<div class="carousel slide" id="myCarousel" data-interval="false">
|
<div class="carousel slide" id="myCarousel" data-interval="false">
|
||||||
<!-- Carousel items -->
|
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
@define $i = 0
|
@define $i = 0
|
||||||
@foreach($thumbnails_array as $thumbnail)
|
@foreach($thumbnails_array as $thumbnail)
|
||||||
@if($thumbnail->ImageClass == 'active')
|
@if($thumbnail->ImageClass == 'active')
|
||||||
<div class="active item text-center" data-slide-number="{{ $i }}">
|
<div class="active item text-center" data-slide-number="{{ $i }}">
|
||||||
<span class="zoom img-zoom">
|
<span class="zoom img-zoom">
|
||||||
<img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
<img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div class="item text-center" data-slide-number="{{ $i }}">
|
<div class="item text-center" data-slide-number="{{ $i }}">
|
||||||
<span class="zoom img-zoom">
|
<span class="zoom img-zoom">
|
||||||
<img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
<img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
@@ -248,7 +468,6 @@
|
|||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Carousel nav -->
|
|
||||||
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
||||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||||
</a>
|
</a>
|
||||||
@@ -257,14 +476,11 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class="line">
|
<hr class="line">
|
||||||
|
|
||||||
<div class="row">
|
<ul class="hide-bullets row">
|
||||||
<div class="col-md-12">
|
|
||||||
<ul class="hide-bullets">
|
|
||||||
@define $j = 0
|
@define $j = 0
|
||||||
@foreach($thumbnails_array as $thumbnail)
|
@foreach($thumbnails_array as $thumbnail)
|
||||||
<li class="col-sm-3 col-xs-3">
|
<li class="col-sm-3 col-xs-3">
|
||||||
@@ -276,16 +492,14 @@
|
|||||||
@endforeach
|
@endforeach
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-7 col-sm-7">
|
<div class="col-md-7 col-sm-7">
|
||||||
<div class="panel panel-default">
|
<div class="product-info-card">
|
||||||
<div class="panel-heading">
|
<h1 class="product-title">{{ $product_array[0]->ProductName }}</h1>
|
||||||
<h1>{{ $product_array[0]->ProductName }}</h1> <p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
|
<p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
|
||||||
</div>
|
|
||||||
<div class="panel-body">
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<form id="frm-order-list">
|
<form id="frm-order-list">
|
||||||
@@ -300,13 +514,18 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="description-card">
|
||||||
|
<h3 class="description-title">Description</h3>
|
||||||
|
<p class="description-text">{{ $product_array[0]->ProductDescription }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="spacer-top"></div>
|
<div class="spacer-top"></div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<ul class="nav nav-tabs" role="tablist">
|
<ul class="nav nav-tabs" role="tablist">
|
||||||
<li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">Description</a></li>
|
<li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">More Details</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<!-- Tab panes -->
|
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<div role="tabpanel" class="tab-pane active" id="productDescription">
|
<div role="tabpanel" class="tab-pane active" id="productDescription">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@@ -320,7 +539,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> <!-- container -->
|
</div> <!-- container -->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -2,64 +2,188 @@
|
|||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
a.thumbnail>img {
|
body {
|
||||||
/* height: 250px; */
|
background: #f4f6f8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide-bullets {
|
.store-page {
|
||||||
|
padding-top: 14px;
|
||||||
|
padding-bottom: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-header {
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-subtitle {
|
||||||
|
margin: 6px 0 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
|
padding: 14px;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #4b5563;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar .form-control,
|
||||||
|
.store-toolbar .btn {
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar .form-control {
|
||||||
|
border-color: #d1d5db;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar .form-control:focus {
|
||||||
|
border-color: #9ca3af;
|
||||||
|
box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-grid {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-left: -40px;
|
padding-left: 0;
|
||||||
margin-top:20px;
|
margin: 0 -10px;
|
||||||
position: relative;
|
|
||||||
}
|
}
|
||||||
.thumbnail{
|
|
||||||
border: none;
|
.store-grid > li {
|
||||||
display: unset;
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
.li-custom{
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
.store-logo{
|
|
||||||
/* height: 250px;
|
.store-card {
|
||||||
width: 250px;
|
background: #fff;
|
||||||
|
border: 1px solid #e5e7eb;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
object-fit: contain; */
|
height: 100%;
|
||||||
/* cursor: pointer; */
|
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-card:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
border-color: #d1d5db;
|
||||||
|
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-link {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-link:hover,
|
||||||
|
.store-link:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-logo-wrap {
|
||||||
|
height: 170px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-logo {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-meta {
|
||||||
|
padding: 12px;
|
||||||
|
min-height: 72px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-name {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.35;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #111827;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-lock {
|
||||||
|
color: #6b7280;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-pagination {
|
||||||
|
margin-top: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-pagination .pagination {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.store-title {
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-toolbar {
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.store-logo-wrap {
|
||||||
|
height: 155px;
|
||||||
}
|
}
|
||||||
a.thumbnail>img{
|
|
||||||
height: 150px
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<div class="container">
|
<div class="container store-page">
|
||||||
<div class="row">
|
<div class="row store-header">
|
||||||
<div class="col-lg-12">
|
<div class="col-lg-12">
|
||||||
<h2 style="font-size: 20px; font-weight: bold; ">TEAM STORES</h2>
|
<h2 class="store-title">Team Stores</h2>
|
||||||
<hr>
|
<p class="store-subtitle">Browse and open your team store.</p>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /row -->
|
</div>
|
||||||
|
|
||||||
|
<div class="store-toolbar">
|
||||||
|
<form role="search" id="frm_search_store">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- <div class="col-sm-12"> -->
|
<div class="col-md-8 col-sm-7">
|
||||||
<!-- <div class="well"> -->
|
<label>Search Store</label>
|
||||||
<form class="form-horizontal" role="search" id="frm_search_store">
|
|
||||||
<div class="col-lg-7">
|
|
||||||
<div class="form-group">
|
|
||||||
<div class="col-sm-12">
|
|
||||||
<label>Seach Store</label>
|
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<input type="text" class="form-control" placeholder="Search Store" value="{{ $keyword }}" name="q">
|
<input type="text" class="form-control" placeholder="Search store" value="{{ $keyword }}" name="q">
|
||||||
<div class="input-group-btn">
|
<div class="input-group-btn">
|
||||||
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
|
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-md-4 col-sm-5">
|
||||||
</div>
|
<label>Sort by</label>
|
||||||
<div class="col-lg-5">
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="col-sm-7 control-label hidden-xs"> </label>
|
|
||||||
<div class="col-sm-5">
|
|
||||||
<label>Sort by:</label>
|
|
||||||
<select class="form-control" name="s" id="select_sort_stores">
|
<select class="form-control" name="s" id="select_sort_stores">
|
||||||
<option @if($filter == "al-asc") selected @endif value="al-asc">Store Name A → Z</option>
|
<option @if($filter == "al-asc") selected @endif value="al-asc">Store Name A → Z</option>
|
||||||
<option @if($filter == "al-desc") selected @endif value="al-desc">Store Name Z → A</option>
|
<option @if($filter == "al-desc") selected @endif value="al-desc">Store Name Z → A</option>
|
||||||
@@ -68,42 +192,47 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
<div class="clearfix"></div>
|
|
||||||
<!-- </div> -->
|
|
||||||
<!-- </div> -->
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row" id="slider-thumbs">
|
|
||||||
<!-- Bottom switcher of slider -->
|
<div id="slider-thumbs">
|
||||||
<ul class="hide-bullets">
|
<ul class="store-grid row">
|
||||||
@foreach ($stores_array as $store)
|
@foreach ($stores_array as $store)
|
||||||
<li class="li-custom col-lg-3 col-md-3 col-sm-4 col-xs-12">
|
<li class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
|
||||||
<div style="border: 1px solid #dddddd; padding: 5px;">
|
<div class="store-card">
|
||||||
@if($store->Password != null)
|
@if($store->Password != null)
|
||||||
<a class="thumbnail password-protected" href="#" data-store-id="{{ $store->Id }}" data-store-url="{{ $store->StoreUrl }}">
|
<a class="store-link password-protected" href="#" data-store-id="{{ $store->Id }}" data-store-url="{{ $store->StoreUrl }}">
|
||||||
|
<div class="store-logo-wrap">
|
||||||
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<h4 style="border-top: 1px solid #dddddd; padding: 10px; font-size: 16px; font-weight: bold; text-transform: uppercase;" class="text-center">{{ $store->StoreName }} <i class="fa fa-lock" title="This store is password protected."></i></h4>
|
<div class="store-meta">
|
||||||
|
<h4 class="store-name">{{ $store->StoreName }} <i class="fa fa-lock store-lock" title="This store is password protected."></i></h4>
|
||||||
|
</div>
|
||||||
@else
|
@else
|
||||||
<a class="thumbnail" href="{{ url('teamstore') . '/' . $store->StoreUrl }}">
|
<a class="store-link" href="{{ url('teamstore') . '/' . $store->StoreUrl }}">
|
||||||
|
<div class="store-logo-wrap">
|
||||||
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
||||||
|
</div>
|
||||||
|
<div class="store-meta">
|
||||||
|
<h4 class="store-name">{{ $store->StoreName }}</h4>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<h4 style="border-top: 1px solid #dddddd; padding: 10px; font-size: 16px; font-weight: bold; text-transform: uppercase;" class="text-center">{{ $store->StoreName }}</h4>
|
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
@endforeach
|
@endforeach
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
|
<div class="row store-pagination">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
{!! $stores_array->render() !!}
|
{!! $stores_array->render() !!}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div><!-- /container -->
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="team-store-login" class="modal fade" role="dialog">
|
<div id="team-store-login" class="modal fade" role="dialog">
|
||||||
|
|||||||
Reference in New Issue
Block a user