mirror of
https://github.com/empayre/fleet.git
synced 2024-11-08 01:38:57 +00:00
7a1317432b
* create a MainContent and SidePanelContent containers for layout this creates these two new components for handling layout more cleanly. It also allows us to put in common components into main layout, like sandbox expiration notification * use MainContent and SidePanelContent in current pages this brings in the two new components and wraps the page contents in these. This also allowed us to clean up and remove unused/no needed styling code * add MainContent component to user settings page and clean up user settings component this cleans up the user settings page to follow the panel convention we have as well as adds the MainContent component to this page * add MainContent component to team pages * update Sandbox gate to render optional component when in sandbox mode and add to MainContent * add call to sandbox api to get expiry time this adds a conditional call when the user is in sandbox mode to get the expiry time of the instance * fix sticky elements on settings pages to work with sandbox expiry message * fix e2e test after MainContent refactor
45 lines
893 B
SCSS
45 lines
893 B
SCSS
@import "../../../../node_modules/react-tabs/style/react-tabs.scss";
|
|
|
|
.settings-wrapper {
|
|
// we turn off overflow on the settings page as it seems to mess with our
|
|
// header and navigation
|
|
overflow: visible;
|
|
|
|
h1 {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 38px;
|
|
position: relative;
|
|
|
|
// fake padding for h1 while sticky
|
|
&::before {
|
|
content: "";
|
|
width: 100%;
|
|
height: $pad-xxlarge;
|
|
position: absolute;
|
|
top: -$pad-xxlarge;
|
|
background-color: $core-white;
|
|
}
|
|
}
|
|
|
|
// These styles are here to make the sticky header and nav work correctly
|
|
// with the sandbox mode expiry message.
|
|
&.sandbox-mode {
|
|
h1 {
|
|
&::before {
|
|
height: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-settings {
|
|
padding: 0;
|
|
}
|
|
|
|
.component__tabs-wrapper {
|
|
top: $pad-xxlarge; // for sticky
|
|
z-index: 3;
|
|
}
|
|
}
|