mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-11 01:44:34 +08:00
Add new task layout details section
This commit is contained in:
Mojca Lorber
parent
3c8a149cf4
commit
cb554e815a
4 changed files with 116 additions and 135 deletions
|
|
@ -39,127 +39,103 @@
|
|||
}
|
||||
}
|
||||
|
||||
#manage-module-tags-modal {
|
||||
.well {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
.complete-button-container {
|
||||
display: inline;
|
||||
float: right;
|
||||
width: 260px;
|
||||
|
||||
.my_module-state-buttons {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.task-details {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.fas.block-icon {
|
||||
color: $color-silver;
|
||||
font-size: 18px;
|
||||
margin-right: 5px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
.flex-block {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
float: left;
|
||||
margin-bottom: 10px;
|
||||
width: calc(100% - 280px);
|
||||
line-height: 32px;
|
||||
|
||||
.flex-block {
|
||||
.flex-block-label {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
margin-right: 10px;
|
||||
|
||||
.flex-block-label {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.datetime-container {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
.date-text {
|
||||
border: 1px solid transparent;
|
||||
font-weight: bold;
|
||||
line-height: 34px;
|
||||
margin-right: 25px;
|
||||
padding: 0 3px;
|
||||
position: relative;
|
||||
|
||||
.alert-green {
|
||||
color: $brand-success;
|
||||
}
|
||||
|
||||
.alert-yellow {
|
||||
color: $brand-warning;
|
||||
}
|
||||
|
||||
.alert-red {
|
||||
color: $brand-danger;
|
||||
}
|
||||
|
||||
.clear-date {
|
||||
color: $color-silver;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 20px;
|
||||
left: 100%;
|
||||
line-height: 34px;
|
||||
margin-left: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.datetime-picker-container {
|
||||
color: $color-emperor;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
#calendarDueDate {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#calendarStartDate {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-calendar-alt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.date-text[data-editable=true] {
|
||||
border-color: $color-silver;
|
||||
border-radius: 3px;
|
||||
|
||||
.clear-date {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.complete-button-container {
|
||||
float: right;
|
||||
width: 260px;
|
||||
.datetime-container {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
|
||||
.my_module-state-buttons {
|
||||
padding-top: 0;
|
||||
.date-text {
|
||||
border: 1px solid transparent;
|
||||
font-weight: bold;
|
||||
line-height: 32px;
|
||||
margin-right: 25px;
|
||||
padding: 0 4px;
|
||||
position: relative;
|
||||
|
||||
.alert-green {
|
||||
color: $brand-success;
|
||||
}
|
||||
|
||||
.alert-yellow {
|
||||
color: $brand-warning;
|
||||
}
|
||||
|
||||
.alert-red {
|
||||
color: $brand-danger;
|
||||
}
|
||||
|
||||
.clear-date {
|
||||
color: $color-silver;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
font-size: 20px;
|
||||
left: 100%;
|
||||
line-height: 34px;
|
||||
margin-left: 5px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.datetime-picker-container {
|
||||
color: $color-emperor;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
#calendarDueDate {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#calendarStartDate {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.fa-calendar-alt {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.date-text[data-editable=true] {
|
||||
border-color: $color-silver;
|
||||
border-radius: 3px;
|
||||
|
||||
.clear-date {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.module-tags {
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
#module-tags {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
|
|
@ -265,6 +241,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#manage-module-tags-modal {
|
||||
.well {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-notes {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,30 @@
|
|||
<% my_module_editable = can_manage_module?(@my_module) %>
|
||||
|
||||
<div class="header-container">
|
||||
|
||||
<div class="flex-block date-block">
|
||||
<span class="fas block-icon fa-calendar-alt"></span>
|
||||
<span class="hidden-xs hidden-sm hidden-md"><%= t('my_modules.module_header.start_date') %></span>
|
||||
<div id="startDateContainer" class="datetime-container" data-update-url="<%= my_module_path(@my_module, format: :json) %>">
|
||||
<%= render partial: "module_header_start_date.html.erb", locals: { my_module: @my_module } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-block date-block" >
|
||||
<span class="fas block-icon fa-calendar-alt"></span>
|
||||
<span class="hidden-xs hidden-sm hidden-md"><%= t('my_modules.module_header.due_date') %></span>
|
||||
<div id="dueDateContainer" class="datetime-container" data-update-url="<%= my_module_path(@my_module, format: :json) %>">
|
||||
<%= render partial: "module_header_due_date.html.erb", locals: { my_module: @my_module } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-block">
|
||||
<div class="flex-block-label">
|
||||
<span class="fas block-icon fa-tachometer-alt"></span>
|
||||
<%= t('my_modules.states.state_label') %>
|
||||
</div>
|
||||
<span class="task-state-label">
|
||||
<%= render partial: "module_state_label.html.erb",
|
||||
locals: { my_module: @my_module } %>
|
||||
</span>
|
||||
<div class="flex-block date-block">
|
||||
<span class="fas block-icon fa-calendar-alt"></span>
|
||||
<span class="hidden-xs hidden-sm hidden-md"><%= t('my_modules.module_header.start_date') %></span>
|
||||
<div id="startDateContainer" class="datetime-container" data-update-url="<%= my_module_path(@my_module, format: :json) %>">
|
||||
<%= render partial: "module_header_start_date.html.erb", locals: { my_module: @my_module } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="complete-button-container">
|
||||
<%= render partial: "my_modules/state_buttons.html.erb" %>
|
||||
<div class="flex-block date-block" >
|
||||
<span class="fas block-icon fa-calendar-alt"></span>
|
||||
<span class="hidden-xs hidden-sm hidden-md"><%= t('my_modules.module_header.due_date') %></span>
|
||||
<div id="dueDateContainer" class="datetime-container" data-update-url="<%= my_module_path(@my_module, format: :json) %>">
|
||||
<%= render partial: "module_header_due_date.html.erb", locals: { my_module: @my_module } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-block">
|
||||
<div class="flex-block-label">
|
||||
<span class="fas block-icon fa-tachometer-alt"></span>
|
||||
<%= t('my_modules.states.state_label') %>
|
||||
</div>
|
||||
<span class="task-state-label">
|
||||
<%= render partial: "module_state_label.html.erb",
|
||||
locals: { my_module: @my_module } %>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="module-tags">
|
||||
|
|
|
|||
|
|
@ -14,5 +14,5 @@
|
|||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<span data-hook="my_module-protocol-buttons"></span>
|
||||
<span data-hook="my_module-state-buttons"></span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,14 @@
|
|||
<div class="content-pane my-modules-protocols-index">
|
||||
<!-- Details -->
|
||||
<div class="task-section">
|
||||
<span class="task-section-title">
|
||||
<h2><%= t('my_modules.details.title') %></h2>
|
||||
</span>
|
||||
<div class="task-section-header">
|
||||
<span class="task-section-title">
|
||||
<h2><%= t('my_modules.details.title') %></h2>
|
||||
</span>
|
||||
<div class="complete-button-container">
|
||||
<%= render partial: "my_modules/state_buttons.html.erb" %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-details">
|
||||
<%= render partial: "my_module_details" %>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue