trestle 0.9.8 → 0.10.0.pre

Sign up to get free protection for your applications and to get access to all the features.
Files changed (347) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/rspec.yml +34 -4
  3. data/.gitignore +7 -0
  4. data/Gemfile +5 -1
  5. data/README.md +2 -1
  6. data/app/assets/bundle/trestle/admin.css +23 -0
  7. data/app/assets/bundle/trestle/admin.js +83 -0
  8. data/app/assets/bundle/trestle/fa-brands-400.ttf +0 -0
  9. data/app/assets/bundle/trestle/fa-brands-400.woff2 +0 -0
  10. data/app/assets/bundle/trestle/fa-regular-400.ttf +0 -0
  11. data/app/assets/bundle/trestle/fa-regular-400.woff2 +0 -0
  12. data/app/assets/bundle/trestle/fa-solid-900.ttf +0 -0
  13. data/app/assets/bundle/trestle/fa-solid-900.woff2 +0 -0
  14. data/app/assets/bundle/trestle/locale/cs.js +110 -0
  15. data/app/assets/bundle/trestle/locale/de.js +116 -0
  16. data/app/assets/bundle/trestle/locale/en.js +329 -0
  17. data/app/assets/bundle/trestle/locale/es-MX.js +109 -0
  18. data/app/assets/bundle/trestle/locale/es.js +109 -0
  19. data/app/assets/bundle/trestle/locale/fr.js +111 -0
  20. data/app/assets/bundle/trestle/locale/ko.js +111 -0
  21. data/app/assets/bundle/trestle/locale/lv.js +109 -0
  22. data/app/assets/bundle/trestle/locale/nl.js +96 -0
  23. data/app/assets/bundle/trestle/locale/pl.js +99 -0
  24. data/app/assets/bundle/trestle/locale/pt-BR.js +98 -0
  25. data/app/assets/bundle/trestle/locale/vi.js +116 -0
  26. data/app/assets/bundle/trestle/locale/zh-CN.js +109 -0
  27. data/app/assets/bundle/trestle/photoswipe-7aa1aec9c3c1fd65c382.digested.js +6 -0
  28. data/app/assets/sprockets/trestle/custom.css +1 -0
  29. data/app/assets/sprockets/trestle/icons/font-awesome.css.erb +32 -0
  30. data/app/assets/sprockets/trestle/manifest.js +4 -0
  31. data/app/assets/stylesheets/trestle/custom.css +6 -1
  32. data/app/controllers/concerns/trestle/controller/helpers.rb +2 -0
  33. data/app/controllers/concerns/trestle/controller/location.rb +1 -6
  34. data/app/controllers/concerns/trestle/controller/modal.rb +23 -0
  35. data/app/controllers/concerns/trestle/controller/toolbars.rb +1 -1
  36. data/app/controllers/concerns/trestle/controller/turbo.rb +21 -0
  37. data/app/controllers/concerns/trestle/resource/controller/actions.rb +40 -29
  38. data/app/controllers/concerns/trestle/resource/controller/redirection.rb +7 -5
  39. data/app/controllers/trestle/admin_controller.rb +4 -0
  40. data/app/controllers/trestle/application_controller.rb +2 -1
  41. data/app/helpers/trestle/card_helper.rb +2 -2
  42. data/app/helpers/trestle/flash_helper.rb +10 -0
  43. data/app/helpers/trestle/form_helper.rb +3 -2
  44. data/app/helpers/trestle/format_helper.rb +2 -1
  45. data/app/helpers/trestle/i18n_helper.rb +46 -7
  46. data/app/helpers/trestle/modal_helper.rb +34 -0
  47. data/app/helpers/trestle/navigation_helper.rb +3 -1
  48. data/app/helpers/trestle/tab_helper.rb +1 -1
  49. data/app/helpers/trestle/toolbars_helper.rb +1 -1
  50. data/app/helpers/trestle/turbo_frame_helper.rb +34 -0
  51. data/app/helpers/trestle/url_helper.rb +7 -4
  52. data/app/views/layouts/trestle/admin.html.erb +16 -18
  53. data/app/views/layouts/trestle/admin.turbo_stream.erb +11 -0
  54. data/app/views/layouts/trestle/modal.html.erb +5 -0
  55. data/app/views/trestle/_i18n.html.erb +12 -0
  56. data/app/views/trestle/_theme.html.erb +15 -0
  57. data/app/views/trestle/application/_header.html.erb +1 -1
  58. data/app/views/trestle/application/_layout.html.erb +6 -3
  59. data/app/views/trestle/application/_modal.html.erb +36 -0
  60. data/app/views/trestle/application/_tabs.html.erb +4 -4
  61. data/app/views/trestle/flash/_alert.html.erb +1 -1
  62. data/app/views/trestle/flash/_debug.html.erb +1 -1
  63. data/app/views/trestle/resource/_form.html.erb +5 -0
  64. data/app/views/trestle/resource/_scopes.html.erb +1 -1
  65. data/app/views/trestle/resource/create.turbo_stream.erb +5 -0
  66. data/app/views/trestle/resource/destroy.turbo_stream.erb +1 -0
  67. data/app/views/trestle/resource/edit.html.erb +4 -2
  68. data/app/views/trestle/resource/index.html.erb +12 -10
  69. data/app/views/trestle/resource/new.html.erb +4 -2
  70. data/app/views/trestle/resource/show.html.erb +4 -2
  71. data/app/views/trestle/resource/update.turbo_stream.erb +5 -0
  72. data/app/views/trestle/shared/_sidebar.html.erb +9 -9
  73. data/config/locales/vi.yml +1 -1
  74. data/frontend/css/components/_alerts.scss +19 -17
  75. data/frontend/css/components/_background.scss +7 -35
  76. data/frontend/css/components/_badges.scss +31 -0
  77. data/frontend/css/components/_breadcrumbs.scss +4 -4
  78. data/frontend/css/components/_buttons.scss +5 -4
  79. data/frontend/css/components/_datepicker.scss +12 -8
  80. data/frontend/css/components/_dropdown.scss +23 -3
  81. data/frontend/css/components/{_fields.scss → _forms.scss} +16 -3
  82. data/frontend/css/components/_media-grid.scss +52 -44
  83. data/frontend/css/components/_modal.scss +33 -4
  84. data/frontend/css/components/_pagination.scss +1 -1
  85. data/frontend/css/components/_photoswipe.scss +8 -0
  86. data/frontend/css/components/_popover.scss +1 -0
  87. data/frontend/css/components/_scopes.scss +1 -1
  88. data/frontend/css/components/_select.scss +161 -31
  89. data/frontend/css/components/_table.scss +60 -65
  90. data/frontend/css/components/_tabs.scss +10 -3
  91. data/frontend/css/components/_tags.scss +71 -16
  92. data/frontend/css/components/_toolbars.scss +18 -31
  93. data/frontend/css/components/_turbo.scss +3 -0
  94. data/frontend/css/core/_bootstrap.scss +46 -0
  95. data/frontend/css/core/_dependencies.scss +4 -3
  96. data/frontend/css/core/_functions.scss +39 -0
  97. data/frontend/css/core/_mixins.scss +3 -40
  98. data/frontend/css/core/_theme.scss +258 -0
  99. data/frontend/css/core/_typography.scss +10 -1
  100. data/frontend/css/icons/_fontawesome.scss +3 -15
  101. data/frontend/css/index.scss +12 -6
  102. data/frontend/css/layout/_base.scss +3 -3
  103. data/frontend/css/layout/_content.scss +11 -7
  104. data/frontend/css/layout/_footer.scss +1 -1
  105. data/frontend/css/layout/_header.scss +5 -3
  106. data/frontend/css/layout/_navigation.scss +2 -2
  107. data/frontend/css/layout/_sidebar.scss +19 -9
  108. data/frontend/css/support/_sprockets.scss +2 -0
  109. data/frontend/css/support/_webpack.scss +2 -0
  110. data/frontend/css/variables/_bootstrap.scss +134 -40
  111. data/frontend/css/variables/_maps.scss +15 -0
  112. data/frontend/css/variables/_trestle.scss +55 -26
  113. data/frontend/js/controllers/application_controller.js +17 -0
  114. data/frontend/js/controllers/checkbox_select_controller.js +43 -0
  115. data/frontend/js/controllers/confirm_controller.js +115 -0
  116. data/frontend/js/controllers/confirm_delete_controller.js +11 -0
  117. data/frontend/js/controllers/datepicker_controller.js +12 -0
  118. data/frontend/js/controllers/datetimepicker_controller.js +13 -0
  119. data/frontend/js/controllers/deprecated/init_controller.js +9 -0
  120. data/frontend/js/controllers/flatpickr_controller.js +50 -0
  121. data/frontend/js/controllers/follow_url_controller.js +36 -0
  122. data/frontend/js/controllers/form_error_controller.js +24 -0
  123. data/frontend/js/controllers/form_loading_controller.js +50 -0
  124. data/frontend/js/controllers/gallery_controller.js +10 -0
  125. data/frontend/js/controllers/index.js +19 -0
  126. data/frontend/js/controllers/keyboard_submit_controller.js +25 -0
  127. data/frontend/js/controllers/lightbox_controller.js +160 -0
  128. data/frontend/js/controllers/mobile_sidebar_controller.js +30 -0
  129. data/frontend/js/controllers/modal_controller.js +36 -0
  130. data/frontend/js/controllers/modal_frame_controller.js +11 -0
  131. data/frontend/js/controllers/modal_trigger_controller.js +74 -0
  132. data/frontend/js/{components/navigation.js → controllers/navigation_controller.js} +14 -10
  133. data/frontend/js/controllers/navigation_tooltip_controller.js +32 -0
  134. data/frontend/js/controllers/popover_controller.js +87 -0
  135. data/frontend/js/controllers/reloadable_controller.js +34 -0
  136. data/frontend/js/controllers/select_controller.js +49 -0
  137. data/frontend/js/controllers/sidebar_controller.js +33 -0
  138. data/frontend/js/controllers/tab_errors_controller.js +45 -0
  139. data/frontend/js/controllers/tabs_controller.js +45 -0
  140. data/frontend/js/controllers/timepicker_controller.js +14 -0
  141. data/frontend/js/controllers/toggle_attr_controller.js +27 -0
  142. data/frontend/js/controllers/toggle_class_controller.js +27 -0
  143. data/frontend/js/controllers/tooltip_controller.js +13 -0
  144. data/frontend/js/controllers/wrapper_controller.js +43 -0
  145. data/frontend/js/core/backdrop.js +100 -0
  146. data/frontend/js/core/error_modal.js +65 -0
  147. data/frontend/js/core/fetch.js +32 -0
  148. data/frontend/js/core/i18n.js +24 -10
  149. data/frontend/js/core/modal.js +52 -0
  150. data/frontend/js/core/stream_actions.js +56 -0
  151. data/frontend/js/core/turbo_errors.js +9 -0
  152. data/frontend/js/{core → deprecated}/events.js +1 -8
  153. data/frontend/js/deprecated/tooltip.js +8 -0
  154. data/frontend/js/index.js +28 -40
  155. data/frontend/js/mixins/index.js +5 -0
  156. data/frontend/js/mixins/photoswipe.js +10 -0
  157. data/frontend/js/util/bootstrap.js +93 -0
  158. data/i18n/config.yml +14 -0
  159. data/i18n/environment.rb +8 -0
  160. data/i18n/export +3 -0
  161. data/i18n/template.erb +1 -0
  162. data/lib/generators/trestle/install/install_generator.rb +3 -8
  163. data/lib/generators/trestle/install/templates/trestle.rb.erb +5 -5
  164. data/lib/trestle/adapters/active_record_adapter.rb +1 -1
  165. data/lib/trestle/admin/builder.rb +7 -0
  166. data/lib/trestle/admin.rb +12 -6
  167. data/lib/trestle/color.rb +113 -0
  168. data/lib/trestle/configurable.rb +2 -2
  169. data/lib/trestle/configuration.rb +16 -8
  170. data/lib/trestle/engine.rb +23 -17
  171. data/lib/trestle/form/automatic.rb +3 -1
  172. data/lib/trestle/form/fields/check_box_helpers.rb +7 -18
  173. data/lib/trestle/form/fields/collection_select.rb +1 -1
  174. data/lib/trestle/form/fields/color_field.rb +4 -0
  175. data/lib/trestle/form/fields/date_field.rb +4 -0
  176. data/lib/trestle/form/fields/date_picker.rb +10 -4
  177. data/lib/trestle/form/fields/date_select.rb +1 -1
  178. data/lib/trestle/form/fields/datetime_field.rb +4 -0
  179. data/lib/trestle/form/fields/datetime_select.rb +1 -1
  180. data/lib/trestle/form/fields/file_field.rb +3 -28
  181. data/lib/trestle/form/fields/form_control.rb +2 -2
  182. data/lib/trestle/form/fields/form_group.rb +1 -1
  183. data/lib/trestle/form/fields/grouped_collection_select.rb +1 -1
  184. data/lib/trestle/form/fields/radio_button_helpers.rb +5 -17
  185. data/lib/trestle/form/fields/range_field.rb +1 -5
  186. data/lib/trestle/form/fields/select.rb +17 -1
  187. data/lib/trestle/form/fields/time_field.rb +4 -0
  188. data/lib/trestle/form/fields/time_select.rb +1 -1
  189. data/lib/trestle/form/fields/time_zone_select.rb +1 -1
  190. data/lib/trestle/form/renderer.rb +3 -0
  191. data/lib/trestle/form.rb +16 -1
  192. data/lib/trestle/hook/helpers.rb +1 -1
  193. data/lib/trestle/reloader.rb +2 -11
  194. data/lib/trestle/resource/builder.rb +1 -8
  195. data/lib/trestle/resource/toolbar.rb +2 -2
  196. data/lib/trestle/resource.rb +2 -2
  197. data/lib/trestle/scopes/block.rb +7 -7
  198. data/lib/trestle/scopes/definition.rb +2 -2
  199. data/lib/trestle/scopes/scope.rb +4 -0
  200. data/lib/trestle/table/actions_column.rb +2 -2
  201. data/lib/trestle/table/row.rb +2 -1
  202. data/lib/trestle/table/select_column.rb +3 -6
  203. data/lib/trestle/table.rb +6 -1
  204. data/lib/trestle/toolbar/item.rb +1 -1
  205. data/lib/trestle/toolbar/menu.rb +3 -6
  206. data/lib/trestle/version.rb +1 -1
  207. data/lib/trestle.rb +3 -20
  208. data/package.json +31 -27
  209. data/trestle.gemspec +9 -10
  210. data/webpack.config.js +18 -11
  211. data/yarn.lock +1934 -2819
  212. metadata +181 -179
  213. data/app/assets/bundle/trestle/bundle.css +0 -12
  214. data/app/assets/bundle/trestle/bundle.js +0 -103
  215. data/app/assets/bundle/trestle/fa-brands-400.eot +0 -0
  216. data/app/assets/bundle/trestle/fa-brands-400.svg +0 -3717
  217. data/app/assets/bundle/trestle/fa-brands-400.woff +0 -0
  218. data/app/assets/bundle/trestle/fa-regular-400.eot +0 -0
  219. data/app/assets/bundle/trestle/fa-regular-400.svg +0 -801
  220. data/app/assets/bundle/trestle/fa-regular-400.woff +0 -0
  221. data/app/assets/bundle/trestle/fa-solid-900.eot +0 -0
  222. data/app/assets/bundle/trestle/fa-solid-900.svg +0 -5034
  223. data/app/assets/bundle/trestle/fa-solid-900.woff +0 -0
  224. data/app/assets/javascripts/trestle/admin.js +0 -3
  225. data/app/assets/javascripts/trestle/i18n.js.erb +0 -8
  226. data/app/assets/stylesheets/trestle/admin.css +0 -2
  227. data/app/assets/stylesheets/trestle/icons/_font-awesome.css.erb +0 -40
  228. data/app/controllers/concerns/trestle/controller/dialog.rb +0 -16
  229. data/app/views/trestle/application/_dialog.html.erb +0 -34
  230. data/frontend/css/components/_color-vars.scss +0 -10
  231. data/frontend/css/components/_custom-forms.scss +0 -35
  232. data/frontend/css/components/_magnific-popup.scss +0 -36
  233. data/frontend/css/components/_turbolinks.scss +0 -3
  234. data/frontend/js/components/confirmation.js +0 -32
  235. data/frontend/js/components/datepicker.js +0 -69
  236. data/frontend/js/components/dialog.js +0 -149
  237. data/frontend/js/components/file.js +0 -7
  238. data/frontend/js/components/form.js +0 -100
  239. data/frontend/js/components/gallery.js +0 -33
  240. data/frontend/js/components/pagination.js +0 -51
  241. data/frontend/js/components/select.js +0 -18
  242. data/frontend/js/components/sidebar.js +0 -75
  243. data/frontend/js/components/table.js +0 -61
  244. data/frontend/js/components/tabs.js +0 -59
  245. data/frontend/js/components/tooltips.js +0 -25
  246. data/frontend/js/core/contexts.js +0 -17
  247. data/frontend/js/core/turbolinks.js +0 -3
  248. data/frontend/js/core/visit.js +0 -16
  249. data/frontend/theme/trestle/_theme.scss +0 -4
  250. data/frontend/theme/trestle/_variables.scss +0 -4
  251. data/frontend/theme/trestle/theme/_defaults.scss +0 -152
  252. data/frontend/theme/trestle/theme/_functions.scss +0 -44
  253. data/frontend/theme/trestle/theme/_variables.scss +0 -15
  254. data/frontend/theme/trestle/theme/bootstrap/_alert.scss +0 -19
  255. data/frontend/theme/trestle/theme/bootstrap/_badge.scss +0 -25
  256. data/frontend/theme/trestle/theme/bootstrap/_buttons.scss +0 -93
  257. data/frontend/theme/trestle/theme/bootstrap/_color-vars.scss +0 -11
  258. data/frontend/theme/trestle/theme/bootstrap/_custom-forms.scss +0 -93
  259. data/frontend/theme/trestle/theme/bootstrap/_dropdown.scss +0 -6
  260. data/frontend/theme/trestle/theme/bootstrap/_forms.scss +0 -6
  261. data/frontend/theme/trestle/theme/bootstrap/_links.scss +0 -7
  262. data/frontend/theme/trestle/theme/bootstrap/_list-group.scss +0 -31
  263. data/frontend/theme/trestle/theme/bootstrap/_nav.scss +0 -6
  264. data/frontend/theme/trestle/theme/bootstrap/_pagination.scss +0 -18
  265. data/frontend/theme/trestle/theme/bootstrap/_progress.scss +0 -3
  266. data/frontend/theme/trestle/theme/bootstrap/_tables.scss +0 -41
  267. data/frontend/theme/trestle/theme/bootstrap/_utilities.scss +0 -3
  268. data/frontend/theme/trestle/theme/bootstrap/utilities/_background.scss +0 -17
  269. data/frontend/theme/trestle/theme/bootstrap/utilities/_borders.scss +0 -5
  270. data/frontend/theme/trestle/theme/bootstrap/utilities/_text.scss +0 -18
  271. data/frontend/theme/trestle/theme/trestle/_background.scss +0 -61
  272. data/frontend/theme/trestle/theme/trestle/_datepicker.scss +0 -58
  273. data/frontend/theme/trestle/theme/trestle/_headers.scss +0 -4
  274. data/frontend/theme/trestle/theme/trestle/_navbar.scss +0 -15
  275. data/frontend/theme/trestle/theme/trestle/_navigation.scss +0 -5
  276. data/frontend/theme/trestle/theme/trestle/_select2.scss +0 -22
  277. data/frontend/theme/trestle/theme/trestle/_tags.scss +0 -12
  278. data/frontend/theme/trestle/theme/trestle/_turbolinks.scss +0 -3
  279. data/frontend/theme/trestle/theme.scss +0 -29
  280. data/lib/generators/trestle/install/templates/_theme.scss +0 -13
  281. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ar-dz.js +0 -0
  282. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ar.js +0 -0
  283. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/at.js +0 -0
  284. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/az.js +0 -0
  285. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/be.js +0 -0
  286. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/bg.js +0 -0
  287. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/bn.js +0 -0
  288. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/bs.js +0 -0
  289. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/cat.js +0 -0
  290. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ckb.js +0 -0
  291. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/cs.js +0 -0
  292. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/cy.js +0 -0
  293. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/da.js +0 -0
  294. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/de.js +0 -0
  295. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/default.js +0 -0
  296. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/eo.js +0 -0
  297. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/es.js +0 -0
  298. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/et.js +0 -0
  299. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/fa.js +0 -0
  300. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/fi.js +0 -0
  301. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/fo.js +0 -0
  302. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/fr.js +0 -0
  303. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ga.js +0 -0
  304. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/gr.js +0 -0
  305. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/he.js +0 -0
  306. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/hi.js +0 -0
  307. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/hr.js +0 -0
  308. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/hu.js +0 -0
  309. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/hy.js +0 -0
  310. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/id.js +0 -0
  311. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/is.js +0 -0
  312. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/it.js +0 -0
  313. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ja.js +0 -0
  314. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ka.js +0 -0
  315. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/km.js +0 -0
  316. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ko.js +0 -0
  317. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/kz.js +0 -0
  318. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/lt.js +0 -0
  319. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/lv.js +0 -0
  320. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/mk.js +0 -0
  321. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/mn.js +0 -0
  322. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ms.js +0 -0
  323. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/my.js +0 -0
  324. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/nl.js +0 -0
  325. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/nn.js +0 -0
  326. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/no.js +0 -0
  327. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/pa.js +0 -0
  328. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/pl.js +0 -0
  329. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/pt.js +0 -0
  330. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ro.js +0 -0
  331. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/ru.js +0 -0
  332. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/si.js +0 -0
  333. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/sk.js +0 -0
  334. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/sl.js +0 -0
  335. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/sq.js +0 -0
  336. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/sr-cyr.js +0 -0
  337. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/sr.js +0 -0
  338. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/sv.js +0 -0
  339. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/th.js +0 -0
  340. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/tr.js +0 -0
  341. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/uk.js +0 -0
  342. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/uz.js +0 -0
  343. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/uz_latn.js +0 -0
  344. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/vn.js +0 -0
  345. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/zh-tw.js +0 -0
  346. /data/app/assets/bundle/trestle/{flatpickr → locale/flatpickr}/zh.js +0 -0
  347. /data/app/assets/{stylesheets → sprockets}/trestle/_custom.css +0 -0
