open-consul/ui-v2/app/styles/components/header-nav.scss

181 lines
3.5 KiB
SCSS
Raw Normal View History

UI V2 (#4086) * Move settings to use the same service/route API as the rest of the app * Put some ideas down for unit testing on adapters * Favour `Model` over `Entity` * Move away from using `reopen` to using Mixins * Amend messages, comment/document some usage * Make sure the returns are consistent in normalizePayload, also Add some todo's in to remind me to think consider this further at a later date. For example, is normalizePayload to be a hook or an overridable method * Start stripping back the HTML to semantics * Use a variable rather than chaining * Remove unused helpers * Start picking through the new designs, start with listing pages * First draft HTML for every page * Making progress on the CSS * Keep plugging away at the catalog css * Looking at scrolling * Wire up filtering * Sort out filter counting, more or less done a few outstanding * Start knocking the forms into shape * Add in codemirror * Keep moving forwards with the form like layouts * Start looking at ACL editing page, add footer in * Pull the filters back in, look at an autoresizer for scroll views * First draft toggles * 2nd draft healthcheck icons * Tweak node healthcheck icons * Looking at healthcheck detail icons * Tweak the filter-bar and add selections to the in content tabs * Add ACL create, pill-like acl type highlight * Tweaking the main nav some more * Working on the filter-bar and freetext-filter * Masonry layout * Stick with `checks` instead of healthy/unhealthy * Fix up the filter numbers/counts * Use the thead for a measure * First draft tomography back in * First draft DC dropdown * Add a temporary create buttong to kv's * Move KV and ACL to use a create page * Move tags * Run through old tests * Injectable server * Start adding test attributes * Add some page objects * More test attributes and pages * Acl filter objects * Add a page.. page object * Clickable items in lists * Add rest/spread babel plugin, remove mirage for now * Add fix for ember-collection * Keep track of acl filters * ember-cli-page-object * ember-test-selectors * ui: update version of ui compile deps * Update static assets * Centralize radiogroup helper * Rejig KV's and begin to clean it up * Work around lack of Tags for the moment.. * Some little css tweaks and start to remove possibles * Working on the dc page and incidentals 1. Sort the datacenter-picker list 2. Add a selected state to the datacenter-picker 3. Make dc an {Name: dc} 4. Add an env helper to get to 'env vars' from within templates * Click outside stuff for the datacenter-picker, is-active on nav * Make sure the dropdown CTA can be active * Bump ember add pluralize helper * Little try at sass based custom queries * Rejig tablular collection so it deals with resizing, actions 1. WIP: start building actions dropdowns 2. Move tabular collection to deal with resizing to rule out differences * First draft actions dropdowns * Add ports, selectable IP's * Flash messages, plus general cleanup/consistency 1. Add ember-cli-flash for flash messages 2. Move everything to get() instead of item.get 3. Spotted a few things that weren't consistent * DOn't go lower than zero * First draft vertical menu * Missed a get, tweak dropmenu tick * Big cleanup 1. this.get(), this.set() > get(), set() 2. assign > {...{}, ...{}} 3. Seperator > separator * WIP: settings * Moved things into a ui-v2 folder * Decide on a way to do the settings page whilst maintaining the url + dc's * Start some error pages * Remove base64 polyfill * Tie in settings, fix atob bug, tweak layout css * Centralize confirmations into a component * Allow switching between the old and new UI with the CONSUL_UI_BETA env var Currently all the assets are packaged into a single AssetFS and a prefix is configured to switch between the two. * Attempt at some updates to integrate the v2 ui build into the main infrastructure * Add redirect to index.html for unknown paths * Allow redictor to /index.html for new ui when using -ui-dir * Take ACLs to the correct place on save * First pass breadcrumbs * Remove datacenter selector on the index page * Tweak overall layout * Make buttons 'resets' * Tweak last DC stuff * Validations plus kv keyname viewing tweaks * Pull sessions back in * Tweak the env vars to be more reusable * Move isAnon to the view * No items and disabled acl css * ACL and KV details 1. Unauthorized page 2. Make sure the ACL is always selected when it needs it 3. Check record deletion with a changeset * Few more acl tweaks/corrections * Add no items view to node > services * Tags for node > services * Make sure we have tags * Fix up the labels on the tomography graph * Add node link (agent) to kv sessions * Duplicate up `create` for KV 'root creation' * Safety check for health checks * Fix up the grids * Truncate td a's, fix kv columns * Watch for spaces in KV id's * Move actions to their own mixins for now at least * Link reset to settings incase I want to type it in * Tweak error page * Cleanup healthcheck icons in service listing * Centralize errors and make getting back easier * Nice numbers * Compact buttons * Some incidental css cleanups * Use 'Key / Value' for root * Tweak tomography layout * Fix single healthcheck unhealthy resource * Get loading screen ready * Fix healthy healthcheck tick * Everything in header starts white * First draft loader * Refactor the entire backend to use proper unique keys, plus.. 1. Make unique keys form dc + slug (uid) 2. Fun with errors... * Tweak header colors * Add noopener noreferrer to external links * Add supers to setupController * Implement cloning, using ember-data... * Move the more expensive down the switch order * First draft empty record cleanup.. * Add the cusomt store test * Temporarily use the htmlSafe prototype to remove the console warning * Encode hashes in urls * Go back to using title for errors for now * Start removing unused bulma * Lint * WIP: Start looking at failing tests * Remove single redirect test * Finish off error message styling * Add full ember-data cache invalidation to avoid stale data... * Add uncolorable warning icons * More info icon * Rearrange single service, plus tag printing * Logo * No quotes * Add a simple startup logo * Tweak healthcheck statuses * Fix border-color for healthchecks * Tweak node tabs * Catch 401 ACL errors and rethrow with the provided error message * Remove old acl unauth and error routes * Missed a super * Make 'All' refer to number of checks, not services * Remove ember-resizer, add autoprefixer * Don't show tomography if its not worth it, viewify it more also * Little model cleanup * Chevrons * Find a way to reliably set the class of html from the view * Consistent html * Make sure session id's are visible as long as possible * Fix single service check count * Add filters and searchs to the query string * Don't remember the selected tab * Change text * Eror tweaking * Use chevrons on all breadcrumbs even in kv's * Clean up a file * Tweak some messaging * Makesure the footer overlays whats in the page * Tweak KV errors * Move json toggle over to the right * feedback-dialog along with copy buttons * Better confirmation dialogs * Add git sha comment * Same title as old UI * Allow defaults * Make sure value is a string * WIP: Scrolling dropdowns/confirmations * Add to kv's * Remove set * First pass trace * Better table rows * Pull over the hashi code editor styles * Editor tweaks * Responsive tabs * Add number formatting to tomography * Review whats left todo * Lint * Add a coordinate ember data triplet * Bump in a v2.0.0 * Update old tests * Get coverage working again * Make sure query keys are also encoded * Don't test console.error * Unit test some more utils * Tweak the size of the tabular collections * Clean up gitignore * Fix copy button rollovers * Get healthcheck 'icon icons' onto the text baseline * Tweak healthcheck padding and alignment * Make sure commas kick in in rtt, probably never get to that * Improve vertical menu * Tweak dropdown active state to not have a bg * Tweak paddings * Search entire string not just 'startsWith' * Button states * Most buttons have 1px border * More button tweaks * You can only view kv folders * CSS cleanup reduction * Form input states and little cleanup * More CSS reduction * Sort checks by importance * Fix click outside on datacenter picker * Make sure table th's also auto calculate properly * Make sure `json` isn't remembered in KV editing * Fix recursive deletion in KV's * Centralize size * Catch updateRecord * Don't double envode * model > item consistency * Action loading and ACL tweaks * Add settings dependencies to acl tests * Better loading * utf-8 base64 encode/decode * Don't hang off a prototype for htmlSafe * Missing base64 files... * Get atob/btoa polyfill right * Shadowy rollovers * Disabled button styling for primaries * autofocuses only onload for now * Fix footer centering * Beginning of 'notices' * Remove the isLocked disabling as we are letting you do what the API does * Don't forget the documentation link for sessions * Updates are more likely * Use exported constant * Dont export redirectFS and a few other PR updates * Remove the old bootstrap config which was used for the old UI skin * Use curlies for multiple properties
2018-05-10 18:52:53 +00:00
@import './icons';
%header-nav-toggle-button span {
visibility: hidden;
}
%header-nav-toggle-button::before,
%header-nav-toggle-button::after,
%header-nav-toggle-button span::before {
@extend %with-dot;
right: 10px;
left: auto !important;
top: 23px !important;
}
%header-nav-toggle-button::before {
margin-top: -6px;
}
%header-nav-toggle-button::after {
margin-top: 6px;
}
%header-nav-toggle {
display: none;
}
%header-nav-toggle-button {
top: 0;
position: absolute;
}
@media #{$--lt-horizontal-nav} {
%header-nav-panel {
background-color: $magenta-600;
}
%header-nav-panel label span {
visibility: visible !important;
display: inline-block;
padding-right: 47px;
padding-top: 13px;
}
%header-nav-panel {
transition-timing-function: cubic-bezier(0.1, 0.1, 0.25, 0.9);
transition-duration: 0.2s;
transition-property: width right;
}
%header-nav-panel {
box-sizing: border-box;
padding: 15px 35px;
z-index: 10000;
text-align: right;
}
%header-nav-toggle-button {
position: absolute;
right: 0px;
width: 100px;
height: 40px;
z-index: 2;
cursor: pointer;
}
%header-nav-panel {
width: 0%;
overflow: auto;
height: 100%;
position: absolute;
top: 0px;
z-index: 3;
padding: 0;
padding-top: 15px;
right: -100%;
}
%header-nav-toggle:checked ~ div {
width: 250px;
right: 0;
padding: 15px 35px;
}
%header-nav-toggle:checked + label {
background-color: rgba($black, 0.4);
width: 100vw;
height: 100%;
left: 0;
top: 0;
}
%primary-nav {
margin-top: 45px;
}
}
@media #{$--horizontal-nav} {
%header-nav-panel {
display: flex;
}
%header-nav-panel {
justify-content: space-between;
flex-grow: 1;
}
%header-nav-toggle-button {
display: none;
}
}
%primary-nav ul ul {
@extend %header-drop-nav;
}
%primary-nav,
%secondary-nav {
@extend %header-nav;
}
%header-drop-nav a:hover,
%header-drop-nav a:focus,
%header-drop-nav a:active,
%header-drop-nav a.selected {
background-color: $lightest-gray;
}
%header-nav a,
%header-nav-toggle-button {
color: $magenta-50;
}
%header-nav a {
display: block;
padding: 3px 12px;
border-radius: $radius;
white-space: nowrap;
}
@media #{$--lt-horizontal-nav} {
%secondary-nav li:first-child {
display: none;
}
%header-drop-nav {
width: 180px;
}
%header-nav > ul > li > a {
padding-top: 15px;
padding-bottom: 15px;
display: block;
}
%primary-nav > ul > li.is-active > a {
font-weight: $weight-bold;
}
}
%header-nav > ul > li > a:hover,
%header-nav > ul > li > a:focus,
%header-nav > ul > li > a:active,
%header-nav > ul > li.is-active > a {
color: $white;
}
@media #{$--horizontal-nav} {
%header-nav > ul > li:not(:first-child).is-active > a {
background-color: $magenta-800;
}
%header-nav ul {
display: flex;
}
%header-drop-nav {
min-width: 266px;
}
}
%header-drop-nav {
border: 1px solid $border-blue;
background-color: $white;
box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.21);
}
%header-drop-nav a {
color: $text !important;
}
%header-drop-nav .is-active a::after {
@extend %with-inverted-tick;
position: absolute;
top: 50%;
margin-top: -8px;
right: 10px;
}
%header-drop-nav li {
border-bottom: 1px solid;
}
%header-drop-nav li {
border-color: $border-blue;
}
%header-drop-nav {
display: block;
position: absolute;
z-index: 100;
}
%header-drop-nav a {
text-align: left;
position: relative;
padding: 12px 25px;
}