[results feed] Allow wrapping of header bar, for mobile
Change-Id: I43c3cee83166330a532ef546aca9f75b82aa9793
Reviewed-on: https://dart-review.googlesource.com/c/dart_ci/+/149181
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 9f61a94..544a245 100644
--- a/results_feed/lib/src/components/app.html
+++ b/results_feed/lib/src/components/app.html
@@ -1,12 +1,17 @@
<header class="blue">
- <span class="title">{{title}}</span>
- <results-filter></results-filter>
+ <span class="title">
+ <img style="width:2em; height:2em; margin-bottom:-0.5em"
+ src="dart_192.svg" alt="Dart" title="Dart">
+ Results Feed</span>
<span
class="button"
(click)="toggleLogin()">
{{loginMessage}}
</span>
</header>
+<header class="blue">
+ <results-filter></results-filter>
+</header>
<header class="shadow">
<filter-row></filter-row>
</header>
diff --git a/results_feed/lib/src/components/app_component.css b/results_feed/lib/src/components/app_component.css
index 532b288..0708621 100644
--- a/results_feed/lib/src/components/app_component.css
+++ b/results_feed/lib/src/components/app_component.css
@@ -6,8 +6,8 @@
header {
flex: none;
+ flex-wrap: wrap;
width: 100%;
- min-height: 50px;
margin: 0px;
z-index: 1;
display: flex;
@@ -15,6 +15,7 @@
}
header.shadow {
+ min-height: 40px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
@@ -27,16 +28,19 @@
display: inline-block;
margin-left: 16px;
margin-right: 16px;
+ margin-top: 6px;
font-size: 24px;
}
header.blue {
- background-color: rgb(63, 81, 181);
- color: white;
+ background-color: white;
+ color: rgb(63, 81, 181);
+ justify-content: space-between;
}
results-filter {
flex: 1;
+ align-self: stretch;
}
.results-feed-body {
diff --git a/results_feed/lib/src/components/app_component.dart b/results_feed/lib/src/components/app_component.dart
index 31e582c..efc4c1a 100644
--- a/results_feed/lib/src/components/app_component.dart
+++ b/results_feed/lib/src/components/app_component.dart
@@ -43,8 +43,6 @@
'app_component.css'
])
class AppComponent implements OnInit, CanReuse {
- String title = 'Dart Results Feed';
-
Map<IntRange, ChangeGroup> changeGroups = SplayTreeMap(reverse);
Map<int, Commit> commits = SplayTreeMap(reverse);
Map<IntRange, List<Comment>> comments = SplayTreeMap(reverse);
diff --git a/results_feed/lib/src/components/results_filter_component.dart b/results_feed/lib/src/components/results_filter_component.dart
index 1abf2c5..40f1d59 100644
--- a/results_feed/lib/src/components/results_filter_component.dart
+++ b/results_feed/lib/src/components/results_filter_component.dart
@@ -30,15 +30,20 @@
'''
:host {
display: flex;
- height: 100%;
- box-sizing: border-box;}
+ box-sizing: border-box;
+ border-bottom-style:solid;
+ border-width: thin;
+ border-color: rgb(63, 81, 181);
+ }
span {
- color: lightgray;
+ color: gray;
display: inline-flex;
font-variant: small-caps;
font-size: 20px;
font-weight: bold;
- align-items: center;
+ padding-left: 4px;
+ padding-top: 8px;
+ text-align: center;
justify-content: center;
height: auto;
border-bottom-style: solid;
@@ -47,14 +52,14 @@
flex: 1 1 auto;
}
span.selected {
- color: white;
- border-color: white;
+ color: rgb(63, 81, 181);
+ border-color: rgb(63, 81, 181);
}'''
])
class ResultsFilterComponent {
- static const allResults = 'all results';
- static const activeFailures = 'active failures';
- static const unapprovedFailures = 'unapproved failures';
+ static const allResults = 'all';
+ static const activeFailures = 'failures';
+ static const unapprovedFailures = 'unapproved';
static const resultTypes = [allResults, activeFailures, unapprovedFailures];
final FilterService service;
diff --git a/results_feed/web/dart_192.svg b/results_feed/web/dart_192.svg
new file mode 100644
index 0000000..b9ddcdf
--- /dev/null
+++ b/results_feed/web/dart_192.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="192px" height="192px" viewBox="0 0 192 192" enable-background="new 0 0 192 192" xml:space="preserve">
+<g>
+ <rect x="0" fill="none" width="192" height="192"/>
+ <path fill="#01579B" d="M51,141l-26-26c-3.08-3.17-5-7.63-5-12c0-2.02,1.14-5.18,2-7l24-50L51,141z"/>
+ <path fill="#40C4FF" d="M140,51l-26-26c-2.27-2.28-7-5-11-5c-3.44,0-6.81,0.69-9,2L46,46L140,51z"/>
+ <polygon fill="#40C4FF" points="82,172 145,172 145,145 98,130 55,145 "/>
+ <path fill="#29B6F6" d="M46,127c0,8.02,1.01,9.99,5,14l4,4h90l-44-50L46,46V127z"/>
+ <path fill="#01579B" d="M126,46H46l99,99h27V83l-32-32C135.51,46.49,131.51,46,126,46z"/>
+ <path opacity="0.2" fill="#FFFFFF" d="M52,142c-4-4.02-5-7.97-5-15V47l-1-1v81C46,134.03,46,135.98,52,142l3,3l0,0L52,142z"/>
+ <polygon opacity="0.2" fill="#263238" points="171,82 171,144 144,144 145,145 172,145 172,83 "/>
+ <path opacity="0.2" fill="#FFFFFF" d="M140,51c-4.96-4.96-9.02-5-15-5H46l1,1h78C127.99,47,135.52,46.5,140,51L140,51z"/>
+ <radialGradient id="SVGID_1_" cx="96" cy="96" r="76" gradientUnits="userSpaceOnUse">
+ <stop offset="0" style="stop-color:#FFFFFF;stop-opacity:0.1"/>
+ <stop offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+ </radialGradient>
+ <path opacity="0.2" fill="url(#SVGID_1_)" d="M171,82l-31-31l-26-26c-2.27-2.28-7-5-11-5c-3.44,0-6.81,0.69-9,2L46,46L22,96
+ c-0.86,1.82-2,4.98-2,7c0,4.37,1.92,8.83,5,12l23.96,23.79c0.57,0.7,1.25,1.42,2.04,2.21l1,1l3,3l26,26l1,1h62h1v-27h27v-0.07V83
+ L171,82z"/>
+</g>
+</svg>
