Skip to content

Commit

Permalink
Fix ghost links in nested tabs (#500)
Browse files Browse the repository at this point in the history 
* Fix ghost links in nested tabs

* Fix spacing in media card
  • Loading branch information
@Splines
Splines authored May 15, 2023
1 parent 1982f28 commit 3fc077f
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 74 deletions.
15 changes: 0 additions & 15 deletions app/assets/stylesheets/media.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,21 +315,6 @@
text-decoration: none;
}

.tab-content {
display: flex;
}

.tab-content > .tab-pane {
display: block; /* undo "display: none;" */
visibility: hidden;
margin-right: -100%;
width: 100%;
}

.tab-content > .active {
visibility: visible;
}

.break-text-any-where {
word-break: break-all;
}
8 changes: 4 additions & 4 deletions app/views/lectures/edit/_media.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,12 @@
</div>
<div class="card-body">
<div class="row">
<div class="col-4">
<div class="col-5">
<ul class="nav flex-column nav-pills"
id="edited-media-tab"
role="tablist">
<% media_sorts.each do |s| %>
<li class="nav-item">
<li class="nav-item w-100">
<a class="nav-link <%= active(s == 'kaviar') %>"
id="<%= s %>-tab"
data-toggle="tab" href="#<%= s %>-media" role="tab"
Expand All @@ -47,14 +47,14 @@
<% end %>
</ul>
</div>
<div class="col-8">
<div class="col-7">
<div class="tab-content" id="edited-media-tabContent">
<% media_sorts.each do |s| %>
<div class="tab-pane fade <%= show_tab(s == 'kaviar') %>"
id="<%= s %>-media"
role="tabpanel"
aria-labelledby="<%= s %>-tab">
<ul>
<ul class="pl-2">
<% media.select { |m| m.sort.in?(media_types[s]) }
.sort_by(&:created_at)
.reverse
Expand Down
113 changes: 58 additions & 55 deletions app/views/media/_table_column.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,66 @@
<% if media.present? %>
<% if small %>
<ul>
<% media.each do |m| %>
<li>
<%= link_to m.local_info,
edit_or_inspect_medium_path(m),
class: textcolor(m) %>
</li>
<% end %>
</ul>
<div class="tab-content">
<ul>
<% media.each do |m| %>
<li>
<%= link_to m.local_info,
edit_or_inspect_medium_path(m),
class: textcolor(m) %>
</li>
<% end %>
</ul>
</div>
<% else %>
<% teachables = lecture_course_teachables(media) %>
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-tabs"
id="v-<%= sort %>-media-tab"
role="tablist"
aria-orientation="vertical">
<% teachables.each_with_index do |t, i| %>
<a class="nav-link <%= active(i.zero?) %>"
id="v-pills-<%= sort %>-<%= t.class %>-<%= t.id %>-tab"
data-toggle="pill"
href="#v-pills-<%= sort %>-<%= t.class %>-<%= t.id %>"
role="tab">
<%= t.short_title %>
</a>
<% end %>
<div class="tab-content">
<div class="row">
<div class="col-3">
<div class="nav flex-column nav-tabs"
id="v-<%= sort %>-media-tab"
role="tablist"
aria-orientation="vertical">
<% teachables.each_with_index do |t, i| %>
<a class="nav-link <%= active(i.zero?) %>"
id="v-pills-<%= sort %>-<%= t.class %>-<%= t.id %>-tab"
data-toggle="pill"
href="#v-pills-<%= sort %>-<%= t.class %>-<%= t.id %>"
role="tab">
<%= t.short_title %>
</a>
<% end %>
</div>
</div>
</div>
<div class="col-9">
<div class="tab-content"
id="v-<%= sort %>-media-tabContent">
<% teachables.each_with_index do |t, i| %>
<div class="tab-pane fade <%= show_tab(i == 0) %>"
id="v-pills-<%= sort %>-<%= t.class %>-<%= t.id %>"
role="tabpanel">
<% relevant = relevant_media(t, media, 50)&.sort_by(&:created_at)
&.natural_sort_by(&:local_info) %>
<% if relevant.present? %>
<div class="row">
<% split_list(relevant, 2).each do |media_list| %>
<div class="col-6">
<ul>
<%= render partial: 'media/table/entry',
collection: media_list.compact,
as: :medium,
cached: true %>
</ul>
</div>
<% end %>
</div>
<% end %>
<% if relevant.size == 50 %>
<%= t('admin.medium.use_search_html',
media_search: link_to(t('admin.main.media_search'),
administration_search_path)) %>
<% end %>
</div>
<% end %>
<div class="col-9">
<div class="tab-content" id="v-<%= sort %>-media-tabContent">
<% teachables.each_with_index do |t, i| %>
<div class="tab-pane fade <%= show_tab(i == 0) %>"
id="v-pills-<%= sort %>-<%= t.class %>-<%= t.id %>"
role="tabpanel">
<% relevant = relevant_media(t, media, 50)&.sort_by(&:created_at)
&.natural_sort_by(&:local_info) %>
<% if relevant.present? %>
<div class="row">
<% split_list(relevant, 2).each do |media_list| %>
<div class="col-6">
<ul>
<%= render partial: 'media/table/entry',
collection: media_list.compact,
as: :medium,
cached: true %>
</ul>
</div>
<% end %>
</div>
<% end %>
<% if relevant.size == 50 %>
<%= t('admin.medium.use_search_html',
media_search: link_to(t('admin.main.media_search'),
administration_search_path)) %>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 3fc077f

Please sign in to comment.