more sorting options

This commit is contained in:
Torsten 2022-12-18 12:56:55 +02:00
parent 0372e85332
commit 8e1f2724b0

View File

@ -13,26 +13,18 @@
%label.block
.mt-1.text-lg.font-bold Search:
%input.border.rounded{:category => "query", placeholder:"by name", "v-model" => "search_name" }
.rounded{":class" => "{'border': sort_by == 'name'}"}
.mx-4.text-lg.font-bold Name
%a{ "@click" => "sort_by = 'name';sort_dir = 1" , href: "#" ,
":class" => "{'bg-cyan-100': sort_dir == 1 && sort_by == 'name'}"}
%svg.w-6.h-6.mt-1{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
%a{ "@click" => "sort_by = 'name';sort_dir = -1" , href: "#" ,
":class" => "{'bg-cyan-100': sort_dir == -1 && sort_by == 'name'}"}
%svg.w-6.h-6.mt-1{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
.rounded{":class" => "{'border': sort_by == 'created'}"}
.mx-4.text-lg.font-bold Created
%a{ "@click" => "sort_by = 'created';sort_dir = 1" , href: "#" ,
":class" => "{'bg-cyan-100': sort_dir == 1 && sort_by == 'created'}"}
%svg.w-6.h-6.mt-1{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
%a{ "@click" => "sort_by = 'created';sort_dir = -1" , href: "#" ,
":class" => "{'bg-cyan-100': sort_dir == -1 && sort_by == 'created'}"}
%svg.w-6.h-6.mt-1{:fill => "created", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
- ["name" , "created" , "size" , "ratio"].each do |ruby_sort_key|
.rounded{":class" => "{'border': sort_by == '#{ruby_sort_key}'}"}
.mx-4.text-lg.font-bold= ruby_sort_key.capitalize
%a{ "@click" => "sort_by = '#{ruby_sort_key}';sort_dir = 1" , href: "#" ,
":class" => "{'bg-cyan-100': sort_dir == 1 && sort_by == '#{ruby_sort_key}'}"}
%svg.w-6.h-6.mt-1{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M8.25 6.75L12 3m0 0l3.75 3.75M12 3v18", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
%a{ "@click" => "sort_by = '#{ruby_sort_key}';sort_dir = -1" , href: "#" ,
":class" => "{'bg-cyan-100': sort_dir == -1 && sort_by == '#{ruby_sort_key}'}"}
%svg.w-6.h-6.mt-1{:fill => "none", :stroke => "currentColor", "stroke-width" => "1.5", :viewbox => "0 0 24 24", :xmlns => "http://www.w3.org/2000/svg"}
%path{:d => "M15.75 17.25L12 21m0 0l-3.75-3.75M12 21V3", "stroke-linecap" => "round", "stroke-linejoin" => "round"}
.grid.grid-cols-6.gap-4.m-8
.flex.flex-col.border.border-gray-100.rounded.image_box{"v-for": "image in filter_and_sort"}
@ -45,7 +37,7 @@
%img{ ":src": "image.url" , ":alt": "image.name" }
.flex.justify-between.mb-8
%strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
{{image.size}}
{{image.size}}k
%strong.inline-block.rounded.bg-orange-50.px-3.py-1.text-md.font-medium
{{image.created_at}}
%strong.rounded.h-10.bg-orange-50.px-5.py-2.font-medium