eca0e7bf56
* button styles * Further styles including global toggle adjustment * sidebar funcs and header * Functioning task logs in high-level sidebars * same-lineify the show tasks toggle * Changelog * Full-height sidebar calc in css, plz drop soon container queries * Active status and query params for allocations page * Reactive shouldShowLogs getter and added to client and task group pages * Higher order func passing, thanks @DingoEatingFuzz * Non-service job types get allocation params passed * Keyframe animation for task log sidebar * Acceptance test * A few more sub-row tests * Lintfix
134 lines
2.5 KiB
SCSS
134 lines
2.5 KiB
SCSS
$topNavOffset: 112px;
|
|
$subNavOffset: 49px;
|
|
|
|
.sidebar {
|
|
position: fixed;
|
|
background: #ffffff;
|
|
width: 750px;
|
|
padding: 24px;
|
|
right: 0%;
|
|
overflow-y: auto;
|
|
bottom: 0;
|
|
top: $topNavOffset;
|
|
transform: translateX(100%);
|
|
transition-duration: 150ms;
|
|
transition-timing-function: ease;
|
|
z-index: $z-modal;
|
|
&.open {
|
|
transform: translateX(0%);
|
|
box-shadow: 6px 6px rgba(0, 0, 0, 0.06), 0px 12px 16px rgba(0, 0, 0, 0.2);
|
|
}
|
|
&.has-subnav {
|
|
top: calc($topNavOffset + $subNavOffset);
|
|
}
|
|
}
|
|
|
|
.sidebar-content {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.error-header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.detail-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.related-evaluations {
|
|
overflow-x: scroll;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.evaluation-actors {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.actor {
|
|
margin: 24px;
|
|
outline: 1px solid #d9dee6;
|
|
padding: 10px;
|
|
width: 100px;
|
|
}
|
|
|
|
.task-context-sidebar {
|
|
animation-name: slideFromRight;
|
|
animation-duration: 150ms;
|
|
animation-fill-mode: both;
|
|
|
|
header {
|
|
display: grid;
|
|
justify-content: left;
|
|
grid-template-columns: 1fr auto auto;
|
|
gap: 2rem;
|
|
border-bottom: 1px solid $grey-blue;
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 24px;
|
|
height: 50px;
|
|
|
|
.title {
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.link {
|
|
align-self: center;
|
|
}
|
|
|
|
.state {
|
|
font-size: 1rem;
|
|
font-weight: normal;
|
|
margin-left: 1rem;
|
|
text-transform: capitalize;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: inline-block;
|
|
height: 1rem;
|
|
width: 1rem;
|
|
margin-right: 5px;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
&.running:before {
|
|
background-color: $green;
|
|
}
|
|
&.dead:before {
|
|
background-color: $red;
|
|
}
|
|
&.pending:before {
|
|
background-color: $grey-lighter;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Instead of trying to calculate on the fly with JS, let's use vh and offset nav and headers above.
|
|
// We can make this a LOT more streamlined when CSS Container Queries are available.
|
|
$sidebarTopOffset: 161px;
|
|
$sidebarInnerPadding: 48px;
|
|
$sidebarHeaderOffset: 74px;
|
|
$cliHeaderOffset: 54.5px;
|
|
.cli-window {
|
|
height: calc(
|
|
100vh - $sidebarTopOffset - $sidebarInnerPadding - $sidebarHeaderOffset -
|
|
$cliHeaderOffset
|
|
);
|
|
}
|
|
}
|
|
|
|
@keyframes slideFromRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0%);
|
|
}
|
|
}
|