scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-08 07:21:03 +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;
.breadcrumbs-link {
display: inline-block;
color: var(--sn-blue);
max-width: var(--max-breadcrumbs-link-width);
white-space: nowrap;
@ -19,6 +20,23 @@
}
.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]}",
title: first_breadcrumb_item[:label],
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="show-breadcrumbs" data-toggle="dropdown" title="<%= t('projects.index.breadcrumbs_collapsed') %>">
•••
@ -18,19 +22,27 @@
<ul class="dropdown-menu breadcrumbs-dropdown" role="menu">
<% @breadcrumbs_items.each do |item| %>
<li>
<%= link_to(item[:label] + ' >', item[:url],
<%= link_to(item[:label], item[:url],
data: item[:data]) %>
</li>
<% end %>
</ul>
</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 %>
<%= link_to(item[:label], item[:url],
class: "breadcrumbs-link #{item[:class]}",
title: item[:label],
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 %>
<span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>">
<%= last_item[:label] %>
@ -42,7 +54,11 @@
class: "breadcrumbs-link #{item[:class]}",
title: item[:label],
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 %>
<span class="breadcrumbs-link <%= last_item[:class] %>" title="<%= last_item[:label] %>">