Skip to content

Commit 9f5ba41

Browse files
shivamag00shivamag00
authored
20210628 UI enhancements (GoogleChrome#1376)
* Fixed Right Margin Around the Feature Cards in Mobile View * Fixed Add Feature Button on Mobile UI * Fixed NavBar on narrow viewports * Added a custom Google Sign In Button * Redesigned the Google Sign In Button * Google Sign In Image
1 parent 8e24970 commit 9f5ba41

File tree

6 files changed

+140
-36
lines changed

6 files changed

+140
-36
lines changed

‎static/img/google_sign_in/btn_google_signin_light_normal_web@2x.png‎

6.41 KB
Loading

‎static/img/google_sign_in/btn_google_signin_light_pressed_web@2x.png‎

6.3 KB
Loading

‎static/sass/features/features.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,6 @@ chromedash-featurelist {
6262

6363
@media only screen and (max-width: 700px) {
6464
#subheader {
65-
margin: $content-padding / 2;
6665
width: initial;
6766

6867
div.actionlinks {

‎static/sass/main.scss‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,6 @@ header {
157157
}
158158

159159
a {
160-
text-align: left;
161160
display: block;
162161
}
163162

@@ -371,6 +370,7 @@ footer {
371370
}
372371
#content-column {
373372
padding-left: var(--content-padding-half);
373+
padding-right: var(--content-padding-half);
374374
}
375375

376376
header {
@@ -419,8 +419,12 @@ footer {
419419

420420
&.search {
421421
text-align: center;
422-
flex: 1 0 0;
422+
min-width: 0;
423423
margin: 0;
424+
425+
input {
426+
width: auto;
427+
}
424428
}
425429
}
426430
}
@@ -454,3 +458,38 @@ footer {
454458
}
455459

456460
@import 'fouc';
461+
462+
.flex-container {
463+
display: flex;
464+
justify-content: space-between;
465+
}
466+
467+
.flex-container-outer {
468+
flex-wrap: wrap;
469+
width: 100%;
470+
}
471+
472+
@media only screen and (max-width: 700px) {
473+
.flex-container-inner-first {
474+
justify-content: space-between;
475+
width: 100%;
476+
}
477+
478+
.flex-item {
479+
padding-left: 0px;
480+
padding-right: 0px;
481+
flex: 1 0 auto;
482+
}
483+
484+
.flex-item-inner {
485+
padding-left: 0px;
486+
padding-right: 0px;
487+
text-align: center;
488+
flex: 0 1 auto;
489+
}
490+
491+
.flex-container-inner-second {
492+
justify-content: center;
493+
width: 100%;
494+
}
495+
}

‎templates/_base.html‎

Lines changed: 60 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
<meta name="apple-mobile-web-app-capable" content="yes">
3030
<meta name="mobile-web-app-capable" content="yes">
3131
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
32-
<meta name="google-signin-client_id" content="{{google_sign_in_client_id}}">
3332

3433
<link rel="apple-touch-icon" href="/static/img/crstatus_128.png">
3534
<link rel="apple-touch-icon-precomposed" href="/static/img/crstatus_128.png">
@@ -55,6 +54,40 @@
5554
app-drawer-layout:not([narrow]) [drawer-toggle] {
5655
display: none;
5756
}
57+
58+
/* CSS For Google Sign In Button */
59+
#gSignInCustomBtn {
60+
display: inline-block;
61+
background: white;
62+
color: #444;
63+
width: 190px;
64+
box-shadow: 1px 0px 5px grey;
65+
white-space: nowrap;
66+
}
67+
68+
#gSignInCustomBtn:hover {
69+
cursor: pointer;
70+
box-shadow: 0px 0px 5px 1px #84a3d8;
71+
}
72+
73+
#gSignInCustomBtn:active .gSignInIcon {
74+
background: url('/static/img/google_sign_in/btn_google_signin_light_pressed_web@2x.png');
75+
background-size: contain;
76+
display: inline-block;
77+
vertical-align: middle;
78+
width: 191px;
79+
height: 41px;
80+
}
81+
82+
.gSignInIcon {
83+
background: url('/static/img/google_sign_in/btn_google_signin_light_normal_web@2x.png');
84+
background-size: contain;
85+
display: inline-block;
86+
vertical-align: middle;
87+
width: 191px;
88+
height: 41px;
89+
}
90+
5891
</style>
5992

