scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-10 16:31:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Style the new breadcrumbs [SCI-8087]

Browse source
This commit is contained in:
sboursen-scinote 2023-04-02 18:42:21 +02:00
parent 8ae354b180
commit 6d34ea41d2
2 changed files with 40 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/assets/stylesheets/navigation/breadcrumbs.scss
View file

@ -7,6 +7,7 @@
column-gap: 14px; column-gap: 14px;
.breadcrumbs-link { .breadcrumbs-link {
display: inline-block;
color: var(--sn-blue); color: var(--sn-blue);
max-width: var(--max-breadcrumbs-link-width); max-width: var(--max-breadcrumbs-link-width);
white-space: nowrap; white-space: nowrap;
@ -19,6 +20,23 @@
} }
.delimiter { .delimiter {
color: var(--sn-grey); padding-bottom: 4px;
}
.breadcrumbs-collapsed-container {
color: var(--sn-blue);
position: relative;
.show-breadcrumbs {
align-items: center;
cursor: pointer;
display: flex;
position: relative;
}
a {
@include font-button;
color: var(--sn-blue);
}
} }
} }

26
app/views/shared/navigation/_breadcrumbs.html.erb
View file

@ -9,7 +9,11 @@
class: "breadcrumbs-link #{first_breadcrumb_item[:class]}", class: "breadcrumbs-link #{first_breadcrumb_item[:class]}",
title: first_breadcrumb_item[:label], title: first_breadcrumb_item[:label],
data: first_breadcrumb_item[:data]) %> data: first_breadcrumb_item[:data]) %>
<span class="delimiter">&gt;</span> <span class="delimiter">
<img src="<%= asset_path "icon_small/navigate_next.svg"%>"
alt="navigate next"
class="navigate_next">
</span>
<span class="breadcrumbs-collapsed-container"> <span class="breadcrumbs-collapsed-container">
<span class="show-breadcrumbs" data-toggle="dropdown" title="<%= t('projects.index.breadcrumbs_collapsed') %>"> <span class="show-breadcrumbs" data-toggle="dropdown" title="<%= t('projects.index.breadcrumbs_collapsed') %>">
••• •••
@ -18,19 +22,27 @@
<ul class="dropdown-menu breadcrumbs-dropdown" role="menu"> <ul class="dropdown-menu breadcrumbs-dropdown" role="menu">
<% @breadcrumbs_items.each do |item| %> <% @breadcrumbs_items.each do |item| %>
<li> <li>
<%= link_to(item[:label] + ' >', item[:url], <%= link_to(item[:label], item[:url],
data: item[:data]) %> data: item[:data]) %>
</li> </li>
<% end %> <% end %>
</ul> </ul>
</span> </span>
<span class="delimiter">&gt;</span> <span class="delimiter">
<img src="<%= asset_path "icon_small/navigate_next.svg"%>"
alt="navigate next"
class="navigate_next">
</span>
<% item = last_breadcrumb_items.first %> <% item = last_breadcrumb_items.first %>
<%= link_to(item[:label], item[:url], <%= link_to(item[:label], item[:url],
class: "breadcrumbs-link #{item[:class]}", class: "breadcrumbs-link #{item[:class]}",
title: item[:label], title: item[:label],
data: item[:data]) %> data: item[:data]) %>
<span class="delimiter">&gt;</span> <span class="delimiter">
<img src="<%= asset_path "icon_small/navigate_next.svg"%>"
alt="navigate next"
class="navigate_next">
</span>
<% last_item = last_breadcrumb_items.last %> <% last_item = last_breadcrumb_items.last %>
<span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>"> <span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>">
<%= last_item[:label] %> <%= last_item[:label] %>
@ -42,7 +54,11 @@
class: "breadcrumbs-link #{item[:class]}", class: "breadcrumbs-link #{item[:class]}",
title: item[:label], title: item[:label],
data: item[:data]) %> data: item[:data]) %>
<span class="delimiter">&gt;</span> <span class="delimiter">
<img src="<%= asset_path "icon_small/navigate_next.svg"%>"
alt="navigate next"
class="navigate_next">
</span>
<% end %> <% end %>
<span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>"> <span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>">