scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-27 02:04:33 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix css for protocol checklists [SCI-8788]

Browse source
This commit is contained in:
Anton 2023-07-13 13:55:32 +02:00
parent fca9aea4a8
commit 4cc6513f82
5 changed files with 13 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/stylesheets/steps/components/checklist.scss
View file

@ -16,6 +16,7 @@
}
.step-element-header {
.step-element-name {
align-items: flex-start;
column-gap: .25em;

8
app/assets/stylesheets/tailwind/buttons.css
View file

@ -4,7 +4,7 @@
}
.btn {
@apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer;
@apply relative inline-flex items-center text-sm shrink-0 gap-2 justify-center leading-5 py-2 px-4 rounded border-0 appearance-none whitespace-nowrap cursor-pointer max-h-[40px];
}
.btn.icon-btn {
@ -12,7 +12,7 @@
}
.btn.btn-lg {
@apply py-2.5 px-[1.125rem] text-base leading-5;
@apply py-2.5 px-[1.125rem] text-base leading-5 max-h-[44px];
}
.btn.btn-lg.icon-btn {
@ -20,7 +20,7 @@
}
.btn.btn-sm {
@apply py-1.5 px-2.5 text-xs leading-5;
@apply py-1.5 px-2.5 text-xs leading-5 max-h-[36px];
}
.btn.btn-sm.icon-btn {
@ -28,7 +28,7 @@
}
.btn.btn-xs {
@apply py-0.5 px-2.5 text-xs leading-5;
@apply py-0.5 px-2.5 text-xs leading-5 max-h-[30px];
}
.btn.btn-xs.icon-btn {

8
app/javascript/vue/protocol/step_elements/checklist.vue
View file

@ -22,13 +22,13 @@
/>
</div>
<div class="step-element-controls">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="editingName = true" tabindex="0">
<button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light btn-sm" @click="editingName = true" tabindex="0">
<i class="sn-icon sn-icon-edit"></i>
</button>
<button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light" tabindex="0" @click="duplicateElement">
<button v-if="element.attributes.orderable.urls.duplicate_url" class="btn icon-btn btn-light btn-sm" tabindex="0" @click="duplicateElement">
<i class="sn-icon sn-icon-duplicate"></i>
</button>
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
<button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light btn-sm" @click="showDeleteModal" tabindex="0">
<i class="sn-icon sn-icon-delete"></i>
</button>
</div>
@ -63,7 +63,7 @@
/>
</Draggable>
<div v-if="element.attributes.orderable.urls.create_item_url"
class="btn btn-light step-checklist-add-item"
class="btn btn-light btn-sm step-checklist-add-item"
tabindex="0"
@keyup.enter="addItem"
@click="addItem">

4
app/javascript/vue/protocol/step_elements/checklistItem.vue
View file

@ -39,10 +39,10 @@
</div>
</div>
<div class="step-element-controls">
<button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit" tabindex="0">
<button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light btn-sm" @click="enableTextEdit" tabindex="0">
<i class="sn-icon sn-icon-edit"></i>
</button>
<button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="0">
<button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light btn-sm" @click="showDeleteModal" tabindex="0">
<i class="sn-icon sn-icon-delete"></i>
</button>
</div>

4
app/javascript/vue/shared/inline_edit.vue
View file

@ -20,10 +20,10 @@
</div>
</div>
<template v-if="editing">
<div :class="{ 'btn-primary': !error, 'btn-disabled': error }" class="sci-inline-edit__control btn icon-btn" @click="update">
<div :class="{ 'btn-primary': !error, 'btn-disabled': error }" class="sci-inline-edit__control btn btn-sm icon-btn" @click="update">
<i class="sn-icon sn-icon-check"></i>
</div>
<div class="sci-inline-edit__control btn btn-light icon-btn" @mousedown="cancelEdit">
<div class="sci-inline-edit__control btn btn-light btn-sm icon-btn" @mousedown="cancelEdit">
<i class="sn-icon sn-icon-close"></i>
</div>
</template>