Speedup image loading, update templates

2025-05-17 12:50:08 -07:00 · 2017-05-22 12:11:59 +02:00 · 2017-05-22 12:11:59 +02:00 · 1f77e126ca
commit 1f77e126ca
parent 58ea93a7ed
23 changed files with 186 additions and 91 deletions
--- a/app/Resources/assets/js/style.js
+++ b/app/Resources/assets/js/style.js
@ -20,9 +20,16 @@ $(document).ready(function(){
        .rating("disable")
    ;

-    $('.tabular.menu .item').tab();
+    $('.tabular.menu .item').tab({
+        onVisible: function() {
+            $('.image img').visibility('refresh');
+        }
+    });

    $('.tabular.submenu .item').tab({
+        onVisible: function() {
+            $('.image img').visibility('refresh');
+        }
    });


--- a/app/Resources/assets/style/main.scss
+++ b/app/Resources/assets/style/main.scss
@ -84,6 +84,29 @@
      background: url("/resources/images/spinner.svg") no-repeat center;
      background-color: lightgrey;
  }
+
+  .found-count {
+    margin: 0 !important;
+  }
+
+  .truncate {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui.search > .results .result {
+    .title {
+      font-weight: normal;
+    }
+
+    em {
+      font-weight: 700;
+    }
+
+    padding: 0.5em 1em !important;
+  }
 }

@each $i in 5 10 15 20 25 30 40 50 60 {
--- a/app/Resources/assets/style/part.scss
+++ b/app/Resources/assets/style/part.scss
@ -6,9 +6,27 @@
      font-size: 12px !important;
      margin: 0;
    }
+
    .description {
      font-size: 11px;
      margin: 0 !important;
    }
+
+    .truncate-multiline {
+      height: 30px;
+      line-height: 13px;
+      display: block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.parts {
+  margin: 0 -0.3em !important;
+
+  .part {
+    padding: 0.3em !important;
  }
 }
--- a/app/Resources/assets/style/set.scss
+++ b/app/Resources/assets/style/set.scss
@ -1,5 +1,12 @@
+.sets {
+  margin: 0 -0.3em !important;
+
+  .set {
+    padding: 0.3em !important;
+  }
+}
+
 .set {
-  padding: 10px !important;
  .content .header {
    font-size: 14px !important;
    margin-bottom: 3px;
--- a/app/Resources/relations/alias_model.yml
+++ b/app/Resources/relations/alias_model.yml
@ -380,3 +380,5 @@ u9209c01: u9209

 2772c02: 2772c01
 2772c03: 2772c01
+
+81294: 3351a
--- a/app/Resources/translations/messages.en.yml
+++ b/app/Resources/translations/messages.en.yml
@ -47,6 +47,14 @@ set:

 model:
  filter.title: Filter
+  id: Model number
+  category: Category
+  author: Author
+  set.count:
+  license: License
+  keywords: Keywords
+  aliases: Aliases
+  download: Download model
  form:
    search: Search
    category: Category
@ -55,6 +63,7 @@ model:
 page:
  model.index: Browse models
  set.index: Browse sets
+  search: "Search: \"%query%\""

 filter:
  model:
--- a/app/Resources/views/base.html.twig
+++ b/app/Resources/views/base.html.twig
@ -35,7 +35,7 @@
                        {% endfor %}
                    </div>
                </div>
-                <div class="ui vertical segment content">
+                <div class="ui basic segment content">
                    {% for label, flashes in app.session.flashbag.all %}
                        {% for flash in flashes %}
                            {{ elements.flash(label,flash) }}
@ -71,7 +71,8 @@
                },
                minCharacters : 3,
                fields: {
-                    title: 'title',
+                    title: 'name',
+                    description: 'id',
                    url: 'url'
                }
            });
--- a/app/Resources/views/html.html.twig
+++ b/app/Resources/views/html.html.twig
@ -2,6 +2,7 @@
 <html>
 <head>
    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>{% block title %}PrintABrick{% endblock %}</title>
    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('resources/css/main.css') }}">
