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

Task details css fixes [SCI-9342]

Browse source
This commit is contained in:
Anton 2023-09-21 09:45:20 +02:00
parent 04e191e377
commit ce2d91025c
4 changed files with 12 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -572,17 +572,11 @@
}
.task-details-dropdown-container {
.task-details-button {
@include font-h2;
color: inherit;
margin-left: -5px;
text-decoration: none;
}
.dropdown-menu {
@include font-button;
min-width: 500px;
padding: 1em 2em;
z-index: 251;
.task-details-value {
@include font-h3;
@ -595,27 +589,6 @@
}
}
.task-information {
.task-section-header {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
.status-buttons {
.status-flow-dropdown[data-status-changing=true] {
.caret.pull-right {
display: none;
}
}
> div > .btn {
min-width: 115px;
}
}
}
@media (max-width: 810px) {
.task-information .task-section-header {
display: block;
@ -650,11 +623,6 @@
}
}
.task-details-code {
display: inline-block;
margin-left: 4px;
}
#confirm-link-update-modal,
.delete-steps-modal {
.modal-body p {

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

@ -1,6 +1,6 @@
<template>
<div v-if="protocol.id" class="task-protocol">
<div ref="header" class="task-section-header ml-[-1rem] w-[calc(100%_+_2rem)] px-4 z-[250] bg-sn-white sticky top-0 transition" v-if="!inRepository">
<div ref="header" class="task-section-header ml-[-1rem] w-[calc(100%_+_2rem)] px-4 bg-sn-white sticky top-0 transition" v-if="!inRepository">
<div class="portocol-header-left-part truncate grow">
<template v-if="headerSticked && protocol.attributes.assignable_my_module_name">
<i class="sn-icon sn-icon-navigator sci--layout--navigator-open cursor-pointer p-1.5 border rounded border-sn-light-grey mr-4"></i>
@ -428,13 +428,17 @@
// Add shadow to secondary navigation when it starts fly
if (secondaryNavigation.getBoundingClientRect().top == 0 && !this.headerSticked) {
secondaryNavigation.style.boxShadow = '0px 5px 8px 0px rgba(0, 0, 0, 0.10)';
secondaryNavigation.style.zIndex= 251;
} else {
secondaryNavigation.style.boxShadow = 'none';
secondaryNavigation.style.zIndex= 0;
}
if (protocolHeaderTop - 5 < protocolHeaderHeight) { // When secondary navigation touch protocol header
secondaryNavigation.style.top = protocolHeaderTop - protocolHeaderHeight + 'px'; // Secondary navigation starts slowly disappear
protocolHeader.style.boxShadow = '0px 5px 8px 0px rgba(0, 0, 0, 0.10)'; // Flying shadow
protocolHeader.style.zIndex= 250;
this.headerSticked = true;
@ -443,6 +447,7 @@
if (newSecondaryTop > 0) newSecondaryTop = 0;
secondaryNavigation.style.top = newSecondaryTop + 'px'; // Secondary navigation starts slowly appear
secondaryNavigation.style.zIndex= 251;
protocolHeader.style.top = secondaryNavigationHeight + newSecondaryTop - 1 + 'px'; // Protocol header starts getting offset to compensate secondary navigation position
// -1 to compensate small gap between protocol header and secondary navigation
} else { // When user scroll down
@ -452,11 +457,13 @@
secondaryNavigation.style.top = newSecondaryTop + 'px'; // Secondary navigation starts slowly disappear
protocolHeader.style.top = newSecondaryTop + secondaryNavigationHeight - 1 + 'px'; // Protocol header starts getting offset to compensate secondary navigation position
// -1 to compensate small gap between protocol header and secondary navigation
if (newSecondaryTop <= 1) secondaryNavigation.style.zIndex= 0;
}
} else {
// Just reset secondary navigation and protocol header styles to initial state
secondaryNavigation.style.top = '0px';
protocolHeader.style.boxShadow = 'none';
protocolHeader.style.zIndex= 0;
this.headerSticked = false;
}

2
app/views/my_modules/_header_actions.html.erb
View file

@ -1,4 +1,4 @@
<div id="taskSecondaryMenu" class="sticky-header-element bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky z-[251] flex items-center flex-wrap">
<div id="taskSecondaryMenu" class="sticky-header-element bg-sn-white border-b border-solid border-0 border-sn-sleepy-grey rounded-t px-4 py-2 top-0 sticky flex items-center flex-wrap">
<div class="flex items-center gap-4 mr-auto">
<% if can_read_experiment?(@my_module.experiment) %>
<a class="p-3 border-b-4 border-transparent hover:no-underline uppercase text-bold capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"

4
app/views/my_modules/protocols.html.erb
View file

@ -34,7 +34,7 @@
<!-- Details -->
<div class="task-section task-information hidden">
<div id="task-details" class="task-section-header">
<div class="task-details-container flex items-center mr-auto gap-2">
<div class="flex items-center mr-auto">
<a class="task-section-caret collapsed" role="button" data-toggle="collapse" href="#details-container" aria-expanded="false" aria-controls="details-container">
<i class="sn-icon sn-icon-right"></i>
<span id="taskDetailsLabel" class="task-section-title">
@ -46,7 +46,7 @@
<span class="dropdown task-details-dropdown-container">
<a href="#"
id="taskDetailsButton"
class="block-icon task-details-button dropdown-toggle"
class="btn btn-light btn-black icon-btn dropdown-toggle mr-2"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true">