base.twig.html:
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html dir="ltr" lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="keywords" content="Sewing Diva, online shopping, online store, shop, store, quilting, quilts, sewing, sew, fabrics, patterns, notions, gift shop, gifts, Derry NH">
<meta name="description" content="The Sewing Diva Quilt and Gift Shop offers customers many fabrics, patterns, and notions to buy online">
{% block noindex %}{% endblock %}
<title>{% block title %}The Sewing Diva Quilt and Gift Shop{% endblock %}</title>
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
{% endblock %}
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('build/favicons/apple-touch-icon.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('build/favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('build/favicons/favicon-16x16.png') }}">
<link rel="manifest" href="{{ asset('build/favicons/site.webmanifest') }}">
<link rel="mask-icon" href="{{ asset('build/favicons/safari-pinned-tab.svg') }}" color="#5bbad5">
</head>
<body>
<div id="site" class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light-blue border-bottom border-burnt-orange" style="border-bottom-width: 4px !important;">
<a class="navbar-brand" href="{{ path('_home') }}">
<img src="{{ asset('build/images/logo-sm.png') }}" class="d-lg-none">
<img src="{{ asset('build/images/logo.png') }}" class="d-none d-lg-block">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="form-inline my-2 pt-5 my-lg-0 mx-auto d-none d-lg-inline w-50" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
<div class="navbar-nav color-dark-blue ml-auto flex-lg-column align-items-lg-start justify-content-lg-center">
<div class="nav-item mb-lg-5">
<div class="d-none d-lg-block">
<a class="nav-link d-lg-inline" href="{{ path('fos_user_security_login') }}">Login</a> | <a class="nav-link d-lg-inline" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
</div>
<div class="nav-item mb-lg-3">
<div class="d-none d-lg-block social-media">
<a class="nav-link d-lg-inline-block" href=""><i class="far fa-envelope"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-facebook-square"></i></a>
<a class="nav-link d-lg-inline-block" href=""><i class="fab fa-twitter"></i></a>
</div>
</div>
<a class="nav-link d-lg-none" href="{{ path('fos_user_security_login') }}">Login</a>
<a class="nav-link d-lg-none" href="{{ path('fos_user_registration_register') }}">Sign Up</a>
</div>
<form class="form-inline my-2 my-lg-0 mx-auto d-inline d-lg-none" action="{{ path('_store_search_results') }}">
<div class="input-group">
<input name="search" class="form-control" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-burnt-orange my-2 my-sm-0" type="button"><i class="far fa-search"></i></button>
</div>
</div>
</form>
</div>
</nav> <!-- end nav -->
<div class="row justify-content-center">
{% block sidebar %}{% endblock %}
{% block content %}{% endblock %}
</div> <!-- end content -->
<div id="footer" class="row"> <!-- TODO: a real footer -->
<p id="copyright">© The Sewing Diva</p>
<p id="mp">Site created and maintained by Major Productions</p>
</div> <!-- end footer -->
</div> <!-- end site -->
{% block js %}
{{ encore_entry_script_tags('app') }}
<script src="https://js.stripe.com/v3/"></script> <!-- For fraud protection -->
{% endblock %}
<script type="text/javascript">
var success = $('#flash-success');
var error = $('#flash-error');
if (success.length > 0) {
success.fadeOut({ duration : 5000 });
}
if (error.length > 0) {
error.fadeOut({ duration : 5000 });
}
</script>
{% block jscode %}{% endblock %}
</body>
</html>
index.twig.html:
{# app/Resources/views/Store/index.html.twig #}
{% extends 'base.html.twig' %}
{% block title %}
{{ parent() }}
{% endblock %}
{% block sidebar %}
<div class="col-md-3 bg-beige container">
{{ render(controller('AppBundle:Store:categoryList')) }} <!-- figure out indents -->
</div>
{% endblock %}
{% block content %}
<div class="col-md-9 border container" id="content">
{% if newestProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Our latest item:</h2>
<div class="row">
<div class="jumbotron" style="background: transparent">
<!-- TODO: figure out structure -->
</div>
</div>
<h2>Some more recent items:</h2>
<div class="row">
{% for newestProduct in newestProducts[1:] %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ newestProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ newestProduct.name }}</h5>
{#{% if newestProduct.description != null %}<p class="card-text">{{ newestProduct.description }}</p>{% endif %}#}
<p class="card-text">${{ newestProduct.price }}/{% if newestProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': newestProduct.slug, 'prodId': newestProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if saleProducts == null %}
{% else %}
<h2>Some items currently on sale:</h2>
<div class="row"> <!-- card deck instead? -->
{% for saleProduct in saleProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ saleProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ saleProduct.name }}</h5>
{% if saleProduct.description != null %}<p class="card-text">{{ saleProduct.description }}</p>{% endif %}
<p class="card-text">${{ saleProduct.price }}/{% if saleProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': saleProduct.slug, 'prodId': saleProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if randomProducts == null %}
There's nothing in the store to buy yet! Please check back later.
{% else %}
<h2>Some other things you may like:</h2>
<div class="row">
{% for randomProduct in randomProducts %}
<div class="col-md-3">
<div class="card">
<img class="card-img-top w-100" src="{{ asset('product_images/' ~ randomProduct.filename) }}">
<div class="card-body">
<h5 class="card-title">{{ randomProduct.name }}</h5>
{% if randomProduct.description != null %}<p class="card-text">{{ randomProduct.description }}</p>{% endif %}
<p class="card-text">${{ randomProduct.price }}/{% if randomProduct.isFabric == true %}yd{% else %}ea{% endif %}</p>
<a class="btn btn-burnt-orange" href="{{ path('_store_product_details', {'slug': randomProduct.slug, 'prodId': randomProduct.id}) }}">Check it out!</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
{% endblock %}
{# do something with htmlTree - remember: this DOES NOT contain blocks, or inherit from base.html.twig #}
<h2>Shop By Category:</h2>
<p><a href="">Newest Products</a></p>
<p><a href="">Products on Sale</a></p>
{{ htmlTree|raw }}
所有这些共同创造了以下内容:
我最大的问题是侧边栏/类别列表超出了导航。我猜
navbar
具有一些x轴边距/填充。因此,我希望将两列(侧边栏和内容)限制在
导航栏
. 理想情况下
导航栏
在左/右侧没有任何空白。
我认为我可以通过组合处理列、边距和填充来处理其余的内容,但保持边缘上的所有内容一致是一个优先事项。
