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

CSS fixes for steps [SCI-6932]

Browse source
This commit is contained in:
Anton 2022-07-05 12:49:12 +02:00
parent 910c36af08
commit 7b0853d00a
7 changed files with 72 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
app/assets/stylesheets/my_modules/protocol.scss
View file

@ -1,4 +1,26 @@
.task-protocol {
.protocol-name {
.sci-inline-edit__view.blank,
textarea {
font-weight: bold;
}
}
.protocol-step-actions {
margin-left: -6px;
}
.protocol-buttons-group {
column-gap: .25em;
display: grid;
grid-template-columns: auto auto auto;
}
.portocol-header-left-part {
align-items: baseline;
display: flex;
}
.insert-step {
align-items: center;
color: $color-concrete;
@ -27,6 +49,12 @@
}
}
}
.protocol-description {
margin-bottom: 2em;
padding-left: 1em;
}
.protocol-options-dropdown {
a {
cursor: pointer;

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

@ -79,7 +79,7 @@
.repositories-assign-container {
flex-grow: 1;
max-width: 200px;
max-width: 150px;
.btn {
text-align: left;
@ -552,7 +552,7 @@
display: flex;
flex-grow: 1;
:not(:first-child):not(.dropdown-menu) {
> :not(:first-child):not(.dropdown-menu) {
margin-left: .5em;
}
}
@ -589,7 +589,7 @@
margin: 0;
}
.status-buttons :not(:first-child):not(.dropdown-menu) {
.status-buttons > :not(:first-child):not(.dropdown-menu) {
margin-left: 0;
margin-top: .5em;
}
@ -615,7 +615,7 @@
text-align: left;
}
.status-buttons :not(:first-child):not(.dropdown-menu) {
.status-buttons > :not(:first-child):not(.dropdown-menu) {
margin-left: 0;
margin-top: .5em;
}

1
app/assets/stylesheets/protocols/protocol.scss
View file

@ -67,6 +67,7 @@
}
.protocol-step-actions {
margin-left: -6px;
margin-top: 2em;
}
}

2
app/assets/stylesheets/reports/new.scss
View file

@ -453,7 +453,7 @@
}
.experiment-name {
@include font-main;
@include font-h1;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;

4
app/assets/stylesheets/steps/step.scss
View file

@ -5,7 +5,7 @@
.step-container {
border: $border-transparent;
margin: 20px 0 20px -1.5em;
margin: 6px 0 6px -1.5em;
padding: 8px 24px 8px 0;
.step-header {
@ -46,12 +46,14 @@
.step-position {
@include font-main;
flex-shrink: 0;
font-weight: bold;
line-height: 24px;
margin: 0 4px;
}
.step-name-container {
flex-grow: 1;
font-weight: bold;
}
.step-actions-container {

55
app/javascript/vue/protocol/container.vue
View file

@ -1,30 +1,34 @@
<template>
<div class="task-protocol">
<div class="task-section-header" v-if="!inRepository">
<a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
<i class="fas fa-caret-right"></i>
<div class="task-section-title">
<h2>{{ i18n.t('Protocol') }}</h2>
<div class="portocol-header-left-part">
<a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
<i class="fas fa-caret-right"></i>
<div class="task-section-title">
<h2>{{ i18n.t('Protocol') }}</h2>
</div>
</a>
<div class="my-module-protocol-status">
<!-- protocol status dropdown gets mounted here -->
</div>
</a>
<div class="my-module-protocol-status">
<!-- protocol status dropdown gets mounted here -->
</div>
<div class="sci-btn-group actions-block">
<a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)">
<span class="fas fa-plus" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a>
<a class="btn btn-default" data-toggle="modal" data-target="#print-protocol-modal">
<span class="fas fa-print" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.print.button") }}</span>
</a>
<ProtocolOptions
v-if="protocol.attributes && protocol.attributes.urls"
:protocol="protocol"
@protocol:delete_steps="deleteSteps"
:canDeleteSteps="steps.length > 0 && urls.delete_steps_url !== null"
/>
<div class="actions-block">
<div class="protocol-buttons-group">
<a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)">
<span class="fas fa-plus" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a>
<a class="btn btn-default" data-toggle="modal" data-target="#print-protocol-modal">
<span class="fas fa-print" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.print.button") }}</span>
</a>
<ProtocolOptions
v-if="protocol.attributes && protocol.attributes.urls"
:protocol="protocol"
@protocol:delete_steps="deleteSteps"
:canDeleteSteps="steps.length > 0 && urls.delete_steps_url !== null"
/>
</div>
</div>
</div>
<div v-if="protocol.id" id="protocol-content" class="protocol-content collapse in" aria-expanded="true">
@ -44,7 +48,7 @@
</span>
</div>
<ProtocolMetadata v-if="protocol.attributes && protocol.attributes.in_repository" :protocol="protocol" @update="updateProtocol"/>
<div v-if="urls.update_protocol_description_url" class="protocol-description">
<div v-if="urls.update_protocol_description_url">
<Tinymce
:value="protocol.attributes.description"
:value_html="protocol.attributes.description_view"
@ -64,8 +68,7 @@
<span class="fas fa-plus" aria-hidden="true"></span>
<span>{{ i18n.t("protocols.steps.new_step") }}</span>
</a>
<div class="protocol-step-actions">
<div v-if="steps.length > 0" class="protocol-step-actions">
<button class="btn btn-light" @click="collapseSteps">
<span class="fas fa-caret-up"></span>
{{ i18n.t("protocols.steps.collapse_label") }}
@ -146,7 +149,7 @@
protocol: {
attributes: {}
},
steps: {},
steps: [],
reordering: false
}
},

16
app/javascript/vue/protocol/step.vue
View file

@ -93,17 +93,13 @@
<li class="title">
{{ i18n.t('protocols.steps.options_dropdown.title') }}
</li>
<li v-if="urls.reorder_elements_url" class="action">
<a @click="openReorderModal" :class="{ 'disabled': elements.length < 2 }">
<i class="fas fa-arrows-alt-v"></i>
{{ i18n.t('protocols.steps.options_dropdown.rearrange') }}
</a>
<li v-if="urls.reorder_elements_url" class="action" @click="openReorderModal" :class="{ 'disabled': elements.length < 2 }">
<i class="fas fa-arrows-alt-v"></i>
{{ i18n.t('protocols.steps.options_dropdown.rearrange') }}
</li>
<li v-if="urls.delete_url" class="action">
<a @click="showDeleteModal">
<i class="fas fa-trash"></i>
{{ i18n.t('protocols.steps.options_dropdown.delete') }}
</a>
<li v-if="urls.delete_url" class="action" @click="showDeleteModal">
<i class="fas fa-trash"></i>
{{ i18n.t('protocols.steps.options_dropdown.delete') }}
</li>
</ul>
</div>