Permalink
Browse files

integrate the donation popup look

  • Loading branch information...
kerphi committed Nov 30, 2012
1 parent 9c6ca2f commit de3068b531f522aa4aa8e630f267c846cac55650
Showing with 479 additions and 12 deletions.
  1. +4 −2 client/jquery.phpfreechat.auth.js
  2. +6 −4 client/jquery.phpfreechat.core.js
  3. BIN client/themes/carbon/img/bt-donate-popup.png
  4. BIN client/themes/carbon/img/bt-not-now.png
  5. BIN client/themes/carbon/img/illus-donate.png
  6. +81 −1 client/themes/carbon/jquery.phpfreechat.full.less
  7. +25 −0 client/themes/carbon/jquery.phpfreechat.responsive.less
  8. +4 −1 client/themes/carbon/jquery.phpfreechat.theme.variables.less
  9. +10 −0 client/themes/carbon/jquery.phpfreechat.variables.less
  10. BIN client/themes/default/img/bt-donate-popup.png
  11. BIN client/themes/default/img/bt-not-now.png
  12. BIN client/themes/default/img/illus-donate.png
  13. +81 −1 client/themes/default/jquery.phpfreechat.full.less
  14. +25 −0 client/themes/default/jquery.phpfreechat.responsive.less
  15. +10 −0 client/themes/default/jquery.phpfreechat.variables.less
  16. BIN client/themes/gamer/img/bt-donate-popup.png
  17. BIN client/themes/gamer/img/bt-not-now.png
  18. BIN client/themes/gamer/img/illus-donate.png
  19. +81 −1 client/themes/gamer/jquery.phpfreechat.full.less
  20. +25 −0 client/themes/gamer/jquery.phpfreechat.responsive.less
  21. +11 −1 client/themes/gamer/jquery.phpfreechat.variables.less
  22. BIN client/themes/phpfreechat/img/bt-donate-popup.png
  23. BIN client/themes/phpfreechat/img/bt-not-now.png
  24. BIN client/themes/phpfreechat/img/illus-donate.png
  25. +81 −1 client/themes/phpfreechat/jquery.phpfreechat.full.less
  26. +25 −0 client/themes/phpfreechat/jquery.phpfreechat.responsive.less
  27. +10 −0 client/themes/phpfreechat/jquery.phpfreechat.variables.less