6093
{% block css %}{% endblock %}
@@ -85,11 +118,33 @@
85118
window.location.reload();
86119
});
87120
}
88-
121+
122+
var googleUser = {};
123+
var startApp = function() {
124+
gapi.load('auth2', function(){
125+
auth2 = gapi.auth2.init({
126+
client_id: '{{google_sign_in_client_id}}',
127+
cookiepolicy: 'single_host_origin',
128+
scope: 'profile email'
129+
});
130+
131+
if (document.getElementById('gSignInCustomBtn')) {
132+
attachSignin(document.getElementById('gSignInCustomBtn'));
133+
}
134+
});
135+
};
136+
137+
function attachSignin(element) {
138+
auth2.attachClickHandler(element, {},
139+
function(googleUser) {
140+
onSignIn(googleUser);
141+
}, function(error) {
142+
console.log(error);
143+
});
144+
}
145+
89146
function onLoad() {
90-
gapi.load('auth2', function() {
91-
gapi.auth2.init();
92-
});
147+
startApp();
93148
}
94149

95150
function getQueryStringValue (key) {

‎templates/header.html‎

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,48 @@
66
</hgroup>
77
</aside>
88
<nav>
9-
<div style="flex:0.2"></div>
10-
<a href="/features">All features</a>
11-
<a href="/features/schedule">Releases</a>
12-
<a href="/samples" class="features">Samples</a>
13-
<div class="nav-dropdown-container">
14-
<a class="nav-dropdown-trigger">Stats
15-
<iron-icon icon="chromestatus:arrow-drop-down"></iron-icon>
16-
</a>
17-
<ul>
18-
<li><a href="/metrics/css/popularity">CSS</a></li>
19-
<li><a href="/metrics/feature/popularity">JS/HTML</a></li>
20-
</ul>
21-
</div>
22-
23-
<div style="flex:1"></div>
9+
<div class="flex-container flex-container-outer">
2410

25-
{% if user %}
26-
<div class="nav-dropdown-container">
27-
<a class="nav-dropdown-trigger">
28-
{{user.email}}
29-
<iron-icon icon="chromestatus:arrow-drop-down"></iron-icon>
30-
</a>
31-
<ul>
32-
<li><a href="/settings">Settings</a></li>
33-
<li><a href="#" id="sign-out-link">Sign out</a></li>
11+
<div class="flex-container flex-container-inner-first">
12+
<a class="flex-item" href="/features">All features</a>
13+
<a class="flex-item" href="/features/schedule">Releases</a>
14+
<a class="flex-item" href="/samples" class="features">Samples</a>
15+
<div class="nav-dropdown-container flex-item">
16+
<a class="nav-dropdown-trigger flex-item-inner">Stats
17+
<iron-icon icon="chromestatus:arrow-drop-down"></iron-icon>
18+
</a>
19+
<ul>
20+
<li><a href="/metrics/css/popularity">CSS</a></li>
21+
<li><a href="/metrics/feature/popularity">JS/HTML</a></li>
22+
</ul>
23+
</div>
24+
</div>
3425

35-
</ul>
26+
<div class="flex-container flex-container-inner-second">
27+
{% if user %}
28+
<div class="nav-dropdown-container">
29+
<a class="nav-dropdown-trigger">
30+
{{user.email}}
31+
<iron-icon icon="chromestatus:arrow-drop-down"></iron-icon>
32+
</a>
33+
<ul>
34+
<li><a href="/settings">Settings</a></li>
35+
<li><a href="#" id="sign-out-link">Sign out</a></li>
36+
</ul>
37+
</div>
38+
{% else %}
39+
<!-- <div class="g-signin2" data-onsuccess="onSignIn"></div> -->
40+
<div id="gSignInWrapper">
41+
<div id="gSignInCustomBtn" class="customGPlusSignIn">
42+
<span class="gSignInIcon"></span>
43+
</div>
44+
</div>
45+
<script nonce="{{nonce}}">startApp();</script>
46+
{% endif %}
3647
</div>
37-
{% else %}
38-
<li><div class="g-signin2" data-onsuccess="onSignIn"></div></li>
39-
{% endif %}
48+
</div>
49+
50+
4051

4152

4253
</nav>

0 commit comments

Comments
 (0)