Merge pull request #16 from bumi/forms-show-page

Add some styling classes in the table
This commit is contained in:
bumi 2020-04-20 11:35:46 +02:00 committed by GitHub
commit b8277a7023
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 23 deletions

View File

@ -52,4 +52,12 @@ body {
.button.google { .button.google {
background: rgb(225, 98, 89); background: rgb(225, 98, 89);
color: white; color: white;
}
.button {
vertical-align: middle;
}
.table-wrapper {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
} }

View File

@ -1,25 +1,50 @@
<h1><%= @form.title %></h1> <div class="section">
<p> <div class="container">
<%= submission_url(@form) %> <div class="content is-paddingless">
</p> <h1 class="is-family-secondary"><%= @form.title %></h1>
<p> <div class="columns">
<%= link_to 'Google spreadsheet', @form.spreadsheet_url %> <div class="column">
</p> <p>
<table> <button class="button">
<thead> <span class="icon is-small">
<tr> <i class="fas fa-link"></i>
<% @form.spreadsheet_headers.each do |value| %> </span>
<th><%= value %></th> </button>
<% end %> <%= submission_url(@form) %>
</tr> </p>
</thead> </div>
<tbody> <div class="column">
<% @submissions.each do |submission| %> <p>
<tr> <button class="button is-success">
<% @form.spreadsheet_headers.each do |column| %> <span class="icon is-small">
<i class="fas fa-file-excel"></i>
</span>
</button>
<%= link_to 'Google spreadsheet', @form.spreadsheet_url, { :class => "has-text-dark"} %>
</p>
</div>
</div>
</div>
<div class="box table-wrapper">
<table class="table is-fullwidth is-striped is-hoverable">
<thead>
<tr>
<% @form.spreadsheet_headers.each do |value| %>
<th><%= value %></th>
<% end %>
</tr>
</thead>
<tbody>
<% @submissions.each do |submission| %>
<tr>
<% @form.spreadsheet_headers.each do |column| %>
<td><%= submission.data[column] %></td> <td><%= submission.data[column] %></td>
<% end %>
</tr>
<% end %> <% end %>
</tr> </tbody>
<% end %> </table>
</tbody> </div>
</table> </div>
</div>