@@ -56,11 +56,13 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
pfc.showAuthForm = function (msg) {
pfc.modalbox.open(
'<form>'
- + ' <input type="text" name="login" placeholder="Login"/><br/>'
+ + ' <div class="popup-login">'
+ + ' <input type="text" name="login" placeholder="Login"/><br/>'
//+ ' <input type="text" name="password" placeholder="Password"/><br/>'
//+ ' <input type="text" name="email" placeholder="Email"/><br/>'
- + ' <input type="submit" name="submit" value="Sign in" />'
+ + ' <input type="submit" name="submit" value="Sign in" />'
+ (msg ? '<p>' + msg + '</p>' : '')
+ + ' </div>'
+ '</form>'
).submit(function () {
var login = $(this).find('[name=login]').attr('value');
@@ -347,11 +347,13 @@ var phpFreeChat = (function (pfc, $, window, undefined) {
function buildAndShowDonationPopup() {
// html of the popup
var box = pfc.modalbox.open(
- '<form>'
+ '<form class="popup-donate">'
+ ' <p>phpFreeChat needs you. Please make a donation.</p>'
- + ' <label><input type="checkbox" name="skip-donate" /> skip next time</label>'
- + ' <input type="submit" name="cancel-donate" value="Cancel" />'
- + ' <input type="submit" name="ok-donate" value="Donate" />'
+ + ' <div clalss="bt-validate">'
+ + ' <input type="submit" name="cancel-donate" value="not now" />'
+ + ' <input type="submit" name="ok-donate" value="DONATE" />'
+ + ' </div>'
+ + ' <span><label><input type="checkbox" name="skip-donate" /> skip next time</label></span>'
+ '</form>'
);
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -749,9 +749,89 @@ div.pfc-content {
position: absolute;
background-color: #FFF;
z-index: 55;
- padding: 20px;
+ padding: 10px;
.rounded-corners(5px);
.box-shadow(@modalbox-shadow-top, @modalbox-shadow-left, @modalbox-shadow-size, @modalbox-shadow-color);
+ .popup-login {
+ text-align: right;
+ input[type="text"] {
+ border: 1px solid @modalbox-popup-login-input-login-border-color;
+ background-color: @modalbox-popup-login-input-login-bg-color;
+ color: @modalbox-popup-login-input-login-font-color;
+ padding: 2px 5px;
+ margin-bottom: 10px;
+ }
+ input[type="submit"] {
+ border: 1px solid @modalbox-popup-login-bt-signin-border-color;
+ .rounded-corners(@modalbox-popup-login-bt-signin-border-radius);
+ color: @modalbox-popup-login-bt-signin-font-color;
+ padding: 2px 10px;
+ background-color: @modalbox-popup-login-bt-signin-bg-color;
+ &:hover {
+ border: 1px solid @modalbox-popup-login-bt-signin-border-color-hover;
+ color: @modalbox-popup-login-bt-signin-font-color-hover;
+ background-color: @modalbox-popup-login-bt-signin-bg-color-hover;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ }
+ }
+ .popup-donate {
+ p {
+ position: relative;
+ top: 2px;
+ font-size: 14px;
+ line-height: 16px;
+ height: 139px;
+ width: 300px;
+ margin-bottom: 0;
+ padding-right: 66px;
+ background: url("img/illus-donate.png") right bottom no-repeat;
+ }
+ div {
+ input[name="cancel-donate"] {
+ position: relative;
+ top: -4px;
+ width: 114px;
+ height: 24px;
+ background: url("img/bt-not-now.png") top center no-repeat;
+ border: 0;
+ padding: 0 0 4px;
+ margin: 0 10px;
+ color: #9e9e9e;
+ font-size: 14px;
+ &:hover {
+ background-position: bottom center;
+ cursor: pointer;
+ color: #2593c5;
+ }
+ }
+ input[name="ok-donate"]{
+ width: 204px;
+ height:44px;
+ background: url("img/bt-donate-popup.png") top center no-repeat;
+ border: 0;
+ padding: 0 0 0 60px;
+ margin: 0 10px;
+ color: #fff;
+ font-size: 20px;
+ &:hover {
+ cursor: pointer;
+ background-position: bottom center;
+ }
+ }
+ }
+ span {
+ display: block;
+ margin-top: 5px;
+ label {
+ font-size: 10px;
+ position: relative;
+ top: -3px;
+ }
+ }
+ }
+
}
}
@@ -80,6 +80,31 @@ div.pfc-content {
display: none;
}
+ .pfc-modal-box{
+ .popup-donate {
+ p {
+ width: 140px !important;
+ }
+ div {
+ position: relative;
+ height: 70px;
+ input[name="cancel-donate"] {
+ display: block;
+ margin: 0 auto !important;
+ top: 50px !important;
+ }
+ input[name="ok-donate"] {
+ display: block;
+ margin: 0 auto !important;
+ position: absolute;
+ top: 0px;
+ }
+ }
+ span {
+ clear: both;
+ }
+ }
+ }
}
}
@@ -115,4 +115,7 @@
@compose-shadow-top: 0;
@compose-shadow-left: 3px;
@compose-shadow-size: 10px;
-@compose-shadow-color: #000;
+@compose-shadow-color: #000;
+
+/* MODALBOX */
+@modalbox-popup-login-bt-signin-border-radius: 0;
@@ -364,6 +364,16 @@
@modalbox-shadow-left: "";
@modalbox-shadow-size: "";
@modalbox-shadow-color: "";
+@modalbox-popup-login-input-login-border-color: @border-color;
+@modalbox-popup-login-input-login-bg-color: @users-bg-color;
+@modalbox-popup-login-input-login-font-color: @users-font-color;
+@modalbox-popup-login-bt-signin-border-color: @footer-donate-border-color;
+@modalbox-popup-login-bt-signin-bg-color: @footer-bg-color;
+@modalbox-popup-login-bt-signin-font-color: @footer-a-font-color;
+@modalbox-popup-login-bt-signin-border-radius: 5px;
+@modalbox-popup-login-bt-signin-border-color-hover: @footer-donate-border-color;
+@modalbox-popup-login-bt-signin-bg-color-hover: @footer-donate-bg-color-hover;
+@modalbox-popup-login-bt-signin-font-color-hover: @footer-a-font-color-hover;
@import "jquery.phpfreechat.theme.variables.less";
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -749,9 +749,89 @@ div.pfc-content {
position: absolute;
background-color: #FFF;
z-index: 55;
- padding: 20px;
+ padding: 10px;
.rounded-corners(5px);
.box-shadow(@modalbox-shadow-top, @modalbox-shadow-left, @modalbox-shadow-size, @modalbox-shadow-color);
+ .popup-login {
+ text-align: right;
+ input[type="text"] {
+ border: 1px solid @modalbox-popup-login-input-login-border-color;
+ background-color: @modalbox-popup-login-input-login-bg-color;
+ color: @modalbox-popup-login-input-login-font-color;
+ padding: 2px 5px;
+ margin-bottom: 10px;
+ }
+ input[type="submit"] {
+ border: 1px solid @modalbox-popup-login-bt-signin-border-color;
+ .rounded-corners(@modalbox-popup-login-bt-signin-border-radius);
+ color: @modalbox-popup-login-bt-signin-font-color;
+ padding: 2px 10px;
+ background-color: @modalbox-popup-login-bt-signin-bg-color;
+ &:hover {
+ border: 1px solid @modalbox-popup-login-bt-signin-border-color-hover;
+ color: @modalbox-popup-login-bt-signin-font-color-hover;
+ background-color: @modalbox-popup-login-bt-signin-bg-color-hover;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ }
+ }
+ .popup-donate {
+ p {
+ position: relative;
+ top: 2px;
+ font-size: 14px;
+ line-height: 16px;
+ height: 139px;
+ width: 300px;
+ margin-bottom: 0;
+ padding-right: 66px;
+ background: url("img/illus-donate.png") right bottom no-repeat;
+ }
+ div {
+ input[name="cancel-donate"] {
+ position: relative;
+ top: -4px;
+ width: 114px;
+ height: 24px;
+ background: url("img/bt-not-now.png") top center no-repeat;
+ border: 0;
+ padding: 0 0 4px;
+ margin: 0 10px;
+ color: #9e9e9e;
+ font-size: 14px;
+ &:hover {
+ background-position: bottom center;
+ cursor: pointer;
+ color: #2593c5;
+ }
+ }
+ input[name="ok-donate"]{
+ width: 204px;
+ height:44px;
+ background: url("img/bt-donate-popup.png") top center no-repeat;
+ border: 0;
+ padding: 0 0 0 60px;
+ margin: 0 10px;
+ color: #fff;
+ font-size: 20px;
+ &:hover {
+ cursor: pointer;
+ background-position: bottom center;
+ }
+ }
+ }
+ span {
+ display: block;
+ margin-top: 5px;
+ label {
+ font-size: 10px;
+ position: relative;
+ top: -3px;
+ }
+ }
+ }
+
}
}
@@ -80,6 +80,31 @@ div.pfc-content {
display: none;
}
+ .pfc-modal-box{
+ .popup-donate {
+ p {
+ width: 140px !important;
+ }
+ div {
+ position: relative;
+ height: 70px;
+ input[name="cancel-donate"] {
+ display: block;
+ margin: 0 auto !important;
+ top: 50px !important;
+ }
+ input[name="ok-donate"] {
+ display: block;
+ margin: 0 auto !important;
+ position: absolute;
+ top: 0px;
+ }
+ }
+ span {
+ clear: both;
+ }
+ }
+ }
}
}
@@ -364,6 +364,16 @@
@modalbox-shadow-left: "";
@modalbox-shadow-size: "";
@modalbox-shadow-color: "";
+@modalbox-popup-login-input-login-border-color: @border-color;
+@modalbox-popup-login-input-login-bg-color: @users-bg-color;
+@modalbox-popup-login-input-login-font-color: @users-font-color;
+@modalbox-popup-login-bt-signin-border-color: @footer-donate-border-color;
+@modalbox-popup-login-bt-signin-bg-color: @footer-bg-color;
+@modalbox-popup-login-bt-signin-font-color: @footer-a-font-color;
+@modalbox-popup-login-bt-signin-border-radius: 5px;
+@modalbox-popup-login-bt-signin-border-color-hover: @footer-donate-border-color;
+@modalbox-popup-login-bt-signin-bg-color-hover: @footer-donate-bg-color-hover;
+@modalbox-popup-login-bt-signin-font-color-hover: @footer-a-font-color-hover;
@import "jquery.phpfreechat.theme.variables.less";
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.

0 comments on commit de3068b

Please sign in to comment.