gtoriadotnet
/
GraphictoriaWeb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Catalog layout almost complete

This commit is contained in:
Graphictoria 2022-06-16 19:40:05 -04:00
parent 070c79c706
commit dc77fb8691
2 changed files with 78 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/resources/sass/Graphictoria.scss
View File

@ -1,6 +1,8 @@
// © XlXi 2021
// Graphictoria 5
@use "sass:math";
// Lumen 5.0.1
// Bootswatch
@ -34,6 +36,15 @@ img.twemoji {
// Shop
.graphictoria-list-dropdown::after {
@include caret-down();
content: "";
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
}
.graphictoria-item-card {
text-decoration: none!important;
font-weight: 400!important;
@ -41,21 +52,21 @@ img.twemoji {
padding: 0;
flex: 0 0 auto;
width: 33.33333333%;
width: math.div(100%, 3);
@media (min-width: 768px) {
flex: 0 0 auto;
width: 25%;
width: math.div(100%, 5);
}
@media (min-width: 992px) {
flex: 0 0 auto;
width: 16.66666667%;
width: math.div(100%, 7);
}
@media (min-width: 1400px) {
flex: 0 0 auto;
width: 11.1111111%;
width: math.div(100%, 8);
}
}
@ -64,7 +75,7 @@ img.twemoji {
background-size: cover;
}
.graphictoria-catalog-overlay {
.graphictoria-shop-overlay {
position: absolute;
width: 100%;
height: 100%;
@ -75,10 +86,26 @@ img.twemoji {
z-index: 10;
}
.graphictoria-catalog-overlay > .gtoria-loader {
.graphictoria-shop-overlay > .gtoria-loader {
margin: auto;
}
.graphictoria-shop-categories {
@media (min-width: 768px) {
html.gtoria-light & {
border-right: 2px solid #dee2e6!important;
}
html.gtoria-dark & {
border-right: 2px solid #333!important;
}
// py-1
padding-bottom: 0.25rem!important;
padding-top: 0.25rem!important;
}
}
// Maintenance
.gtoria-maintenance-background {

59
web/resources/views/web/shop/index.blade.php
View File

@ -3,7 +3,7 @@
@section('title', 'Shop')
@section('content')
<div class="container my-2">
<div class="container-lg my-2">
<div class="row">
<div class="col d-flex">
<h4 class="my-auto">Shop</h4>
@ -16,20 +16,51 @@
</div>
</div>
</div>
<div class="card p-3">
<div class="graphictoria-catalog-overlay">
<x-loader />
<div class="row">
<div class="col-md-2">
<div class="graphictoria-shop-categories border-2 border-end py-1">
<h5>Category</h5>
<ul class="list-unstyled ps-0">
<li class="mb-1">
<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-test-collapse" aria-expanded="true" href="#">Test</a>
<div class="collapse show" id="shop-test-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal small">
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<a class="text-decoration-none fw-normal align-items-center graphictoria-list-dropdown" data-bs-toggle="collapse" data-bs-target="#shop-test2-collapse" aria-expanded="false" href="#">Test 2</a>
<div class="collapse" id="shop-test2-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal small">
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
<li><a href="#" class="text-decoration-none ms-2">Test</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div>
<a class="graphictoria-item-card" href="#">
<span class="card m-2">
<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
<div class="p-2">
<p>Test hat</p>
<p class="text-muted">Free</p>
</div>
</span>
</a>
<div class="col-md-10">
<div class="card p-3">
<div class="graphictoria-shop-overlay">
<x-loader />
</div>
<div>
<a class="graphictoria-item-card" href="#">
<span class="card m-2">
<img class="img-fluid" src="{{ asset('images/testing/hat.png') }}" />
<div class="p-2">
<p>Test hat</p>
<p class="text-muted">Free</p>
</div>
</span>
</a>
</div>
</div>
</div>
</div>
</div>