Improve behaviour of secondary action lists when wrapping

Based on https://stackoverflow.com/a/31732902 this ensure that when
a secondary action list wraps the additional lines don't start with
an item delimiter by pushing it to the left, outside of a parent nav
element which then hides it.
This commit is contained in:
Tom Hughes 2021-08-21 15:32:47 +01:00
parent 3f8cf32272
commit 29e9857145
10 changed files with 247 additions and 223 deletions

View file

@ -1474,28 +1474,28 @@ abbr.geo {
/* General styles for action lists / subnavs / pager navs */
ul.secondary-actions {
font-style: normal;
margin-bottom: 0;
margin-left: 0;
padding: 0;
&.pager {
display: inline-block;
margin-right: 60px;
}
> li {
display: block;
float: left;
list-style: none;
border-left: 1px solid $grey;
padding-left: $lineheight/2;
margin-right: $lineheight/2;
&:first-child {
border-left: 0;
padding-left: 0;
nav.secondary-actions {
margin-left: -11px;
overflow: hidden;
> ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0;
margin-left: -1px;
padding: 0;
&.pager {
display: inline-block;
margin-right: 60px;
}
&:last-child {
margin-right: 0px;
> li {
flex-basis: auto;
list-style: none;
border-left: 1px solid $grey;
padding-left: $lineheight/2;
margin-right: $lineheight/2;
margin-bottom: $lineheight/8;
}
}
}

View file

@ -31,15 +31,17 @@
<% end %>
</p>
<ul class='secondary-actions clearfix text-muted'>
<li><%= link_to t("users.show.send message"), new_message_path(contact) %></li>
<li>
<% if current_user.is_friends_with?(contact) %>
<%= link_to t("users.show.remove as friend"), remove_friend_path(:display_name => contact.display_name, :referer => request.fullpath), :method => :post %>
<% else %>
<%= link_to t("users.show.add as friend"), make_friend_path(:display_name => contact.display_name, :referer => request.fullpath), :method => :post %>
<% end %>
</li>
</ul>
<nav class='secondary-actions'>
<ul class='clearfix text-muted'>
<li><%= link_to t("users.show.send message"), new_message_path(contact) %></li>
<li>
<% if current_user.is_friends_with?(contact) %>
<%= link_to t("users.show.remove as friend"), remove_friend_path(:display_name => contact.display_name, :referer => request.fullpath), :method => :post %>
<% else %>
<%= link_to t("users.show.add as friend"), make_friend_path(:display_name => contact.display_name, :referer => request.fullpath), :method => :post %>
<% end %>
</li>
</ul>
</nav>
</div>
<% end %>

View file

@ -32,10 +32,12 @@
<% if friends.empty? %>
<%= t ".no friends" %>
<% else %>
<ul class='secondary-actions clearfix'>
<li><%= link_to t(".friends_changesets"), friend_changesets_path %></li>
<li><%= link_to t(".friends_diaries"), friends_diary_entries_path %></li>
</ul>
<nav class='secondary-actions'>
<ul class='clearfix'>
<li><%= link_to t(".friends_changesets"), friend_changesets_path %></li>
<li><%= link_to t(".friends_diaries"), friends_diary_entries_path %></li>
</ul>
</nav>
<div id="friends-container">
<%= render :partial => "contact", :collection => friends, :locals => { :type => "friend" } %>
</div>
@ -48,10 +50,12 @@
<% if nearby.empty? %>
<%= t ".no nearby users" %>
<% else %>
<ul class='secondary-actions clearfix'>
<li><%= link_to t(".nearby_changesets"), nearby_changesets_path %></li>
<li><%= link_to t(".nearby_diaries"), nearby_diary_entries_path %></li>
</ul>
<nav class='secondary-actions'>
<ul class='clearfix'>
<li><%= link_to t(".nearby_changesets"), nearby_changesets_path %></li>
<li><%= link_to t(".nearby_diaries"), nearby_diary_entries_path %></li>
</ul>
</nav>
<div id="nearbyusers">
<%= render :partial => "contact", :collection => nearby, :locals => { :type => "nearby mapper" } %>
</div>

View file

@ -23,31 +23,33 @@
<%= render :partial => "location", :object => diary_entry %>
<% end %>
<ul class='secondary-actions clearfix'>
<% if params[:action] == 'index' %>
<li><%= link_to t(".comment_link"), diary_entry_path(diary_entry.user, diary_entry, :anchor => "newcomment") %></li>
<li><%= link_to t(".reply_link"), new_message_path(diary_entry.user, :message => { :title => "Re: #{diary_entry.title}" }) %></li>
<li><%= link_to t(".comment_count", :count => diary_entry.visible_comments.count), diary_entry_path(diary_entry.user, diary_entry, :anchor => "comments") %></li>
<% end %>
<nav class='secondary-actions'>
<ul class='clearfix'>
<% if params[:action] == 'index' %>
<li><%= link_to t(".comment_link"), diary_entry_path(diary_entry.user, diary_entry, :anchor => "newcomment") %></li>
<li><%= link_to t(".reply_link"), new_message_path(diary_entry.user, :message => { :title => "Re: #{diary_entry.title}" }) %></li>
<li><%= link_to t(".comment_count", :count => diary_entry.visible_comments.count), diary_entry_path(diary_entry.user, diary_entry, :anchor => "comments") %></li>
<% end %>
<% if current_user && current_user == diary_entry.user %>
<li><%= link_to t(".edit_link"), :action => "edit", :display_name => diary_entry.user.display_name, :id => diary_entry.id %></li>
<% end %>
<% if current_user && current_user == diary_entry.user %>
<li><%= link_to t(".edit_link"), :action => "edit", :display_name => diary_entry.user.display_name, :id => diary_entry.id %></li>
<% end %>
<% if current_user and diary_entry.user != current_user %>
<li>
<%= report_link(t(".report"), diary_entry) %>
</li>
<% end %>
<% if current_user and diary_entry.user != current_user %>
<li>
<%= report_link(t(".report"), diary_entry) %>
</li>
<% end %>
<% if can? :hide, DiaryEntry %>
<li>
<% if diary_entry.visible %>
<%= link_to t(".hide_link"), hide_diary_entry_path(:display_name => diary_entry.user.display_name, :id => diary_entry.id), :method => :post, :data => { :confirm => t(".confirm") } %>
<% else %>
<%= link_to t(".unhide_link"), unhide_diary_entry_path(:display_name => diary_entry.user.display_name, :id => diary_entry.id), :method => :post, :data => { :confirm => t(".confirm") } %>
<% end %>
</li>
<% end %>
</ul>
<% if can? :hide, DiaryEntry %>
<li>
<% if diary_entry.visible %>
<%= link_to t(".hide_link"), hide_diary_entry_path(:display_name => diary_entry.user.display_name, :id => diary_entry.id), :method => :post, :data => { :confirm => t(".confirm") } %>
<% else %>
<%= link_to t(".unhide_link"), unhide_diary_entry_path(:display_name => diary_entry.user.display_name, :id => diary_entry.id), :method => :post, :data => { :confirm => t(".confirm") } %>
<% end %>
</li>
<% end %>
</ul>
</nav>
</div>

View file

@ -6,19 +6,21 @@
<% end %>
<h1><%= @title %></h1>
<ul class="secondary-actions clearfix">
<% unless params[:friends] or params[:nearby] -%>
<li><%= rss_link_to :action => "rss", :language => params[:language] %></li>
<% end -%>
<nav class="secondary-actions">
<ul class="clearfix">
<% unless params[:friends] or params[:nearby] -%>
<li><%= rss_link_to :action => "rss", :language => params[:language] %></li>
<% end -%>
<% if @user && @user == current_user || !@user && current_user %>
<li><%= link_to image_tag("new.png", :class => "small_icon") + t(".new"), new_diary_entry_path, :title => t(".new_title") %></li>
<% end %>
<% if @user && @user == current_user || !@user && current_user %>
<li><%= link_to image_tag("new.png", :class => "small_icon") + t(".new"), new_diary_entry_path, :title => t(".new_title") %></li>
<% end %>
<% if !@user && current_user %>
<li><%= link_to t(".my_diary"), :controller => "diary_entries", :action => "index", :display_name => current_user.display_name %></li>
<% end %>
</ul>
<% if !@user && current_user %>
<li><%= link_to t(".my_diary"), :controller => "diary_entries", :action => "index", :display_name => current_user.display_name %></li>
<% end %>
</ul>
</nav>
</div>
<% end %>

View file

@ -44,14 +44,16 @@
</td>
<td>
<% if trace.inserted? %>
<ul class="secondary-actions">
<li>
<%= link_to t(".view_map"), { :controller => "site", :action => "index", :mlat => trace.latitude, :mlon => trace.longitude, :anchor => "map=14/#{trace.latitude}/#{trace.longitude}" } %>
</li>
<li>
<%= link_to t(".edit_map"), { :controller => "site", :action => "edit", :gpx => trace.id } %>
</li>
</ul>
<nav class="secondary-actions">
<ul>
<li>
<%= link_to t(".view_map"), { :controller => "site", :action => "index", :mlat => trace.latitude, :mlon => trace.longitude, :anchor => "map=14/#{trace.latitude}/#{trace.longitude}" } %>
</li>
<li>
<%= link_to t(".edit_map"), { :controller => "site", :action => "edit", :gpx => trace.id } %>
</li>
</ul>
</nav>
<% end %>
</td>
</tr>

View file

@ -20,18 +20,20 @@
<%= render :partial => "block", :locals => { :show_revoke_link => show_revoke_link, :show_user_name => show_user_name, :show_creator_name => show_creator_name }, :collection => @user_blocks %>
</table>
<ul class='secondary-actions'>
<% if @user_blocks_pages.current_page.number > 1 -%>
<li><%= link_to t(".previous"), @params.merge(:page => @user_blocks_pages.current_page.number - 1) %></li>
<% else -%>
<li><%= t(".previous") %></li>
<% end -%>
<nav class='secondary-actions'>
<ul>
<% if @user_blocks_pages.current_page.number > 1 -%>
<li><%= link_to t(".previous"), @params.merge(:page => @user_blocks_pages.current_page.number - 1) %></li>
<% else -%>
<li><%= t(".previous") %></li>
<% end -%>
<li><%= t(".showing_page", :page => @user_blocks_pages.current_page.number) %></li>
<li><%= t(".showing_page", :page => @user_blocks_pages.current_page.number) %></li>
<% if @user_blocks_pages.current_page.number < @user_blocks_pages.page_count -%>
<li><%= link_to t(".next"), @params.merge(:page => @user_blocks_pages.current_page.number + 1) %></li>
<% else -%>
<li><%= t(".next") %></li>
<% end -%>
</ul>
<% if @user_blocks_pages.current_page.number < @user_blocks_pages.page_count -%>
<li><%= link_to t(".next"), @params.merge(:page => @user_blocks_pages.current_page.number + 1) %></li>
<% else -%>
<li><%= t(".next") %></li>
<% end -%>
</ul>
</nav>

View file

@ -3,10 +3,12 @@
<h1><%= t(".heading_html",
:name => link_to(@user_block.user.display_name,
user_path(@user_block.user))) %></h1>
<ul class='secondary-actions clearfix'>
<li><%= link_to t(".show"), @user_block %></li>
<li><%= link_to t(".back"), user_blocks_path %></li>
</ul>
<nav class='secondary-actions'>
<ul class='clearfix'>
<li><%= link_to t(".show"), @user_block %></li>
<li><%= link_to t(".back"), user_blocks_path %></li>
</ul>
</nav>
<% end %>
<%= bootstrap_form_for(@user_block) do |f| %>

View file

@ -8,17 +8,19 @@
user_path(@user_block.user)),
:block_by => link_to(@user_block.creator.display_name,
user_path(@user_block.creator))) %></h1>
<ul class='secondary-actions clearfix'>
<% if @user_block.ends_at > Time.now.getutc %>
<% if current_user and current_user.id == @user_block.creator_id %>
<li><%= link_to t(".edit"), edit_user_block_path(@user_block) %></li>
<% end %>
<% if can?(:revoke, UserBlock) %>
<li><%= link_to t(".revoke"), revoke_user_block_path(@user_block) %></li>
<% end %>
<% end %>
<li><%= link_to t(".back"), user_blocks_path %></li>
</ul>
<nav class='secondary-actions'>
<ul class='clearfix'>
<% if @user_block.ends_at > Time.now.getutc %>
<% if current_user and current_user.id == @user_block.creator_id %>
<li><%= link_to t(".edit"), edit_user_block_path(@user_block) %></li>
<% end %>
<% if can?(:revoke, UserBlock) %>
<li><%= link_to t(".revoke"), revoke_user_block_path(@user_block) %></li>
<% end %>
<% end %>
<li><%= link_to t(".back"), user_blocks_path %></li>
</ul>
</nav>
<% end %>
<dl class="row">

View file

@ -7,109 +7,113 @@
<h1><%= @user.display_name %> <%= role_icons(@user) %></h1>
<% if current_user and @user.id == current_user.id %>
<!-- Displaying user's own profile page -->
<ul class='secondary-actions clearfix'>
<li>
<%= link_to t(".my edits"), :controller => "changesets", :action => "index", :display_name => current_user.display_name %>
<span class='count-number'><%= number_with_delimiter(current_user.changesets.size) %></span>
</li>
<li>
<%= link_to t(".my notes"), user_notes_path(@user) %>
</li>
<li>
<%= link_to t(".my traces"), :controller => "traces", :action => "mine" %>
<span class='count-number'><%= number_with_delimiter(current_user.traces.size) %></span>
</li>
<li>
<%= link_to t(".my diary"), :controller => "diary_entries", :action => "index", :display_name => current_user.display_name %>
<span class='count-number'><%= number_with_delimiter(current_user.diary_entries.size) %></span>
</li>
<li>
<%= link_to t(".my comments"), diary_comments_path(current_user) %>
</li>
<li>
<%= link_to t(".my settings"), user_account_path(current_user) %>
</li>
<% if current_user.blocks.exists? %>
<nav class='secondary-actions'>
<ul class='clearfix'>
<li>
<%= link_to t(".blocks on me"), user_blocks_on_path(current_user) %>
<span class='count-number'><%= number_with_delimiter(current_user.blocks.active.size) %></span>
<%= link_to t(".my edits"), :controller => "changesets", :action => "index", :display_name => current_user.display_name %>
<span class='count-number'><%= number_with_delimiter(current_user.changesets.size) %></span>
</li>
<% end %>
<% if can?(:create, UserBlock) and current_user.blocks_created.exists? %>
<li>
<%= link_to t(".blocks by me"), user_blocks_by_path(current_user) %>
<span class='count-number'><%= number_with_delimiter(current_user.blocks_created.active.size) %></span>
<%= link_to t(".my notes"), user_notes_path(@user) %>
</li>
<li>
<%= link_to t(".my traces"), :controller => "traces", :action => "mine" %>
<span class='count-number'><%= number_with_delimiter(current_user.traces.size) %></span>
</li>
<li>
<%= link_to t(".my diary"), :controller => "diary_entries", :action => "index", :display_name => current_user.display_name %>
<span class='count-number'><%= number_with_delimiter(current_user.diary_entries.size) %></span>
</li>
<li>
<%= link_to t(".my comments"), diary_comments_path(current_user) %>
</li>
<li>
<%= link_to t(".my settings"), user_account_path(current_user) %>
</li>
<% end %>
</ul>
<% if current_user.blocks.exists? %>
<li>
<%= link_to t(".blocks on me"), user_blocks_on_path(current_user) %>
<span class='count-number'><%= number_with_delimiter(current_user.blocks.active.size) %></span>
</li>
<% end %>
<% if can?(:create, UserBlock) and current_user.blocks_created.exists? %>
<li>
<%= link_to t(".blocks by me"), user_blocks_by_path(current_user) %>
<span class='count-number'><%= number_with_delimiter(current_user.blocks_created.active.size) %></span>
</li>
<% end %>
</ul>
</nav>
<% else %>
<!-- Displaying user profile page to the public -->
<ul class='secondary-actions clearfix'>
<nav class='secondary-actions'>
<ul class='clearfix'>
<li>
<%= link_to t(".edits"), :controller => "changesets", :action => "index", :display_name => @user.display_name %>
<span class='count-number'><%= number_with_delimiter(@user.changesets.size) %></span>
</li>
<li>
<%= link_to t(".notes"), user_notes_path(@user) %>
</li>
<li>
<%= link_to t(".traces"), :controller => "traces", :action => "index", :display_name => @user.display_name %>
<span class='count-number'><%= number_with_delimiter(@user.traces.size) %></span>
</li>
<li>
<%= link_to t(".edits"), :controller => "changesets", :action => "index", :display_name => @user.display_name %>
<span class='count-number'><%= number_with_delimiter(@user.changesets.size) %></span>
</li>
<li>
<%= link_to t(".notes"), user_notes_path(@user) %>
</li>
<li>
<%= link_to t(".traces"), :controller => "traces", :action => "index", :display_name => @user.display_name %>
<span class='count-number'><%= number_with_delimiter(@user.traces.size) %></span>
</li>
<!-- Displaying another user's profile page -->
<!-- Displaying another user's profile page -->
<li>
<%= link_to t(".send message"), new_message_path(@user) %>
</li>
<li>
<%= link_to t(".diary"), :controller => "diary_entries", :action => "index", :display_name => @user.display_name %>
<span class='count-number'><%= number_with_delimiter(@user.diary_entries.size) %></span>
</li>
<li>
<%= link_to t(".comments"), diary_comments_path(@user) %>
</li>
<li>
<% if current_user and current_user.is_friends_with?(@user) %>
<%= link_to t(".remove as friend"), remove_friend_path(:display_name => @user.display_name), :method => :post %>
<% elsif current_user %>
<%= link_to t(".add as friend"), make_friend_path(:display_name => @user.display_name), :method => :post %>
<% else %>
<%= link_to t(".add as friend"), make_friend_path(:display_name => @user.display_name) %>
<li>
<%= link_to t(".send message"), new_message_path(@user) %>
</li>
<li>
<%= link_to t(".diary"), :controller => "diary_entries", :action => "index", :display_name => @user.display_name %>
<span class='count-number'><%= number_with_delimiter(@user.diary_entries.size) %></span>
</li>
<li>
<%= link_to t(".comments"), diary_comments_path(@user) %>
</li>
<li>
<% if current_user and current_user.is_friends_with?(@user) %>
<%= link_to t(".remove as friend"), remove_friend_path(:display_name => @user.display_name), :method => :post %>
<% elsif current_user %>
<%= link_to t(".add as friend"), make_friend_path(:display_name => @user.display_name), :method => :post %>
<% else %>
<%= link_to t(".add as friend"), make_friend_path(:display_name => @user.display_name) %>
<% end %>
</li>
<% if @user.blocks.exists? %>
<li>
<%= link_to t(".block_history"), user_blocks_on_path(@user) %>
<span class='count-number'><%= number_with_delimiter(@user.blocks.active.size) %></span>
</li>
<% end %>
</li>
<% if @user.blocks.exists? %>
<li>
<%= link_to t(".block_history"), user_blocks_on_path(@user) %>
<span class='count-number'><%= number_with_delimiter(@user.blocks.active.size) %></span>
</li>
<% end %>
<% if @user.moderator? and @user.blocks_created.exists? %>
<li>
<%= link_to t(".moderator_history"), user_blocks_by_path(@user) %>
<span class='count-number'><%= number_with_delimiter(@user.blocks_created.active.size) %></span>
</li>
<% end %>
<% if @user.moderator? and @user.blocks_created.exists? %>
<li>
<%= link_to t(".moderator_history"), user_blocks_by_path(@user) %>
<span class='count-number'><%= number_with_delimiter(@user.blocks_created.active.size) %></span>
</li>
<% end %>
<% if can?(:create, UserBlock) %>
<li>
<%= link_to t(".create_block"), new_user_block_path(@user) %>
</li>
<% end %>
<% if can?(:create, UserBlock) %>
<li>
<%= link_to t(".create_block"), new_user_block_path(@user) %>
</li>
<% end %>
<% if current_user and @user.id != current_user.id %>
<li>
<%= report_link(t(".report"), @user) %>
</li>
<% end %>
</ul>
<% if current_user and @user.id != current_user.id %>
<li>
<%= report_link(t(".report"), @user) %>
</li>
<% end %>
</ul>
</nav>
<% end %>
<p class='text-muted'>
@ -130,37 +134,39 @@
</div>
<% if can?(:set_status, User) || can?(:destroy, User) %>
<ul class='secondary-actions clearfix'>
<% if can? :set_status, User %>
<% if ["active", "confirmed"].include? @user.status %>
<li>
<%= link_to t(".deactivate_user"), set_status_user_path(:status => "pending", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
</li>
<% elsif ["pending"].include? @user.status %>
<li>
<%= link_to t(".activate_user"), set_status_user_path(:status => "active", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
</li>
<% end %>
<nav class='secondary-actions'>
<ul class='clearfix'>
<% if can? :set_status, User %>
<% if ["active", "confirmed"].include? @user.status %>
<li>
<%= link_to t(".deactivate_user"), set_status_user_path(:status => "pending", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
</li>
<% elsif ["pending"].include? @user.status %>
<li>
<%= link_to t(".activate_user"), set_status_user_path(:status => "active", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
</li>
<% end %>
<% if ["active", "suspended"].include? @user.status %>
<li>
<%= link_to t(".confirm_user"), set_status_user_path(:status => "confirmed", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
</li>
<% end %>
<% if ["active", "suspended"].include? @user.status %>
<li>
<%= link_to t(".confirm_user"), set_status_user_path(:status => "confirmed", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
</li>
<% end %>
<li>
<% if ["pending", "active", "confirmed", "suspended"].include? @user.status %>
<%= link_to t(".hide_user"), set_status_user_path(:status => "deleted", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
<% else %>
<%= link_to t(".unhide_user"), set_status_user_path(:status => "active", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
<% else %>
<%= link_to t(".unhide_user"), set_status_user_path(:status => "active", :display_name => @user.display_name), :method => :post, :data => { :confirm => t(".confirm") } %>
<% end %>
</li>
<% end %>
<% end %>
<% if can? :destroy, User %>
<li>
<%= link_to t(".delete_user"), user_path(:display_name => @user.display_name), :method => :delete, :data => { :confirm => t(".confirm") } %>
</li>
<% end %>
</ul>
<% if can? :destroy, User %>
<li>
<%= link_to t(".delete_user"), user_path(:display_name => @user.display_name), :method => :delete, :data => { :confirm => t(".confirm") } %>
</li>
<% end %>
</ul>
</nav>
<% end %>
<% if current_user and current_user.administrator? -%>