Change collection home layout.
- Manage tabs with Bootstrap JS.
- Remove useless components.
- Link directly to image.
--- a/src/iconolab/templates/iconolab/collection_home.html Wed Feb 15 16:42:06 2017 +0100
+++ b/src/iconolab/templates/iconolab/collection_home.html Mon Feb 20 17:12:56 2017 +0100
@@ -7,81 +7,70 @@
{% load iconolab_tags %}
{% block content %}
- <div id="collection-summary" class="row collection-summary">
- <h1 class="collection-home-title text-center"><small>Fonds Iconolab</small> {{ collection.verbose_name }}</h1>
- <div class="col-md-3 pull-left">
- {% thumbnail collection.image "250x250" crop=False as im %}
- <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+ <div id="collection-summary" class="row">
+ <div class="col-md-3">
+ {% thumbnail collection.image "300x300" crop=False as im %}
+ <img src="{{ im.url }}" class="img-responsive">
{% endthumbnail %}
- </div>
- <div class="col-md-9 description-container">
-
- <p id="collection-description-short-{{collection.name}}" class="text-justify collection-description">
- {{collection.description | safe}}
- {% if collection.complete_description %}<a id="show-complete-{{collection.name}}" class="show-complete-link" @click="showCompleteDescription('{{collection.name}}')"> Voir plus</a>{% endif %}
- </p>
- <p id="collection-description-complete-{{collection.name}}" class="text-justify collection-description-complete">
- {{collection.complete_description | safe}}
- <a id="hide-complete-{{collection.name}}" class="hide-complete-link" @click="hideCompleteDescription('{{collection.name}}')"> Voir moins</a>
+ <hr>
+ <p>
+ {{ collection.description | safe }}
</p>
</div>
- </div>
- <div id="collection-tabs" class="row tab-selector">
- <div class="col-md-12">
- <ul class="nav nav-tabs">
- <li id="tab-items" role="presentation" class="{% if active_list == 'items' %}active{% endif %}"><a class="collection-home-tab" id="show-items" @click="switchTab('items')">Objets du fonds {{collection.verbose_name}}</a></li>
- <li id="tab-contribution" role="presentation" class="pull-right {% if active_list == 'contributions' %}active{% endif %}"><a class="collection-home-tab" id="show-contribution" @click="switchTab('contribution')">Appels à contribution</a></li>
- <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}"><a class="collection-home-tab" id="show-revised" @click="switchTab('revised')">Annotations les plus révisées</a></li>
- <li id="tab-recent" role="presentation" class="pull-right {% if active_list == 'recent' %}active{% endif %}"><a class="collection-home-tab" id="show-recent" @click="switchTab('recent')">Annotations récentes</a></li>
+ <div class="col-md-9 description-container">
+ <h1>{{ collection.verbose_name }} <small>Fonds Iconolab</small></h1>
+
+ <ul class="nav nav-tabs" role="tablist">
+ <li id="tab-items" role="presentation" class="{% if active_list == 'items' %}active{% endif %}">
+ <a href="#list-items" role="tab" data-toggle="tab">Objets du fonds</a>
+ </li>
+ <li id="tab-contribution" role="presentation" class="pull-right {% if active_list == 'contributions' %}active{% endif %}">
+ <a href="#list-contribution" role="tab" data-toggle="tab">Appels à contribution</a>
+ </li>
+ <li id="tab-revised" role="presentation" class="pull-right {% if active_list == 'revised' %}active{% endif %}">
+ <a href="#list-revised" role="tab" data-toggle="tab">Annotations les plus révisées</a>
+ </li>
+ <li id="tab-recent" role="presentation" class="pull-right {% if active_list == 'recent' %}active{% endif %}">
+ <a href="#list-recent" role="tab" data-toggle="tab">Annotations récentes</a>
+ </li>
</ul>
- </div>
- </div>
- <div class="row">
- <div id="list-recent" class="recent-ann-wrapper collection-home-block col-md-12 {% if active_list == 'recent' %}selected{% endif %}">
- {% include "partials/image_annotations_list.html" with annotation_list=recent_pagination_data.list %}
- {% if recent_list %}
- {% include "partials/collection_home_pagination_links.html" with pagination_data=recent_pagination_data list_identifier="recent" %}
- {% endif %}
- </div>
- </div>
- <div class="row">
- <div id="list-revised" class="revised-ann-wrapper collection-home-block col-md-12 {% if active_list == 'revised' %}selected{% endif %}">
- {% include "partials/image_annotations_list.html" with annotation_list=revised_pagination_data.list %}
- {% if revised_list %}
- {% include "partials/collection_home_pagination_links.html" with pagination_data=revised_pagination_data list_identifier="revised" %}
- {% endif %}
- </div>
- </div>
- <div class="row">
- <div id="list-contribution" class="contributions-ann-wrapper collection-home-block col-md-12 {% if active_list == 'contributions' %}selected{% endif %}">
- {% include "partials/image_annotations_list.html" with annotation_list=contributions_pagination_data.list %}
- {% if contributions_list %}
- {% include "partials/collection_home_pagination_links.html" with pagination_data=contributions_pagination_data list_identifier="contributions" %}
- {% endif %}
- </div>
- </div>
- <div class="row">
- <div id="list-items" class="collection-home-block col-md-12 text-center {% if active_list == 'items' %}selected{% endif %}">
- <ul class="image-list-wrapper list-inline">
- {% for item in items_pagination_data.list %}
- <li class="image-list-li small-image-wrapper panel panel-default">
- <div class="object-infos text-center" style="margin-top: 10px;">
- <a class="btn btn-default btn-xs collection-home-item-btn" href="{% url 'item_detail' collection_name item.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
+
+ <div class="tab-content">
+
+ <div id="list-recent" role="tabpanel" class="tab-pane {% if active_list == 'recent' %}active{% endif %}">
+ {% include "partials/image_annotations_list.html" with annotation_list=recent_pagination_data.list %}
+ {% if recent_list %}
+ {% include "partials/collection_home_pagination_links.html" with pagination_data=recent_pagination_data list_identifier="recent" %}
+ {% endif %}
+ </div>
+ <div id="list-revised" role="tabpanel" class="tab-pane {% if active_list == 'revised' %}active{% endif %}">
+ {% include "partials/image_annotations_list.html" with annotation_list=revised_pagination_data.list %}
+ {% if revised_list %}
+ {% include "partials/collection_home_pagination_links.html" with pagination_data=revised_pagination_data list_identifier="revised" %}
+ {% endif %}
+ </div>
+ <div id="list-contribution" role="tabpanel" class="tab-pane {% if active_list == 'contributions' %}active{% endif %}">
+ {% include "partials/image_annotations_list.html" with annotation_list=contributions_pagination_data.list %}
+ {% if contributions_list %}
+ {% include "partials/collection_home_pagination_links.html" with pagination_data=contributions_pagination_data list_identifier="contributions" %}
+ {% endif %}
+ </div>
+ <div id="list-items" role="tabpanel" class="tab-pane {% if active_list == 'items' %}active{% endif %}">
+ <div class="item-grid">
+ {% for item in items_pagination_data.list %}
+ <div class="item-grid-item">
+ {% include "partials/item_images_preview.html" with item=item %}
+ <div class="object-infos text-center">
+ <a class="btn btn-default btn-xs collection-home-item-btn" href="{% url 'item_detail' collection_name item.item_guid %}"><i class="fa fa-eye"></i> Détail de l'objet</a>
+ </div>
</div>
- {% include "partials/item_images_preview.html" with item=item %}
- </li>
- {% endfor %}
- </ul>
- {% include "partials/collection_home_pagination_links.html" with pagination_data=items_pagination_data list_identifier="items" %}
+ {% endfor %}
+ </div>
+ {% include "partials/collection_home_pagination_links.html" with pagination_data=items_pagination_data list_identifier="items" %}
+ </div>
+
+ </div>
+
</div>
</div>
{% endblock %}
-
-{% block footer_js %}
-<script>
- _descrVue = new Vue(iconolab.DescriptionViewer);
- _descrVue.$mount("#collection-summary");
- _tabsVue = new Vue(iconolab.TabSelector);
- _tabsVue.$mount("#collection-tabs");
-</script>
-{% endblock %}
\ No newline at end of file
--- a/src/iconolab/templates/partials/item_images_preview.html Wed Feb 15 16:42:06 2017 +0100
+++ b/src/iconolab/templates/partials/item_images_preview.html Mon Feb 20 17:12:56 2017 +0100
@@ -4,20 +4,20 @@
{% if item.images.count > 1 %}
{% with item.images_sorted_by_name.first as main_image %}
{% if main_image.wh_ratio < 1.3 %}
- <div class="item-links-portrait text-center" style="display:inline-block; margin: 10px 0px;">
+ <div class="item-links-portrait">
{% thumbnail main_image.media "250x250" crop=False as im %}
- <div class="main-image" style="display:inline-block">
- <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{main_image.image_guid}}">
+ <div class="main-image">
+ <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
<img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
</a>
</div>
{% endthumbnail %}
- <div class="secondary-images-container secondary-images-portrait" style="display:inline-block; margin: 10px">
+ <div class="secondary-images-container secondary-images-portrait">
{% for secondary_image in item.images.all %}
{% if secondary_image != main_image and forloop.counter <= 4 %}
{% thumbnail secondary_image.media "100x100" crop=False as im %}
<div class="secondary-image-portrait">
- <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{secondary_image.image_guid}}">
+ <a href="{% url 'image_detail' item.collection.name secondary_image.image_guid %}">
<img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
</a>
</div>
@@ -27,20 +27,20 @@
</div>
</div>
{% else %}
- <div class="item-links-landscape text-center">
+ <div class="item-links-landscape">
{% thumbnail main_image.media "250x250" crop=False as im %}
- <div class="main-image" style="display:inline-block">
- <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{main_image.image_guid}}">
+ <div class="main-image">
+ <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
<img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
</a>
</div>
{% endthumbnail %}
- <div class="secondary-images-container secondary-images-landscape" style="margin: 10px">
+ <div class="secondary-images-container secondary-images-landscape">
{% for secondary_image in item.images.all %}
{% if secondary_image != main_image and forloop.counter <= 3 %}
{% thumbnail secondary_image.media "100x100" crop=False as im %}
- <div class="secondary-image-landscape pull-left" style="display:inline-block">
- <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{secondary_image.image_guid}}">
+ <div class="secondary-image-landscape pull-left">
+ <a href="{% url 'image_detail' item.collection.name secondary_image.image_guid %}">
<img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
</a>
</div>
@@ -53,13 +53,13 @@
{% endwith %}
{% else %}
{% with item.images.first as main_image %}
- <div class="item-links text-center" style="display:inline-block; margin: 10px 0px;">
+ <div class="main-image">
{% thumbnail main_image.media "250x250" crop=False as im %}
- <a href="{% url 'item_detail' item.collection.name item.item_guid %}?show={{main_image.image_guid}}">
+ <a href="{% url 'image_detail' item.collection.name main_image.image_guid %}">
<img v-el:small-image src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
</a>
{% endthumbnail %}
</div>
{% endwith %}
{% endif %}
-</div>
\ No newline at end of file
+</div>
--- a/src_js/iconolab-bundle/src/components/collectionhome/descriptionviewer/DescriptionViewer.vue Wed Feb 15 16:42:06 2017 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,20 +0,0 @@
-<script>
-export default {
- data: {
-
- },
- mounted() {
- $(".collection-description-complete").hide();
- },
- methods: {
- showCompleteDescription: function(){
- $(".collection-description").hide()
- $(".collection-description-complete").show()
- },
- hideCompleteDescription: function(name){
- $(".collection-description-complete").hide()
- $(".collection-description").show()
- }
- },
-}
-</script>
\ No newline at end of file
--- a/src_js/iconolab-bundle/src/components/collectionhome/tabselector/TabSelector.vue Wed Feb 15 16:42:06 2017 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,24 +0,0 @@
-<script>
-
-export default {
- data () {
- return {}
- },
- mounted () {
- var self=this;
- $(".collection-home-block:not(.selected)").hide();
- },
- methods: {
- switchTab: function(name){
- $(".collection-home-block").removeClass("selected");
- $(".collection-home-block").hide();
- $(".collection-home-tab").parent().removeClass("active");
- $("#list-"+name).show();
- $("#tab-"+name).addClass("active");
-
- }
- }
-}
-
-
-</script>
\ No newline at end of file
--- a/src_js/iconolab-bundle/src/iconolab.scss Wed Feb 15 16:42:06 2017 +0100
+++ b/src_js/iconolab-bundle/src/iconolab.scss Mon Feb 20 17:12:56 2017 +0100
@@ -14,6 +14,31 @@
}
}
+.item-grid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ .item-grid-item {
+ // flex: 1;
+ padding: 0 10px 20px;
+ @media (min-width: $screen-sm-min) {
+ width: 25%;
+ }
+ .main-image {
+ margin-bottom: 10px;
+ img {
+ width: 100%;
+ height: auto;
+ }
+ }
+ .item-image-container {
+ a {
+ display: block;
+ }
+ }
+ }
+}
+
.drawingModeBtn {border: 1px solid orange; cursor: pointer; height: 25px; margin-bottom: 10px}
.form-drawing {border-bottom: 1px solid #C3C3C3; }
@@ -31,8 +56,6 @@
#zoomTarget, .cut-canvas {
border: 1px solid #C3C3C3;
- padding-top: 2px;
- padding-bottom: 2px
}
.no-padding {
@@ -177,18 +200,6 @@
/* GLOBAL HOME PAGE */
-.home-main-button-container{
- position: relative;
- width:0px;
- height: 0px;
-}
-
-.home-main-button{
- position: absolute;
- left: 15px;
- top: 15px
-}
-
.collection-title{
margin-top:0px;
}
@@ -206,10 +217,6 @@
padding-bottom: 15px;
}
-.collection-home-title{
- padding-bottom: 15px;
-}
-
.tab-selector{
margin-top: 15px;
}
@@ -286,10 +293,12 @@
/* - COLLECTION HOME STYLE */
-.collection-summary{
- margin-bottom: 15px;
-}
-
.description-col{
padding: 10px;
}
+
+#collection-summary {
+ .tab-pane {
+ padding: 30px 0;
+ }
+}
--- a/src_js/iconolab-bundle/src/main.js Wed Feb 15 16:42:06 2017 +0100
+++ b/src_js/iconolab-bundle/src/main.js Mon Feb 20 17:12:56 2017 +0100
@@ -8,8 +8,6 @@
import Zoomview from './components/zoomview/Zoomview.vue'
import MergeTool from './components/mergetool/MergeTool.vue'
import CollectionSelector from './components/collectionselector/CollectionSelector.vue'
-import TabSelector from './components/collectionhome/tabselector/TabSelector.vue'
-import DescriptionViewer from './components/collectionhome/descriptionviewer/DescriptionViewer.vue'
import DiffViewer from './components/diffviewer/diffviewer.vue'
import jsondiffpatch from 'jsondiffpatch'
import Editor from './components/editor'
@@ -23,8 +21,6 @@
JsDiff: Diff,
JsonDiff: jsondiffpatch,
CollectionSelector: CollectionSelector,
- TabSelector: TabSelector,
- DescriptionViewer: DescriptionViewer,
VueComponents : {
Typeahead: Typeahead,
MergeTool: MergeTool,