@@ -1,5 +1,5 @@
1
1
  <div class="alert alert-dismissable <%= html_class %>" role="alert">
2
- <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
2
+ <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
3
3
 
4
4
  <%= icon %>
5
5
 
@@ -1,7 +1,7 @@
1
1
  <% errors = local_assigns.fetch(:errors, {}) %>
2
2
 
3
3
  <% if errors.any? %>
4
- <%= link_to "Debug errors", "#debug-errors", class: "toggle-debug-errors small", data: { toggle: "collapse" } %>
4
+ <%= link_to "Debug errors", "#debug-errors", class: "toggle-debug-errors small", data: { bs_toggle: "collapse" } %>
5
5
 
6
6
  <div id="debug-errors" class="debug-errors collapse">
7
7
  <ul>
@@ -1,4 +1,9 @@
1
1
  <% if admin.form -%>
2
+ <% if admin.form.modal? && modal_options = admin.form.options[:modal] %>
3
+ <% modal_options!(class: modal_options[:class]) %>
4
+ <% modal_options!(controller: modal_options[:controller]) %>
5
+ <% end %>
6
+
2
7
  <%= admin.form.render(self, instance) %>
3
8
  <% else %>
4
9
  <p><%= t("trestle.onboarding.no_form", default: "Please define a form block or create a <code>_form.html</code> partial.").html_safe %></p>