--- a/app/Resources/views/macros/blocks.html.twig
+++ b/app/Resources/views/macros/blocks.html.twig
@ -27,7 +27,10 @@
            {% import _self as blocks %}
            {{ blocks.partImage(model.id, 'part_min', color) }}
            <div class="content">
-                <h3 class="header">{{ model.id }}</h3>
+                <h3 class="header truncate">{{ model.id }}</h3>
+                <div class="meta">
+                    <span class="truncate-multiline"><small>{{ model.name }}</small></span>
+                </div>
                <div class="description">
                    {% if quantity %}<div class="right floated">{{ quantity }}x</div>{% endif %}
                </div>
@ -42,7 +45,10 @@
            {% import _self as blocks %}
            {{ blocks.partImage(part.id,'part_min', color) }}
            <div class="content">
-                <h3 class="header">{{ part.id }}</h3>
+                <h3 class="header truncate">{{ part.id }}</h3>
+                <div class="meta">
+                    <span class="truncate-multiline"><small>{{ part.name }}</small></span>
+                </div>
                <div class="description">
                    {% if quantity %}<div class="right floated">{{ quantity }}x</div>{% endif %}
                </div>
@ -57,18 +63,13 @@
            {% 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) }} &hellip;
-                    {% else %}
+                <h3 class="header truncate">
                    {{ 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>
+                    <span class="left floated truncate"><small>{{ set.theme.fullName }}</small></span>
                </div>
                <div class="description">
                    <small>
--- a/app/Resources/views/model/detail.html.twig
+++ b/app/Resources/views/model/detail.html.twig
@ -7,7 +7,7 @@
 {% block header %}{{ model.name }}{% endblock %}

 {% block content %}
-    <div class="ui grid">
+    <div class="ui stackable grid">
        <div class="column ten wide">
            <div id="model-viewer" class="model-container">
                {{ blocks.partImage(model.id,'part_large') }}
@ -17,7 +17,7 @@
            <div class="item-info ui">
                <table class="ui very basic table">
                    <tr>
-                        <td>{{ 'model.number' | trans }}</td>
+                        <td>{{ 'model.id' | trans }}</td>
                        <td><h2>{{ model.id }}</h2></td>
                    </tr>
                    <tr>
@ -39,18 +39,21 @@
                    <tr>
                        <td>{{ 'model.keywords' | trans }}</td>
                        <td>
+                            <div class="ui grey labels">
                                {% for keyword in model.keywords %}
                                    <span class="ui label">{{ keyword.name }}</span>
                                {% endfor %}
+                            </div>
                        </td>
                    </tr>
                    {% if model.aliases|length %}
                        <tr>
                            <td>{{ 'model.aliases' | trans }}</td>
                            <td>
-                                {% for alias in model.aliases | slice(0,10)%}
+                                {% for alias in model.aliases | slice(0,20)%}
                                    <span>{{ alias.id }}</span>{%  if not loop.last %},{% endif %}
                                {% endfor %}
+                                {% if model.aliases|length > 20 %}&hellip;{% endif %}
                            </td>
                        </tr>
                    {% endif %}
--- a/app/Resources/views/model/index.html.twig
+++ b/app/Resources/views/model/index.html.twig
@ -22,6 +22,19 @@
                {#</form>#}
            </div>
            <div class="column twelve wide">
+                <div class="ui header vertical noborder">
+                    <div class="ui text menu right floated">
+                        <div class="header item">Sort By</div>
+                        {{ knp_pagination_sortable(models, 'Number', 'm.id', {'class':'item'}) }}
+                        {{ knp_pagination_sortable(models, 'Name', ['m.name'], {'class':'item'}) }}
+                    </div>
+                    <div class="found-count ui text menu">
+                        <div class="header item">Showing</div>
+                        <span class="item">{{ models.getTotalItemCount }}</span>
+                    </div>
+                </div>
+
+                <div class="ui segment vertical noborder">
                    <div class="ui six column doubling grid">
                        {% for model in models %}
                            {{ blocks.model(model) }}
@ -29,7 +42,7 @@
                            {{ blocks.empty('empty.models') }}
                        {% endfor %}
                    </div>
-
+                </div>
                <div class="ui column vertical segment noborder">
                    {{ knp_pagination_render(models) }}
                </div>
--- a/app/Resources/views/search/index.html.twig
+++ b/app/Resources/views/search/index.html.twig
@ -2,28 +2,31 @@

 {% import 'macros/blocks.html.twig' as blocks %}

-{% block title %}{% endblock %}
+{% block title %}{{ 'page.search' | trans({'%query%':query}) }}{% endblock %}

-{% block header %}{% endblock %}
+{% block header %}{{ 'page.search' | trans({'%query%':query}) }}{% endblock %}

 {% block content %}
-    <h4 class="ui horizontal divider header">Sets</h4>

-    <div class="ui eight column doubling grid">
-        <div class="row">
+
+    <div class="ui vertical segment noborder">
+        <h3 class="ui dividing header">Sets</h3>
+        <div class="ui eight column doubling grid sets">
            {% for set in sets %}
                {{ blocks.set(set) }}
            {% endfor %}
        </div>
+        <a href="{{ path('set_index',{'s[query]':query}) }}">Show more</a>
    </div>

-    <h4 class="ui horizontal divider header">Models</h4>

-    <div class="ui eight column doubling grid">
-        <div class="row">
+    <div class="ui vertical segment noborder">
+        <h3 class="ui dividing header">Models</h3>
+        <div class="ui eight column doubling grid parts">
            {% for model in models %}
                {{ blocks.model(model) }}
            {% endfor %}
        </div>
+        <a href="{{ path('model_index',{'m[query]':query}) }}">Show more</a>
    </div>
 {% endblock %}
--- a/app/Resources/views/set/detail.html.twig
+++ b/app/Resources/views/set/detail.html.twig
@ -27,18 +27,20 @@
                    </tr>
                    <tr>
                        <td>{{ 'set.theme' | trans }}</td>
-                        <td><a href="{{ path('set_index',{'s[theme]' : set.theme.id }) }}">{{ set.theme ? set.theme.name }}</a></td>
+                        <td><a href="{{ path('set_index',{'s[theme]' : set.theme.id }) }}">{{ set.theme ? set.theme.fullName }}</a></td>
                    </tr>
                    <tr>
                        <td>{{ 'set.parts' | trans }}</td><td>
-                            {{ set.partCount }} {{ brset ? '('~brset.pieces~')' }}
+                            {{ set.partCount~' (Rebrickable)' }}{{ brset and brset.pieces ? ' / '~brset.pieces~' (Brickset)' }}
                        </td>
                    </tr>
                    {% if brset %}
+                        {% if brset.minifigs %}
                            <tr>
                                <td>{{ 'set.minifigs' | trans }}</td>
                                <td>{{ brset.minifigs }}</td>
                            </tr>
+                        {% endif %}
                        <tr>
                            <td>{{ 'set.rating' | trans }}</td>
                            <td>
@ -109,9 +111,9 @@
        <div class="ui vertical segment">
            <div class="ui tab active" data-tab="inventory">

-                <div class="ui vertical segment">
-                    <p>{{ 'set.models.text' | trans({'%rebrickable%' : partCount, '%brickset%' : brset ? brset.pieces }) | nl2br }}</p>
-                </div>
+                {#<div class="ui vertical segment">#}
+                {#<p>{{ 'set.models.text' | trans({'%rebrickable%' : partCount, '%brickset%' : brset ? brset.pieces }) | nl2br }}</p>#}
+                {#</div>#}

                <div class="ui vertical segment">
                    <div class="ui tabular icon buttons submenu">
--- a/app/Resources/views/set/index.html.twig
+++ b/app/Resources/views/set/index.html.twig
@ -26,8 +26,7 @@
            {{ form_end(form) }}
        </div>
        <div class="column twelve wide">
-
-            <div class="segment vertical">
+            <div class="ui header vertical noborder">
                <div class="ui text menu right floated">
                    <div class="header item">Sort By</div>
                    {{ knp_pagination_sortable(sets, 'Number', 's.id', {'class':'item'}) }}
@ -35,15 +34,14 @@
                    {{ 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="found-count ui text menu">
                    <div class="header item">Showing</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">
+            <div class="ui segment vertical noborder">
+                <div class="ui four column doubling grid sets">
                    {% for set in sets %}
                        {{ blocks.set(set) }}
                    {% else %}
@ -51,8 +49,7 @@
                    {% endfor %}
                </div>
            </div>
-            </div>
-            <div class="segment vertical">
+            <div class="ui segment vertical noborder">
                {{ knp_pagination_render(sets) }}
            </div>
        </div>
--- a/app/Resources/views/set/tabs/colors.html.twig
+++ b/app/Resources/views/set/tabs/colors.html.twig
@ -9,24 +9,27 @@
    {% endfor %}

    {% if colors|length > 0 %}
+        <div class="ui segment vertical noborder">
+            <h3 class="ui horizontal divider header">Models</h3>
            {% for color in colors %}
-            <h5 class="ui horizontal divider header text color-{{ color['color'].id }}">
+                <div class="ui segment vertical noborder">
+                    <h5 class="ui dividing header text color-{{ color['color'].id }}">
                        {{ color['color'].name }} ({{ color['quantity'] }})
                    </h5>
-            <div class="segment vertical">
-
-                <div class="ui ten column grid">
+                    <div class="ui grid doubling ten column row parts">
                        {% for model in color['models'] %}
                            {{ blocks.model(model['model'],model['quantity'], color['color'].id) }}
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
+        </div>
    {% endif %}

    {% if missing|length > 0 %}
        <div class="ui segment vertical noborder">
-            <div class="ui grid doubling ten column row">
+            <h3 class="ui horizontal divider header">Missing</h3>
+            <div class="ui grid doubling ten column row parts">
                {% for part in missing %}
                    {{ blocks.part(part['part'],part['quantity']) }}
                {% endfor %}
--- a/app/Resources/views/set/tabs/models.html.twig
+++ b/app/Resources/views/set/tabs/models.html.twig
@ -10,7 +10,8 @@

    {% if models|length > 0 %}
        <div class="ui segment vertical noborder">
-            <div class="ui grid doubling ten column row">
+            <h3 class="ui horizontal divider header">Models</h3>
+            <div class="ui grid doubling ten column row parts">
                {% for model in models %}
                    {{ blocks.model(model['model'],model['quantity']) }}
                {% endfor %}
@ -19,7 +20,8 @@
    {% endif %}
    {% if missing|length > 0 %}
        <div class="ui segment vertical noborder">
-            <div class="ui grid doubling ten column row">
+            <h3 class="ui horizontal divider header">Missing</h3>
+            <div class="ui grid doubling ten column row parts">
                {% for part in missing %}
                    {{ blocks.part(part['part'],part['quantity']) }}
                {% endfor %}
--- a/app/Resources/views/set/tabs/sets.html.twig
+++ b/app/Resources/views/set/tabs/sets.html.twig
@ -9,7 +9,7 @@
    {% endfor %}

    {% if inventorySets %}
-        <h4 class="ui horizontal divider header">Sets</h4>
+        <h2 class="ui horizontal divider header">Sets</h2>
        <div class="ui six column grid">
            <div class="row">
                {% for inventorySet in inventorySets %}
--- a/app/config/config/liip_imagine.yml
+++ b/app/config/config/liip_imagine.yml
@ -26,6 +26,7 @@ liip_imagine:
              cache: ~
              default_image: "/resources/images/noimage_min.png"
              filters:
+                  upscale: {min: [200, 200]}
                  thumbnail: { size: [200, 200], mode: inset, allow_upscale: true }
                  background: { size: [250, 250], position: center, color: '#FFFFFF' }
        part_large:
--- a/composer.json
+++ b/composer.json
@ -11,7 +11,7 @@
        "psr-4": { "Tests\\": "tests/" }
    },
    "require": {
-        "php": ">=7.0",
+        "php": "^7.0",
        "symfony/symfony": "3.2.*",
        "doctrine/orm": "^2.5",
        "doctrine/doctrine-bundle": "^1.6",
--- a/composer.lock
+++ b/composer.lock
@ -4,7 +4,7 @@
        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
        "This file is @generated automatically"
    ],
-    "content-hash": "f3808dea37da4032a73d71e76ffca16c",
+    "content-hash": "292225406393a05e8d4b946ebe444df9",
    "packages": [
        {
            "name": "composer/ca-bundle",
@ -4429,16 +4429,16 @@
        },
        {
            "name": "sebastian/environment",
-            "version": "3.0.2",
+            "version": "3.0.3",
            "source": {
                "type": "git",
                "url": "https://github.com/sebastianbergmann/environment.git",
-                "reference": "11e7710b7724d42c62249b0e9d3030240398949d"
+                "reference": "02b6b2c7aefe2cdb1185b8dbf8718b0bcedf3ab3"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/sebastianbergmann/environment/zipball/11e7710b7724d42c62249b0e9d3030240398949d",
-                "reference": "11e7710b7724d42c62249b0e9d3030240398949d",
+                "url": "https://api.github.com/repos/sebastianbergmann/environment/zipball/02b6b2c7aefe2cdb1185b8dbf8718b0bcedf3ab3",
+                "reference": "02b6b2c7aefe2cdb1185b8dbf8718b0bcedf3ab3",
                "shasum": ""
            },
            "require": {
@ -4475,7 +4475,7 @@
                "environment",
                "hhvm"
            ],
-            "time": "2017-04-21T14:40:32+00:00"
+            "time": "2017-05-18T10:10:00+00:00"
        },
        {
            "name": "sebastian/exporter",
@ -5212,7 +5212,7 @@
    "prefer-stable": false,
    "prefer-lowest": false,
    "platform": {
-        "php": ">=7.0"
+        "php": "^7.0"
    },
    "platform-dev": []
 }
--- a/src/AppBundle/Imagine/PartImageLoader.php
+++ b/src/AppBundle/Imagine/PartImageLoader.php
@ -38,7 +38,8 @@ class PartImageLoader extends BaseImageLoader
        // try to load image from rebrickable website
        try {
            if ($this->remoteFileExists($this->rebrickableContext.$path)) {
-                return file_get_contents($this->rebrickableContext.$path);
+                $context = stream_context_create(array('http' => array('header'=>'Connection: close\r\n')));
+                return file_get_contents($this->rebrickableContext.strtolower($path),false,$context);
            }
        } catch (\Exception $e) {
            throw new NotLoadableException(sprintf('Source image %s could not be loaded.', $path), $e->getCode(), $e);
--- a/src/AppBundle/Imagine/SetImageLoader.php
+++ b/src/AppBundle/Imagine/SetImageLoader.php
@ -32,7 +32,8 @@ class SetImageLoader extends BaseImageLoader
        // try to load image from rebrickable website
        try {
            if ($this->remoteFileExists($this->rebrickableContext.strtolower($path))) {
-                return file_get_contents($this->rebrickableContext.strtolower($path));
+                $context = stream_context_create(array('http' => array('header'=>'Connection: close\r\n')));
+                return file_get_contents($this->rebrickableContext.strtolower($path),false,$context);
            }
        } catch (\Exception $e) {
            throw new NotLoadableException(sprintf('Source image %s could not be loaded.', $path), $e->getCode(), $e);
--- a/src/AppBundle/Service/Stl/StlConverterService.php
+++ b/src/AppBundle/Service/Stl/StlConverterService.php
@ -3,7 +3,7 @@
 namespace AppBundle\Service\Stl;

 use AppBundle\Exception\ConvertingFailedException;
-use AppBundle\Exception\LDView\LDLibraryMissingException;
+use AppBundle\Exception\Stl\LDLibraryMissingException;
 use League\Flysystem\File;
 use League\Flysystem\Filesystem;
 use Symfony\Component\Process\Exception\ProcessFailedException;