more sorting options
This commit is contained in:
parent
0372e85332
commit
8e1f2724b0
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user