Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Bug 827610 - Modify banner style to have variable size #7362

Merged
merged 1 commit into from

5 participants

@crh0716

https://bugzilla.mozilla.org/show_bug.cgi?id=827610

Modify the style to have variable size. Also remove duplicate banner style and link to the shared one.

@basiclines

Seems pretty nice!
Did you test the modified applications?

Thx!

@crh0716

I've tested ev.me and clock and they work fine.

@basiclines

r+ from my side so

@ian-liu

It works for me. r+

@ranbena

The padding in evme banner is wrong. Here's the fix EverythingMe@129da99

Arthur, I can't do a PR to your repo so can you simply do the change in your branch?

@crh0716

Ran, your fix has been mergerd. Thanks!

@vingtetun vingtetun merged commit 15e6c92 into mozilla-b2g:master
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
5 apps/clock/index.html
@@ -10,6 +10,7 @@
<!-- Shared styles -->
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
<link rel="stylesheet" type="text/css" href="shared/style/switches.css">
+ <link rel="stylesheet" type="text/css" href="shared/style/status.css">
<!-- Shared sounds -->
<link rel="resources" type="directory" href="shared/resources/media/alarms/">
@@ -62,11 +63,11 @@
<a id="alarm-new" href="#alarm" class="right button plus"></a>
<ul id="alarms" class="tableView"></ul>
</div>
- <div id="banner-countdown" class="banner">
+ <section id="banner-countdown" role="status">
<p> <!-- this will be replaced dynamically -->
The alarm is set for <strong>8 hours</strong> and <strong>45 minutes</strong> from now.
</p>
- </div>
+ </section>
</div>
<div id="stopwatch-view" class="active view" hidden="true">
View
53 apps/clock/style/clock.css
@@ -452,63 +452,22 @@ html, body {
#minutehandCentralPoint { /* dark-gray central point*/
stroke-width: 0rem;
}
-/* from building blocks, core.css - [role=dialog]*/
-.banner {
- position: absolute;
- background: orange;
- width: 100%;
- height: 8.13rem;
- bottom: 0;
- vertical-align: middle;
- text-align: center;
- background-attachment: scroll, scroll;
- background-clip: border-box, border-box;
- background-color: transparent;
- background-image: url("images/pattern.png"), url("images/gradient.png");
- background-origin: padding-box, padding-box;
- background-position: left top, left top;
- background-repeat: repeat, no-repeat;
- background-size: auto auto, 100% 100%;
- font-family: "MozTT",Sans-serif;
+
+/* banner*/
+#banner-countdown {
z-index: -1;
opacity: 0;
-moz-transition: all 600ms ease;
}
-.banner.visible {
+#banner-countdown.visible {
z-index: 1;
opacity: 1;
-moz-transition: all 600ms ease;
}
-.banner:before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-.banner:after {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-.banner > p {
- display: inline-block;
- font-size: 1.56rem;
- line-height: 2.34rem;
- max-width: 75%;
- vertical-align: middle;
- white-space: normal;
- color: #FFFFFF;
- font-family: "MozTT",Sans-serif;
-}
-.banner > p > strong {
- color: #0995B0;
- font-weight: normal;
- text-transform: uppercase;
+#banner-countdown > p > strong {
white-space: nowrap;
}
+
/* localization */
body.hidden *[data-l10n-id] {
visibility: hidden;
View
2  apps/homescreen/everything.me/css/common.css
@@ -16,7 +16,7 @@
bottom: 75px;
}
-#evmeContainer * {
+#evmeContainer *:not([role]) {
margin: 0;
padding: 0;
}
View
54 apps/homescreen/everything.me/modules/Banner/Banner.css
@@ -1,57 +1,13 @@
-/* from building blocks, core.css - [role=dialog]*/
-#evmeContainer .banner {
- position: absolute;
- background: orange;
- width: 100%;
- height: 8.13rem;
- bottom: 0;
- vertical-align: middle;
- text-align: center;
- background-attachment: scroll, scroll;
- background-clip: border-box, border-box;
- background-color: transparent;
- background-image: url("/everything.me/images/shared/pattern.png"), url("/everything.me/images/shared/gradient.png");
- background-origin: padding-box, padding-box;
- background-position: left top, left top;
- background-repeat: repeat, no-repeat;
- background-size: auto auto, 100% 100%;
- font-family: "MozTT",Sans-serif;
- -moz-transition: all 600ms ease;
+#evmeBanner {
z-index: -1;
opacity: 0;
+ -moz-transition: all 600ms ease;
}
-#evmeContainer .banner.visible {
+#evmeBanner.visible {
z-index: 10001;
opacity: 1;
-moz-transition: all 600ms ease;
}
-#evmeContainer .banner:before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-#evmeContainer .banner:after {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-#evmeContainer .banner > p {
- display: inline-block;
- font-size: 1.56rem;
- line-height: 2.34rem;
- max-width: 75%;
- vertical-align: middle;
- white-space: normal;
- color: #FFFFFF;
- font-family: "MozTT",Sans-serif;
-}
-#evmeContainer .banner > p > strong {
- color: #0995B0;
- font-weight: normal;
- text-transform: uppercase;
+#evmeBanner > p > strong {
white-space: nowrap;
-}
+}
View
3  apps/homescreen/index.html
@@ -20,6 +20,7 @@
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
<link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
+ <link rel="stylesheet" type="text/css" href="shared/style/status.css">
<link rel="stylesheet" type="text/css" href="style/request.css">
<!-- Specific code -->
@@ -110,7 +111,7 @@ <h1 id="search-title"></h1>
</div>
<div id="shortcuts-loading"></div>
</div>
- <div id="evmeBanner" class="banner"></div>
+ <section id="evmeBanner" role="status"></section>
</div>
</div>
<div id="landing-page" data-current-page="true">
View
11 shared/style/status.css
@@ -13,19 +13,10 @@ section[role="status"] {
white-space: nowrap;
font-family: "MozTT", Sans-serif;
color: #fff;
- height: 8rem;
- padding: 0;
+ padding: 1rem 0 0.6rem;
text-align: center;
}
-section[role="status"]:after {
- content: "";
- display: inline-block;
- vertical-align: middle;
- width: 1px;
- height: 100%;
-}
-
section[role="status"] p {
display: inline-block;
vertical-align: middle;
Something went wrong with that request. Please try again.