open-nomad/ui/app/styles/components/sidebar.scss

53 lines
861 B
SCSS
Raw Normal View History

Epic: Evaluation Detail Sidebar (#12370) * chore: prettify gutter-menu * chore: add portal packages * styling: add styles sidebar and portal behavior * ui: sidebar component * ui: create and implement statechart for evals * ui: actor-relationship service and provider component * ui: d3 hierarchy computation * chore: add render-modifiers and curved arrows * ui: create evaluation actor div * fix related evaluations schema * ui: register/deregister evaluation divs * ui: handle resize behavior * bug: infinite re-render cycle * fix: conditional logic to prevent infinite render of flex resizing * ui: related evaluations schema and request param * ui: fix testing for evaluations * refact: make related-evals a proper has-many * chore: don't pauseTest * temp: debug d3 hierarchy * ui: move derived state logic into backing component class for detail * ui: deprecated related evaluations logic in statechart * ui: update evaluation models * ui: update logic to paint svg in non-viewable scroll region * ui: update styling * ui: testing for eval detail view * ui: delete detail from template directory * ui: break detail component down * ui: static data for /evaluation/:id endpoint * ui: fix styling of d3 viz * ui: add query parameter adapter for evals * ui: last minute design requests * wip: address browser updating detail view behavior * refact: handle query-state change in statechart * conditional class looking for currentEval equality (#12411) * F UI/evaluation detail sidebar rel evals (#12415) * ui: remove busy id alias from statechart * ui: edit related evaluations viz error message * ui: bug fixes on related evaluations view (#12423) * ui: remove busy id alias from statechart * ui: edit related evaluations viz error message * ui: update error state * ui: related evaluation outline styling * Related evaluation stylefile and non-link if it matches the active sidebar (#12428) * Adds tabbable and keyboard pressable evaluation table rows (#12433) * ui: fix failing eval list tests (#12437) * ui: move styling into classes (#12438) * fix test failures (#12444) * ui: move styling into classes * ui: eslint disable * ui: allocations have evaluations as async relationships * ui: fix evaluation refresh button (#12447) * ui: move styling into classes * ui: eslint disable * ui: allocations have evaluations as async relationships * ui: refresh bug * ui: final touches on sidebar (#12462) * chore: turn off template linting rules Temporarily turning off template linting because we dont have a set CSS convention and the release needs to go out ASAP. * doc: deprecate out of date comments and vars * ui: edit mirage server fetch logic * ui: style sidebar relative * Modification to mocked related evals and manually set 100% height on svg (#12460) * F UI/evaluation detail sidebar final touches (#12463) * chore: turn off template linting rules Temporarily turning off template linting because we dont have a set CSS convention and the release needs to go out ASAP. * doc: deprecate out of date comments and vars * ui: edit mirage server fetch logic * ui: style sidebar relative * ui: account for new related eval added to chain Co-authored-by: Michael Klein <michael@firstiwaslike.com> Co-authored-by: Phil Renaud <phil@riotindustries.com>
2022-04-05 18:34:37 +00:00
.sidebar {
position: fixed;
background: #ffffff;
width: 750px;
padding: 24px;
right: 0%;
overflow-y: auto;
bottom: 0;
top: 112px;
transform: translateX(100%);
transition-duration: 150ms;
transition-timing-function: ease;
box-shadow: 6px 6px rgba(0, 0, 0, 0.06), 0px 12px 16px rgba(0, 0, 0, 0.2);
z-index: 10;
&.open {
transform: translateX(0%);
}
}
.sidebar-content {
position: relative;
display: 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;
}