feat: enhance team store page layout and styling for improved user experience
This commit is contained in:
Frank John Begornia
@@ -7,6 +7,45 @@
|
||||
@endif
|
||||
<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{
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
@@ -30,7 +69,8 @@
|
||||
box-shadow: 0px 0px 10px #4bc6ff;
|
||||
} */
|
||||
.line{
|
||||
margin-bottom: 5px;
|
||||
margin: 14px 0;
|
||||
border-color: #e5e7eb;
|
||||
}
|
||||
@media screen and (max-width: 770px) {
|
||||
.right{
|
||||
@@ -117,18 +157,45 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.carousel-control.left {
|
||||
margin-left: -35px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.carousel-control.right {
|
||||
margin-right: -35px;
|
||||
margin-top: 7px;
|
||||
#myCarousel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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,
|
||||
@@ -139,11 +206,127 @@
|
||||
|
||||
.hide-bullets {
|
||||
list-style:none;
|
||||
margin-left: -40px;
|
||||
margin-top:20px;
|
||||
margin-left: 0;
|
||||
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{
|
||||
margin-top: 40px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
.roster-input{
|
||||
border-radius: 0px;
|
||||
@@ -208,12 +391,49 @@
|
||||
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>
|
||||
|
||||
<div class="container">
|
||||
<div class="container product-page">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<nav aria-label="breadcrumb">
|
||||
<nav aria-label="breadcrumb" class="product-breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<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>
|
||||
@@ -224,68 +444,62 @@
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-5 col-sm-5">
|
||||
<div class="row">
|
||||
<div class="col-sm-12" id="carousel-bounding-box">
|
||||
<div class="carousel slide" id="myCarousel" data-interval="false">
|
||||
<!-- Carousel items -->
|
||||
<div class="carousel-inner">
|
||||
@define $i = 0
|
||||
@foreach($thumbnails_array as $thumbnail)
|
||||
@if($thumbnail->ImageClass == 'active')
|
||||
<div class="active item text-center" data-slide-number="{{ $i }}">
|
||||
<span class="zoom img-zoom">
|
||||
<img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||
</span>
|
||||
</div>
|
||||
@else
|
||||
<div class="item text-center" data-slide-number="{{ $i }}">
|
||||
<span class="zoom img-zoom">
|
||||
<img style="height:400px;" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
@define $i++
|
||||
@endforeach
|
||||
<div class="main-gallery-card">
|
||||
<div id="carousel-bounding-box">
|
||||
<div class="main-image-stage">
|
||||
<div class="carousel slide" id="myCarousel" data-interval="false">
|
||||
<div class="carousel-inner">
|
||||
@define $i = 0
|
||||
@foreach($thumbnails_array as $thumbnail)
|
||||
@if($thumbnail->ImageClass == 'active')
|
||||
<div class="active item text-center" data-slide-number="{{ $i }}">
|
||||
<span class="zoom img-zoom">
|
||||
<img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||
</span>
|
||||
</div>
|
||||
@else
|
||||
<div class="item text-center" data-slide-number="{{ $i }}">
|
||||
<span class="zoom img-zoom">
|
||||
<img class="main-product-image" src="{{ minio_url('images/' . $thumbnail->Image) }}">
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
@define $i++
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Carousel nav -->
|
||||
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
<hr class="line">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<ul class="hide-bullets">
|
||||
@define $j = 0
|
||||
@foreach($thumbnails_array as $thumbnail)
|
||||
<li class="col-sm-3 col-xs-3">
|
||||
<a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" id="carousel-selector-{{ $j }}">
|
||||
<img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ minio_url('images/' . $thumbnail->Image) }}"/>
|
||||
</a>
|
||||
</li>
|
||||
@define $j++
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
<hr class="line">
|
||||
|
||||
<ul class="hide-bullets row">
|
||||
@define $j = 0
|
||||
@foreach($thumbnails_array as $thumbnail)
|
||||
<li class="col-sm-3 col-xs-3">
|
||||
<a class="thumbnail a_thumbnail {{ $thumbnail->ImageClass }}" id="carousel-selector-{{ $j }}">
|
||||
<img class="img img-responsive product-center image-thumbnails" style="height: 59.45px;" src="{{ minio_url('images/' . $thumbnail->Image) }}"/>
|
||||
</a>
|
||||
</li>
|
||||
@define $j++
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-7 col-sm-7">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h1>{{ $product_array[0]->ProductName }}</h1> <p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="product-info-card">
|
||||
<h1 class="product-title">{{ $product_array[0]->ProductName }}</h1>
|
||||
<p class="price">{{ $product_array[0]->ProductPrice }} <small> {{ $store_array[0]->StoreCurrency }} </small></p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<form id="frm-order-list">
|
||||
@@ -300,24 +514,28 @@
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer-top"></div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<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>
|
||||
</ul>
|
||||
<!-- Tab panes -->
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="productDescription">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>{{ $product_array[0]->ProductDescription }}</p>
|
||||
</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="row">
|
||||
<div class="col-md-12">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="active"><a href="#productDescription" aria-controls="productDescription" role="tab" data-toggle="tab">More Details</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane active" id="productDescription">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<p>{{ $product_array[0]->ProductDescription }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user