[results feed] Simplify header and body styles and positioning
Change-Id: Ief39b1febe559daec3c774da94d6bdddf8224997
Reviewed-on: https://dart-review.googlesource.com/c/dart_ci/+/147560
Reviewed-by: Alexander Thomas <athom@google.com>
diff --git a/results_feed/lib/src/components/app.html b/results_feed/lib/src/components/app.html
index c86f454..e19d945 100644
--- a/results_feed/lib/src/components/app.html
+++ b/results_feed/lib/src/components/app.html
@@ -1,26 +1,23 @@
-<header class="material-header shadow">
- <div class="material-header-row">
- <material-button
- icon
- class="material-drawer-button"
- (trigger)="showFilter = true">
- <material-icon icon="filter_list"></material-icon>
- </material-button>
- <span class="material-header-title">{{title}}</span>
- <div class="material-spacer"></div>
- <span *ngIf="fetching != null">
- <material-icon icon="autorenew"></material-icon>
- fetching results...
- </span>
- <material-button
- class="material-drawer-button"
- (trigger)="toggleLogin()">
- {{loginMessage}}
- </material-button>
- </div>
+<header class="shadow blue">
+ <material-button
+ icon
+ class="material-drawer-button"
+ (trigger)="showFilter = true">
+ <material-icon icon="filter_list"></material-icon>
+ </material-button>
+ <span class="title">{{title}}</span>
+ <span class="space"></span>
+ <span *ngIf="fetching != null">
+ <material-icon icon="autorenew"></material-icon>
+ fetching results...
+ </span>
+ <span
+ class="button"
+ (trigger)="toggleLogin()">
+ {{loginMessage}}
+ </span>
</header>
-<material-content
- style="margin:0px; background-color:ghostwhite; margin-top:64px">
+<div class="results-feed-body">
<modal [(visible)]="showFilter">
<material-dialog
info
@@ -46,6 +43,7 @@
<span *ngIf="infiniteScrollEnabled" #infiniteScroll>
fetching results ...</span>
<material-button raised *ngIf="!infiniteScrollEnabled" (trigger)="fetchData()">
- Fetch more results</material-button>
+ Fetch more results
+ </material-button>
</div>
-</material-content>
+</div>
diff --git a/results_feed/lib/src/components/app_component.css b/results_feed/lib/src/components/app_component.css
index 474795e..6ebbf59 100644
--- a/results_feed/lib/src/components/app_component.css
+++ b/results_feed/lib/src/components/app_component.css
@@ -4,17 +4,45 @@
* BSD-style license that can be found in the LICENSE file.
*/
-.material-header {
- height: 64px;
- position: fixed;
- left: 0;
- top: 0px;
- z-index: 100;
+header {
+ flex: none;
width: 100%;
margin: 0px;
+ z-index: 1;
+}
+
+header.shadow {
+ box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+ 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+header span.space {
+ flex: 1;
+}
+
+header span.button {
+ font-variant: small-caps;
+}
+
+header span {
+ display: inline-block;
+ margin-left: 16px;
+ margin-right: 16px;
+ font-size: 24px;
+}
+
+header.blue {
+ background-color: rgb(63, 81, 181);
+ color: white;
+}
+
+.results-feed-body {
+ flex: auto;
+ overflow-y: scroll;
+ background-color: ghostwhite;
}
.info-dialog {
width: 50%;
height: 70%;
-}
\ No newline at end of file
+}
diff --git a/results_feed/lib/src/components/app_component.dart b/results_feed/lib/src/components/app_component.dart
index d8e1465..e382b84 100644
--- a/results_feed/lib/src/components/app_component.dart
+++ b/results_feed/lib/src/components/app_component.dart
@@ -26,7 +26,7 @@
import '../services/build_service.dart';
@Component(
- selector: 'my-app',
+ selector: 'results-feed',
pipes: [commonPipes],
directives: [
coreDirectives,
diff --git a/results_feed/web/styles.css b/results_feed/web/styles.css
index bb99311..2b40edf 100644
--- a/results_feed/web/styles.css
+++ b/results_feed/web/styles.css
@@ -1,34 +1,17 @@
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);
-/* Master Styles */
-/*h1 {
- color: #369;
- font-family: Arial, Helvetica, sans-serif;
- font-size: 250%;
-}
-h2, h3 {
- color: #444;
- font-family: Arial, Helvetica, sans-serif;
- font-weight: lighter;
-}*/
-body {
+html, body, routing-wrapper, results-feed {
margin: 0px;
-}
-
-.faint {
- color: #444;
- font-size: 80%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
}
.indent {
margin-left: 50px;
}
-label {
- padding-right: 0.5em;
-}
-
material-chip {
width: auto;
}
@@ -40,5 +23,3 @@
* {
font-family: Arial, Helvetica, sans-serif;
}
-
-.paper-container { padding-top: 0px; padding-bottom: 0px; }