@@ -8,7 +8,7 @@
8
8
  <li>
9
9
  <%= link_to persistent_params.merge(scope: (scope unless scope.active?(params))), class: ["scope", ("active" if scope.active?(params))] do %>
10
10
  <strong><%= scope.label %></strong>
11
- (<%= number_with_delimiter(scope.count(admin.collection(params))) %>)
11
+ <% if scope.count? %>(<%= number_with_delimiter(scope.count(admin.collection(params))) %>)<% end %>
12
12
  <% end %>
13
13
  </li>
14
14
  <% end %>
@@ -0,0 +1,5 @@
1
+ <turbo-stream action="replace" target="<%= dom_id(admin.build_instance({}, params)) %>">
2
+ <template>
3
+ <%= render template: instance.persisted? ? "trestle/resource/show" : "trestle/resource/new", formats: [:html] %>
4
+ </template>
5
+ </turbo-stream>
@@ -0,0 +1 @@
1
+ <turbo-stream action="closeModal" target="<%= dom_id(instance) %>"></turbo-stream>
@@ -11,6 +11,8 @@
11
11
  <%= t.delete %>
12
12
  <% end %>
13
13
 
14
- <%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
15
- <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
14
+ <%= resource_turbo_frame(instance) do %>
15
+ <%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
16
+ <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
17
+ <% end %>
16
18
  <% end %>
