consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use CSS instead of utility classes in options table

Browse Source 
This way we make it easier to customize this component. In this specific
case, ideally we'd remove some of the CSS as well. For now we're leaving
it as it was for compatibility reasons.
This commit is contained in:
Javi Martín
2025-11-05 19:02:58 +01:00
parent 2d72144048
commit d063475769
2 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/assets/stylesheets/admin/polls/questions/options/table.scss
View File

@@ -1,5 +1,28 @@
.admin .poll-question-options-table { .admin .poll-question-options-table {
.break { margin-top: $line-height;
word-break: break-word;
td {
&:not(:last-child) {
vertical-align: top;
}
&.description {
word-break: break-word;
}
}
th {
&.description {
@include breakpoint(medium) {
width: calc(100% * 7 / 12);
}
}
}
td,
th {
&.association-count {
text-align: center;
}
} }
} }

20
app/components/admin/poll/questions/options/table_component.html.erb
View File

@@ -1,12 +1,12 @@
<table class="margin-top poll-question-options-table"> <table class="poll-question-options-table">
<caption><%= t("admin.questions.show.valid_answers") %></caption> <caption><%= t("admin.questions.show.valid_answers") %></caption>
<thead> <thead>
<tr> <tr>
<th><%= t("admin.questions.show.answers.title") %></th> <th><%= t("admin.questions.show.answers.title") %></th>
<th scope="col" class="medium-7"><%= t("admin.questions.show.answers.description") %></th> <th scope="col" class="description"><%= t("admin.questions.show.answers.description") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.images") %></th> <th scope="col" class="association-count"><%= t("admin.questions.show.answers.images") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.documents") %></th> <th scope="col" class="association-count"><%= t("admin.questions.show.answers.documents") %></th>
<th scope="col" class="text-center"><%= t("admin.questions.show.answers.videos") %></th> <th scope="col" class="association-count"><%= t("admin.questions.show.answers.videos") %></th>
<th><%= t("admin.actions.actions") %></th> <th><%= t("admin.actions.actions") %></th>
</tr> </tr>
</thead> </thead>
@@ -14,21 +14,21 @@
<tbody data-js-url="<%= admin_question_options_order_options_path(question.id) %>"> <tbody data-js-url="<%= admin_question_options_order_options_path(question.id) %>">
<% question.question_options.each do |option| %> <% question.question_options.each do |option| %>
<tr id="<%= dom_id(option) %>" class="poll_question_option" data-option-id="<%= option.id %>"> <tr id="<%= dom_id(option) %>" class="poll_question_option" data-option-id="<%= option.id %>">
<td class="align-top"><%= option.title %></td> <td><%= option.title %></td>
<td class="align-top break"><%= wysiwyg(option.description) %></td> <td class="description"><%= wysiwyg(option.description) %></td>
<td class="align-top text-center"> <td class="association-count">
(<%= option.images.count %>) (<%= option.images.count %>)
<br> <br>
<%= link_to t("admin.questions.show.answers.images_list"), <%= link_to t("admin.questions.show.answers.images_list"),
admin_option_images_path(option) %> admin_option_images_path(option) %>
</td> </td>
<td class="align-top text-center"> <td class="association-count">
(<%= option.documents.count rescue 0 %>) (<%= option.documents.count rescue 0 %>)
<br> <br>
<%= link_to t("admin.questions.show.answers.documents_list"), <%= link_to t("admin.questions.show.answers.documents_list"),
admin_option_documents_path(option) %> admin_option_documents_path(option) %>
</td> </td>
<td class="align-top text-center"> <td class="association-count">
(<%= option.videos.count %>) (<%= option.videos.count %>)
<br> <br>
<%= link_to t("admin.questions.show.answers.video_list"), <%= link_to t("admin.questions.show.answers.video_list"),