feat: enhance team store page layout and styling for improved user experience
This commit is contained in:
Frank John Begornia
@@ -2,108 +2,237 @@
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
a.thumbnail>img {
|
||||
/* height: 250px; */
|
||||
body {
|
||||
background: #f4f6f8;
|
||||
}
|
||||
|
||||
.hide-bullets {
|
||||
list-style:none;
|
||||
margin-left: -40px;
|
||||
margin-top:20px;
|
||||
position: relative;
|
||||
|
||||
.store-page {
|
||||
padding-top: 14px;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
.thumbnail{
|
||||
border: none;
|
||||
display: unset;
|
||||
background-color: transparent;
|
||||
|
||||
.store-header {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.li-custom{
|
||||
padding:10px;
|
||||
|
||||
.store-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
.store-logo{
|
||||
/* height: 250px;
|
||||
width: 250px;
|
||||
|
||||
.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;
|
||||
padding-left: 0;
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
.store-grid > li {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.store-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
|
||||
overflow: hidden;
|
||||
object-fit: contain; */
|
||||
/* cursor: pointer; */
|
||||
height: 100%;
|
||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
a.thumbnail>img{
|
||||
height: 150px
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="container store-page">
|
||||
<div class="row store-header">
|
||||
<div class="col-lg-12">
|
||||
<h2 style="font-size: 20px; font-weight: bold; ">TEAM STORES</h2>
|
||||
<hr>
|
||||
<h2 class="store-title">Team Stores</h2>
|
||||
<p class="store-subtitle">Browse and open your team store.</p>
|
||||
</div>
|
||||
</div><!-- /row -->
|
||||
<div class="row">
|
||||
<!-- <div class="col-sm-12"> -->
|
||||
<!-- <div class="well"> -->
|
||||
<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">
|
||||
<input type="text" class="form-control" placeholder="Search Store" value="{{ $keyword }}" name="q">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<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 == "latest") selected @endif value="latest">Newest → Oldest</option>
|
||||
<option @if($filter == "oldest") selected @endif value="oldest">Oldest → Newest</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="clearfix"></div>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="row" id="slider-thumbs">
|
||||
<!-- Bottom switcher of slider -->
|
||||
<ul class="hide-bullets">
|
||||
@foreach ($stores_array as $store)
|
||||
<li class="li-custom col-lg-3 col-md-3 col-sm-4 col-xs-12">
|
||||
<div style="border: 1px solid #dddddd; padding: 5px;">
|
||||
@if($store->Password != null )
|
||||
<a class="thumbnail password-protected" href="#" data-store-id="{{ $store->Id }}" data-store-url="{{ $store->StoreUrl }}">
|
||||
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
||||
</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>
|
||||
@else
|
||||
<a class="thumbnail" href="{{ url('teamstore') . '/' . $store->StoreUrl }}">
|
||||
<img class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store->ImageFolder . '/' . $store->StoreLogo) }}">
|
||||
</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
|
||||
|
||||
<div class="store-toolbar">
|
||||
<form role="search" id="frm_search_store">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-7">
|
||||
<label>Search Store</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search store" value="{{ $keyword }}" name="q">
|
||||
<div class="input-group-btn">
|
||||
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
<div class="col-md-4 col-sm-5">
|
||||
<label>Sort by</label>
|
||||
<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-desc") selected @endif value="al-desc">Store Name Z → A</option>
|
||||
<option @if($filter == "latest") selected @endif value="latest">Newest → Oldest</option>
|
||||
<option @if($filter == "oldest") selected @endif value="oldest">Oldest → Newest</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div id="slider-thumbs">
|
||||
<ul class="store-grid row">
|
||||
@foreach ($stores_array as $store)
|
||||
<li class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
|
||||
<div class="store-card">
|
||||
@if($store->Password != null)
|
||||
<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) }}">
|
||||
</div>
|
||||
</a>
|
||||
<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
|
||||
<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) }}">
|
||||
</div>
|
||||
<div class="store-meta">
|
||||
<h4 class="store-name">{{ $store->StoreName }}</h4>
|
||||
</div>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="row store-pagination">
|
||||
<div class="col-sm-12">
|
||||
<div class="text-center">
|
||||
{!! $stores_array->render() !!}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /container -->
|
||||
</div>
|
||||
|
||||
|
||||
<div id="team-store-login" class="modal fade" role="dialog">
|
||||
|
||||
Reference in New Issue
Block a user