Enhance hardware inventory layout
Change-Id: Ie013fdaa03a03682bb415a34e15155091fa3bf4a
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index aae71b4..960a2d9 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -1,101 +1,373 @@
-<div id="inventory-overview">
- <div class="row column">
- <h1>Hardware inventory</h1>
- </div>
- <section class="row column">
- <div class="page-header">
- <h2 class="inline h4">Inventory items present in the system</h2>
- <button class="inline btn-export float-right">Export</button>
- </div>
- </section>
- <section class="row column">
- <!-- search -->
- <div class="content__search">
- <label for="content__search-input">Search</label> <input id="content__search-input" type="text"
- placeholder="Filter hardware components"/> <input
- id="content__search-submit" type="submit" class="btn btn-secondary"
- value="Submit"/>
- </div>
- <!--<div class="toggle-filter">-->
- <!--<button class="inline first" ng-click="toggleall = !toggleall"-->
- <!--ng-class="toggleall ? 'btn-primary' : 'btn-secondary'">All-->
- <!--</button>-->
- <!--<button class="inline " ng-click="togglehigh = !togglehigh"-->
- <!--ng-class="togglehigh ? 'btn-primary' : 'btn-secondary'">High-->
- <!--</button>-->
- <!--<button class="inline" ng-click="togglemed = !togglemed"-->
- <!--ng-class="togglemed ? 'btn-primary' : 'btn-secondary'">Medium-->
- <!--</button>-->
- <!--<button class="inline last" ng-click="togglelow = !togglelow"-->
- <!--ng-class="togglelow ? 'btn-primary' : 'btn-secondary'">Low-->
- <!--</button>-->
- <!--</div>-->
- </section>
- <!-- end search -->
- <section id="inventory-categories" class="row column">
- <div class="row column header-row">
- <div class="column large-12 header__actions-bar">
- <p class="inline inventory__heading inventory__device-col">Hardware</p>
- <p class="inline inventory__heading inventory__function-col">Function</p>
- <p class="inline inventory__heading inventory__present-col">Present</p>
- <p class="inline inventory__heading inventory__state-col">State</p>
- </div>
- </div>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col">All devices (30)</p>
- </a>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>Motherboard (1)</p>
- <p class="inline inventory__function-col inv-active">Active</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col"> </p>
- </a>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>CPU (1)</p>
- <p class="inline inventory__function-col inv-active">Active</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col"> </p>
- </a>
- <a class="inventory__group" href="#/server-health/inventory">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ high-priority" aria-label="High Priority"></span>CPU cores (6)</p>
- <p class="inline inventory__function-col inv-active">Active</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col inventory__critical-label">High - Emergency</p>
- </a>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>DIMM (4)</p>
- <p class="inline inventory__function-col inv-active">Active</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col"> </p>
- </a>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ warn-priority" aria-label="Warning Priority"></span>Fan (5)</p>
- <p class="inline inventory__function-col inv-active">Active</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col inventory__warning-label">Medium - Warning</p>
- </a>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority"></span>Chasis (3)</p>
- <p class="inline inventory__function-col inv-active">Active</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col"> </p>
- </a>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ normal-priority" aria-label="Normal Priority"></span>BMC (5)</p>
- <p class="inline inventory__function-col inv-active">Active</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col"> </p>
- </a>
- <a class="inventory__group" href="">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ medium-priority " aria-label="MediumPriority"></span>MISC (5)</p>
- <p class="inline inventory__function-col inv-inactive">Inactive</p>
- <p class="inline inventory__present-col inv-present">Present</p>
- <p class="inline inventory__state-col inventory__medium-label">Medium - Error</p>
- </a>
- <a class="inventory__group inv-disabled">
- <p class="inline inventory__device-col"><span class="inline priority-tag-circ disabled" aria-label="Low Priority"></span>PCIE card (0)</p>
- <p class="inline inventory__function-col inv-inactive">Inactive</p>
- <p class="inline inventory__present-col inv-not-present">Not Present</p>
- </a>
- </section>
+<div class="inventory-overview">
+ <div class="row column no-padding">
+ <h1>Hardware status</h1>
+ <div class="page-header">
+ <button class="inline btn-export float-right">Export</button>
+ </div>
+ </div>
+ <section class="row column">
+ <!-- search -->
+ <div class="content__search">
+ <label for="content__search-input">Search</label> <input id="content__search-input" type="text"
+ placeholder="Filter hardware components"/>
+ <input id="content__search-submit" type="submit" class="btn btn-primary" value="Filter"/>
+ </div>
+
+ </section>
+ <!-- end search -->
+ <section id="inventory-categories" class="row column">
+ <div class="row column header-row">
+ <div class="column large-12 header__actions-bar">
+ <div class="inline inventory__heading inventory__device-col">Hardware</div>
+ <div class="inline inventory__heading inventory__function-col"> </div>
+ <div class="inline inventory__heading inventory__assoc-event sort-heading sort-down">Associated events</div>
+ </div>
+ </div>
+ <!-- hardware item -->
+ <div class="inventory__group" ng-class="{'active': inv.meta}" ng-click="inv.meta = ! inv.meta">
+ <p class="inline inventory__device-col">System</p>
+ <p class="inline inventory__function-col"></p>
+ <p class="inline inventory__assoc-event"></p>
+ <button class="accord-trigger float-right" ng-class="{'active': inv.meta}" ng-click="inv.meta = ! inv.meta"></button>
+ <div class="row inventory__metadata" ng-class="{'active': inv.meta}">
+ <div class="column large-9 no-padding">
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Name</p>
+ <p class="courier-bold">System</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Serial Number</p>
+ <p class="courier-bold">2230123ab-04</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Part Number</p>
+ <p class="courier-bold">12355123ab</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Manufacturer</p>
+ <p class="courier-bold">IBM</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Version</p>
+ <p class="courier-bold">10</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Functional</p>
+ <p class="courier-bold">Yes</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Field replaceable</p>
+ <p class="courier-bold">Not replaceable</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Higher level FRU</p>
+ <p class="courier-bold">Motherboard</p>
+ </div>
+ </div>
+ <div class="column large-3">
+
+ </div>
+ </div>
+ </div>
+
+ <!-- hardware item -->
+ <div class="inventory__group">
+ <p class="inline inventory__device-col">Chassis</p>
+ <p class="inline inventory__function-col"></p>
+ <p class="inline inventory__assoc-event"></p>
+ <button class="accord-trigger float-right"></button>
+ <div class="row inventory__metadata">
+ <div class="column large-9 no-padding">
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Name</p>
+ <p class="courier-bold">Processor module</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Serial Number</p>
+ <p class="courier-bold">2230123ab-04</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Part Number</p>
+ <p class="courier-bold">12355123ab</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Manufacturer</p>
+ <p class="courier-bold">IBM</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Version</p>
+ <p class="courier-bold">10</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Functional</p>
+ <p class="courier-bold">Yes</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Field replaceable</p>
+ <p class="courier-bold">Not replaceable</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Higher level FRU</p>
+ <p class="courier-bold">Motherboard</p>
+ </div>
+ </div>
+ <div class="column large-3 no-padding">
+ </div>
+ </div>
+ </div>
+ <!-- hardware item -->
+ <div class="inventory__group ">
+ <p class="inline inventory__device-col">Motherboard</p>
+ <p class="inline inventory__function-col"></p>
+ <p class="inline inventory__assoc-event"></p>
+ <button class="accord-trigger float-right"></button>
+ <div class="row inventory__metadata ">
+ <div class="column large-9 no-padding">
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Name</p>
+ <p class="courier-bold">Processor module</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Serial Number</p>
+ <p class="courier-bold">2230123ab-04</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Part Number</p>
+ <p class="courier-bold">12355123ab</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Manufacturer</p>
+ <p class="courier-bold">IBM</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Version</p>
+ <p class="courier-bold">10</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Functional</p>
+ <p class="courier-bold">Yes</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Field replaceable</p>
+ <p class="courier-bold">Not replaceable</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Higher level FRU</p>
+ <p class="courier-bold">Motherboard</p>
+ </div>
+ </div>
+ <div class="column large-3 no-padding">
+
+ </div>
+ </div>
+ </div>
+ <!-- hardware item w/ sub categories -->
+ <div class="inventory__group" ng-class="{'active': inv2.meta}" ng-click="inv2.meta = ! inv2.meta">
+ <p class="inline inventory__device-col">CPU 0</p>
+ <p class="inline inventory__function-col"></p>
+ <p class="inline inventory__assoc-event"><a href="#/server-health/event-log">View 3 events</a></p>
+ <button class="accord-trigger float-right" ng-class="{'active': inv2.meta}" ng-click="inv2.meta = ! inv2.meta"></button>
+ <div class="row inventory__metadata" ng-class="{'active': inv2.meta}">
+ <div class="column large-9 no-padding">
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Name</p>
+ <p class="courier-bold">Processor module</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Serial Number</p>
+ <p class="courier-bold">2230123ab-04</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Part Number</p>
+ <p class="courier-bold">12355123ab</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Manufacturer</p>
+ <p class="courier-bold">IBM</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Version</p>
+ <p class="courier-bold">10</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Functional</p>
+ <p class="courier-bold">Yes</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Field replaceable</p>
+ <p class="courier-bold">Not replaceable</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Higher level FRU</p>
+ <p class="courier-bold">Motherboard</p>
+ </div>
+ </div>
+ <div class="column large-3 no-padding">
+ <div class="inventory__metadata-scroll show-scroll"> <!-- If content overflows; add 'show-scroll' class via JS to force visible scrollbar in webkit browsers-->
+ <div class="content-label">Subcomponents</div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 0</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold"><span class="icon icon__warning"></span>Core 1</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 2</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 3</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 4</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 5</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 6</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 7</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 8</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 9</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 10</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 11</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 12</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 13</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 14</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 15</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 16</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 17</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 18</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 19</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 20</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 21</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 22</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="courier-bold">Core 23</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- hardware item -->
+ <div class="inventory__group ">
+ <p class="inline inventory__device-col">Ethernet</p>
+ <p class="inline inventory__function-col">Inactive</p>
+ <p class="inline inventory__assoc-event"><a href="#/server-health/event-log">View 1 event</a></p>
+ <button class="accord-trigger float-right"></button>
+ <div class="row inventory__metadata ">
+ <div class="column large-9 no-padding">
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Name</p>
+ <p class="courier-bold">Processor module</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Serial Number</p>
+ <p class="courier-bold">2230123ab-04</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Part Number</p>
+ <p class="courier-bold">12355123ab</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Manufacturer</p>
+ <p class="courier-bold">IBM</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Version</p>
+ <p class="courier-bold">10</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Functional</p>
+ <p class="courier-bold">Yes</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Field replaceable</p>
+ <p class="courier-bold">Not replaceable</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Higher level FRU</p>
+ <p class="courier-bold">Motherboard</p>
+ </div>
+ </div>
+ <div class="column large-3 no-padding"></div>
+ </div>
+ </div>
+ <!-- hardware item no sub items -->
+ <div class="inventory__group inv-disabled">
+ <p class="inline inventory__device-col">DIMM 0</p>
+ <p class="inline inventory__function-col">Not present</p>
+ <p class="inline inventory__assoc-event"></p>
+ <button class="accord-trigger float-right"></button>
+ <div class="row inventory__metadata ">
+ <div class="column large-9 no-padding">
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Name</p>
+ <p class="courier-bold">Processor module</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Serial Number</p>
+ <p class="courier-bold">2230123ab-04</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Part Number</p>
+ <p class="courier-bold">12355123ab</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Manufacturer</p>
+ <p class="courier-bold">IBM</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Version</p>
+ <p class="courier-bold">10</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Functional</p>
+ <p class="courier-bold">Yes</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Field replaceable</p>
+ <p class="courier-bold">Not replaceable</p>
+ </div>
+ <div class="inline inventory__metadata-block">
+ <p class="content-label">Higher level FRU</p>
+ <p class="courier-bold">Motherboard</p>
+ </div>
+ </div>
+ <div class="column large-3 no-padding"></div>
+ </div>
+ </div>
+ </section>
</div>
\ No newline at end of file
diff --git a/app/server-health/styles/inventory.scss b/app/server-health/styles/inventory.scss
index 307245f..ecb3a8a 100644
--- a/app/server-health/styles/inventory.scss
+++ b/app/server-health/styles/inventory.scss
@@ -8,67 +8,34 @@
.inventory__heading {
font-weight: 700;
+ padding: 1em 0;
}
-.inv-active {
- color: $active;
-}
-
-.inv-inactive {
- color: $inactive;
-}
-
-.inv-present {
- color: $present;
-}
-.inv-not-present {
- color: $not-present;
-}
-
-.inventory__critical-label {
- color: $thresh-critical;
-}
-
-.inventory__warning-label {
- color: $thresh-warning;
-}
-
-.inventory__medium-label {
- color: $medium-lightbg;
-}
-
-.inventory__low-label {
- color: $low-lightbg;
-}
-
-.col-3 {
- @include calcColumn-3;
-}
-.col-4 {
- min-width: 100%;
- @include mediaQuery(medium) {
- @include calcColumn-4(15px);
- }
-}
// Inventory Overview
-
-#inventory-overview {
+.inventory-overview {
.inventory__group {
position: relative;
display: block;
- margin: .5em 0;
+ margin: 0;
font-weight: 700;
background: $white;
- padding: 1em 1em 0 3.7em;
+ padding: 1em 1em 0 1.5em;
text-decoration: none;
- border: 1px solid $lightgrey;
+ border-left: 1px solid $medgrey;
+ border-right: 1px solid $medgrey;
+ border-bottom: 0;
vertical-align: middle;
+ @include fastTransition-all;
&:hover {
background: $lightblue;
color: $black;
+ cursor: pointer;
}
- @include mediaQuery(x-large) {
- //max-width: 60%;
+ &.active {
+ background: darken($lightgrey, 3%);
+ &:last-child {
+ border-bottom: 1px solid $medgrey;
+ }
}
.inv-active {
color: darken($active, 20%);
@@ -77,29 +44,68 @@
color: darken($present, 20%);
}
&.inv-disabled {
- background: lighten($lightgrey, 5%);
- .inventory__device-col {
+ background: $medgrey;
+ .inventory__device-col,
+ .inventory__function-col {
color: lighten($darkgrey, 20%);
}
+ .accord-trigger {
+ display: none;
+ }
+ &:hover,
+ .accord-trigger:hover {
+ cursor: default;
+ }
}
- }
- .priority-tag-circ {
- position: absolute;
- top: 50%;
- left: 1.2em;
- transform: translateY(-50%);
+ .accord-trigger {
+ margin-top: -8px;
+ }
}
// Header row
.header__actions-bar {
- padding-left: 3.5em;
- padding-right: 1em;
+ padding: 0 1em 0 1.5em;
+ .inventory__assoc-event {
+ padding-right: 1em;
+ &:hover {
+ cursor: pointer;
+ }
+ }
+ }
+
+ //sortable heading
+ .sort-heading {
+ position: relative;
+ color: $lightblue;
+ &::before {
+ content: '\025be';
+ position: absolute;
+ right: 0;
+ top: 8px;
+ transform: rotate(180deg);
+ font-size: 1.3em;
+ }
+ &::after {
+ content: '\025be';
+ position: absolute;
+ right: -1px;
+ bottom: 8px;
+ font-size: 1.3em;
+ }
+ &.sort-up {
+ &::before {
+ color: $darkbg__accent;
+ }
+ }
+ &.sort-down {
+ &::after {
+ color: $darkbg__accent;
+ }
+ }
}
}
-
-// Inventory single items
-
-#inventory, #inventory-overview {
+// Inventory items
+.inventory-overview {
.inventory__device-col {
margin-right: 6px;
width: 50%;
@@ -107,229 +113,69 @@
width: auto;
}
}
+
.inventory__function-col {
- @include col-label;
- display: none;
- }
- .inventory__present-col {
- @include col-label;
- display: none;
- }
- .inventory__state-col {
- @include col-label;
+ @include col-label;
+ color: $severity-medium-lightbg;
+ display: none;
}
.inventory__device-col,
- .inventory__function-col,
- .inventory__present-col,
- .inventory__state-col {
+ .inventory__function-col {
@media (min-width: 1025px){
display: inline-block;
@include calcColumn-4(5px);
}
}
- .content__search {
- max-width: 100%;
- @media(min-width: 1300px) {
- max-width: 50%;
- }
- }
- .toggle-filter {
- display: inline-block;
- margin-right: 0;
- }
-}
-
-.back-link {
- margin: 1em 0 1em;
- a {
- text-decoration: none;
- position: relative;
- display: inline-block;
- padding-left: 1.2em;
- font-weight: 700;
- &:before {
- content: '\221F';
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-53%) rotate(45deg);
- display: inline-block;
- margin-right: 6px;
- font-size: 1.1em;
- font-weight: bold;
- text-shadow: 0 0 1px black;
- }
- &:hover {
- text-decoration: underline;
- }
- }
-}
-
-#inventory__details {
- display: block;
- margin-top: .6em;
- position: relative;
- overflow: hidden;
-
- .header__actions-bar {
- position: relative;
-
- .priority-tag-circ {
- position: absolute;
- left: 1.2em;
- top: 50%;
- transform: translateY(-50%);
- &.high-priority {
- background-color: rgba($critical-darkbg, .3);
- }
- }
- .inventory__category {
- margin: 0;
- color: $white;
- min-width: $title-minWidth;
- }
- }
- .accord-row {padding-left: 3.7em;}
- .header-row {
- background: $darkpurple;
- padding-top: 1.5em;
- padding-bottom: 0;
- .inv-active {
- color: $active;
- }
-
- .inv-inactive {
- color: $inactive;
- }
-
- .inv-present {
- color: $present;
- }
- .inv-not-present {
- color: $not-present;
- }
-
- .inventory__critical-label {
- color: lighten($thresh-critical, 15%);
- }
-
- .inventory__warning-label {
- color: $thresh-warning;
- }
-
- .inventory__medium-label {
- color: $medium-lightbg;
- }
-
- .inventory__low-label {
- color: lighten($low-lightbg, 20%);
- }
- }
-
- //Export log
- .btn-export {
- text-transform: capitalize;
- color: $black;
- font-size: .9em;
- font-weight: 700;
- position: relative;
- padding: 0 0 1em 2em;
- &:hover {
- text-decoration: underline;
- }
- }
- .btn-export {
- margin-top: 7px;
- }
- .btn-export:before {
- content: '\21E5';
- position: absolute;
- font-size: 1.7em;
- vertical-align: middle;
- transform: rotate(90deg);
- display: inline-block;
- left: 2px;
- top: -5px;
- }
-
- .accord-row {
- padding-top: 1.6em;
- .priority-tag-circ {
- position: absolute;
- top: 28px;
- left: 1.2em;
- }
- }
-
- .accord-trigger {
- position: absolute;
- top: 20px;
- right: 1em;
- }
- //Sensor info
- .inventory__title {
- font-weight: 700;
- font-size: 1.1em;
- min-width: $title-minWidth;
- max-width: 78%;
- vertical-align: top;
- }
- .inventory__description {
- font-weight: 400;
- }
-
- .inventory__reading {
- @include fontCourierBold;
- font-size: 1.2em;
- color: $black;
- //max-width: 18%;
- }
-
- // Sensor metadata row
- .inventory__metadata-row {
+ .inventory__metadata {
+ height: 0;
max-height: 0;
+ margin: 0 -1em 0 -1.5em;
+ border-top: 1px solid $medgrey;
+ position: relative;
overflow: hidden;
- -webkit-transition: 0.5s linear max-height;
- transition: 0.5s linear max-height;
- padding: 0;
- .content-label {
- margin-top: 1em;
- }
+ @include fastTransition-all;
&.active {
- max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
+ height: 100%;
+ max-height: 1000px;
+ border-bottom: 1px solid $medgrey;
+ background: $lightgrey;
+ padding-bottom: 1em;
@include fastTransition-all;
}
}
- .inv-event-log-row {
- border-top: 2px solid $lightgrey;
- margin-right: 3.7em;
- margin-left: 0;
- padding-top: .8em;
- word-break: break-word;
- :first-child,
- :last-child {
- font-size: .9em;
- font-weight: 600;
- text-transform: uppercase;
- text-decoration: none;
- padding-bottom: .7em;
- padding-top: .7em;
- @include mediaQuery(small) {
- padding-bottom: 0;
- padding-top: 0;
- }
- }
- a:hover {
- text-decoration: underline;
- }
- .column {
- margin-bottom: 0;
+
+ .inventory__metadata-block {
+ min-width: 100%;
+ padding: .5em 1em .5em 1.5em;
+ @include mediaQuery(small) {
+ @include calcColumn-3;
}
}
- .event__description {
+
+ .inventory__metadata-scroll {
+ position: relative;
+ height: 100%;
+ max-height: 200px;
+ overflow-y: scroll;
+ bottom: 0;
+ right:0;
+ width: 100%;
+ padding-top: 1em;
+ padding-left: 1.5em;
+ border-top: 1px solid $medgrey;
+ .inventory__metadata-block {
+ @include calcSplitColumn;
+ margin-bottom: .5em;
+ padding: 0;
+ }
@include mediaQuery(medium) {
- padding-left: 1.6em;
+ position: absolute;
+ border-left: 1px solid $medgrey;
+ border-top: 0;
+ max-height: 500px;
+ padding: .5em 1em;
+ width: 23%;
}
}
}