Add js slider

.gitignore

@@ -16,6 +16,7 @@
 /web/bundles/
 .idea/
 /node_modules/
+/bower_components/
 /app/Resources/libs/semantic/dist
 /web/resources/
 /var/media/

app/Resources/assets/images/.directory

@@ -0,0 +1,4 @@
+[Dolphin]
+PreviewsShown=true
+Timestamp=2017,5,9,23,7,36
+Version=3

app/Resources/assets/js/slider.js

@@ -0,0 +1,24 @@
+$(document).ready(function() {
+    $('.number-range').each(function () {
+        var id = $(this).attr('id');
+        var $slider = $(this).children('.slider');
+        var $from = $(this).children('input[id*="from"]');
+        var $to = $(this).children('input[id*="to"]');
+
+        $slider.slider({
+            range: true,
+            min: parseInt($slider.attr('min')),
+            max: parseInt($slider.attr('max')),
+            step: $slider.attr('step'),
+            values: [$from.val(), $to.val()],
+            slide: function (event, ui) {
+                $from.val(ui.values[0]);
+                $to.val(ui.values[1]);
+
+                $("#" + id + "_value").text(ui.values[0] + " - " + ui.values[1]);
+            }
+        }).slider("pips", {});
+
+        $("#" + id + "_value").text($slider.slider("values", 0) + ' - ' + $slider.slider("values", 1))
+    });
+});

app/Resources/assets/js/style.js