@@ -9,17 +9,19 @@
9
9
  <% end if admin.scopes.any? %>
10
10
 
11
11
  <%= render layout: "layout" do %>
12
- <% if hook?("resource.index.header") %>
13
- <header class="main-content-header">
14
- <%= hook("resource.index.header") %>
15
- </header>
16
- <% end %>
12
+ <%= index_turbo_frame do %>
13
+ <% if hook?("resource.index.header") %>
14
+ <header class="main-content-header">
15
+ <%= hook("resource.index.header") %>
16
+ </header>
17
+ <% end %>
17
18
 
18
- <%= render "trestle/table/table", table: admin.table, collection: collection %>
19
+ <%= render "trestle/table/table", table: admin.table, collection: collection %>
19
20
 
20
- <footer class="main-content-footer">
21
- <%= hook("resource.index.footer") %>
21
+ <footer class="main-content-footer">
22
+ <%= hook("resource.index.footer") %>
22
23
 
23
- <%= pagination collection: collection, entry_name: admin.model_name, remote: admin.pagination_options[:ajax] %>
24
- </footer>
24
+ <%= pagination collection: collection, entry_name: admin.model_name, remote: admin.pagination_options[:ajax] %>
25
+ </footer>
26
+ <% end %>
25
27
  <% end %>
