mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-12 08:04:34 +08:00
CSS fixed for task protocol
This commit is contained in:
Anton
parent
520f978f35
commit
3f12f91b4a
12 changed files with 54 additions and 86 deletions
3
app/assets/images/icon_small/sn-check.svg
Normal file
3
app/assets/images/icon_small/sn-check.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.56358 11.8292L3 8.32244L3.70142 7.60969L6.55139 10.4143L12.8641 4L13.5775 4.70204L6.56358 11.8292Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 230 B |
|
|
@ -39,7 +39,7 @@
|
|||
.ps--active-x > .ps__rail-x,
|
||||
.ps--active-y > .ps__rail-y {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
background-color: var(--sn-white);
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.my-module-position-container .protocol-content {
|
||||
margin-left: 2.25rem;
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
.task-protocol {
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
.protocol-buttons-group {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.portocol-header-left-part {
|
||||
|
|
@ -28,12 +28,9 @@
|
|||
padding-right: .25em;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
margin: 2px 0 0;
|
||||
}
|
||||
|
||||
.status-info {
|
||||
padding-left: 4px;
|
||||
display: flex;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +42,7 @@
|
|||
|
||||
&::before,
|
||||
&::after {
|
||||
border-bottom: 1px dotted var(--sn-light-grey);
|
||||
border-bottom: 1px dashed var(--sn-light-grey);
|
||||
content: "";
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
|
||||
.content-pane.my-modules-protocols-index {
|
||||
background-color: $color-alto;
|
||||
padding: 0 1rem 1rem !important;
|
||||
min-height: calc(100vh - var(--navbar-height));
|
||||
|
||||
.title-row {
|
||||
|
|
@ -76,7 +75,7 @@
|
|||
align-items: center;
|
||||
color: var(--sn-black);
|
||||
display: inline-flex;
|
||||
gap: .5rem;
|
||||
gap: 1rem;
|
||||
padding: .5rem;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -97,12 +96,13 @@
|
|||
|
||||
&.assigned-items-title {
|
||||
&::after {
|
||||
@include font-h3;
|
||||
color: $color-alto;
|
||||
content: '[' attr(data-assigned-items-count) ']';
|
||||
display: inline;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
line-height: 22px;
|
||||
padding-left: 5px;
|
||||
padding-left: .25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -434,10 +434,11 @@
|
|||
position: relative;
|
||||
|
||||
.status-label {
|
||||
@include font-h3;
|
||||
color: $color-alto;
|
||||
float: left;
|
||||
margin: 0 3px;
|
||||
font-size: 1rem;
|
||||
font-style: normal;
|
||||
margin: 0 .25rem;
|
||||
|
||||
&.linked {
|
||||
color: $brand-primary;
|
||||
|
|
@ -447,7 +448,6 @@
|
|||
.status-info {
|
||||
@include font-h2;
|
||||
color: inherit;
|
||||
padding: .5em;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -261,10 +261,8 @@
|
|||
.protocol-content {
|
||||
.protocol-name {
|
||||
display: inline-block;
|
||||
font-size: 1.7em;
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 32px;
|
||||
margin-top: 28px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -76,15 +76,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.content__checklist-container {
|
||||
.checklist-header:not(.editing-name):not(.locked) {
|
||||
&:hover {
|
||||
background-color: $color-concrete;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content__checklist-item {
|
||||
.checklist-item-header:not(.editing-name):not(.locked) {
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ input[type="checkbox"].sci-checkbox {
|
|||
@include font-awesome;
|
||||
animation-timing-function: $timing-function-sharp;
|
||||
background: $color-white;
|
||||
border: $border-default;
|
||||
border: 1px solid var(--sn-black);
|
||||
border-radius: 1px;
|
||||
color: $color-white;
|
||||
content: "";
|
||||
|
|
@ -53,7 +53,7 @@ input[type="checkbox"].sci-checkbox {
|
|||
|
||||
&:focus + .sci-checkbox-label {
|
||||
&::before {
|
||||
border: 1px solid $brand-primary;
|
||||
border: 1px solid var(--sn-science-blue);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -63,15 +63,11 @@ input[type="checkbox"].sci-checkbox {
|
|||
|
||||
&:checked + .sci-checkbox-label {
|
||||
&::before {
|
||||
background: $brand-primary;
|
||||
border: 1px solid $brand-primary;
|
||||
content: $font-fas-check;
|
||||
}
|
||||
}
|
||||
background-color: var(--sn-science-blue);
|
||||
background-image: image-url("icon_small/sn-check.svg");
|
||||
background-position: center;
|
||||
border: 1px solid var(--sn-science-blue);
|
||||
|
||||
&:focus:checked + .sci-checkbox-label {
|
||||
&::before {
|
||||
border: 1px solid $brand-complementary;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -61,7 +61,6 @@
|
|||
flex-shrink: 0;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.step-name-container {
|
||||
|
|
@ -80,23 +79,20 @@
|
|||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
height: 24px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
width: 20px;
|
||||
|
||||
&::after {
|
||||
@include font-sn-icon;
|
||||
color: $color-white;
|
||||
content: $sn-icon-check;
|
||||
height: 24px;
|
||||
left: -1px;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--sn-science-blue);
|
||||
font-size: 18px !important;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
&.completed {
|
||||
|
|
@ -270,15 +266,6 @@
|
|||
.step-element-grip {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover:not(.locked):not(.no-hover) {
|
||||
background: $color-concrete;
|
||||
|
||||
.step-element-grip,
|
||||
.step-element-controls {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-element-grip {
|
||||
|
|
|
|||
|
|
@ -62,8 +62,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
|
||||
<div class="pl-9 mb-8">
|
||||
<div class="protocol-name" v-if="!inRepository">
|
||||
<div class="border-0 border-b border-dashed border-sn-light-grey" v-if="!inRepository"></div>
|
||||
<div class="mb-4">
|
||||
<div class="protocol-name mt-4" v-if="!inRepository">
|
||||
<InlineEdit
|
||||
v-if="urls.update_protocol_name_url"
|
||||
:value="protocol.attributes.name"
|
||||
|
|
@ -92,7 +93,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="protocol-description-container" :class=" inRepository ? 'protocol-description collapse in' : ''" >
|
||||
<div class="ml-1" v-if="urls.update_protocol_description_url">
|
||||
<div v-if="urls.update_protocol_description_url">
|
||||
<Tinymce
|
||||
:value="protocol.attributes.description"
|
||||
:value_html="protocol.attributes.description_view"
|
||||
|
|
@ -127,6 +128,7 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-0 border-b border-dashed border-sn-light-grey" v-if="!inRepository"></div>
|
||||
<div id="protocol-steps-container" :class=" inRepository ? 'protocol-steps collapse in' : ''">
|
||||
<div class="protocol-steps">
|
||||
<template v-for="(step, index) in steps">
|
||||
|
|
@ -153,10 +155,6 @@
|
|||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<button v-if="(steps.length > 0 || inRepository) && urls.add_step_url" :class="!inRepository ? 'btn btn-primary' : 'btn btn-secondary'" @click="addStep(steps.length)">
|
||||
<i class="sn-icon sn-icon-new-task"></i>
|
||||
{{ i18n.t("protocols.steps.new_step") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@
|
|||
</div>
|
||||
<div class="step-header">
|
||||
<div class="step-element-header" :class="{ 'no-hover': !urls.update_url }">
|
||||
<div class="step-controls">
|
||||
<div v-if="reorderStepUrl" class="step-element-grip" @click="$emit('reorder')" :class="{ 'step-element--locked': !urls.update_url }">
|
||||
<i class="sn-icon sn-icon-sort"></i>
|
||||
</div>
|
||||
<div v-else class="step-element-grip-placeholder"></div>
|
||||
<div class="step-controls gap-4 mr-4">
|
||||
<a class="step-collapse-link hover:no-underline focus:no-underline"
|
||||
:href="'#stepBody' + step.id"
|
||||
data-toggle="collapse"
|
||||
|
|
@ -24,7 +20,7 @@
|
|||
@click="toggleCollapsed">
|
||||
<span class="sn-icon sn-icon-right "></span>
|
||||
</a>
|
||||
<div v-if="!inRepository" class="step-complete-container mx-1.5" :class="{ 'step-element--locked': !urls.state_url }">
|
||||
<div v-if="!inRepository" class="step-complete-container" :class="{ 'step-element--locked': !urls.state_url }">
|
||||
<div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`"
|
||||
@click="changeState"
|
||||
@keyup.enter="changeState"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
<div class="dropdown my-module-protocol-status">
|
||||
<% if @protocol.linked? %>
|
||||
<span class="status-label linked">
|
||||
[<%= t("my_modules.protocols.protocol_status_bar.linked") %>]
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="status-label">
|
||||
[<%= t("my_modules.protocols.protocol_status_bar.unlinked") %>]
|
||||
</span>
|
||||
<% end %>
|
||||
<a href="#" id="my-module-protocol-info-button" class="status-info
|
||||
<%= 'parent-newer' if @protocol.parent_newer? %>
|
||||
<%= 'protocol-newer' if @protocol.newer_than_parent? %>
|
||||
" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="sn-icon sn-icon-info"></i>
|
||||
</a>
|
||||
<div class="flex items-center">
|
||||
<% if @protocol.linked? %>
|
||||
<span class="status-label linked">
|
||||
[<%= t("my_modules.protocols.protocol_status_bar.linked") %>]
|
||||
</span>
|
||||
<% else %>
|
||||
<span class="status-label">
|
||||
[<%= t("my_modules.protocols.protocol_status_bar.unlinked") %>]
|
||||
</span>
|
||||
<% end %>
|
||||
<a href="#" id="my-module-protocol-info-button" class="status-info
|
||||
<%= 'parent-newer' if @protocol.parent_newer? %>
|
||||
<%= 'protocol-newer' if @protocol.newer_than_parent? %>
|
||||
" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="sn-icon sn-icon-info"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="dropdown-menu status-info-dropdown" aria-labelledby="my-module-protocol-info-button">
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-header">
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
data-remote="true">
|
||||
<span class="sn-icon sn-icon-right "></span>
|
||||
</a>
|
||||
<div class="step-complete-container mx-1.5 step-element--locked">
|
||||
<div class="step-complete-container step-element--locked">
|
||||
<div class="step-state <%= step.completed ? 'completed' : '' %>"
|
||||
tabindex="0"
|
||||
></div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue