Move to Bootstrap 4
Bootstrap < 4.1.2 has the following CVE:
https://nvd.nist.gov/vuln/detail/CVE-2018-14041
Removed bootstrap-theme.css due to "Replaced the separate optional
theme with configurable options via SCSS variables
(e.g., $enable-gradients: true)."
Added "width: 100%" to a few places where width 100% was no longer
getting inherited.
Moved a few elements and adjusted styles to get the same look as
before.
See https://getbootstrap.com/docs/4.0/migration/ for more
information.
Tested: Manually on a Witherspoon.
Change-Id: I0a72665ac1ca6eacd0b553a585b1fb15e14ae62c
Signed-off-by: Gunnar Mills <gmills@us.ibm.com>
diff --git a/app/common/directives/log-search-control.html b/app/common/directives/log-search-control.html
index 113e9f0..1184bda 100644
--- a/app/common/directives/log-search-control.html
+++ b/app/common/directives/log-search-control.html
@@ -1,9 +1,11 @@
-<p class="content-label">Filter events</p>
-<div class="content__search">
- <label for="content__search-input">Event Log Search</label>
- <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
- <div class="search-submit__wrapper">
- <button class="clear-input" ng-click="clear()">✕</button>
- <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
+<section id="event-search" class="row column" aria-label="event log search">
+ <p class="content-label">Filter events</p>
+ <div class="content__search">
+ <label for="content__search-input">Event Log Search</label>
+ <input id="content__search-input" type="text" ng-model="customSearch" ng-keydown="doSearchOnEnter($event)"/>
+ <div class="search-submit__wrapper">
+ <button class="clear-input" ng-click="clear()">✕</button>
+ <input id="content__search-submit" type="submit" class="btn btn-primary content__search-submit" value="Filter" ng-click="doSearchOnClick()"/>
+ </div>
</div>
-</div>
+</section>
diff --git a/app/common/styles/components/table.scss b/app/common/styles/components/table.scss
index 84982b3..01c0632 100644
--- a/app/common/styles/components/table.scss
+++ b/app/common/styles/components/table.scss
@@ -18,6 +18,10 @@
width: 100%;
}
+.table__body {
+ width: 100%;
+}
+
.table__row {
display: flex;
width: 100%;
@@ -76,6 +80,7 @@
// Table Head
.table__head {
+ width: 100%;
.table__row {
display: none;
font-weight: 700;
diff --git a/app/common/styles/elements/toggle-filter.scss b/app/common/styles/elements/toggle-filter.scss
index 6dd7e77..7448827 100644
--- a/app/common/styles/elements/toggle-filter.scss
+++ b/app/common/styles/elements/toggle-filter.scss
@@ -1,9 +1,7 @@
// toggle buttons for filtering
.toggle-filter {
display: inline-block;
- @media (min-width: 1300px) {
- margin-top: -25px;
- }
+
.content-label {
margin-bottom: .4em;
}
@@ -32,4 +30,4 @@
.btn-primary {
border: 2px solid $primebtn__bg;
}
-}
\ No newline at end of file
+}
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index ad5e74f..5a58478 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -4,13 +4,14 @@
// Page header
.page-header {
+ width: 100%;
position: relative;
border-bottom: 1px solid $lightbg__grey;
margin: .5em 0 2.2em;
padding-left: 0;
.h4 {
padding: .1em 0 0 0;
- margin: 0 0 .5em 0;
+ margin: 0 0 1em 0;
font-weight: bold;
}
}
@@ -45,4 +46,4 @@
.subhead {
border-bottom: 1px solid $medgrey;
padding-bottom: .5em;
-}
\ No newline at end of file
+}