@@ -7,6 +7,8 @@
7
7
  <%= t.save_or_dismiss(:create) %>
8
8
  <% end %>
9
9
 
10
- <%= trestle_form_for instance, url: admin.path(:create), method: :post do |f| %>
11
- <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
10
+ <%= resource_turbo_frame(instance) do %>
11
+ <%= trestle_form_for instance, url: admin.path(:create), method: :post do |f| %>
12
+ <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
13
+ <% end %>
12
14
  <% end %>
@@ -11,6 +11,8 @@
11
11
  <%= t.delete %>
12
12
  <% end %>
13
13
 
14
- <%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
15
- <%= render partial: "form", layout: dialog_request? ? "dialog" : "layout" %>
14
+ <%= resource_turbo_frame(instance) do %>
15
+ <%= trestle_form_for instance, url: admin.actions.include?(:update) ? admin.instance_path(instance, action: :update) : "#", method: :patch do |f| %>
16
+ <%= render partial: "form", layout: modal_request? ? "modal" : "layout" %>
17
+ <% end %>
16
18
  <% end %>
@@ -0,0 +1,5 @@
1
+ <turbo-stream action="replace" target="<%= dom_id(instance) %>">
2
+ <template>
3
+ <%= render template: "trestle/resource/show", formats: [:html] %>
4
+ </template>
5
+ </turbo-stream>
@@ -1,6 +1,6 @@
1
- <aside class="app-sidebar navbar-expand-md" id="app-sidebar">
1
+ <aside class="app-sidebar navbar navbar-expand-md" id="app-sidebar" data-controller="sidebar mobile-sidebar">
2
2
  <header class="app-sidebar-header">
3
- <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>">
3
+ <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>" data-action="mobile-sidebar#toggle">
4
4
  <span class="navbar-toggler-icon"></span>
5
5
  </button>
6
6
 
@@ -9,19 +9,19 @@
9
9
  <% end %>
10
10
  </header>
11
11
 
12
- <div class="app-sidebar-inner">
13
- <nav class="app-nav">
12
+ <div class="app-sidebar-inner" data-sidebar-target="inner">
13
+ <nav class="app-nav" data-controller="navigation">
14
14
  <% Trestle.navigation(self).each do |group, items| %>
15
15
  <%= content_tag(:ul, class: ("collapsed" if group.present? && navigation_group_collapsed?(group)), data: { group: group.id }) do %>
16
16
  <% if group.present? %>
