Skip to content

Commit

Permalink
Merge pull request ezsystems#148 from ciastektk/COM-20070-top-banner-…
Browse files Browse the repository at this point in the history
…and-latest-bundles

COM-20070: Bundle Catalog: Top banner and latest bundles
  • Loading branch information
damianz5 committed Dec 3, 2018
2 parents 2299d5f + 7aa8d37 commit a95fa38
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 217 deletions.
@@ -1,8 +1,8 @@
{{ form_start(searchBundleForm) }}
<div class="form-group">
{{ form_widget(searchBundleForm.search, {'id': 'bundles-list-search-query'} )}}
{{ form_widget(searchBundleForm.search, {'id': 'bundle-list-search-query'} )}}
<div class="input-group-addon">
<button type="submit" class="btn bundles-list-search-button">
<button type="submit" class="btn bundle-list__search-button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
Expand Down
28 changes: 14 additions & 14 deletions app/Resources/views/themes/ezplatform/full/bundle_list.html.twig
@@ -1,19 +1,19 @@
{% extends '@ezdesign/pagelayout.html.twig' %}

{% block content %}
<section class="bundles-list">
<div class="bundles-list-header">
<div class="container">
<div class="row">
<div class="col-12">
<div class="description">{{ ez_render_field(content, 'description') }}</div>
</div>
</div>
<section class="bundle-list">
<div class="bundle-list__header">
{{ ez_render_field(content, 'description') }}
<div class="row bundle-list__header-bar">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
<div class="container bundles-list-container">
<div class="container bundle-list__container">
<div class="row">
<div class="col-md-2 bundles-filters">
<div class="col-md-2 bundle-list__filters">
<h3>Categories</h3>
<ul class="list-unstyled">
{% set selectedCategory = 'All' %}
Expand All @@ -34,7 +34,7 @@
<div class="col-md-10">
<div class="row">
<div class="col-md-12">
<div class="bundles-list-search">
<div id="find-bundle" class="bundle-list__search">
<div class="form-row align-items-center">
{{ render_esi(controller('app.controller.bundle:renderSearchBundleForm', {"searchText": searchText})) }}
</div>
Expand All @@ -43,17 +43,17 @@
</div>
<div class="row">
<div class="col-md-12">
<div class="bundles-list-content">
<div class="bundle-list__content">
{% if items is defined and items|length > 0 %}
<div class="row align-items-center">
<div class="col-xs-12 col-md-9 bundles-list-keyword">
<div class="col-xs-12 col-md-9 bundle-list__keyword">
{% if search is defined and search is not empty %}
<h2>Search / Keyword: {{ search }}</h2>
{% else %}
<h2>{{ selectedCategory }} Bundles</h2>
{% endif %}
</div>
<div class="col-xs-12 col-md-3 sort-container">
<div class="col-xs-12 col-md-3 bundle-list__sort-container">
{% set sortingOrder = order is defined ? order : 'default' %}
{{ render_esi(controller('app.controller.bundle:renderSortOrderBundleForm', {"order": sortingOrder})) }}
</div>
Expand Down
5 changes: 5 additions & 0 deletions app/config/views.yml
Expand Up @@ -113,3 +113,8 @@ ezpublish:
template: "@ezdesign/embed/image.html.twig"
match:
Identifier\ContentType: image
top_banner:
template: "@ezdesign/row/top_banner.html.twig"
match:
Identifier\ContentType: top_banner

186 changes: 186 additions & 0 deletions web/assets/scss/bundle_list.scss
@@ -0,0 +1,186 @@
.bundle-list {
overflow: hidden;
background: #f7f7f7;

&__header {
background: $white;
padding-top: 70px;

&-bar {
height: 5px;

.col-md-3 {
&:nth-child(1) {
background-color: #fcaf17;
}
&:nth-child(2) {
background-color: #f79421;
}

&:nth-child(3) {
background-color: #f37022;
}

&:nth-child(4) {
background-color: #f04e23;
}
}
}
}

&__container {
padding: 50px 15px 40px;

h2 {
font-size: 21px;
}

.sort-container {
padding: 10px 15px 0 15px;
}
}

&__filters {
h3 {
color: $orange;
font-size: 19px;
font-weight: bold;
margin-bottom: 20px;
}

a {
color: $grey;
line-height: 40px;
text-decoration: none;

&:hover {
font-weight: bold;
}
}

.active a {
font-weight: bold;
}
}

&__search {
padding-bottom: 40px;

form {
width: 100%;
}

.form-row {
margin-right: 20px;
}

#bundle-list-search-query {
height: 51px;
font-size: 21px;
font-weight: 300;
color: #888;
width: 90%;
float: left;
padding: 0 20px;
border: 1px solid #d3d3d3;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.input-group-addon {
padding: 0;
background: transparent;
border-radius: 0;
border: none;
float: left;
width: 10%;
}

&-button {
background: #f15a22;
color: #fff;
padding: 9px 45px 9px 45px;
border-radius: 0 5px 5px 0;

&:hover {
background: #f44e10;
}
}
}

&__keyword, &__filters a {
&::first-letter {
text-transform: uppercase;
}
}
}

.pagerfanta {
text-align: center;

nav {
border: 2px solid #cbcbcb;
padding: 10px 15px;
border-radius: 20px 20px;
line-height: 24px;

overflow: hidden;
}

a,
span {
font-weight: 700;
width: 25px;
height: 25px;
display: block;
float: left;
text-align: center;
}

a {
color: #cbcbcb;
font-weight: 700;

&[rel="next"],
&[rel="prev"] {
display: block;
float: left;
color: #f44e10;
}
}

.current {
color: #ffffff;
border-radius: 50%;
background-color: #f44e10;
}

.disabled {
color: #cbcbcb;
}
}

@media (max-width: 992px) {
.bundle-list {
&__search {

.form-row {
margin-right: 0px;
}

#bundle-list-search-query {
width: 79%;
}

.input-group-addon {
width: 21%;
box-sizing: border-box;
}

&-button {
padding: 9px 0;
width: 100%;
}
}
}
}

0 comments on commit a95fa38

Please sign in to comment.