Skip to content

Commit 77e0136

Browse files
XpirixXpirix
authored
Merge pull request #40 from Xpirix/reorder_feature
Fix reorder feature, add jquery-ui
2 parents 1119dda + 5c059a9 commit 77e0136

File tree

6 files changed

+128
-103
lines changed

6 files changed

+128
-103
lines changed

‎django_project/base/static/js/jquery-ui.min.js‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎django_project/base/static/style/scss/style.scss‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -379,4 +379,23 @@ a.is-active > span {
379379

380380
.rounded .rich-right img {
381381
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
382-
}
382+
}
383+
384+
385+
ul .order {
386+
list-style-type: none;
387+
cursor: move;
388+
padding: 10px;
389+
margin-left: -40px !important;
390+
margin-right: 0px !important;
391+
}
392+
393+
.order:hover {
394+
background-color: #EEEEEE;
395+
}
396+
397+
ul.ui-sortable-disabled .order{
398+
background-color: white;
399+
color: darkgrey;
400+
cursor: default;
401+
}

‎django_project/changes/static/js/category.js‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -28,41 +28,31 @@ function onStopSortable(e, ui) {
2828
data: JSON.stringify(categories),
2929
success: function (response) {
3030
sortableEnable();
31-
if($('#order-saved').is(":visible"))
32-
{
33-
$('#order-saved').hide();
34-
showOrderSaved();
35-
} else {
36-
showOrderSaved();
37-
}
31+
showOrderSaved();
3832
},
3933
error: function (response) {
4034
console.log(response);
4135
sortableEnable();
42-
if($('#order-not-saved').is(":visible"))
43-
{
44-
$('#order-not-saved').hide();
45-
showOrderNotSaved();
46-
} else {
47-
showOrderNotSaved();
48-
}
36+
showOrderNotSaved();
4937
}
50-
5138
});
5239
}
53-
5440
}
5541

5642
function showOrderSaved() {
57-
$('#order-saved').fadeIn( "fast", function() {
58-
$('#order-saved').fadeOut(2000);
59-
});
43+
var $el = $('#order-saved');
44+
$el.removeClass('is-hidden');
45+
setTimeout(function() {
46+
$el.addClass('is-hidden');
47+
}, 2000);
6048
}
6149

6250
function showOrderNotSaved() {
63-
$('#order-not-saved').fadeIn( "fast", function() {
64-
$('#order-not-saved').fadeOut(2000);
65-
});
51+
var $el = $('#order-not-saved');
52+
$el.removeClass('is-hidden');
53+
setTimeout(function() {
54+
$el.addClass('is-hidden');
55+
}, 2000);
6656
}
6757