17
- <li class="nav-header"><%= link_to group.label, "##{group.id}" %></li>
17
+ <li class="nav-header"><%= link_to group.label, "##{group.id}", data: { action: "navigation#toggle" } %></li>
18
18
  <% end %>
19
19
 
20
20
  <% items.each do |item| %>
21
21
  <%= content_tag(:li, class: ("active" if current_navigation_item?(item))) do %>
22
- <%= link_to item.path, item.html_options do %>
22
+ <%= link_to item.path, item.html_options.merge(data: { controller: "navigation-tooltip" }) do %>
23
23
  <%= icon("nav-icon", item.icon) %>
24
- <span class="nav-label"><%= item.label %></span>
24
+ <span class="nav-label" data-navigation-tooltip-target="label"><%= item.label %></span>
25
25
 
26
26
  <%= content_tag(:span, item.badge.text, class: ["badge", item.badge.html_class]) if item.badge? %>
27
27
  <% end %>
@@ -31,8 +31,8 @@
31
31
  <% end %>
32
32
  </nav>
33
33
 
34
- <button class="toggle-sidebar">
35
- <span class="sr-only"><%= t("trestle.ui.toggle_sidebar", default: "Toggle sidebar") %></span>
34
+ <button class="toggle-sidebar" data-action="sidebar#toggle">
35
+ <span class="visually-hidden"><%= t("trestle.ui.toggle_sidebar", default: "Toggle sidebar") %></span>
36
36
  </button>
37
37
  </div>
38
38
  </aside>
@@ -42,7 +42,7 @@ vi:
42
42
  titles:
43
43
  index: "Danh sách %{pluralized_model_name}"
44
44
  new: "Tạo mới %{model_name}"
45
- edit: Chỉnh sửa %{model_name}"
45
+ edit: "Chỉnh sửa %{model_name}"
46
46
 
47
47
  buttons:
48
48
  new: "Tạo mới %{model_name}"
@@ -13,8 +13,16 @@
13
13
  margin-bottom: 0;
14
14
  }
15
15
 
