Ejegg has uploaded a new change for review.
https://gerrit.wikimedia.org/r/320941
Change subject: WIP Nirzar's mobile css fixes
......................................................................
WIP Nirzar's mobile css fixes
Bug: T149249
Change-Id: Id6d8cbed9fb771daeabab28c8d9fd59fbd21314f
---
M globalcollect_gateway/forms/css/iframe.css
M modules/css/gateway.css
2 files changed, 152 insertions(+), 85 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/DonationInterface
refs/changes/41/320941/1
diff --git a/globalcollect_gateway/forms/css/iframe.css
b/globalcollect_gateway/forms/css/iframe.css
index 71444a2..2c8e745 100644
--- a/globalcollect_gateway/forms/css/iframe.css
+++ b/globalcollect_gateway/forms/css/iframe.css
@@ -99,3 +99,56 @@
border-radius: 4px;
padding: .6em !important;
}
+
+/* extra styles only for mobile */
+@media only screen and (max-width : 400px) {
+
+ #tableMissingFields {
+ width: 100%;
+ }
+ table label {
+ font-size: 13px;
+ color: #666;
+
+ }
+ table.ORB_TABLE_FIELDS td {
+ padding: 10px 0px !important;
+ }
+ select {
+ font-size: 16px;
+ margin-top: 10px;
+ margin-right: 10px;
+ }
+ input[type="text"],
+ input[type="number"]
+ {
+ box-sizing: border-box;
+ margin-top: 10px;
+ font-size: 16px !important;
+ font-weight: bold !important;
+ width: 100%;
+ padding: 14px !important;
+ margin-bottom: 10px !important;
+ background: #fff !important;
+ box-shadow: inset 0 0 0 0.1em #fff !important;
+ border-radius: 2px !important;
+ -webkit-appearance:none;
+ border:1px solid #ccc !important;
+ }
+ input[type="text"]:hover,
+ input[type="number"]:hover
+ {
+ background: #fff;
+ color: #666;
+ border:1px solid #999 !important;
+
+ }
+ input[type="text"]:focus,
+ input[type="number"]:focus
+ {
+
+ color: #333;
+ border:1px solid #36c !important;
+
+ }
+}
diff --git a/modules/css/gateway.css b/modules/css/gateway.css
index 2f19d91..ce8ba2b 100644
--- a/modules/css/gateway.css
+++ b/modules/css/gateway.css
@@ -240,108 +240,122 @@
}
/* Respond to small viewport */
-@media screen and (max-width: 981px) {
- /* Overall layout */
- div#content {
- margin: 0;
- padding: 1em;
+@media screen and (max-width: 980px) {
+ body {
+ background-color: #f5f5f5;
+ box-sizing: border-box;
}
- #mw-navigation {
- display: none;
+
+ #payment-table-donor select {
+ font-size: 16px !important;
+ padding: 10px !important;
+ background: #fff !important;
+ border: 1px solid #ccc !important;
+ box-shadow: none !important;
+ border-radius: 2px !important;
+ color: #666 !important;
+ margin-bottom: 10px !important;
}
- #appeal {
- display: none;
+ select#state:hover {
+ background: #fff;
+ color: #222 !important;
}
- #donate {
+
+ td#donate form input[type="text"],
+ td#donate form input[type="email"]
+ {
display: block;
+ font-size: 16px;
+ padding: 14px !important;
+ margin-bottom: 10px !important;
+ background: #fff !important;
+ box-shadow: inset 0 0 0 0.1em #fff !important;
+ border-radius: 2px !important;
+ -webkit-appearance:none;
+ border:1px solid #ccc !important;
}
- div#greenBackground {
- padding: 1em;
- width: inherit;
+ td#donate form input[type="text"]:hover,
+ td#donate form input[type="email"]:hover
+ {
+ background: #fff;
+ color: #666;
+ border:1px solid #999 !important;
+
+ }
+ td#donate form input[type="text"]:focus,
+ td#donate form input[type="email"]:focus,
+ td#donate form select:focus{
+ background: #fff;
+ color: #666;
+ border:1px solid #36c !important;
+
+ }
+
+ #greenBackground:before {
+ display: none;
}
- table#payment-table-donor {
- width: 100%;
+ body #mw-content-text #donate #greenBackground {
+ background: transparent !important;
+ padding: 0px !important;
+ width: 100% !important;
+ }
+ body #donate {
+ padding: 0 !important;
+ margin: 0 auto !important;
+ min-width: 200px !important;
+ max-width: 400px !important;
+ }
+
+ body #mw-page-base {
+ background: transparent !important;
}
- /* Form - Amount/Payment Method */
- #radiobuttons-table-header,
- td.radiobuttons-cell,
- .frequency-options,
- .payment-method-button {
- font-size: 2em;
+ .amount_header {
+ text-transform: capitalize;
}
- .radiobuttons-cell {
- padding: 0.5em;
+ h3.cc_header {
+ text-transform: capitalize;
}
- input.payment-method-button {
- padding: 1em;
- }
-
- /* Form - Contact/Donation Info */
- table#payment-table-donor td {
- padding: 0;
- }
- td#donate form select,
- td#donate form input {
- display: block;
- float: left;
- clear: both;
- font-size: 1.6em;
- width: 100%;
- margin: 5px 0;
- padding: 10px 3%;
- }
- td#donate form input.hidden {
+ h3.cc_header img {
display: none;
}
- .options-h li {
- margin-right: 1em;
+ #cards li {
+ position: relative;
+ border:1px solid transparent;
+ background: #fff !important;
+ margin-right: 2.5% !important;
+ padding: 0px !important;
+ width:23% !important;
+ height: 82px;
+ font-size: 13px !important;
+ border: 1px solid #ccc;
+ }
+ #cards li:last-child {
+ margin-right: 0px !important;
+ }
+ #cards li input.cardradio {
+ padding: 10px !important;
+ margin: 10px !important;
+ display: block;
+ width: 100% !important;
+ font-size: 13px !important;
+ box-sizing: border-box !important;
+ }
+ #cards li label {
+ margin: 0 !important;
+ }
+ #cards li:hover {
+ background: #EAF3FF !important;
+ border: 1px solid #36c;
}
- p#informationsharing, ul#moreinfolinks {
- font-size: 1em;
- line-height: 1.35em;
- width: inherit;
- padding: 1em;
+ p#informationsharing {
+ padding: 0px !important;
+ font-size: 12px;
+ line-height: 20px;
}
-
- #cards label {
- display: inline-block;
- width: 100%;
- float: left;
- }
-
- ul#cards li.has_sub_text {
- padding-bottom: 0.6em;
- }
-
- ul#cards li.has_sub_text input {
- margin-bottom: 0.3em !important;
- }
-
- #cards img {
- height: 30px;
- margin: 10px auto;
- }
-
- /* -- iDEAL -- */
- #billing-content .name-fields span {
- margin: 0;
- width: 100%;
- }
- #billing-content select,
- #billing-content input.txt,
- #billing-content input.btn {
- font-size: 1.2em;
- margin: 5px 0 !important;
- padding: 10px;
- }
- #donate, #donate-content {
- width: inherit;
- }
- /* -- end iDEAL -- */
}
--
To view, visit https://gerrit.wikimedia.org/r/320941
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Id6d8cbed9fb771daeabab28c8d9fd59fbd21314f
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/DonationInterface
Gerrit-Branch: master
Gerrit-Owner: Ejegg <eeggles...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