@@ -17,6 +17,9 @@ $(document).ready(function(){
 
     $('.tabular.menu .item').tab();
 
+    $('.tabular.submenu .item').tab({
+    });
+
     $('.message .close')
         .on('click', function() {
             $(this)

app/Resources/assets/style/colors.scss

@@ -1,4 +1,4 @@
-$alpha: 0.7;
+$alpha: 0.2;
 
 $colors: (
         -1: #0033B2,
@@ -139,7 +139,12 @@ $colors: (
 );
 
 @each $number, $color in $colors {
-  .color-#{$number} {
+  .border.color-#{$number} {
     border-bottom: 2px solid $color;
   }
+
+  .text.color-#{$number} {
+      color: $color;
+      //background: color-contrast($color,#000,#FFF);
+  }
 }

app/Resources/assets/style/main.scss

@@ -1,7 +1,8 @@
 .default-theme {
 
   .ui.main {
-    padding-top: 40px;
+    padding-top: 10px;
+    margin-top: 40px;
     min-height: calc(100% - 67px);
   }
 
@@ -20,6 +21,10 @@
     }
   }
 
+  .ui.card {
+    border-radius: 0;
+  }
+
   .ui.fixed + .ui.grid {
     border-radius: 0;
     border: 0;
@@ -64,6 +69,16 @@
     background-size: cover;
   }
 
+  .number-range {
+    margin: 1em 0.6em 3em;
+  }
+
+  .pull-left {
+    float: left;
+  }
+  .pull-right {
+    float: right;
+  }
 }
 
 @each $i in 5 10 15 20 25 30 40 50 60 {

app/Resources/assets/style/mixins.scss

@@ -0,0 +1,13 @@
+// Calculeate brightness of a given color.
+@function brightness($color) {
+  @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+}
+
+// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
+@function color-contrast($color, $dark, $light) {
+    $color-brightness: brightness($color);
+    $light-text-brightness: brightness($light);
+    $dark-text-brightness: brightness($dark);
+
+    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+}

app/Resources/assets/style/part.scss

@@ -1,14 +1,14 @@
-.model-meta {
+.part {
-  background: #E0E1E2;
+  .content {
-  text-align: center;
+    padding: 7px !important;
 
-  .quantity {
+    .header {
-    font-weight: 700;
+      font-size: 14px !important;
-    color: #444444;
+      margin: 0;
-  }
+    }
-  .number {
+    .description {
-    margin: 0.2em;
+      font-size: 12px;
-    display: inline-block;
+      margin: 0 !important;
-    color: #000000;
+    }
   }
 }

app/Resources/assets/style/set.scss

@@ -0,0 +1,7 @@
+.set {
+  padding: 10px !important;
+  .content .header {
+    font-size: 14px !important;
+    margin-bottom: 3px;
+  }
+}

app/Resources/assets/style/style.scss

@@ -1,8 +1,10 @@
 @import "variables";
+@import "mixins";
 
 @import "main";
 @import "modelviewer";
 
-@import "model";
+@import "part";
+@import "set";
 @import "colors";
 @import "reviews";

app/Resources/views/form/search.html.twig

@@ -0,0 +1,9 @@
+{% block number_range_widget %}
+    <div id="{{ form.vars.id }}" class="number-range">
+        <p id="{{ form.vars.id }}_value"></p>
+        <div id="{{ form.vars.id }}_slider" class="slider" min="{{ form.vars.attr.min }}" max="{{ form.vars.attr.max }}"></div>
+
+        {{ form_widget(form.from) }}
+        {{ form_widget(form.to) }}
+    </div>
+{% endblock %}

app/Resources/views/html.html.twig

@@ -12,7 +12,6 @@
 {% block body %}
     
 {% endblock %}
-
 {% block javascripts %}
 
     <script type="text/javascript" src="{{ asset('resources/js/three.js') }}"></script>

app/Resources/views/macros/blocks.html.twig

@@ -1,65 +1,84 @@
 {% macro partImage(number, filter, color = -1) %}
-    {% if filter == 'part_large' %}
+    <div class="ui image load">
-        {% set placeholder = asset("resources/images/unknown_large.png") %}
+        {% if filter == 'part_large' %}
-    {% else %}
+            {% set placeholder = asset("resources/images/unknown_large.png") %}
-        {% set placeholder = asset("resources/images/unknown.png") %}
+        {% else %}
-    {% endif %}
+            {% set placeholder = asset("resources/images/oval.svg") %}
-
+        {% endif %}
-    <div class="image load">
+        {#<img src="{{ placeholder }}" data-src="{{ asset(color~'/'~number~'.png') | imagine_filter(filter)}}">#}
         <img src="{{ placeholder }}" data-src="{{ asset(color~'/'~number~'.png') | imagine_filter(filter)}}">
     </div>
 {% endmacro %}
 
 {% macro setImage(number, filter) %}
-    <div class="image load">
+    <div class="ui image load">
         {% if filter == 'set_large' %}
             {% set placeholder = asset("resources/images/unknown_large.png") %}
         {% else %}
-            {% set placeholder = asset("resources/images/unknown.png") %}
+            {% set placeholder = asset("resources/images/oval.svg") %}
         {% endif %}
-
+        <img src="{{ placeholder }}" data-src="{{ asset(number~'.jpg')|imagine_filter(filter) }}">
-        <img src="{{ placeholder }}" data-src="{{ asset(number|lower~'.jpg')|imagine_filter(filter) }}">
     </div>
 {% endmacro %}
 
 {% macro model(model, quantity = null, color = -1) %}
-    <a class="column part" href="{{ url('model_detail', {'number': model.number})}}">
+    <a class="column part" href="{{ url('model_detail', {'id': model.id})}}">
-        <div class="ui bordered fluid image">
+        <div class="ui card">
             {% import _self as blocks %}
-            {{ blocks.partImage(model.number, 'part_min', color) }}
+            {{ blocks.partImage(model.id, 'part_min', color) }}
-            <div class="part-meta">
+            <div class="content">
-                <span class="quantity"></span> {% if quantity %}{{ quantity }}x{% endif %}<span class="number">{{ model.number }}</span>
+                <h3 class="header">{{ model.id }}</h3>
-                {#<span class="name">{{ model.name }}</span>#}
+                <div class="description">
+                    {% if quantity %}<div class="right floated">{{ quantity }}x</div>{% endif %}
+                </div>
             </div>
         </div>
     </a>
 {% endmacro %}
 
 {% macro part(part, quantity = null, color = -1) %}
-    <a class="column part" href="{{ url('reb_part_detail', {'number': part.number})}}">
+    <a class="column part" href="{{ url('reb_part_detail', {'id': part.id})}}">
-        <div class="ui bordered fluid image">
+        <div class="ui card">
             {% import _self as blocks %}
-            {{ blocks.partImage(part.number,'part_min', color) }}
+            {{ blocks.partImage(part.id,'part_min', color) }}
-            <div class="part-meta">
+            <div class="content">
-                <span class="quantity"></span> {% if quantity %}{{ quantity }}x{% endif %}<span class="number">{{ part.number }}</span>
+                <h3 class="header">{{ part.id }}</h3>
+                <div class="description">
+                    {% if quantity %}<div class="right floated">{{ quantity }}x</div>{% endif %}
+                </div>
             </div>
         </div>
     </a>
 {% endmacro %}
 
-{% macro set(set) %}
+{% macro set(set, quantity = null) %}
-    <div class="column">
+    <a class="set column" href="{{ url('set_detail', {'id': set.id}) }}">
-        <a href="{{ url('set_detail', {'number': set.number}) }}">
+        <div class="ui card">
-            <div class="ui bordered fluid image">
+            {% import _self as blocks %}
-                {% import _self as blocks %}
+            {{ blocks.setImage(set.id,'set_min') }}
-                {{ blocks.setImage(set.number,'set_min') }}
+            <div class="content">
+                <h3 class="header">
+                    {% if quantity %}<div class="right floated">{{ quantity }}x</div>{% endif %}
+                    {% if set.name|length > 17 %}
+                        {{ set.name | slice(0,17) }} &hellip;
+                    {% else %}
+                        {{ set.name }}
+                    {% endif %}
+                </h3>
+                <div class="meta">
+                    <span class="left floated">{{ set.id }}</span>
+                    <br>
+                    <span class="left floated"><small>{{ set.theme.fullName | slice(0,27) }} &hellip;</small></span>
+                </div>
+                <div class="description">
+                    <small>
+                        <span class="right floated">{{ set.year }}</span>
+                        <span>{{ set.partCount }} parts</span>
+                    </small>
+                </div>
             </div>
-            <div class="set-meta">
+        </div>
-                <p>{{ set.number }}</p>
+    </a>
-                <p>{{ set.name }}</p>
-            </div>
-        </a>
-    </div>
 {% endmacro %}
 
 {% macro empty(message) %}

app/Resources/views/model/detail.html.twig

@@ -2,24 +2,27 @@
 
 {% import 'macros/blocks.html.twig' as blocks %}
 
-{% block title %}#{{ model.number }} - {{ model.name }}{% endblock %}
+{% block title %}{{ model.id }} - {{ model.name }}{% endblock %}
 
-{% block header %}#{{ model.number }} - {{ model.name }}{% endblock %}
+{% block header %}{{ model.name }}{% endblock %}
 
 {% block content %}
-
     <div class="ui grid">
         <div class="column ten wide">
             <div id="model-viewer" class="model-container">
-                {{ blocks.partImage(model.number,'part_large') }}
+                {{ blocks.partImage(model.id,'part_large') }}
             </div>
         </div>
         <div class="column six wide">
             <div class="item-info ui">
                 <table class="ui very basic table">
+                    <tr>
+                        <td>{{ 'model.number' | trans }}</td>
+                        <td><h2>{{ model.id }}</h2></td>
+                    </tr>
                     <tr>
                         <td>{{ 'model.category' | trans }}</td>
-                        <td><a href="{{ path('model_index',{}) }}">{{ model.category ? model.category.name }}</a></td>
+                        <td><a href="{{ path('model_index',{'m[category]':model.category.id}) }}">{{ model.category ? model.category.name }}</a></td>
                     </tr>
                     <tr>
                         <td>{{ 'model.author' | trans }}</td><td>{{ model.author.name }}</td>
@@ -46,14 +49,14 @@
                             <td>{{ 'model.aliases' | trans }}</td>
                             <td>
                                 {% for alias in model.aliases | slice(0,10)%}
-                                    <span>{{ alias.number }}</span>{%  if not loop.last %},{% endif %}
+                                    <span>{{ alias.id }}</span>{%  if not loop.last %},{% endif %}
                                 {% endfor %}
                             </td>
                         </tr>
                     {% endif %}
                 </table>
 
-                <a class="ui download primary button" href="{{ path('model_zip', {number: model.number}) }}">{{ 'model.download'|trans }}</a>
+                <a class="ui download fluid primary button" href="{{ path('model_zip', {id: model.id}) }}">{{ 'model.download'|trans }}</a>
 
             </div>
         </div>
@@ -64,7 +67,7 @@
             <a class="item active" data-tab="subparts"><i class="cubes icon"></i> Subparts ({{ model.subparts|length }})</a>
             <a class="item" data-tab="related"><i class="cubes icon"></i> Related ({{ related|length }})</a>
             <a class="item" data-tab="parents"><i class="cubes icon"></i> Parents ({{ model.parents|length }})</a>
-            <a class="item" data-tab="sets"><i class="cubes icon"></i> Sets ({{ sets|length }})</a>
+            {#<a class="item" data-tab="sets"><i class="cubes icon"></i> Sets ({{ sets|length }})</a>#}
         </div>
         <div class="ui vertical segment">
 
@@ -96,20 +99,15 @@
                 </div>
             </div>
 
-            <div class="ui tab" data-tab="sets">
+            {#<div class="ui tab" data-tab="sets">#}
-                <div class="ui six column doubling grid">
+                {#<div class="ui six column doubling grid">#}
-                    <div class="row">
+                    {#<div class="row">#}
                         {#{% for set in sets %}#}
-                            {#<div class="column">#}
+                            {#{{ blocks.set(set) }}#}
-                                {#<a href="{{ url('set_detail', {number:set.number}) }}">#}
-                                    {#{{ blocks.setImage(set.number,'set_min') }}#}
-                                    {#<h5>{{ set.number }}</h5>#}
-                                {#</a>#}
-                            {#</div>#}
                         {#{% endfor %}#}
-                    </div>
+                    {#</div>#}
-                </div>
+                {#</div>#}
-            </div>
+            {#</div>#}
         </div>
     </div>
 {% endblock %}

app/Resources/views/model/index.html.twig

@@ -10,24 +10,23 @@
     <div class="ui container divided stackable grid">
         <div class="row">
             <div class="column four wide">
-                <form method="get" action="" class="ui form">
+                <h3>{{ 'model.filter.title' | trans }}</h3>
+                {#<form method="get" action="" class="ui form">#}
                     {{ form_start(form) }}
 
-                    {{ form_row(form.search) }}
+                    {{ form_rest(form) }}
-                    <div class="field fluid search selection">
-                        {{ form_label(form.category.id) }}
-                        {{ form_widget(form.category.id)}}
-                    </div>
                     <div class="field">
-                        <input class="ui submit button" type="submit" value="filter"/>
+                        <input class="ui fluid submit button" type="submit" value="Filter"/>
                     </div>
                     {{ form_end(form) }}
-                </form>
+                {#</form>#}
             </div>
             <div class="column twelve wide">
                 <div class="ui six column doubling grid">
                     {% for model in models %}
                         {{ blocks.model(model) }}
+                    {% else %}
+                        {{ blocks.empty('empty.models') }}
                     {% endfor %}
                 </div>
 

app/Resources/views/pagination/knp_pagination.html.twig

@@ -1,5 +1,5 @@
 {% if pageCount > 1 %}
-    <div class="ui pagination menu spacing 20">
+    <div class="ui pagination menu">
         {% if first is defined and current != first %}
             <a class="icon item" href="{{ path(route, query|merge({(pageParameterName): first})) }}">
                 <i class="angle double left icon"></i>

app/Resources/views/rebrickable/part/detail.html.twig

@@ -2,20 +2,20 @@
 
 {% import 'macros/blocks.html.twig' as blocks %}
 
-{% block header %}#{{ part.number }} - {{ part.name }}{% endblock %}
+{% block header %}#{{ part.id }} - {{ part.name }}{% endblock %}
 
 {% block content %}
     <div class="ui grid">
         <div class="column ten wide">
             <div id="model-viewer" class="model-container">
-                {{ blocks.partImage(part.number,'part_large') }}
+                {{ blocks.partImage(part.id,'part_large') }}
             </div>
         </div>
         <div class="column six wide">
             <div class="item-info ui">
                 <table class="ui very basic table">
                     <tr>
-                        <td>{{ 'part.number' | trans }}</td><td>{{ part.number}}</td>
+                        <td>{{ 'part.id' | trans }}</td><td>{{ part.id}}</td>
                     </tr>
                     <tr>
                         <td>{{ 'part.name' | trans }}</td><td>{{ part.name}}</td>
@@ -27,7 +27,7 @@
                         <td>{{ 'part.model' | trans }}</td>
                         <td>
                             {% if part.model %}
-                                <a href="{{ url('model_detail', {'number': part.model.number})}}">{{ part.model.number }}</a>
+                                <a href="{{ url('model_detail', {'id': part.model.id})}}">{{ part.model.id }}</a>
                             {% endif %}
                         </td>
                     </tr>
@@ -36,7 +36,7 @@
                             <td>{{ 'part.alternates' | trans }}</td>
                             <td>
                                 {% for alternate in apiPart.alternates %}
-                                    <a href="{{ url('reb_part_detail', {'number': alternate})}}">{{ alternate }}</a>
+                                    <a href="{{ url('reb_part_detail', {'id': alternate})}}">{{ alternate }}</a>
                                 {% endfor %}
                             </td>
                         </tr>
@@ -44,7 +44,7 @@
                             <td>{{ 'part.molds' | trans }}</td>
                             <td>
                                 {% for mold in apiPart.molds %}
-                                    <a href="{{ url('reb_part_detail', {'number': mold})}}">{{ mold }}</a>
+                                    <a href="{{ url('reb_part_detail', {'id': mold})}}">{{ mold }}</a>
                                 {% endfor %}
                             </td>
                         </tr>
@@ -53,7 +53,7 @@
                             <td><a href="{{ apiPart.url }}">Rebrickable</a></td>
                         </tr>
                         <tr>
-                            {{ dump(apiPart.externalIds, apiPart) }}
+                            {#{{ dump(apiPart.externalIds, apiPart) }}#}
                         </tr>
                     {% endif %}
                 </table>
@@ -69,9 +69,9 @@
         {% for set in sets %}
             <div class="column">
                 <div class="ui fluid bordered image">
-                    <a href="{{ url('set_detail', {number:set.number}) }}">
+                    <a href="{{ url('set_detail', {id:set.id}) }}">
-                        {{ blocks.setImage(set.number,'set_min') }}
+                        {{ blocks.setImage(set.id,'set_min') }}
-                        <div class="ui bottom attached label">{{ set.number }}<br></div>
+                        <div class="ui bottom attached label">{{ set.id }}<br></div>
                     </a>
                 </div>
             </div>

app/Resources/views/search/index.html.twig

@@ -1,18 +1,28 @@
 {% extends 'base.html.twig' %}
 
+{% import 'macros/blocks.html.twig' as blocks %}
+
 {% block title %}{% endblock %}
 
 {% block header %}{% endblock %}
 
 {% block content %}
-    <div class="ui seven column grid">
+    <h4 class="ui horizontal divider header">Sets</h4>
+
+    <div class="ui eight column doubling grid">
         <div class="row">
             {% for set in sets %}
-                <div class="column">
+                {{ blocks.set(set) }}
-                    <a href="{{ url('set_detail', {'number': set.number}) }}">
+            {% endfor %}
-                        <p>{{ set.number }} - {{ set.name }}</p>
+        </div>
-                    </a>
+    </div>
-                </div>
+
+    <h4 class="ui horizontal divider header">Models</h4>
+
+    <div class="ui eight column doubling grid">
+        <div class="row">
+            {% for model in models %}
+                {{ blocks.model(model) }}
             {% endfor %}
         </div>
     </div>

app/Resources/views/set/detail.html.twig

@@ -2,33 +2,33 @@
 
 {% import 'macros/blocks.html.twig' as blocks %}
 
-{% block title %}{{ set.number }} {{ set.name }}{% endblock %}
+{% block title %}{{ set.id }} {{ set.name }}{% endblock %}
 
-{% block header %}{{ set.number }}  {{ set.name | escape('html') }}{% endblock %}
+{% block header %}{{ set.name | escape('html') }}{% endblock %}
 
 {% block content %}
 
     <div class="ui stackable grid">
         <div class="column nine wide">
             <div class="ui bordered fluid image">
-                {{ blocks.setImage(set.number,'set_large') }}
+                {{ blocks.setImage(set.id,'set_large') }}
             </div>
         </div>
         <div class="column seven wide">
             <div class="item-info ui">
                 <table class="ui very basic table">
                     <tr>
-                        <td>{{ 'set.number' | trans }}</td><td>{{ set.number }}</td>
+                        <td>{{ 'set.id' | trans }}</td><td><h2>{{ set.id }}</h2></td>
                     </tr>
                     <tr>
                         <td>{{ 'set.name' | trans }}</td><td>{{ set.name }}</td>
                     </tr>
                     <tr>
-                        <td>{{ 'set.year' | trans }}</td><td>{{ set.year }}</td>
+                        <td>{{ 'set.year' | trans }}</td><td><a href="{{ path('set_index',{'s[year][from]':set.year, 's[year][to]':set.year}) }}">{{ set.year }}</a></td>
                     </tr>
                     <tr>
                         <td>{{ 'set.theme' | trans }}</td>
-                        <td><a href="#">{{ set.theme.parent ? set.theme.parent.name }}</a> &gt; <a href="#">{{ set.theme ? set.theme.name }}</a> </td>
+                        <td><a href="{{ path('set_index',{'s[theme]' : set.theme.id }) }}">{{ set.theme ? set.theme.name }}</a></td>
                     </tr>
                     <tr>
                         <td>{{ 'set.parts' | trans }}</td><td>
@@ -50,7 +50,7 @@
                     <tr>
                         <td></td>
                         <td>
-                            <a class="rebrickable link" href="http://rebrickable.com/sets/{{ set ? set.number }}">Rebrickable</a>
+                            <a class="rebrickable link" href="http://rebrickable.com/sets/{{ set ? set.id }}">Rebrickable</a>
                             {% if brset %}
                                 <a class="brickset link" href="{{ brset.bricksetURL }}">Brickset</a>
                             {% endif %}
@@ -59,46 +59,47 @@
                 </table>
 
 
-                <div class="ui primary open-modal button">{{ 'set.download' | trans }}</div>
+                <div class="ui primary fluid open-modal button">{{ 'set.download.button' | trans }}</div>
 
                 {% embed 'embeds/modal.html.twig' %}
                     {% block title %}
-                        {{ 'set.download.title' | trans({'%set%': set.number~' '~set.name}) }}
+                        {{ 'set.download.title' | trans({'%set%': set.id~' '~set.name}) }}
                     {% endblock %}
                     {% block content %}
-                        {#<div class="ui icon message">#}
+                        {% if missingCount > 0 %}
-                            {#<i class="warning icon"></i>#}
+                            <div class="ui warning icon message">
-                            {#<div class="content">#}
+                                <i class="warning icon"></i>
-                                {#<div class="header">#}
+                                <div class="content">
-                                    {#{{ 'set.download.warning.title' | trans }}#}
+                                    <div class="header">
-                                {#</div>#}
+                                        {{ 'set.download.warning.title' | trans }}
-                                {#<p> {{ 'set.download.warning.text' | trans }}</p>#}
+                                    </div>
-                            {#</div>#}
+                                    <p> {{ 'set.download.warning.text' | trans({'%percent%':((1 - missingCount/partCount)*100)|number_format(2, '.', ','), '%total%':partCount, '%missing%': missingCount, '%unique%': uniqueMissing|length}) | raw | nl2br }}</p>
-                        {#</div>#}
+                                </div>
+                            </div>
+                        {% endif %}
                     {% endblock %}
                     {% block actions %}
                         <div class="ui two column divided center aligned grid">
                             <div class="column">
                                 <h4 class="ui header">{{ 'set.download.sorted.title' | trans }}</h4>
                                 <p>{{ 'set.download.sorted.text' | trans }}</p>
-                                <a class="ui download button" href="{{ path('set_zip', {number: set.number, sorted: true }) }}" download>Download ZIP</a>
+                                <a class="ui download button" href="{{ path('set_zip', {id: set.id, sorted: true }) }}" download>Download ZIP</a>
                             </div>
                             <div class="column">
                                 <h4 class="ui header">{{ 'set.download.unsorted.title' | trans }}</h4>
                                 <p>{{ 'set.download.unsorted.text' | trans }}</p>
-                                <a class="ui download button" href="{{ path('set_zip', {number: set.number, sorted: false }) }}" download>Download ZIP</a>
+                                <a class="ui download button" href="{{ path('set_zip', {id: set.id, sorted: false }) }}" download>Download ZIP</a>
                             </div>
                         </div>
                     {% endblock %}
                 {% endembed %}
-
             </div>
         </div>
     </div>
 
     <div class="ui segment vertical item-info">
         <div class="ui tabular pointing secondary menu">
-            <a class="item active" data-tab="parts"><i class="cubes icon"></i> Inventory ({{ set ? set.partCount : 0}})</a>
+            <a class="item active" data-tab="inventory"><i class="cubes icon"></i> Inventory ({{ set ? set.partCount : 0}})</a>
             {% if brset %}
                 <a class="item" data-tab="description"><i class="info icon"></i> Description</a>
                 <a class="item" data-tab="images"> <i class="image icon"></i> Images ({{ brset.additionalImageCount }})</a>
@@ -107,20 +108,28 @@
             {% endif %}
         </div>
         <div class="ui vertical segment">
-            <div class="ui tab active" data-tab="parts">
+            <div class="ui tab active" data-tab="inventory">
-                {#<div class="ui icon buttons right floated">#}
+
-                    {#<button class="ui button"><i class="grid layout icon"></i></button>#}
+                <div class="ui tabular icon buttons right floated submenu">
-                    {#<button class="ui button"><i class="list layout icon"></i></button>#}
+                    <a class="ui item active button" data-tab="inventory/models"><i class="grid layout icon"></i> Uni-Color</a>
+                    <a class="ui item button" data-tab="inventory/colors"><i class="list layout icon"></i> Multi-Color</a>
+                </div>
+                <p>{{ 'set.models.text' | trans({'%rebrickable%' : partCount, '%brickset%' : brset ? brset.pieces }) | nl2br }}</p>
+
+                {#<div class="ui tab active ajax-load" data-tab="inventory/models" data-src="{{ path('set_models', { 'id': set.id }) }}">#}
+                {#<div class="ui active centered inline loader"></div>#}
+                {#</div>#}
+                {#<div class="ui tab ajax-load" data-tab="inventory/colors" data-src="{{ path('set_colors', { 'id': set.id }) }}">#}
+                {#<div class="ui active centered inline loader"></div>#}
                 {#</div>#}
 
-                <p>{{ 'set.models.text' | trans({'%rebrickable%' : partCount, '%brickset%' : brset ?     brset.pieces }) | nl2br }}</p>
+                <div class="ui tab active" data-tab="inventory/models">
-
+                    {{ render(path('set_models', {id: set.id})) }}
-                <div class="ajax-load" data-src="{{ path('set_models', { 'number': set.number }) }}">
+                    {{ render(path('set_sets', {id: set.id})) }}
-                    <div class="ui active centered inline loader"></div>
+                </div>
+                <div class="ui tab" data-tab="inventory/colors">
+                    {{ render(path('set_colors', {id: set.id})) }}
                 </div>
-
-                {#{{ render(path('set_models', {number: set.number})) }}#}
-                {{ render(path('set_sets', {number: set.number})) }}
             </div>
             {% if brset %}
                 <div class="ui tab ajax-load" data-tab="description" data-src="{{ path('brickset_description', { 'id': brset.setID }) }}">

app/Resources/views/set/index.html.twig

@@ -7,51 +7,54 @@
 {% block header %}{{ 'page.set.index' | trans }}{% endblock %}
 
 {% block content %}
-
     <div class="ui container divided stackable grid">
-        <div class="row">
+    <div class="row">
-            <div class="column four wide">
+        <div class="column four wide">
-                <form method="get" action="" class="ui form">
+            <h3>{{ 'set.filter.title' | trans }}</h3>
-                    {{ form_start(form) }}
+            {{ form_start(form) }}
 
-                    {{ form_row(form.search) }}
+            {{ form_row(form.query) }}
-                    <div class="field fluid search selection">
+            {{ form_row(form.theme) }}
-                        {{ form_label(form.theme.id) }}
+            {{ form_row(form.year) }}
-                        {{ form_widget(form.theme.id) }}
+            {{ form_row(form.partCount) }}
-                    </div>
-                    <div class="field">
-                        <div id="slider"></div>
-                        {{ form_row(form.partCount) }}
-                    </div>
-                    <div class="field">
-                        {{ form_row(form.year) }}
-                    </div>
 
-                    <div class="field">
+            {{ form_rest(form) }}
-                        <input class="ui submit button" type="submit" value="filter"/>
+
-                    </div>
+            <div class="field">
-                    {{ form_rest(form) }}
+                <input class="ui fluid submit button" type="submit" value="Filter"/>
-                    {{ form_end(form) }}
-                </form>
             </div>
-            <div class="column twelve wide">
+            {{ form_end(form) }}
-                <div class="segment vertical">
+        </div>
-                    <div class="ui five column doubling grid">
+        <div class="column twelve wide">
-                        <div class="row">
+
-                            {% for set in sets %}
+            <div class="segment vertical">
-                               {{ set(set) }}
+                <div class="ui text menu right floated">
-                            {% endfor %}
+                    <div class="header item">Sort By</div>
-                        </div>
+                    {{ knp_pagination_sortable(sets, 'Number', 's.id', {'class':'item'}) }}
+                    {{ knp_pagination_sortable(sets, 'Year', 's.year', {'class':'item'}) }}
+                    {{ knp_pagination_sortable(sets, 'Name', ['s.name'], {'class':'item'}) }}
+                    {{ knp_pagination_sortable(sets, 'Parts', ['s.partCount'], {'class':'item'}) }}
+                </div>
+                <div class="ui text menu">
+                    <div class="header item">Found</div>
+                    <span class="item">{{ sets.getTotalItemCount }}</span>
+                </div>
+            </div>
+
+            <div class="segment vertical">
+                <div class="ui divided items">
+                    <div class="ui four column doubling grid">
+                        {% for set in sets %}
+                            {{ blocks.set(set) }}
+                        {% else %}
+                            {{ blocks.empty('empty.sets') }}
+                        {% endfor %}
                     </div>
                 </div>
-
+            </div>
+            <div class="segment vertical">
                 {{ knp_pagination_render(sets) }}
             </div>
         </div>
     </div>
 {% endblock %}
-
-{% block javascripts %}
-    {{ parent() }}
-
-{% endblock %}

app/Resources/views/set/tabs/colors.html.twig

@@ -1,9 +1,11 @@
 {% extends 'ajax.html.twig' %}
 
+{% import 'macros/blocks.html.twig' as blocks %}
+
 {% block content %}
     {% if colors|length > 0 %}
         {% for color in colors %}
-            <h5 style="color: #{{ color['color'].rgb }}" class="ui horizontal divider header">
+            <h5 class="ui horizontal divider header text color-{{ color['color'].id }}">
                 {{ color['color'].name }} ({{ color['quantity'] }})
             </h5>
             <div class="segment vertical">

app/Resources/views/set/tabs/inventory.html.twig

@@ -1,5 +1,7 @@
 {% extends 'ajax.html.twig' %}
 
+{% import 'macros/blocks.html.twig' as blocks %}
+
 {% block content %}
     {% if regularParts|length > 0 %}
         <h4 class="ui horizontal divider header">
@@ -8,7 +10,7 @@
 
         <div class="ui ten column grid">
             {% for inventoryPart in regularParts %}
-                {{ blocks.part(inventoryPart.part.number,inventoryPart.quantity, inventoryPart.color.id) }}
+                {{ blocks.part(inventoryPart.part.id,inventoryPart.quantity, inventoryPart.color.id) }}
                 {{ inventoryPart.color.id }}
             {% endfor %}
         </div>
@@ -20,7 +22,7 @@
         </h4>
         <div class="ui ten column grid">
             {% for inventoryPart in missing %}
-                {{ blocks.part(inventoryPart.part.number,inventoryPart.quantity, inventoryPart.color.id) }}
+                {{ blocks.part(inventoryPart.part.id,inventoryPart.quantity, inventoryPart.color.id) }}
             {% endfor %}
         </div>
     {% endif %}
@@ -31,7 +33,7 @@
         </h4>
         <div class="ui ten column grid">
             {% for inventoryPart in spareParts %}
-                {{ blocks.part(inventoryPart.part.number,inventoryPart.quantity, inventoryPart.color.id) }}
+                {{ blocks.part(inventoryPart.part.id,inventoryPart.quantity, inventoryPart.color.id) }}
             {% endfor %}
         </div>
     {% endif %}

app/Resources/views/set/tabs/models.html.twig

@@ -9,12 +9,10 @@
             Models
         </h4>
         <div class="ui segment vertical noborder">
-            <div class="ui grid">
+            <div class="ui grid doubling ten column row">
-                <div class="doubling ten column row">
+                {% for model in models %}
-                    {% for model in models %}
+                    {{ blocks.model(model['model'],model['quantity']) }}
-                        {{ blocks.model(model['model'],model['quantity']) }}
+                {% endfor %}
-                    {% endfor %}
-                </div>
             </div>
         </div>
     {% endif %}
@@ -23,7 +21,7 @@
             Missing models
         </h4>
         <div class="ui segment vertical noborder">
-            <div class="ui ten column grid">
+            <div class="ui grid doubling ten column row">
                 {% for part in missing %}
                     {{ blocks.part(part['part'],part['quantity']) }}
                 {% endfor %}
@@ -32,29 +30,29 @@
     {% endif %}
 
     {#{% if spareModels|length > 0 %}#}
-        {#<h4 class="ui horizontal divider header">#}
+    {#<h4 class="ui horizontal divider header">#}
-            {#Spare parts#}
+    {#Spare parts#}
-        {#</h4>#}
+    {#</h4>#}
 
-        {#<div class="ui segment vertical">#}
+    {#<div class="ui segment vertical">#}
-            {#<div class="ui ten column grid">#}
+    {#<div class="ui ten column grid">#}
-                {#{% for model in spareModels %}#}
+    {#{% for model in spareModels %}#}
-                    {#{{ blocks.model(model['model'],model['quantity']) }}#}
+    {#{{ blocks.model(model['model'],model['quantity']) }}#}
-                {#{% endfor %}#}
+    {#{% endfor %}#}
-            {#</div>#}
+    {#</div>#}
-        {#</div>#}
+    {#</div>#}
     {#{% endif %}#}
 
     {#{% if missingSpare|length > 0 %}#}
-        {#<h4 class="ui horizontal divider header">#}
+    {#<h4 class="ui horizontal divider header">#}
-            {#Missing spare models#}
+    {#Missing spare models#}
-        {#</h4>#}
+    {#</h4>#}
-        {#<div class="ui segment vertical">#}
+    {#<div class="ui segment vertical">#}
-            {#<div class="ui ten column grid segment">#}
+    {#<div class="ui ten column grid segment">#}
-                {#{% for inventoryPart in missingSpare %}#}
+    {#{% for inventoryPart in missingSpare %}#}
-                    {#{{ blocks.part(inventoryPart.part.number,inventoryPart.quantity, inventoryPart.color.id) }}#}
+    {#{{ blocks.part(inventoryPart.part.id,inventoryPart.quantity, inventoryPart.color.id) }}#}
-                {#{% endfor %}#}
+    {#{% endfor %}#}
-            {#</div>#}
+    {#</div>#}
-        {#</div>#}
+    {#</div>#}
     {#{% endif %}#}
 {% endblock %}

app/Resources/views/set/tabs/sets.html.twig

@@ -1,18 +1,14 @@
 {% extends 'ajax.html.twig' %}
 
+{% import 'macros/blocks.html.twig' as blocks %}
+
 {% block content %}
     {% if inventorySets %}
         <h4 class="ui horizontal divider header">Sets</h4>
-        <div class="ui seven column grid">
+        <div class="ui six column grid">
             <div class="row">
                 {% for inventorySet in inventorySets %}
-                    <div class="column">
+                    {{ blocks.set(inventorySet.set, inventorySet.quantity) }}
-                        <a href="{{ url('set_detail', {'number': inventorySet.set.number}) }}">
-                            {{ blocks.setImage(inventorySet.set.number,'set_min') }}
-                            <p>{{ inventorySet.set.number }} - {{ inventorySet.set.name }}</p>
-                            <p>{{ inventorySet.quantity}}</p>
-                        </a>
-                    </div>
                 {% endfor %}
             </div>
         </div>

gulpfile.js

@@ -5,6 +5,9 @@ gulp.task('css', function() {
     return gulp.src([
         'node_modules/semantic-ui/dist/semantic.css',
         'node_modules/lightbox2/dist/css/lightbox.css',
+        'bower_components/jquery-ui/themes/base/jquery-ui.css',
+        'bower_components/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.css',
+        'bower_components/select2/dist/css/select2.css',
         'app/Resources/assets/style/style.scss',
     ])
         .pipe(plugins.sass().on('error', plugins.sass.logError))
@@ -31,7 +34,10 @@ gulp.task('three', function() {
 
 gulp.task('js', function() {
     return gulp.src([
-        'node_modules/jquery/dist/jquery.js',
+        'bower_components/jquery/dist/jquery.js',
+        'bower_components/jquery-ui/jquery-ui.js',
+        'bower_components/jQuery-ui-Slider-Pips/dist/jquery-ui-slider-pips.js',
+        'bower_components/select2/dist/js/select2.full.js',
         'node_modules/semantic-ui/dist/semantic.js',
         'node_modules/lightbox2/dist/js/lightbox.js',
         'app/Resources/assets/js/**.js',