16
+ code {
17
+ color: var(--#{$prefix}alert-color);
18
+ }
19
+
16
20
  a {
17
- color: white;
21
+ color: var(--#{$prefix}alert-link-color, white);
22
+
23
+ &:hover, &:focus {
24
+ color: var(--#{$prefix}alert-link-hover-color, inherit);
25
+ }
18
26
  }
19
27
 
20
28
  @include media-breakpoint-down(sm) {
@@ -50,7 +58,7 @@
50
58
  .alert-dismissable {
51
59
  position: relative;
52
60
 
53
- .close {
61
+ .btn-close {
54
62
  position: absolute;
55
63
  top: 0.75rem;
56
64
  right: $alert-padding-x;
@@ -74,21 +82,11 @@
74
82
  // Alert colors
75
83
 
76
84
  @mixin alert-variant($background, $border, $color) {
77
- color: $color;
78
- background: $background;
79
- border-color: $border;
80
-
81
- a {
82
- color: $color;
83
-
84
- &:hover, &:focus {
85
- color: mix($color, $background, 80%);
86
- }
87
- }
88
-
89
- code {
90
- color: $color;
91
- }
85
+ --#{$prefix}alert-color: #{$color};
86
+ --#{$prefix}alert-bg: #{$background};
87
+ --#{$prefix}alert-border-color: #{$border};
88
+ --#{$prefix}alert-link-color: #{$color};
89
+ --#{$prefix}alert-link-hover-color: #{mix($color, $background, 80%)};
92
90
  }
93
91
 
94
92
  .alert-success {
@@ -119,6 +117,10 @@
119
117
  @include alert-variant($alert-primary-bg, $alert-primary-border, $alert-primary-color);
120
118
  }
121
119
 
120
+ .alert-secondary {
121
+ @include alert-variant($alert-secondary-bg, $alert-secondary-border, $alert-secondary-color);
122
+ }
123
+
122
124
 
123
125
  // Debug errors
124
126
 
@@ -3,45 +3,17 @@
3
3
  background-repeat: repeat, no-repeat;
4
4
  }
5
5
 
6
-
7
- .theme-bg {
8
- @extend %textured-bg;
9
- background-color: $theme-bg;
10
- }
11
-
12
-
13
- .theme-bg-dark {
14
- @extend %textured-bg;
15
- background-color: darken($theme-bg, $theme-color-interval);
16
- }
17
-
18
- .theme-bg-darker {
19
- @extend %textured-bg;
20
- background-color: darken($theme-bg, $theme-color-interval * 2);
6
+ @each $variation, $lightness in $theme-bg-variations {
7
+ .theme-bg-#{$variation} {
8
+ @extend %textured-bg;
9
+ background-color: adjust-theme-hsl(primary, $lightness: $lightness);
10
+ }
21
11
  }
22
12
 
23
- .theme-bg-darkest {
24
- @extend %textured-bg;
25
- background-color: darken($theme-bg, $theme-color-interval * 3);
26
- }
27
-
28
-
29
- .theme-bg-light {
30
- @extend %textured-bg;
31
- background-color: lighten($theme-bg, $theme-color-interval);
32
- }
33
-
34
- .theme-bg-lighter {
35
- @extend %textured-bg;
36
- background-color: lighten($theme-bg, $theme-color-interval * 2);
37
- }
38
-
39
- .theme-bg-lightest {
40
- @extend %textured-bg;
41
- background-color: lighten($theme-bg, $theme-color-interval * 3);
13
+ .theme-bg {
14
+ @extend .theme-bg-default;
42
15
  }
43
16
 
44
-
45
17
  .error-bg {
46
18
  @extend %textured-bg;
47
19
  background-color: $error-bg;
@@ -0,0 +1,31 @@
1
+ @mixin badge-variant(
2
+ $background,
3
+ $color: color-contrast($background),
4
+ $hover-background: shift-color($background, $badge-hover-scale)
5
+ ) {
6
+ --#{$prefix}badge-bg: #{$background};
7
+ --#{$prefix}badge-color: #{$color};
8
+ --#{$prefix}badge-hover-bg: #{$hover-background};
9
+ }
10
+
11
+ .badge {
12
+ background: var(--#{$prefix}badge-bg);
13
+
14
+ @at-root a#{&} {
15
+ &:hover,
16
+ &:focus {
17
+ color: var(--#{$prefix}badge-color);
18
+ background-color: var(--#{$prefix}badge-hover-bg);
19
+ }
20
+ }
21
+ }
22
+
23
+ .badge-pill {
24
+ border-radius: $border-radius-pill;
25
+ }
26
+
27
+ @each $color, $value in $theme-colors {
28
+ .badge-#{$color} {
29
+ @include badge-variant($value);
30
+ }
31
+ }
@@ -10,7 +10,7 @@
10
10
  }
11
11
  }
12
12
 
13
- @include media-breakpoint-down(sm) {
13
+ @include media-breakpoint-down(md) {
14
14
  font-size: 0.75rem;
15
15
  }
16
16
  }
@@ -27,13 +27,13 @@
27
27
 
28
28
  // Reduce breadcrumb separator spacing on mobile
29
29
 
30
- @include media-breakpoint-down(sm) {
30
+ @include media-breakpoint-down(md) {
31
31
  .breadcrumb-item {
32
32
  + .breadcrumb-item {
33
- padding-left: $breadcrumb-item-padding / 2;
33
+ padding-left: divide($breadcrumb-item-padding-x, 2);
34
34
 
35
35
  &::before {
36
- padding-right: $breadcrumb-item-padding / 4;
36
+ padding-right: divide($breadcrumb-item-padding-x, 4);
37
37
  }
38
38
  }
39
39
  }
@@ -3,6 +3,7 @@
3
3
 
4
4
  &.loading {
5
5
  &::before {
6
+ display: inline-block;
6
7
  @include icon-fa($fa-var-spinner);
7
8
  @extend .fa-spin;
8
9
  margin-right: 10px;
@@ -22,11 +23,11 @@
22
23
  // Alternative delete button (no background color until hover)
23
24
 
24
25
  .btn-delete {
25
- color: theme-color("danger");
26
+ color: $danger;
26
27
 
27
28
  &:hover, &:focus {
28
- color: color-yiq(theme-color("danger"));
29
- background: theme-color("danger");
29
+ color: color-contrast($danger);
30
+ background: $danger;
30
31
  }
31
32
  }
32
33
 
@@ -39,7 +40,7 @@
39
40
  }
40
41
 
41
42
  .btn-label {
42
- @include sr-only;
43
+ @include visually-hidden;
43
44
  }
44
45
  }
45
46
 
@@ -10,6 +10,8 @@
10
10
  text-align: center;
11
11
 
12
12
  color: #ccc;
13
+ background: none;
14
+ border: none;
13
15
 
14
16
  &:hover, &:focus {
15
17
  color: #aaa;
@@ -47,7 +49,7 @@
47
49
  margin-top: $dropdown-spacer;
48
50
 
49
51
  &::after {
50
- border-bottom-color: mix($theme-bg, white, 95%);
52
+ border-bottom-color: tint-color($theme-bg, 95%);
51
53
  }
52
54
  }
53
55
 
@@ -55,7 +57,7 @@
55
57
  margin-top: -$dropdown-spacer;
56
58
  }
57
59
 
58
- &.showTimeInput.hasTime {
60
+ &.hasTime {
59
61
  .flatpickr-time {
60
62
  border-radius: 0 0 5px 5px;
61
63
  }
@@ -66,7 +68,7 @@
66
68
  border-bottom-color: white;
67
69
  }
68
70
 
69
- &.showTimeInput.hasTime {
71
+ &.hasTime {
70
72
  .flatpickr-time {
71
73
  border-top: 0;
72
74
  border-radius: 5px;
@@ -85,8 +87,10 @@
85
87
 
86
88
  .flatpickr-prev-month,
87
89
  .flatpickr-next-month {
90
+ line-height: 1;
91
+
88
92
  &:hover svg {
89
- fill: lighten(theme-color("primary"), 15%);
93
+ fill: tint-color($primary, 50%);
90
94
  }
91
95
  }
92
96
  }
@@ -130,16 +134,16 @@ span.flatpickr-weekday {
130
134
  .flatpickr-day.selected.nextMonthDay,
131
135
  .flatpickr-day.startRange.nextMonthDay,
132
136
  .flatpickr-day.endRange.nextMonthDay {
133
- background: theme-color("primary");
134
- border-color: theme-color("primary");
137
+ background: var(--primary);
138
+ border-color: var(--primary);
135
139
  }
136
140
 
137
141
  .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
138
142
  .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
139
143
  .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
140
- box-shadow: -10px 0 0 theme-color("primary");
144
+ box-shadow: -10px 0 0 var(--primary);
141
145
  }
142
146
 
143
147
  .flatpickr-day.week.selected {
144
- box-shadow: -5px 0 0 theme-color("primary"), 5px 0 0 theme-color("primary");
148
+ box-shadow: -5px 0 0 var(--primary), 5px 0 0 var(--primary);
145
149
  }
@@ -20,10 +20,10 @@
20
20
 
21
21
  border-left: $dropdown-arrow-outer-width solid transparent;
22
22
  border-right: $dropdown-arrow-outer-width solid transparent;
23
- border-bottom: $dropdown-arrow-outer-width solid white;
23
+ border-bottom: $dropdown-arrow-outer-width solid $dropdown-bg;
24
24
  }
25
25
 
26
- &.dropdown-menu-right {
26
+ &.dropdown-menu-end {
27
27
  &:before {
28
28
  left: auto;
29
29
  right: 12px;
@@ -49,7 +49,27 @@
49
49
  bottom: -$dropdown-arrow-width;
50
50
 
51
51
  border-bottom: 0;
52
- border-top: $dropdown-arrow-outer-width solid white;
52
+ border-top: $dropdown-arrow-outer-width solid $dropdown-bg;
53
+ }
54
+ }
55
+ }
56
+
57
+ .dropdown-menu-dark {
58
+ &:before {
59
+ border-bottom-color: $dropdown-dark-border-color;
60
+ }
61
+
62
+ &:after {
63
+ border-bottom-color: $dropdown-dark-bg;
64
+ }
65
+
66
+ .dropup & {
67
+ &:before {
68
+ border-top-color: $dropdown-dark-border-color;
69
+ }
70
+
71
+ &:after {
72
+ border-top-color: $dropdown-dark-bg;
53
73
  }
54
74
  }
55
75
  }
@@ -1,8 +1,9 @@
1
1
  .form-group {
2
2
  position: relative;
3
+ margin-bottom: 1rem;
3
4
 
4
5
  &.has-error {
5
- > .control-label {
6
+ > .form-label {
6
7
  color: $form-feedback-invalid-color;
7
8
  }
8
9
 
@@ -32,7 +33,19 @@ ul.invalid-feedback {
32
33
  }
33
34
  }
34
35
 
35
- .control-label {
36
- font-weight: bold;
36
+ .form-label {
37
37
  display: block;
38
38
  }
39
+
40
+ .control-label {
41
+ @extend .form-label;
42
+ }
43
+
44
+ // Prevent input zooming on mobile devices
45
+ @include media-breakpoint-down(sm) {
46
+ .form-control,
47
+ .form-select,
48
+ .input-group-text {
49
+ font-size: 16px;
50
+ }
51
+ }
@@ -1,31 +1,33 @@
1
+ @use "sass:math";
2
+
1
3
  .media-grid {
2
4
  @include list-unstyled;
3
- @include make-row;
4
-
5
- li {
6
- position: relative;
7
- width: 100%;
8
5
 
9
- padding-right: $grid-gutter-width / 2;
10
- padding-left: $grid-gutter-width / 2;
6
+ --media-grid-aspect-ratio: 4 / 3;
7
+ --media-grid-gap: #{$grid-gutter-width};
8
+ --media-grid-columns: 2;
11
9
 
12
- @include make-col(6);
10
+ display: grid;
11
+ grid-template-columns: repeat(var(--media-grid-columns), 1fr);
12
+ gap: var(--media-grid-gap);
13
13
 
14
- @include media-breakpoint-up(md) {
15
- @include make-col(4);
16
- }
14
+ @include media-breakpoint-up(md) {
15
+ --media-grid-columns: 3;
16
+ }
17
17
 
18
- @include media-breakpoint-up(xl) {
19
- @include make-col(3);
20
- }
18
+ @include media-breakpoint-up(xl) {
19
+ --media-grid-columns: 4;
20
+ }
21
21
 
22
- margin-bottom: 20px;
22
+ @include media-breakpoint-down(md) {
23
+ --media-grid-gap: #{math.div($grid-gutter-width, 2)};
23
24
  }
24
25
 
25
26
  figure {
26
27
  margin: 0;
28
+ position: relative;
27
29
 
28
- @include aspect-ratio(4 / 3);
30
+ aspect-ratio: var(--media-grid-aspect-ratio);
29
31
 
30
32
  background: #eee;
31
33
  overflow: hidden;
@@ -34,7 +36,8 @@
34
36
  align-items: center;
35
37
 
36
38
  img {
37
- @include fill-area;
39
+ width: 100%;
40
+ height: 100%;
38
41
  object-fit: contain;
39
42
  }
40
43
  }
@@ -55,49 +58,54 @@
55
58
  }
56
59
  }
57
60
 
61
+ figcaption {
62
+ position: absolute;
63
+ bottom: 0;
64
+ left: 0;
65
+ right: 0;
66
+
67
+ background: rgba(black, 0.25);
68
+ color: white;
69
+
70
+ padding: 0.25rem 0.5rem;
71
+
72
+ display: flex;
73
+
74
+ font-size: 85%;
75
+ font-weight: normal;
76
+ }
77
+
58
78
  a {
59
79
  cursor: zoom-in;
60
80
  }
61
81
  }
62
82
 
63
83
  .media-grid-sm {
64
- li {
65
- @include make-col(4);
84
+ --media-grid-columns: 3;
66
85
 
67
- @include media-breakpoint-up(md) {
68
- @include make-col(3);
69
- }
86
+ @include media-breakpoint-up(md) {
87
+ --media-grid-columns: 4;
88
+ }
70
89
 
71
- @include media-breakpoint-up(lg) {
72
- @include make-col(2);
73
- }
90
+ @include media-breakpoint-up(lg) {
91
+ --media-grid-columns: 6;
74
92
  }
75
93
  }
76
94
 
77
95
  .media-grid-lg {
78
- li {
79
- @include make-col(12);
96
+ --media-grid-columns: 1;
80
97
 
81
- @include media-breakpoint-up(sm) {
82
- @include make-col(6);
83
- }
98
+ @include media-breakpoint-up(sm) {
99
+ --media-grid-columns: 2;
100
+ }
84
101
 
85
- @include media-breakpoint-up(lg) {
86
- @include make-col(4);
87
- }
102
+ @include media-breakpoint-up(lg) {
103
+ --media-grid-columns: 3;
88
104
  }
89
105
  }
90
106
 
91
- @include media-breakpoint-down(sm) {
92
- .media-grid {
93
- margin-left: -5px;
94
- margin-right: -5px;
107
+ .media-grid-auto {
108
+ --media-grid-item-size: 240px;
95
109
 
96
- li {
97
- padding-left: 5px;
98
- padding-right: 5px;
99
-
100
- margin-bottom: 10px;
101
- }
102
- }
110
+ grid-template-columns: repeat(auto-fill, minmax(var(--media-grid-item-size), 1fr));
103
111
  }