6858
function sortableEnable() {

‎django_project/changes/templates/category/list.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@ <h1 class="mb-0">
2929
</span>
3030
<span>New Category</span>
3131
</a>
32-
{% comment %} {% if user.is_staff or user in the_project.changelog_managers.all or user == the_project.owner %}
32+
{% if user.is_staff or user in the_project.changelog_managers.all or user == the_project.owner %}
3333
<a class="button is-light"
3434
href='{% url "category-order" %}'
3535
title="Order Categories">
3636
<span class="icon">
3737
<i class="fas fa-sort"></i>
3838
</span>
3939
</a>
40-
{% endif %} {% endcomment %}
40+
{% endif %}
4141
</div>
4242
<span id="order-saved" hidden class="notification is-success is-light" style="font-size: 9pt; padding: 3px; font-style: italic;">
4343
order saved
@@ -50,7 +50,7 @@ <h1 class="mb-0">
5050
</div>
5151

5252
{% if num_categories == 0 %}
53-
<h3 class="subtitle is-5">No categories are defined, but you can
53+
<h3 class="subtitle is-5">No categories are defined.
5454
<a class="button is-small is-light"
5555
href='{% url "category-create" %}'>
5656
create one</a>.

‎django_project/changes/templates/category/order.html‎

Lines changed: 63 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,84 @@
11
{% extends "base_with_sidebar.html" %}
2-
{% load thumbnail %}
2+
{% load static thumbnail %}
33

44
{% block title %}Categories - {{ block.super }}{% endblock %}
55

66
{% block extra_head %}
77
{% endblock %}
88

9+
{% block js_head %}
10+
<script src="{% static 'js/jquery-ui.min.js' %}"></script>
11+
{% endblock js_head %}
12+
913
{% block page_title %}
1014
<h1 class="title">Categories (all)</h1>
1115
{% endblock page_title %}
1216

1317
{% block content %}
1418

15-
<span id="order-saved" hidden class="notification is-success is-light" style="font-size: 9pt; padding: 3px;font-style: italic;">
16-
order saved
17-
</span>
18-
<span id="order-not-saved" hidden class="notification is-danger is-light" style="font-size: 9pt; padding: 3px;font-style: italic;">
19-
order not saved
20-
</span>
19+
<div class="box-content">
2120

22-
<div class="columns is-vcentered">
23-
<div class="column">
24-
<h1 class="title mb-0">
25-
<span class="icon">
26-
<i class="fas fa-sort"></i>
27-
</span>
28-
Order Categories
29-
</h1>
30-
</div>
31-
<div class="column is-narrow">
32-
<div class="buttons mb-0 mt-3">
33-
<a class="button is-light"
34-
href='{% url "category-list" %}'
35-
data-title="Category List">
21+
<div class="columns is-vcentered">
22+
<div class="column">
23+
<h1 class="title mb-0">
3624
<span class="icon">
37-
<i class="fas fa-list"></i>
25+
<i class="fas fa-sort"></i>
26+
</span>
27+
Order Categories
28+
<span id="order-saved" class="notification is-success is-light is-hidden" style="font-size: 9pt; padding: 3px;font-style: italic;">
29+
order saved
3830
</span>
39-
</a>
31+
<span id="order-not-saved" class="notification is-danger is-light is-hidden" style="font-size: 9pt; padding: 3px;font-style: italic;">
32+
order not saved
33+
</span>
34+
</h1>
35+
</div>
36+
<div class="column is-narrow">
37+
<div class="buttons mb-0 mt-3">
38+
<a class="button is-light"
39+
href='{% url "category-list" %}'
40+
data-title="Category List">
41+
<span class="icon">
42+
<i class="fas fa-list"></i>
43+
</span>
44+
</a>
45+
</div>
4046
</div>
4147
</div>
42-
</div>
43-
{% if num_categories == 0 %}
44-
<h3 class="subtitle">No categories are defined, but you can</h3>
45-
{% endif %}
46-
<ul id="sortable" data-url="{% url "category-submit-order" %}">
47-
{% for category in categories %}
48-
<li class="box" style="margin-top:6px;" id="{{ category.id }}-{{ category.name }}">
49-
<div class="media">
50-
<div class="media-left">
51-
{% if category.image_file %}
52-
<a href="{{ category.image_file.url }}">
53-
{% thumbnail category.image_file "50x50" crop="center" as im %}
54-
<figure class="image is-50x50">
55-
<img class="is-rounded"
56-
src="{{ im.url }}"
57-
width="{{ im.width }}"
58-
height="{{ im.height }}" />
59-
</figure>
60-
{% endthumbnail %}
61-
</a>
62-
{% endif %}
63-
</div>
64-
<div class="media-content">
65-
<p>
66-
<span class="icon">
67-
<i class="fas fa-bars"></i>
68-
</span>
69-
{{ category.name }}
70-
</p>
48+
{% if num_categories == 0 %}
49+
<h3 class="subtitle">No categories are defined.</h3>
50+
{% endif %}
51+
<ul id="sortable" data-url="{% url "category-submit-order" %}">
52+
{% for category in categories %}
53+
<li class="order card" id="{{ category.id }}-{{ category.name }}">
54+
<div class="media">
55+
<div class="media-left">
56+
{% if category.image_file %}
57+
<a href="{{ category.image_file.url }}">
58+
{% thumbnail category.image_file "50x50" crop="center" as im %}
59+
<figure class="image is-50x50">
60+
<img class="is-rounded"
61+
src="{{ im.url }}"
62+
width="{{ im.width }}"
63+
height="{{ im.height }}" />
64+
</figure>
65+
{% endthumbnail %}
66+
</a>
67+
{% endif %}
68+
</div>
69+
<div class="media-content">
70+
<p>
71+
<span class="icon">
72+
<i class="fas fa-bars"></i>
73+
</span>
74+
{{ category.name }}
75+
</p>
76+
</div>
7177
</div>
72-
</div>
73-
</li>
74-
{% endfor %}
75-
</ul>
76-
<hr />
78+
</li>
79+
{% endfor %}
80+
</ul>
81+
</div>
82+
7783

7884
{% endblock %}

‎django_project/changes/templates/entry/order.html‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
{% extends "base_with_sidebar.html" %}
2+
{% load static %}
23
{% load thumbnail %}
34

45
{% block title %}Entries - {{ block.super }}{% endblock %}
56

67
{% block extra_head %}
78
{% endblock %}
89

10+
{% block js_head %}
11+
<script src="{% static 'js/jquery-ui.min.js' %}"></script>
12+
{% endblock js_head %}
13+
914
{% block page_title %}
1015
<h1>Entries</h1>
1116
{% endblock page_title %}
@@ -17,10 +22,10 @@ <h1 class="title is-4">
1722
<i class="fas fa-sort"></i>
1823
</span>
1924
Order Entries for {{ category.name }}
20-
<span id="order-saved" hidden class="tag is-success is-light" style="font-size: 9pt; padding: 3px; font-style: italic;">
25+
<span id="order-saved" class="tag is-success is-light is-hidden" style="font-size: 9pt; padding: 3px; font-style: italic;">
2126
order saved
2227
</span>
23-
<span id="order-not-saved" hidden class="tag is-danger is-light" style="font-size: 9pt; padding: 3px; font-style: italic;">
28+
<span id="order-not-saved" class="tag is-danger is-light is-hidden" style="font-size: 9pt; padding: 3px; font-style: italic;">
2429
order not saved
2530
</span>
2631
<div class="buttons is-pulled-right" style="margin-top: 5px;">
@@ -33,25 +38,24 @@ <h1 class="title is-4">
3338
</a>
3439
</div>
3540
</h1>
41+
{% if entry.count == 0 %}
42+
<h3 class="subtitle is-5">No entries are defined.</h3>
43+
{% endif %}
44+
<ul id="sortable" data-url="{% url "entry-submit-order" version_pk=version.pk category_pk=category.pk %}">
45+
{% for entry in object_list %}
46+
<li class="order card" style="margin-top:6px;" id="{{ entry.id }}-{{ entry.title }}">
47+
<div class="content">
48+
<p>
49+
<span class="icon" style="margin-right: 20px;">
50+
<i class="fas fa-bars"></i>
51+
</span>
52+
{{ entry.title }}
53+
</p>
54+
</div>
55+
</li>
56+
{% endfor %}
57+
</ul>
3658
</div>
37-
{% if entry.count == 0 %}
38-
<h3 class="subtitle is-5">No entries are defined.</h3>
39-
{% endif %}
40-
<ul id="sortable" data-url="{% url "entry-submit-order" version_pk=version.pk category_pk=category.pk %}">
41-
{% for entry in object_list %}
42-
<li class="" style="margin-top:6px;" id="{{ entry.id }}-{{ entry.title }}">
43-
<div class="content">
44-
<p>
45-
<span class="icon" style="margin-right: 20px;">
46-
<i class="fas fa-bars"></i>
47-
</span>
48-
{{ entry.title }}
49-
</p>
50-
</div>
51-
</li>
52-
{% endfor %}
53-
</ul>
54-
<hr />
5559

5660
{% endblock %}
5761

0 commit comments

Comments
 (0)
⚡