mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-16 14:17:00 +08:00
6fcb9152dc
* Fix CSS for generated pdf/docx reports [SCI-7660] * Call correct asset previewable function [SCI-7660]
643 lines
9.9 KiB
SCSS
643 lines
9.9 KiB
SCSS
@import 'constants';
|
|
@import "mixins";
|
|
|
|
/* Index page */
|
|
.report-table {
|
|
margin-top: 20px;
|
|
|
|
.report-row.selected {
|
|
background: $color-alto;
|
|
}
|
|
}
|
|
|
|
/* New page navbar */
|
|
.navbar-report {
|
|
background: $color-white;
|
|
border-bottom: 1px solid $color-gainsboro;
|
|
border-left: 0;
|
|
border-right: 0;
|
|
margin-bottom: 15px;
|
|
min-width: 320px;
|
|
padding: 25px 20px;
|
|
position: sticky;
|
|
top: 50px;
|
|
z-index: 500;
|
|
|
|
div.row {
|
|
margin-right: 0;
|
|
}
|
|
|
|
#report-menu {
|
|
form {
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
& > div.row {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
#sort-report {
|
|
display: inline-block;
|
|
}
|
|
|
|
#download-report {
|
|
display: inline-block;
|
|
}
|
|
|
|
// Modal for adding content
|
|
label {
|
|
&[for="_experiment_all"],
|
|
&[for="_module_all"],
|
|
&[for="_step_all"],
|
|
&[for="_result_all"] {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Global fix for handsontable
|
|
*/
|
|
.hot-table-container {
|
|
.ht_master .wtHolder {
|
|
height: auto !important;
|
|
width: auto !important;
|
|
}
|
|
}
|
|
|
|
.report-common-table-format {
|
|
page-break-inside: avoid;
|
|
width: 100%;
|
|
|
|
tr {
|
|
|
|
td,
|
|
th {
|
|
border: 1px solid $color-silver;
|
|
padding: 5px;
|
|
|
|
span {
|
|
display: inline-block;
|
|
min-height: 19px;
|
|
}
|
|
}
|
|
|
|
th {
|
|
background: $color-concrete;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* New page content */
|
|
#report-new {
|
|
margin-top: -15px;
|
|
}
|
|
|
|
.report-body {
|
|
background: $color-silver;
|
|
}
|
|
|
|
.report-container {
|
|
background: $color-silver;
|
|
box-shadow: 0 0 2px 1px $color-silver;
|
|
overflow-x: auto;
|
|
overflow-y: auto;
|
|
padding: 30px;
|
|
padding-left: 0;
|
|
width: auto;
|
|
}
|
|
|
|
#report-content {
|
|
@include box-shadow(0 0 58px -10px $color-black);
|
|
background: $color-white;
|
|
color: $color-black;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: -15px;
|
|
max-width: 800px;
|
|
min-height: 1200px;
|
|
min-width: 230px;
|
|
padding: 45px;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
#report-content {
|
|
padding: 25px;
|
|
}
|
|
}
|
|
|
|
/** "New element" floating element */
|
|
.new-element {
|
|
display: block;
|
|
position: relative;
|
|
opacity: 0.05;
|
|
|
|
&.initial {
|
|
/** Special "visual" display of initial new element block */
|
|
opacity: 0.7;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
border: 4px $brand-primary solid;
|
|
|
|
.plus-icon {
|
|
bottom: 16px !important;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
display: block;
|
|
float: left;
|
|
width: 50%;
|
|
|
|
.filler-wrapper {
|
|
display: block;
|
|
|
|
.filler {
|
|
display: block;
|
|
height: 4px;
|
|
background-color: $brand-primary;
|
|
border-radius: 1px;
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-line .filler-wrapper {
|
|
padding: 0 20px 0 0;
|
|
}
|
|
|
|
.right-line .filler-wrapper {
|
|
padding: 0 0 0 20px;
|
|
}
|
|
|
|
.plus-icon {
|
|
color: $brand-primary;
|
|
display: block;
|
|
text-align: center;
|
|
width: 40px;
|
|
position: absolute;
|
|
bottom: 2px;
|
|
left: 50%;
|
|
margin: 0 0 0 -20px;
|
|
}
|
|
|
|
.clear {
|
|
clear: left;
|
|
}
|
|
}
|
|
.new-element:hover {
|
|
opacity: 1.0;
|
|
|
|
.filler {
|
|
background-color: $brand-primary;
|
|
|
|
.plus-icon span {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* GLOBAL REPORT ELEMENT STYLE */
|
|
.report-element {
|
|
width: 100%;
|
|
margin-bottom: 15px;
|
|
|
|
|
|
.user-time {
|
|
color: $color-silver-chalice;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.report-element-body {
|
|
padding-top: 10px;
|
|
|
|
.report-export-img {
|
|
max-height: 300px;
|
|
max-width: 300px;
|
|
}
|
|
}
|
|
|
|
.report-element-children {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: $color-gainsboro;
|
|
@include box-shadow(0 0 2px 15px $color-gainsboro);
|
|
|
|
& > .report-element-header {
|
|
|
|
.controls {
|
|
opacity: 1.0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Project header element style */
|
|
.report-project-header-element {
|
|
margin-bottom: 0;
|
|
|
|
.report-element-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.report-element-body {
|
|
.project-name {
|
|
@include font-h1;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
&:hover > .report-element-body .project-name {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
// Experiment element style
|
|
.report-experiment-element {
|
|
.experiment-name {
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// Protocol element style
|
|
.report-module-protocol-element {
|
|
.protocol-name {
|
|
@include font-main;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
/* Module element style */
|
|
.report-module-element {
|
|
@include font-button;
|
|
|
|
.results-title-name {
|
|
@include font-main;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.report-element-body {
|
|
.module-name {
|
|
font-size: 19px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.module-start-date,
|
|
.module-due-date {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.module-status {
|
|
.status-block {
|
|
border-radius: $border-radius-tag;
|
|
color: $color-white;
|
|
padding: 2px 4px;
|
|
}
|
|
}
|
|
|
|
.module-tags {
|
|
margin-left: 0;
|
|
margin-top: 10px;
|
|
|
|
.module-no-tag {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.module-tag {
|
|
margin-left: 5px;
|
|
border-radius: 4px;
|
|
padding: 2px 4px;
|
|
color: $color-white;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.module-protocol-description {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
&:hover > .report-element-body .module-name {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
/* Result element style (generic) */
|
|
.report-result-element {
|
|
margin-bottom: 5px;
|
|
|
|
.report-element-header {
|
|
border-bottom: none;
|
|
|
|
.result-icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.result-name {
|
|
@include font-main;
|
|
font-weight: bold;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.user-time {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
&:hover > .report-element-header {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
.report-element-body {
|
|
clear: left;
|
|
padding-top: 10px !important;
|
|
}
|
|
}
|
|
|
|
/* Result asset element style */
|
|
.report-result-asset-element {
|
|
.report-element-header {
|
|
.file-name {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.image-icon.report {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
img {
|
|
display: inline;
|
|
margin-top: 4em;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
// Result table element style
|
|
.report-result-table-element {
|
|
.report-element-header {
|
|
.table-name {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.report-element-body {
|
|
padding-top: 15px;
|
|
}
|
|
}
|
|
|
|
/* Result text element style */
|
|
.report-result-text-element {
|
|
.report-element-body {
|
|
.text-container {
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Step element style */
|
|
.report-step-element {
|
|
.step-name {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&:hover > .report-element-body .step-name {
|
|
color: $brand-primary;
|
|
}
|
|
|
|
.step-label-default {
|
|
@include font-h3;
|
|
color: $color-alto;
|
|
}
|
|
|
|
.step-label-success {
|
|
@include font-h3;
|
|
color: $brand-success;
|
|
}
|
|
}
|
|
|
|
/* Step attachment style (table, asset or checklist) */
|
|
.report-step-attachment-element {
|
|
.report-element-header {
|
|
border-bottom: none;
|
|
|
|
.attachment-icon {
|
|
color: $color-emperor;
|
|
}
|
|
}
|
|
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.report-element-children {
|
|
height: 0;
|
|
}
|
|
|
|
&:hover > .report-element-header {
|
|
.attachment-icon {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Step table element style */
|
|
.report-step-table-element {
|
|
.report-element-header {
|
|
.table-name {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
&:hover > .report-element-header {
|
|
.table-name {
|
|
color: $brand-primary;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Step asset element style */
|
|
.report-step-asset-element {
|
|
.report-element-header {
|
|
.file-name {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.image-icon.report {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&:hover > .report-element-header .file-name {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
/** Step checklist element style */
|
|
.report-step-checklist-element {
|
|
.report-element-header {
|
|
.checklist-name {
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.report-element-body {
|
|
padding-top: 0;
|
|
|
|
& > ul > li > span.checked {
|
|
/* Currently nothing */
|
|
}
|
|
}
|
|
|
|
&:hover > .report-element-header .checklist-name {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
/** Comments element style (generic) */
|
|
.report-comments-element {
|
|
.comment-message {
|
|
.view-mode {
|
|
@include font-small;
|
|
}
|
|
}
|
|
|
|
.report-element-header {
|
|
border-bottom: none;
|
|
|
|
.comments-icon {
|
|
color: $color-emperor;
|
|
}
|
|
|
|
.comments-name {
|
|
color: $color-emperor;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.report-element-body {
|
|
.comments-container {
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
|
|
.comment {
|
|
margin: 3px 2px;
|
|
|
|
.comment-prefix {
|
|
color: $color-emperor;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover > .report-element-header {
|
|
.comments-icon,.comments-name {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Result comments element style */
|
|
.report-result-comments-element {
|
|
|
|
}
|
|
|
|
/** Step comments element style */
|
|
.report-step-comments-element {
|
|
|
|
}
|
|
|
|
// Module repository element
|
|
.report-module-repository-element {
|
|
margin-bottom: 0;
|
|
|
|
.report-element-header {
|
|
border-bottom: 0;
|
|
|
|
.repository-name {
|
|
@include font-main;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.report-element-body {
|
|
padding-top: 15px;
|
|
}
|
|
|
|
&:hover > .report-element-header {
|
|
.repository-icon,
|
|
.repository-name {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Module activity element */
|
|
.report-module-activity-element {
|
|
margin-bottom: 0;
|
|
|
|
.report-element-header {
|
|
border-bottom: none;
|
|
|
|
.activity-name {
|
|
@include font-main;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.report-element-body {
|
|
.activity-container {
|
|
border-radius: 4px;
|
|
padding: 5px;
|
|
|
|
.activity {
|
|
margin: 3px 2px;
|
|
|
|
.activity-prefix {
|
|
color: $color-silver-chalice;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover > .report-element-header {
|
|
.activity-icon,.activity-name {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
#save-PDF-to-inventory-warnings {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.save-PDF-to-inventory-alerts {
|
|
.danger {
|
|
color: $brand-danger;
|
|
}
|
|
}
|