scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-28 07:54:28 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix css for status flows

Browse source
This commit is contained in:
aignatov-bio 2020-09-02 15:41:07 +02:00
parent 447ba6aa64
commit 257329ce80
9 changed files with 81 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/stylesheets/dashboard/current_tasks.scss
View file

@ -142,7 +142,7 @@
.current-tasks-list {
align-items: center;
display: grid;
grid-template-columns: auto max-content max-content;
grid-template-columns: 1fr max-content max-content;
padding: 0 1em;
&.disabled {
@ -157,9 +157,9 @@
.current-task-breadcrumbs {
@include font-small;
color: $color-silver-chalice;
grid-column: 1 / span 3;
line-height: 14px;
margin-top: .5em;
grid-column: span 3;
line-height: 1em;
padding: .5em .5em .25em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -179,21 +179,19 @@
}
.task-name {
flex-grow: 1;
font-size: $font-size-base;
font-weight: bold;
overflow: hidden;
padding: 0 .5em;
text-overflow: ellipsis;
white-space: nowrap;
}
.task-due-date {
flex-basis: 280px;
flex-shrink: 0;
padding: 0 2em 0 1em;
.fas {
padding: 4px;
padding: .25em;
}
&.overdue {
@ -211,6 +209,7 @@
.task-status-container {
grid-column: 3;
padding: 0 .5em;
text-align: right;
.task-status {
@ -222,7 +221,7 @@
}
}
&:hover {
&:hover > * {
background: $color-concrete;
}
}
@ -309,6 +308,7 @@
.current-task-breadcrumbs {
grid-column: 1;
padding-left: 0;
}
.task-name {
@ -320,8 +320,10 @@
.task-due-date {
@include font-small;
border: 0;
height: 24px;
padding-left: 0;
.fas {
display: none;
}
@ -330,6 +332,7 @@
.task-status-container {
grid-column: 1;
text-align: left;
padding-left: 0;
}
}
}

2
app/assets/stylesheets/my_modules/protocols/index.scss
View file

@ -506,7 +506,7 @@
.task-information {
column-gap: 1em;
display: grid;
grid-template-columns: auto max-content;
grid-template-columns: auto minmax(max-content, 18em);
.task-section-header {
grid-column: 1 / span 1;

55
app/assets/stylesheets/my_modules/status_flow.scss
View file

@ -11,15 +11,63 @@
.dropdown-toggle {
color: $color-white;
text-align: left;
width: 15em;
width: 100%;
.caret {
margin: 8px 0;
}
}
.dropdown-menu > li {
line-height: 35px;
&.open .dropdown-menu{
align-items: center;
display: grid;
grid-template-columns: max-content min-content minmax(0, auto);
padding: .5em 0;
li {
display: contents;
> * {
cursor: pointer;
line-height: 2em;
padding: .5em 1em;
}
&:hover > *{
background: $color-concrete;
}
}
.fa-long-arrow-alt-right {
color: $color-silver-chalice;
padding: .5em 0;
}
.status-container {
display: flex;
}
.status-name {
border-radius: $border-radius-tag;
color: $color-white;
display: inline-block;
font-weight: bold;
line-height: 1em;
max-width: 100%;
overflow: hidden;
padding: .5em;
text-overflow: ellipsis;
white-space: nowrap;
}
#viewTaskFlow {
cursor: pointer;
display: list-item;
grid-column: span 3;
line-height: 2em;
padding: .5em 1em;
}
}
}
}
@ -46,6 +94,7 @@
}
.status-block {
@include font-button;
border-radius: $border-radius-tag;
color: $color-white;
font-weight: bold;

1
app/assets/stylesheets/projects.scss
View file

@ -237,6 +237,7 @@ path, ._jsPlumb_endpoint {
.panel-body .due-date-link {
color: $color-emperor;
display: block;
}
.panel-body .due-date-label {

2
app/assets/stylesheets/themes/scinote.scss
View file

@ -761,13 +761,13 @@ ul.double-line > li {
.status-label {
background-color: var(--state-color);
color: $color-white;
display: inline-block;
margin: 3px 0;
max-width: 100%;
overflow: hidden;
padding: 2px 8px;
text-overflow: ellipsis;
white-space: nowrap;
width: fit-content;
}
}

2
app/views/my_modules/modals/_status_flow_modal.html.erb
View file

@ -3,7 +3,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h2 class="modal-title"><%= t('my_modules.modals.status_flow_modal.title', status_flow: @my_module.my_module_status_flow.name) %></h2>
<h2 class="modal-title"><%= t('my_modules.modals.status_flow_modal.title') %></h2>
</div>
<div class="modal-body"></div>
<div class="modal-footer">

12
app/views/my_modules/status_flow/_task_flow_button.html.erb
View file

@ -14,14 +14,22 @@
<% unless status.initial_status? %>
<% previous_s = status.previous_status %>
<li data-state-id="<%= previous_s.id %>">
<span><%= t 'my_module_statuses.dropdown.return_label' %></span> <span style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></span>
<span><%= t('my_module_statuses.dropdown.return_label') %></span>
<i class="fas fa-long-arrow-alt-right"></i>
<div class=" status-container">
<div class="status-name" style="<%= "background-color: #{previous_s.color}" %>"><%= previous_s.name %></div>
</div>
</li>
<% end %>
<% unless status.final_status? %>
<% next_s = status.next_status %>
<li data-state-id="<%= next_s.id %>">
<span><%= t('my_module_statuses.dropdown.move_label') %></span> <span style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></span>
<span><%= t('my_module_statuses.dropdown.move_label') %></span>
<i class="fas fa-long-arrow-alt-right"></i>
<div class="status-container">
<div class="status-name" style="<%= "background-color: #{next_s.color}" %>"><%= next_s.name %></div>
</div>
</li>
<% end %>
<li id="viewTaskFlow">

2
config/locales/en.yml
View file

@ -840,7 +840,7 @@ en:
update_error: "There was an error in updating your item(s)."
modals:
status_flow_modal:
title: "Task status flow: %{status_flow}"
title: "Task status flow"
current_status: "Current status"
done: "Done"
update_repository_record:

4
config/locales/my_module_statuses/en.yml
View file

@ -2,8 +2,8 @@ en:
my_module_statuses:
dropdown:
status_label: Status
move_label: Move to ->
return_label: Return to ->
move_label: Move to
return_label: Return to
view_flow_label: View task flow
update_status:
error: