A Python content management system designed for kirsle.net featuring a blog, comments and photo albums. https://rophako.kirsle.net/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

60 lines
1.8 KiB

  1. {% extends "layout.html" %}
  2. {% block title %}Arrange Albums{% endblock %}
  3. {% block content %}
  4. <h1>Arrange Albums</h1>
  5. Drag and drop your albums in the positions you want them in.<p>
  6. <form name="arrange" id="arrange-form" action="{{ url_for('photo.arrange_albums') }}" method="POST">
  7. <input type="hidden" name="token" value="{{ csrf_token() }}">
  8. <input type="hidden" name="order" id="order" value="">
  9. <button type="submit" class="btn btn-primary">Save Changes</button>
  10. </form>
  11. <p>
  12. <ul id="arrange-photos" class="photo-grid">
  13. {% for album in albums %}
  14. <li data-name="{{ album['name'] }}" class="portrait">
  15. <div class="dummy"></div>
  16. <div class="photo-grid-item">
  17. <a href="{{ url_for('photo.album_index', name=album['name']) }}">
  18. <img src="{{ app['photo_url'] }}/{{ album['cover'] }}" width="100%" height="100%">
  19. <span class="name">{{ album["name"] }}</span>
  20. </a>
  21. </div>
  22. </li>
  23. {% endfor %}
  24. </ul>
  25. <div class="clear"></div>
  26. {% endblock %}
  27. {% block scripts %}
  28. <link rel="stylesheet" type="text/css" media="all" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css">
  29. <script src="/js/jquery-ui-1.10.4.custom.js"></script>
  30. <script>
  31. $(document).ready(function() {
  32. var $photos = $("#arrange-photos"),
  33. $form = $("#arrange-form"),
  34. $order = $("#order");
  35. var doArrangePhotos = function() {
  36. var order = [];
  37. // Get the list of elements.
  38. var list = $photos.children().each(function() {
  39. var name = $(this).data("name");
  40. order.push(name);
  41. });
  42. $order.val(order.join(";"));
  43. return true;
  44. };
  45. $form.submit(doArrangePhotos);
  46. $photos.sortable();
  47. $photos.disableSelection();
  48. });
  49. </script>
  50. {% endblock %}