mirror of
https://github.com/ToxicCrack/PrintABrick.git
synced 2025-05-16 04:10:09 -07:00
Add js slider
This commit is contained in:
David Hübner
parent
e13c6d4324
commit
6de759ea7d
1
.gitignore
vendored
1
.gitignore
vendored
@ -16,6 +16,7 @@
|
||||
/web/bundles/
|
||||
.idea/
|
||||
/node_modules/
|
||||
/bower_components/
|
||||
/app/Resources/libs/semantic/dist
|
||||
/web/resources/
|
||||
/var/media/
|
||||
|
||||
4
app/Resources/assets/images/.directory
Normal file
4
app/Resources/assets/images/.directory
Normal file
@ -0,0 +1,4 @@
|
||||
[Dolphin]
|
||||
PreviewsShown=true
|
||||
Timestamp=2017,5,9,23,7,36
|
||||
Version=3
|
||||
BIN
app/Resources/assets/images/noimage_large.png
Normal file
BIN
app/Resources/assets/images/noimage_large.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
BIN
app/Resources/assets/images/noimage_min.png
Normal file
BIN
app/Resources/assets/images/noimage_min.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
24
app/Resources/assets/js/slider.js
Normal file
24
app/Resources/assets/js/slider.js
Normal file
@ -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))
|
||||
});
|
||||
});
|
||||
@ -17,6 +17,9 @@ $(document).ready(function(){
|
||||
|
||||
$('.tabular.menu .item').tab();
|
||||
|
||||
$('.tabular.submenu .item').tab({
|
||||
});
|
||||
|
||||
$('.message .close')
|
||||
.on('click', function() {
|
||||
$(this)
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
13
app/Resources/assets/style/mixins.scss
Normal file
13
app/Resources/assets/style/mixins.scss
Normal file
@ -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);
|
||||
}
|
||||
@ -1,14 +1,14 @@
|
||||
.model-meta {
|
||||
background: #E0E1E2;
|
||||
text-align: center;
|
||||
.part {
|
||||
.content {
|
||||
padding: 7px !important;
|
||||
|
||||
.quantity {
|
||||
font-weight: 700;
|
||||
color: #444444;
|
||||
}
|
||||
.number {
|
||||
margin: 0.2em;
|
||||
display: inline-block;
|
||||
color: #000000;
|
||||
.header {
|
||||
font-size: 14px !important;
|
||||
margin: 0;
|
||||
}
|
||||
.description {
|
||||
font-size: 12px;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
7
app/Resources/assets/style/set.scss
Normal file
7
app/Resources/assets/style/set.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.set {
|
||||
padding: 10px !important;
|
||||
.content .header {
|
||||
font-size: 14px !important;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,10 @@
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
@import "main";
|
||||
@import "modelviewer";
|
||||
|
||||
@import "model";
|
||||
@import "part";
|
||||
@import "set";
|
||||
@import "colors";
|
||||
@import "reviews";
|
||||
9
app/Resources/views/form/search.html.twig
Normal file
9
app/Resources/views/form/search.html.twig
Normal file
@ -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 %}
|
||||
@ -12,7 +12,6 @@
|
||||
{% block body %}
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
|
||||
<script type="text/javascript" src="{{ asset('resources/js/three.js') }}"></script>
|
||||
|
||||
@ -1,65 +1,84 @@
|
||||
{% macro partImage(number, filter, color = -1) %}
|
||||
{% if filter == 'part_large' %}
|
||||
{% set placeholder = asset("resources/images/unknown_large.png") %}
|
||||
{% else %}
|
||||
{% set placeholder = asset("resources/images/unknown.png") %}
|
||||
{% endif %}
|
||||
|
||||
<div class="image load">
|
||||
<div class="ui image load">
|
||||
{% if filter == 'part_large' %}
|
||||
{% set placeholder = asset("resources/images/unknown_large.png") %}
|
||||
{% else %}
|
||||
{% set placeholder = asset("resources/images/oval.svg") %}
|
||||
{% endif %}
|
||||
{#<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|lower~'.jpg')|imagine_filter(filter) }}">
|
||||
<img src="{{ placeholder }}" data-src="{{ asset(number~'.jpg')|imagine_filter(filter) }}">
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro model(model, quantity = null, color = -1) %}
|
||||
<a class="column part" href="{{ url('model_detail', {'number': model.number})}}">
|
||||
<div class="ui bordered fluid image">
|
||||
<a class="column part" href="{{ url('model_detail', {'id': model.id})}}">
|
||||
<div class="ui card">
|
||||
{% import _self as blocks %}
|
||||
{{ blocks.partImage(model.number, 'part_min', color) }}
|
||||
<div class="part-meta">
|
||||
<span class="quantity"></span> {% if quantity %}{{ quantity }}x{% endif %}<span class="number">{{ model.number }}</span>
|
||||
{#<span class="name">{{ model.name }}</span>#}
|
||||
{{ blocks.partImage(model.id, 'part_min', color) }}
|
||||
<div class="content">
|
||||
<h3 class="header">{{ model.id }}</h3>
|
||||
<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})}}">
|
||||
<div class="ui bordered fluid image">
|
||||
<a class="column part" href="{{ url('reb_part_detail', {'id': part.id})}}">
|
||||
<div class="ui card">
|
||||
{% import _self as blocks %}
|
||||
{{ blocks.partImage(part.number,'part_min', color) }}
|
||||
<div class="part-meta">
|
||||
<span class="quantity"></span> {% if quantity %}{{ quantity }}x{% endif %}<span class="number">{{ part.number }}</span>
|
||||
{{ blocks.partImage(part.id,'part_min', color) }}
|
||||
<div class="content">
|
||||
<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) %}
|
||||
<div class="column">
|
||||
<a href="{{ url('set_detail', {'number': set.number}) }}">
|
||||
<div class="ui bordered fluid image">
|
||||
{% import _self as blocks %}
|
||||
{{ blocks.setImage(set.number,'set_min') }}
|
||||
{% macro set(set, quantity = null) %}
|
||||
<a class="set column" href="{{ url('set_detail', {'id': set.id}) }}">
|
||||
<div class="ui card">
|
||||
{% import _self as blocks %}
|
||||
{{ blocks.setImage(set.id,'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) }} …
|
||||
{% 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) }} …</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">
|
||||
<p>{{ set.number }}</p>
|
||||
<p>{{ set.name }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro empty(message) %}
|
||||
|
||||
@ -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 six column doubling grid">
|
||||
<div class="row">
|
||||
{#<div class="ui tab" data-tab="sets">#}
|
||||
{#<div class="ui six column doubling grid">#}
|
||||
{#<div class="row">#}
|
||||
{#{% for set in sets %}#}
|
||||
{#<div class="column">#}
|
||||
{#<a href="{{ url('set_detail', {number:set.number}) }}">#}
|
||||
{#{{ blocks.setImage(set.number,'set_min') }}#}
|
||||
{#<h5>{{ set.number }}</h5>#}
|
||||
{#</a>#}
|
||||
{#</div>#}
|
||||
{#{{ blocks.set(set) }}#}
|
||||
{#{% endfor %}#}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#</div>#}
|
||||
{#</div>#}
|
||||
{#</div>#}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -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) }}
|
||||
<div class="field fluid search selection">
|
||||
{{ form_label(form.category.id) }}
|
||||
{{ form_widget(form.category.id)}}
|
||||
</div>
|
||||
{{ form_rest(form) }}
|
||||
<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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}) }}">
|
||||
{{ blocks.setImage(set.number,'set_min') }}
|
||||
<div class="ui bottom attached label">{{ set.number }}<br></div>
|
||||
<a href="{{ url('set_detail', {id:set.id}) }}">
|
||||
{{ blocks.setImage(set.id,'set_min') }}
|
||||
<div class="ui bottom attached label">{{ set.id }}<br></div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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">
|
||||
<a href="{{ url('set_detail', {'number': set.number}) }}">
|
||||
<p>{{ set.number }} - {{ set.name }}</p>
|
||||
</a>
|
||||
</div>
|
||||
{{ blocks.set(set) }}
|
||||
{% endfor %}
|
||||
</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>
|
||||
|
||||
@ -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> > <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">#}
|
||||
{#<i class="warning icon"></i>#}
|
||||
{#<div class="content">#}
|
||||
{#<div class="header">#}
|
||||
{#{{ 'set.download.warning.title' | trans }}#}
|
||||
{#</div>#}
|
||||
{#<p> {{ 'set.download.warning.text' | trans }}</p>#}
|
||||
{#</div>#}
|
||||
{#</div>#}
|
||||
{% if missingCount > 0 %}
|
||||
<div class="ui warning icon message">
|
||||
<i class="warning icon"></i>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
{{ 'set.download.warning.title' | trans }}
|
||||
</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>
|
||||
{% 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 icon buttons right floated">#}
|
||||
{#<button class="ui button"><i class="grid layout icon"></i></button>#}
|
||||
{#<button class="ui button"><i class="list layout icon"></i></button>#}
|
||||
<div class="ui tab active" data-tab="inventory">
|
||||
|
||||
<div class="ui tabular icon buttons right floated submenu">
|
||||
<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="ajax-load" data-src="{{ path('set_models', { 'number': set.number }) }}">
|
||||
<div class="ui active centered inline loader"></div>
|
||||
<div class="ui tab active" data-tab="inventory/models">
|
||||
{{ render(path('set_models', {id: set.id})) }}
|
||||
{{ render(path('set_sets', {id: set.id})) }}
|
||||
</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 }) }}">
|
||||
|
||||
@ -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="column four wide">
|
||||
<form method="get" action="" class="ui form">
|
||||
{{ form_start(form) }}
|
||||
<div class="row">
|
||||
<div class="column four wide">
|
||||
<h3>{{ 'set.filter.title' | trans }}</h3>
|
||||
{{ form_start(form) }}
|
||||
|
||||
{{ form_row(form.search) }}
|
||||
<div class="field fluid search selection">
|
||||
{{ form_label(form.theme.id) }}
|
||||
{{ form_widget(form.theme.id) }}
|
||||
</div>
|
||||
<div class="field">
|
||||
<div id="slider"></div>
|
||||
{{ form_row(form.partCount) }}
|
||||
</div>
|
||||
<div class="field">
|
||||
{{ form_row(form.year) }}
|
||||
</div>
|
||||
{{ form_row(form.query) }}
|
||||
{{ form_row(form.theme) }}
|
||||
{{ form_row(form.year) }}
|
||||
{{ form_row(form.partCount) }}
|
||||
|
||||
<div class="field">
|
||||
<input class="ui submit button" type="submit" value="filter"/>
|
||||
</div>
|
||||
{{ form_rest(form) }}
|
||||
{{ form_end(form) }}
|
||||
</form>
|
||||
{{ form_rest(form) }}
|
||||
|
||||
<div class="field">
|
||||
<input class="ui fluid submit button" type="submit" value="Filter"/>
|
||||
</div>
|
||||
<div class="column twelve wide">
|
||||
<div class="segment vertical">
|
||||
<div class="ui five column doubling grid">
|
||||
<div class="row">
|
||||
{% for set in sets %}
|
||||
{{ set(set) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ form_end(form) }}
|
||||
</div>
|
||||
<div class="column twelve wide">
|
||||
|
||||
<div class="segment vertical">
|
||||
<div class="ui text menu right floated">
|
||||
<div class="header item">Sort By</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 %}
|
||||
@ -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">
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -9,12 +9,10 @@
|
||||
Models
|
||||
</h4>
|
||||
<div class="ui segment vertical noborder">
|
||||
<div class="ui grid">
|
||||
<div class="doubling ten column row">
|
||||
{% for model in models %}
|
||||
{{ blocks.model(model['model'],model['quantity']) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="ui grid doubling ten column row">
|
||||
{% for model in models %}
|
||||
{{ blocks.model(model['model'],model['quantity']) }}
|
||||
{% endfor %}
|
||||
</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">#}
|
||||
{#Spare parts#}
|
||||
{#</h4>#}
|
||||
{#<h4 class="ui horizontal divider header">#}
|
||||
{#Spare parts#}
|
||||
{#</h4>#}
|
||||
|
||||
{#<div class="ui segment vertical">#}
|
||||
{#<div class="ui ten column grid">#}
|
||||
{#{% for model in spareModels %}#}
|
||||
{#{{ blocks.model(model['model'],model['quantity']) }}#}
|
||||
{#{% endfor %}#}
|
||||
{#</div>#}
|
||||
{#</div>#}
|
||||
{#<div class="ui segment vertical">#}
|
||||
{#<div class="ui ten column grid">#}
|
||||
{#{% for model in spareModels %}#}
|
||||
{#{{ blocks.model(model['model'],model['quantity']) }}#}
|
||||
{#{% endfor %}#}
|
||||
{#</div>#}
|
||||
{#</div>#}
|
||||
{#{% endif %}#}
|
||||
|
||||
{#{% if missingSpare|length > 0 %}#}
|
||||
{#<h4 class="ui horizontal divider header">#}
|
||||
{#Missing spare models#}
|
||||
{#</h4>#}
|
||||
{#<div class="ui segment vertical">#}
|
||||
{#<div class="ui ten column grid segment">#}
|
||||
{#{% for inventoryPart in missingSpare %}#}
|
||||
{#{{ blocks.part(inventoryPart.part.number,inventoryPart.quantity, inventoryPart.color.id) }}#}
|
||||
{#{% endfor %}#}
|
||||
{#</div>#}
|
||||
{#</div>#}
|
||||
{#<h4 class="ui horizontal divider header">#}
|
||||
{#Missing spare models#}
|
||||
{#</h4>#}
|
||||
{#<div class="ui segment vertical">#}
|
||||
{#<div class="ui ten column grid segment">#}
|
||||
{#{% for inventoryPart in missingSpare %}#}
|
||||
{#{{ blocks.part(inventoryPart.part.id,inventoryPart.quantity, inventoryPart.color.id) }}#}
|
||||
{#{% endfor %}#}
|
||||
{#</div>#}
|
||||
{#</div>#}
|
||||
{#{% endif %}#}
|
||||
{% endblock %}
|
||||
@ -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">
|
||||
<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>
|
||||
{{ blocks.set(inventorySet.set, inventorySet.quantity) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user