Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

139 lines
4.3KB

  1. {% extends 'base.html' %}
  2. {% block content %}
  3. <!-- <div class="cell-margin">
  4. <div class="mb-8">
  5. <h2>
  6. {% block title %}
  7. {% autoescape false %}
  8. {{ type + 's' | replace(" ","<br>") }}
  9. {% endautoescape %}
  10. {% endblock %}
  11. </h2>
  12. <p>
  13. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget viverra magna. Nam in ante ultricies
  14. purus feugiat vestibulum et ac erat. Donec in sagittis ante. Maecenas non mauris et eros commodo fringilla.
  15. Integer accumsan ullamcorper diam, non rhoncus tellus molestie ut. Maecenas finibus pretium dolor ac sagittis.
  16. </p>
  17. </div>
  18. </div> -->
  19. <script>
  20. function filter() {
  21. return {
  22. filterOpen: false,
  23. init() {
  24. // console.log(this.showRelated)
  25. }
  26. }
  27. }
  28. </script>
  29. <div class="" x-data="filter()">
  30. <div
  31. class="search fixed z-20 top-0 left-0 w-[20rem] h-screen bg-white cell-padding "
  32. x-show="filterOpen"
  33. style="box-shadow:0 0 2rem rgba(0,0,0,0.3)"
  34. @click.outside = "filterOpen = false"
  35. >
  36. <div class=" p-2 pt-4 gap-8 bg-white ">
  37. {% if practices_filter %}
  38. <details class="" open>
  39. <summary>Practices</summary>
  40. <div class="">
  41. {% for practice in practices_filter %}
  42. <div {% if request.args.get('practice')==practice[0]|string %} class="active" {% endif %}>
  43. <a href="/{{type + 's'}}?practice={{practice[0]}}">{{ practice[1] }}</a>
  44. </div>
  45. {% endfor %}
  46. </div>
  47. </details>
  48. {% endif %}
  49. {% if year_filter %}
  50. <details class="">
  51. <summary>Year</summary>
  52. <div id="filter-year" class="collapse filter-items">
  53. {% for year in year_filter %}
  54. <li {% if request.args.get('year')==year %} class="active" {% endif %}>
  55. <a href="/books?year={{year}}">{{ year }}</a>
  56. </li>
  57. {% endfor %}
  58. </div>
  59. </details>
  60. {% endif %}
  61. {% if typology_filter %}
  62. <details class="">
  63. <summary class="">Typology category</summary>
  64. <div class="">
  65. {% for typology in typology_filter %}
  66. <div {% if request.args.get('typology')==typology %} class="active" {% endif %}>
  67. <a href="/books?typology={{typology}}">{{ typology }}</a>
  68. </div>
  69. {% endfor %}
  70. </div>
  71. </details>
  72. {% endif %}
  73. {% if languages_filter %}
  74. <details class="">
  75. <summary>Scripting languages</summary>
  76. <div class="">
  77. {% for language in languages_filter %}
  78. <div {% if request.args.get('scriptingLanguage')==language %} class="active" {% endif %}>
  79. <a href="/tools?scriptingLanguage={{language}}">{{ language }}</a>
  80. </div>
  81. {% endfor %}
  82. </div>
  83. </details>
  84. {% endif %}
  85. {% if licenses_filter %}
  86. <details class="min-w-[10rem]">
  87. <summary>License</summary>
  88. <div class="">
  89. {% for license in licenses_filter %}
  90. <div {% if request.args.get('license')==license %} class="active" {% endif %}>
  91. <a href="/tools?license={{license}}">{{ license }}</a>
  92. </div>
  93. {% endfor %}
  94. </div>
  95. </details>
  96. {% endif %}
  97. </div>
  98. </div>
  99. <div class="flex justify-between mx-4 my-8">
  100. <div class="cursor-pointer" @click="filterOpen = true">← Show filters</div>
  101. <div class="">
  102. <input type="checkbox" name="filter-open" x-model="showRelated" id=""> Also show everything related
  103. </div>
  104. </div>
  105. <div class="grid lg:grid-cols-3" x-show="!showRelated">
  106. {% for resource in resources %}
  107. {{ resource_small(resource) }}
  108. {% endfor %}
  109. </div>
  110. <div x-show="showRelated">
  111. {% for resource in resources %}
  112. <div class="w-full overflow-x-scroll">
  113. <div class="grid lg:grid-rows-3 grid-flow-col mb-16">
  114. <div class="w-[25rem] shrink-0 row-span-3 h-full">
  115. {{ resource_small(resource) }}
  116. </div>
  117. <div class="w-[25rem] cell row-start-1">
  118. Something Related
  119. </div>
  120. <div class="w-[25rem] cell shrink-0 row-start-1">
  121. Something Related
  122. </div>
  123. <div class="w-[25rem] cell shrink-0 row-start-1">
  124. Something Related
  125. </div>
  126. <div class="w-[25rem] cell shrink-0 row-start-1">
  127. Something Related
  128. </div>
  129. </div>
  130. </div>
  131. {% endfor %}
  132. </div>
  133. </div>
  134. {% endblock %}