[static-web] friends: Make donation bar slimmer
- From: Tom Tryfonidis <tomtryf src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [static-web] friends: Make donation bar slimmer
- Date: Thu, 12 Jan 2017 12:03:57 +0000 (UTC)
commit ba045b92cc006d594356ae5e1ca2f5ed063b7697
Author: Andreas Nilsson <anilsson redhat com>
Date: Thu Jan 12 14:02:31 2017 +0200
friends: Make donation bar slimmer
Fixes Bug #698898
Signed-off-by: Tom Tryfonidis <tomtryf gnome org>
friends/ruler/ruler-privacy.js | 68 ++++++++----------------------
friends/ruler/ruler-privacy.js.template | 68 ++++++++----------------------
2 files changed, 36 insertions(+), 100 deletions(-)
---
diff --git a/friends/ruler/ruler-privacy.js b/friends/ruler/ruler-privacy.js
index 58f7d13..eb12ed0 100644
--- a/friends/ruler/ruler-privacy.js
+++ b/friends/ruler/ruler-privacy.js
@@ -1,53 +1,21 @@
document.write( '<style type="text/css">' +
- '#gnome-fog-ruler { background: #237100; padding: 16px 0px 16px 0px; color: #fff;
font-family: "Cantarell", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; font-size: 12px; z-index: 200;
width: 100%; position: relative; }' +
- '#gnome-fog-ruler * { margin: 0; padding: 0; }' +
- '#gnome-fog-ruler .fog-center { width: 960px; margin: 0 auto; text-align: left; }' +
- '#gnome-fog-ruler a { color: #fff; }' +
- '#gnome-fog-ruler .fog-left { width: 64px; float: left; margin-right: 10px; }' +
- '#gnome-fog-ruler .fog-intro { width: 500px; float: left; margin-right: 25px; }' +
- '#gnome-fog-ruler .fog-intro h4 { margin-bottom: 6px; color: #fff; font-size: 13px;
text-shadow: 0 1px 2px #346704; }' +
- '#gnome-fog-ruler .fog-ruler { background: #fff; overflow: hidden; -moz-border-radius: 4px;
-webkit-border-radius: 4px; padding: 2px; -moz-box-shadow: 0 1px 2px #346704; -webkit-box-shadow: 0 1px 2px
#346704; }' +
- '#gnome-fog-ruler .fog-ruler .fog-bar { display: block; float: left; font-size: 5px; height:
14px; line-height: 12px; }' +
- '#gnome-fog-ruler .green { background: #66bb14; }' +
- '#gnome-fog-ruler .orange { background: #f57900; }' +
- '#gnome-fog-ruler .blue { background: #729fcf; }' +
- '#gnome-fog-ruler .yellow { background: #fce94f; }' +
- '#gnome-fog-ruler .white { background: #fff; }' +
- '#gnome-fog-ruler .green { background: #8ae234; }' +
- '#gnome-fog-ruler .purple { background: #9a32cd; }' +
- '#gnome-fog-ruler .fog-description { margin-top: 8px; overflow: hidden; text-align: center;
}' +
- '#gnome-fog-ruler .fog-description .fog-item { margin-right: 12px; display: block; float:
left; overflow: hidden; text-align: left; }' +
- '#gnome-fog-ruler .fog-description .fog-item .fog-box { display: block; float: left; width:
12px; height: 12px; border: 1px solid #fff; margin: 0 6px 6px 0; -moz-border-radius: 3px;
-webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 2px #346704; -webkit-box-shadow: 0 1px
2px #346704; }' +
- '#gnome-fog-ruler .fog-description .fog-item .fog-details { font-style: italic; display:
block; margin-left: 20px; }' +
- '#gnome-fog-ruler .fog-donate { float: right; margin-top: 8px; }' +
- '#gnome-fog-ruler .fog-donate a { display: block; padding: 6px 8px; background: #fff; color:
#333; font-weight: bold; text-decoration: none; font-size: 14px; -moz-box-shadow: 0 1px 2px #346704, inset 0
-3px 10px #ccc; -webkit-box-shadow: 0 1px 2px #346704, inset 0 -3px 10px #ccc; -moz-border-radius: 4px;
-webkit-border-radius: 4px;}' +
- '#gnome-fog-ruler .fog-donate a:hover { color: #204a87; text-decoration: underline; }' +
+ '#donation-banner { background: #59b006; background-image: linear-gradient(to bottom, #59b006
0%, #509E06 100%); color: #fff; padding: 0 10px; font-size: 12px; }' +
+ '#donation-banner a { color: #fff; }' +
+ '#donation-banner p { display: inline-block; }' +
+ '#donation-banner img { margin-right: 5px; width: 24px; height: 24px; }' +
+ '#donation-banner .donation-ruler { background: white; width: 210px; display: inline-block;
padding: 2px; margin: 0 10px; }' +
+ '#donation-banner .donation-percentage { background: rgb(245, 121, 0);}' +
+ '#donation-banner .ninesix { margin: auto; width: 960px; }' +
+ '#donation-banner .donation-button { border: 1px solid #555753; background-image:
linear-gradient(to bottom, #73d216 0%, #4e9a06 100%); padding: 5px 10px; border-radius: 5px; text-decoration:
none; color: #fff !important; font-weight: bold; }' +
'</style>' )
-document.write( '<div id="gnome-fog-ruler">' +
- '<div class="fog-center">' +
- '<div class="fog-left"><img src="https://static.gnome.org/friends/ruler/lock.png"; /></div>' +
- '<div class="fog-intro">' +
- '<h4>Thank you, Friends of GNOME!</h4>' +
- '<p>Thank you all <a href="https://www.gnome.org/friends/previous-donors/";>generous
donors</a> for helping us reach our security and privacy ' +
- 'campaign goal of $20.000. You can, of course, still continue ' +
- 'to <a href="https://www.gnome.org/friends/";>donate and support</a> our goal of
making GNOME safer than ever.' +
- '</p>' +
- '</div><div class="fog-data">' +
- '<div class="fog-ruler">' +
- '<span style="width: 100.00%;" class="fog-bar orange"> </span>' +
- '</div>' +
- '<div class="fog-donate">' +
- '<a href="https://www.gnome.org/friends/";>Donate now!</a>' +
- '</div>' +
- '<div class="fog-description">' +
- '<div class="fog-item">' +
- '<span class="fog-box orange"> </span>' +
- '<strong>Friends of GNOME donations</strong>' +
- '<span class="fog-details">$20000. $0 to go!</span>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '<div style="clear: both;"></div>' +
- '</div>' +
- '</div>' )
+document.write( '<div id="donation-banner">' +
+ '<div class="ninesix">' +
+ '<img src="lock.png">' +
+ '<p>Donate now to help make GNOME <a href="http://www.gnome.org/friends";
style="margin-right: 20px;">safer than ever!</a> $20000 raised so far. $0 to go!</p>' +
+ '<div class="donation-ruler"><div style="width: 100.00%;"
class="donation-percentage"> </div></div>' +
+ '<a href="http://www.gnome.org/friends/"; class="donation-button">Donate now!</a>' +
+ '</div>' +
+ '</div>' +
+
+ '<div style="clear: both;"></div>')
diff --git a/friends/ruler/ruler-privacy.js.template b/friends/ruler/ruler-privacy.js.template
index 57e04cc..2de190a 100644
--- a/friends/ruler/ruler-privacy.js.template
+++ b/friends/ruler/ruler-privacy.js.template
@@ -1,53 +1,21 @@
document.write( '<style type="text/css">' +
- '#gnome-fog-ruler { background: #237100; padding: 16px 0px 16px 0px; color: #fff;
font-family: "Cantarell", "Lucida Grande", "DejaVu Sans", Verdana, sans-serif; font-size: 12px; z-index: 200;
width: 100%; position: relative; }' +
- '#gnome-fog-ruler * { margin: 0; padding: 0; }' +
- '#gnome-fog-ruler .fog-center { width: 960px; margin: 0 auto; text-align: left; }' +
- '#gnome-fog-ruler a { color: #fff; }' +
- '#gnome-fog-ruler .fog-left { width: 64px; float: left; margin-right: 10px; }' +
- '#gnome-fog-ruler .fog-intro { width: 500px; float: left; margin-right: 25px; }' +
- '#gnome-fog-ruler .fog-intro h4 { margin-bottom: 6px; color: #fff; font-size: 13px;
text-shadow: 0 1px 2px #346704; }' +
- '#gnome-fog-ruler .fog-ruler { background: #fff; overflow: hidden; -moz-border-radius: 4px;
-webkit-border-radius: 4px; padding: 2px; -moz-box-shadow: 0 1px 2px #346704; -webkit-box-shadow: 0 1px 2px
#346704; }' +
- '#gnome-fog-ruler .fog-ruler .fog-bar { display: block; float: left; font-size: 5px; height:
14px; line-height: 12px; }' +
- '#gnome-fog-ruler .green { background: #66bb14; }' +
- '#gnome-fog-ruler .orange { background: #f57900; }' +
- '#gnome-fog-ruler .blue { background: #729fcf; }' +
- '#gnome-fog-ruler .yellow { background: #fce94f; }' +
- '#gnome-fog-ruler .white { background: #fff; }' +
- '#gnome-fog-ruler .green { background: #8ae234; }' +
- '#gnome-fog-ruler .purple { background: #9a32cd; }' +
- '#gnome-fog-ruler .fog-description { margin-top: 8px; overflow: hidden; text-align: center;
}' +
- '#gnome-fog-ruler .fog-description .fog-item { margin-right: 12px; display: block; float:
left; overflow: hidden; text-align: left; }' +
- '#gnome-fog-ruler .fog-description .fog-item .fog-box { display: block; float: left; width:
12px; height: 12px; border: 1px solid #fff; margin: 0 6px 6px 0; -moz-border-radius: 3px;
-webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 0 1px 2px #346704; -webkit-box-shadow: 0 1px
2px #346704; }' +
- '#gnome-fog-ruler .fog-description .fog-item .fog-details { font-style: italic; display:
block; margin-left: 20px; }' +
- '#gnome-fog-ruler .fog-donate { float: right; margin-top: 8px; }' +
- '#gnome-fog-ruler .fog-donate a { display: block; padding: 6px 8px; background: #fff; color:
#333; font-weight: bold; text-decoration: none; font-size: 14px; -moz-box-shadow: 0 1px 2px #346704, inset 0
-3px 10px #ccc; -webkit-box-shadow: 0 1px 2px #346704, inset 0 -3px 10px #ccc; -moz-border-radius: 4px;
-webkit-border-radius: 4px;}' +
- '#gnome-fog-ruler .fog-donate a:hover { color: #204a87; text-decoration: underline; }' +
+ '#donation-banner { background: #59b006; background-image: linear-gradient(to bottom, #59b006
0%, #509E06 100%); color: #fff; padding: 0 10px; font-size: 12px; }' +
+ '#donation-banner a { color: #fff; }' +
+ '#donation-banner p { display: inline-block; }' +
+ '#donation-banner img { margin-right: 5px; width: 24px; height: 24px; }' +
+ '#donation-banner .donation-ruler { background: white; width: 210px; display: inline-block;
padding: 2px; margin: 0 10px; }' +
+ '#donation-banner .donation-percentage { background: rgb(245, 121, 0);}' +
+ '#donation-banner .ninesix { margin: auto; width: 960px; }' +
+ '#donation-banner .donation-button { border: 1px solid #555753; background-image:
linear-gradient(to bottom, #73d216 0%, #4e9a06 100%); padding: 5px 10px; border-radius: 5px; text-decoration:
none; color: #fff !important; font-weight: bold; }' +
'</style>' )
-document.write( '<div id="gnome-fog-ruler">' +
- '<div class="fog-center">' +
- '<div class="fog-left"><img src="https://static.gnome.org/friends/ruler/lock.png"; /></div>' +
- '<div class="fog-intro">' +
- '<h4>Thank you, Friends of GNOME!</h4>' +
- '<p>Thank you all <a href="https://www.gnome.org/friends/previous-donors/";>generous
donors</a> for helping us reach our security and privacy ' +
- 'campaign goal of $20.000. You can, of course, still continue ' +
- 'to <a href="https://www.gnome.org/friends/";>donate and support</a> our goal of
making GNOME safer than ever.' +
- '</p>' +
- '</div><div class="fog-data">' +
- '<div class="fog-ruler">' +
- '<span style="width: {{{FOG_PERCENT}}}%;" class="fog-bar
orange"> </span>' +
- '</div>' +
- '<div class="fog-donate">' +
- '<a href="https://www.gnome.org/friends/";>Donate now!</a>' +
- '</div>' +
- '<div class="fog-description">' +
- '<div class="fog-item">' +
- '<span class="fog-box orange"> </span>' +
- '<strong>Friends of GNOME donations</strong>' +
- '<span class="fog-details">${{{FOG_AMOUNT}}}. ${{{FOG_REMAIN}}} to
go!</span>' +
- '</div>' +
- '</div>' +
- '</div>' +
- '<div style="clear: both;"></div>' +
- '</div>' +
- '</div>' )
+document.write( '<div id="donation-banner">' +
+ '<div class="ninesix">' +
+ '<img src="lock.png">' +
+ '<p>Donate now to help make GNOME <a href="http://www.gnome.org/friends";
style="margin-right: 20px;">safer than ever!</a> ${{{FOG_AMOUNT}}} raised so far. ${{{FOG_REMAIN}}} to
go!</p>' +
+ '<div class="donation-ruler"><div style="width: {{{FOG_PERCENT}}}%;"
class="donation-percentage"> </div></div>' +
+ '<a href="http://www.gnome.org/friends/"; class="donation-button">Donate now!</a>' +
+ '</div>' +
+ '</div>' +
+
+ '<div style="clear: both;"></div>')
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
![https://static.gnome.org/friends/ruler/lock.png"](https://static.gnome.org/friends/ruler/lock.png"){kind=link}