mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-10 07:55:21 +02:00
WIP
This commit is contained in:
parent
a36ac3253c
commit
19cb460d42
2 changed files with 45 additions and 39 deletions
5
app/assets/images/icon-csv.svg
Normal file
5
app/assets/images/icon-csv.svg
Normal file
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.5 7.5H17.5M2.5 12.5H17.5M7.5 7.5V17.5M12.5 7.5V17.5M4.16667 2.5H15.8333C16.7538 2.5 17.5 3.24619 17.5 4.16667V15.8333C17.5 16.7538 16.7538 17.5 15.8333 17.5H4.16667C3.24619 17.5 2.5 16.7538 2.5 15.8333V4.16667C2.5 3.24619 3.24619 2.5 4.16667 2.5Z"
|
||||
stroke="#737373" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
</svg>
|
After Width: | Height: | Size: 468 B |
|
@ -1,46 +1,47 @@
|
|||
<%# locals: (headers: [], rows: [], caption: nil) %>
|
||||
<div class="overflow-x-auto -mx-4 sm:mx-0">
|
||||
<div class="inline-block min-w-full sm:w-full border border-secondary rounded-md shadow-border-xs text-sm bg-container">
|
||||
<table class="min-w-full divide-y divide-alpha-black-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<% headers.each_with_index do |header, index| %>
|
||||
<th class="
|
||||
bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
|
||||
<%= index == 0 ? 'rounded-tl-md' : '' %>
|
||||
<%= index == headers.length - 1 ? 'rounded-tr-md' : '' %>
|
||||
<%= index < headers.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
|
||||
">
|
||||
<%= header %>
|
||||
</th>
|
||||
<% end %>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-alpha-black-200">
|
||||
<% rows.each_with_index do |row, row_index| %>
|
||||
<div class="bg-container-inset rounded-xl overflow-hidden mx-1 md:mx-auto p-3 pl-2 md:pr-2 pr-0">
|
||||
<% if caption %>
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="text-gray-500 mr-2">
|
||||
<%= inline_svg_tag "icon-csv.svg", class: "w-4 h-4" %>
|
||||
</div>
|
||||
<h2 class="text-sm text-gray-500 font-medium"><%= caption %></h2>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="overflow-x-auto -webkit-overflow-scrolling-touch">
|
||||
<div class="inline-block min-w-full sm:w-full border border-secondary rounded-md shadow-border-xs text-sm bg-container">
|
||||
<table class="min-w-full divide-y divide-alpha-black-200">
|
||||
<thead>
|
||||
<tr>
|
||||
<% row.each_with_index do |(header, value), col_index| %>
|
||||
<td class="
|
||||
px-3 py-2.5 whitespace-nowrap text-left
|
||||
<%= col_index < row.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
|
||||
<%= !caption && row_index == rows.length - 1 && col_index == 0 ? 'rounded-bl-md' : '' %>
|
||||
<%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? 'rounded-br-md' : '' %>
|
||||
<% headers.each_with_index do |header, index| %>
|
||||
<th class="
|
||||
bg-container-inset px-3 py-2.5 font-medium text-left whitespace-nowrap
|
||||
<%= index == 0 ? 'rounded-tl-md' : '' %>
|
||||
<%= index == headers.length - 1 ? 'rounded-tr-md' : '' %>
|
||||
<%= index < headers.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
|
||||
">
|
||||
<%= value %>
|
||||
</td>
|
||||
<%= header %>
|
||||
</th>
|
||||
<% end %>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
<% if caption %>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="<%= headers.length %>" class="px-3 py-2.5 text-center text-xs text-primary rounded-b-md italic bg-container-inset">
|
||||
<%= caption %>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<% end %>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-alpha-black-200">
|
||||
<% rows.each_with_index do |row, row_index| %>
|
||||
<tr>
|
||||
<% row.each_with_index do |(header, value), col_index| %>
|
||||
<td class="
|
||||
px-3 py-2.5 whitespace-nowrap text-left
|
||||
<%= col_index < row.length - 1 ? 'border-r border-r-alpha-black-200' : '' %>
|
||||
<%= !caption && row_index == rows.length - 1 && col_index == 0 ? 'rounded-bl-md' : '' %>
|
||||
<%= !caption && row_index == rows.length - 1 && col_index == row.length - 1 ? 'rounded-br-md' : '' %>
|
||||
">
|
||||
<%= value %>
|
||||
</td>
|
||||
<% end %>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue