diff --git a/amiibofindr/apps/amiibo/views.py b/amiibofindr/apps/amiibo/views.py index 841dcc6..7b3519a 100644 --- a/amiibofindr/apps/amiibo/views.py +++ b/amiibofindr/apps/amiibo/views.py @@ -87,9 +87,14 @@ class UserAmiiboView(View): '+-trade': 'toggle_trade', } + ajax = { + 'detail': 'amiibo/widgets/relation_header_buttons.html', + 'list': 'amiibo/widgets/amiibo-card.html', + } + def get(self, request, amiibo, action): - amiibo = get_object_or_404(Amiibo, pk=amiibo) - # amiibo = obj.as_type() + obj = get_object_or_404(Amiibo, pk=amiibo) + amiibo = obj.as_type() if action in self.actions: method = getattr(self, self.actions[action], None) if method: @@ -99,13 +104,9 @@ class UserAmiiboView(View): # Handle templating request_from = request.GET.get('from', None) - if request_from == 'detail': - return render(request, - 'amiibo/widgets/relation_header_buttons.html', - { - 'amiibo': amiibo, - 'item': amiibo - }) + if request_from in self.ajax: + return render(request, self.ajax[request_from], + { 'amiibo': amiibo, 'request': request }) return HttpResponseRedirect(amiibo.as_type().get_absolute_url()) @@ -120,12 +121,12 @@ class UserAmiiboView(View): def add_trade(self, request, amiibo): if services.is_owned_by(amiibo, request.user): services.user_add_trade(request.user, amiibo) - # TODO: Add message + # TODO: Add message def remove_trade(self, request, amiibo): if services.is_owned_by(amiibo, request.user): services.user_remove_trade(request.user, amiibo) - # TODO: Add message + # TODO: Add message def toggle_trade(self, request, amiibo): if services.is_owned_by(amiibo, request.user): diff --git a/amiibofindr/static/app/global.js b/amiibofindr/static/app/global.js index f960614..4ca0a17 100644 --- a/amiibofindr/static/app/global.js +++ b/amiibofindr/static/app/global.js @@ -16,6 +16,12 @@ $(function(){ position: 'left center' }); + $(document).on('click', '[data-toggle]', function(event) { + var $el = event.target; + var $target = $($el.getAttribute('data-toggle')); + $target.slideToggle(200); + }); + $('.right.menu.open').on("click",function(e){ e.preventDefault(); $('.ui.vertical.menu').toggle(); diff --git a/amiibofindr/static/app/relation.js b/amiibofindr/static/app/relation.js index da6ab2a..49fa1ec 100644 --- a/amiibofindr/static/app/relation.js +++ b/amiibofindr/static/app/relation.js @@ -1,6 +1,6 @@ (function() { var RelationComponent = function() { - this.relations = document.querySelectorAll('[data-handle="relation"]'); + this.relationsQuerySelector = '[data-handle="relation"]'; this.initialize(); }; @@ -10,12 +10,18 @@ // Prepare handlers var linkHandler = function(event) { event.preventDefault(); - self.click(event.target); + event.stopPropagation(); + + var target = event.target; + + // Handles clicking in the icon + if (event.target.href === undefined) + target = event.target.parentNode + + self.click(target); }; - [].forEach.call(this.relations, function(buttons) { - $(buttons).on('click', 'a', linkHandler); - }); + $(document).on('click', this.relationsQuerySelector + ' a', linkHandler); }; RelationComponent.prototype.click = function(element) { @@ -32,17 +38,24 @@ var self = this; // loader.addClass('loading'); + // If list, the entire card is the container + if (from === "list") container = loader; + $.ajax({ url: href, data: { from: from }, success: function(result) { - self.handleResult(loader, container, result); + self.handleResult(loader, from, container, result); } }); }; - RelationComponent.prototype.handleResult = function(loader, container, result) { - container.html(result) + RelationComponent.prototype.handleResult = function(loader, from, container, result) { + if (from === 'list') { + container.replaceWith(result); + } else { + container.html(result) + } // loader.removeClass('loading'); }; diff --git a/amiibofindr/static/less/style.less b/amiibofindr/static/less/style.less index 3208bda..d164e9b 100644 --- a/amiibofindr/static/less/style.less +++ b/amiibofindr/static/less/style.less @@ -1,5 +1,5 @@ // Semantic-UI -@import "../semantic/semantic.css"; +@import "../semantic/semantic.min.css"; .price-converted { @@ -10,6 +10,10 @@ } } +.hidden { + display: none; +} + .underlined { text-decoration: underline; } @@ -34,4 +38,14 @@ .nowrap { white-space: nowrap; -} \ No newline at end of file +} + +.relation-buttons { + position: absolute; + left: 6px; + right: 6px; + bottom: 6px; + width: 100%; + text-align: center; + z-index: 30; +} diff --git a/amiibofindr/templates/amiibo/collection.html b/amiibofindr/templates/amiibo/collection.html index aeacb72..ffad00b 100644 --- a/amiibofindr/templates/amiibo/collection.html +++ b/amiibofindr/templates/amiibo/collection.html @@ -19,7 +19,7 @@ {% endif %} {% endblock %} -{% block js_views %}{{ block.super }},collection-search{% endblock %} +{% block js_views %}{{ block.super }},collection-search,relation{% endblock %} {% block main_content %}
diff --git a/amiibofindr/templates/amiibo/widgets/amiibo-card.html b/amiibofindr/templates/amiibo/widgets/amiibo-card.html index 96a9a80..324c392 100644 --- a/amiibofindr/templates/amiibo/widgets/amiibo-card.html +++ b/amiibofindr/templates/amiibo/widgets/amiibo-card.html @@ -1,18 +1,32 @@ {% load staticfiles thumbnail i18n %} +
-
-
- {% if amiibo.is_card %} - {{ amiibo.name }} - {% else %} - {{ amiibo.name }} + {% if amiibo.pk in USER_AMIIBO_OWNED %}green{% endif %} + {% if amiibo.pk in USER_AMIIBO_TRADE %}teal{% endif %}" + data-amiibo-names="{{ amiibo.get_all_names|lower }}" + data-loader="{{ amiibo.pk }}"> + +
+
+ {% if amiibo.is_card %} + {{ amiibo.name }} + {% else %} + {{ amiibo.name }} + {% endif %} +
+ {% if request.user.is_authenticated %} +
+ {% include 'amiibo/widgets/relation_list_buttons.html' %} +
{% endif %}
-
+
-
{{ amiibo.name }}
+ {{ amiibo.name }}
diff --git a/amiibofindr/templates/amiibo/widgets/relation_list_buttons.html b/amiibofindr/templates/amiibo/widgets/relation_list_buttons.html new file mode 100644 index 0000000..13c9086 --- /dev/null +++ b/amiibofindr/templates/amiibo/widgets/relation_list_buttons.html @@ -0,0 +1,21 @@ +{% load i18n %} + +{% if amiibo.pk in USER_AMIIBO_OWNED %} + + + + + +{% else %} + + {% if amiibo.pk in USER_AMIIBO_WISHLIST %} + + {% else %} + + {% endif %} +{% endif %}