Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

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

Merged
merged 1 commit into from

5 participants

Arthur Chen Ismael González Ian Liu Ran Ben Aharon vingtetun
Arthur Chen
Collaborator

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.

Ismael González
Collaborator

Seems pretty nice!
Did you test the modified applications?

Thx!

Arthur Chen
Collaborator

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

Ismael González
Collaborator

r+ from my side so

Ian Liu
Collaborator

It works for me. r+

Ran Ben Aharon
Collaborator

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?

Arthur Chen
Collaborator

Ran, your fix has been mergerd. Thanks!

vingtetun vingtetun merged commit 15e6c92 into from
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.
5 apps/clock/index.html
View
@@ -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">
53 apps/clock/style/clock.css
View
@@ -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;
2  apps/homescreen/everything.me/css/common.css
View
@@ -16,7 +16,7 @@
bottom: 75px;
}
-#evmeContainer * {
+#evmeContainer *:not([role]) {
margin: 0;
padding: 0;
}
54 apps/homescreen/everything.me/modules/Banner/Banner.css
View
@@ -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;
-}
+}
3  apps/homescreen/index.html
View
@@ -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">
11 shared/style/status.css
View
@@ -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.