Merge pull request from mlorb/ml-sci-5323

Implement styling for the inventories empty state [SCI-5323]
This commit is contained in:
aignatov-bio 2021-03-08 11:42:48 +01:00 committed by GitHub
commit ea424e4a12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 83 additions and 8 deletions
app
assets/stylesheets
views/repositories
config/locales
public/images

View file

@ -519,3 +519,63 @@
color: $color-silver-chalice;
}
}
.empty-sidebar-container {
padding: 1em 2.5em 2em 2em;
.repo-template {
border-radius: $border-radius-modal;
box-shadow: $modal-shadow;
font-weight: bold;
list-style-type: none;
padding-inline-start: 0;
li {
padding: 1em;
}
.fas-custom {
float: right;
}
}
.instructions {
@include font-main;
padding: .75em .25em;
}
}
.empty-repositories {
.content-header {
align-items: center;
border-bottom: $border-tertiary;
display: flex;
height: 4em;
margin-left: -2em;
padding-left: 2em;
width: calc(100% + 4em);
h1 {
margin: 0;
}
}
.content-body {
text-align: center;
.description {
@include font-main;
color: $color-silver-chalice;
margin: auto;
margin-bottom: 2em;
max-width: 570px;
}
}
.empty-inventory-img {
display: block;
margin: auto;
margin-top: 60px;
max-height: 290px;
}
}

View file

@ -1,27 +1,38 @@
<% provide(:head_title, t('libraries.index.head_title')) %>
<% provide(:container_class, 'no-second-nav-container') %>
<%= render partial: 'sidebar', locals: { repositories: @repositories, archived: false } %>
<div class="content-pane flexible repositories-index" data-readonly="<%= !current_user.is_admin_of_team?(current_team) %>">
<% provide(:sidebar_url, sidebar_repositories_path) %>
<% provide(:sidebar_title, t('sidebar.repositories.sidebar_title')) %>
<%= content_for :sidebar do %>
<div class="empty-sidebar-container">
<ul class="repo-template">
<li><%= t('repositories.index.sidebar_repo1') %></li>
<li><%= t('repositories.index.sidebar_repo2') %><%= draw_custom_icon('i-shared') %></li>
<li><%= t('repositories.index.sidebar_repo3') %></li>
</ul>
<div class="instructions">
<%= t('repositories.index.sidebar_instructions') %>
</div>
</div>
<% end %>
<div class="content-pane flexible empty-repositories" data-readonly="<%= !current_user.is_admin_of_team?(current_team) %>">
<div class="content-header">
<h1 data-view-mode="active"><%= t('libraries.index.head_title') %></h1>
</div>
<div class="content-body">
<%= image_tag('/images/empty_inventory_state.png', class: 'empty-inventory-img') %>
<h1>
<%= t('repositories.index.empty_title') %>
</h1>
<% if can_create_repositories?(current_team) %>
<h5>
<%= t('repositories.index.empty_description_with_create') %>
</h5>
<div class="description"><%= t('repositories.index.empty_description_with_create') %></div>
<a id="createRepoBtn" class="btn btn-primary create-new-repository" data-remote="true" href="<%= create_modal_team_repositories_path(current_team) %>">
<span class="fas fa-plus"></span>
<span class="hidden-xs"><%= t('libraries.index.no_libraries.create_new_button') %></span>
</a>
<% else %>
<h5>
<%= t('repositories.index.empty_description_no_create') %>
</h5>
<div class="description"><%= t('repositories.index.empty_description_no_create') %></div>
<% end %>
</div>
</div>

View file

@ -1231,6 +1231,10 @@ en:
empty_title: "Your team has no inventories yet"
empty_description_no_create: "It would be a shame to waste all this space. Sadly you dont have permission to add inventories. You can ask your team admin to grant you that permission."
empty_description_with_create: "It would be a shame to waste all this space. Create your first inventory now"
sidebar_instructions: "This is where a list of inventories will appear once they are created. This list will allow you to quickly jump from one inventory to another"
sidebar_repo1: "Reagents"
sidebar_repo2: "Samples"
sidebar_repo3: "Devices"
add_new_repository_tab: "Add inventory"
delete_flash: "\"%{name}\" inventory was successfully deleted!"
rename_flash: "\"%{old_name}\" inventory was successfully renamed to \"%{new_name}\"!"

Binary file not shown.

After

(image error) Size: 52 KiB