| ppenloglou | |
| Jul 17 2024, 9:34 PM |
| F56766889: single_column_layout.png | |
| Jul 29 2024, 2:12 PM |
As part of our upcoming Big English fundraiser, we'll be testing a new form layout on donate.wiki. It will be single column layout where the form is centered.
We would like to replicate this design on the payments.wiki side for a consistent donor experience. Is this possible?
Links to forms:
Thanks in advance!
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Add singleColumnForm variant | mediawiki/extensions/DonationInterface | master | +34 -0 |
Thanks @ppenloglou - let us know if you have any CSS for us, and what date you'd ideally like to start testing this variant!
Hey @AKanji-WMF! So for the CSS in the Single Column Layout, I'm basically overwriting existing styles found on the donate.wiki page. This is achieved by loading a particular "appeal" page via "&appeal=Single_Column_Form". You can see that page here.
I'm unsure that this would be a simple copy/paste situation though. I think the best next step would be for me to recreate this layout on payments.wiki and share the final CSS with you. Should be able to do it just via Inspector tools I think.
For reference, the Single Column Form HTML/CSS on donate.wiki:
<html>
<style>
.appeal-layout {
padding: 40px 40px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
}
.appeal-text {
line-height: 1.8;
}
.appeal-text p.headline {
line-height: 1.7;
font-size: 26px;
font-weight: bold;
}
.appeal-text p.paragraph {
font-size: 16px;
}
.quote-text {
margin: 0;
padding: 0 30px;
font-size: 26px;
line-height: 32px;
position: relative;
border: 0;
}
.quote-text::before,
.quote-text::after {
color: #B2B7F2;
font-size: 40px;
line-height: 26px;
font-family: "Times New Roman", serif;
font-weight: bold;
position: absolute;
}
.quote-text::before {
content: open-quote;
top: 0;
left: 0;
}
.quote-text::after {
content: close-quote;
bottom: 0;
right: 0;
}
.quote-attribution {
display: block;
margin-top: 1em;
text-align: right;
font-size: 18px;
font-style: normal;
}
.vector-body blockquote {
border-left: none;
padding: 0 30px ds;
}
@media (max-width: 1400px) {
.appeal-layout {
flex-wrap: wrap;
padding: 0 5px;
}
.quote-text {
font-size: 22px;
}
.quote-attribution {
font-size: 16px;
}
}
@media (min-width: 982px) {
#main-wrapper #form-wrapper {
max-width: 600px;
width:600px;
}
}
@media (max-width: 400px) {
#main-wrapper #form-wrapper {
width: auto;
}
}
#main-wrapper {
flex-direction: column;
align-items: center;
}
/* Override hiding on mobile
#appeal-wrapper {
display: block !important;
} */
</style>
<div class="appeal-layout">
<div class="appeal-text">
<blockquote class="quote-text">
<p>Imagine a world in which every single person on the planet has free access to the sum of all human knowledge.</p>
</blockquote>
<p><cite class="quote-attribution">— Jimmy Wales, Founder of Wikipedia</cite></p>
</div>
</div>
</html>Forgot to mention dates. According to our Big English Email 1 schedule, this would be tried out on July 30 for the first time. I understand that that's a very close turnaround and this variant might not be ready for Go time.
Nonetheless, I will try and get the CSS for payment.wiki as soon as possible for you.
I'm wondering how will this be implemented. Will submitting the form on donate.wiki redirect you to this variant? Perhaps via a new URL parameter on submit?
e.g.
https://payments.wikimedia.org/index.php?......&layout=single_column
Hey @AKanji-WMF! I have some CSS for the payments wiki page to turn into a single column on desktops (mobile styles are okay as is). Some considerations:
@media screen and (min-width: 982px){
div#bodyContent div#mw-content-text{
display: flex;
flex-direction: column;
align-items: center;
}
div#bodyContent div#appeal div{
margin: 0 !important;
}
div#bodyContent div#donate p#informationsharing{
max-width:none;
padding: 15px;
text-align:center;
}
div#bodyContent div#donate ul#moreinfolinks{
text-align:center;
}
}Preview Screenshot:
Change #1058725 had a related patch set uploaded (by Cstone; author: Cstone):
[mediawiki/extensions/DonationInterface@master] Add singleColumnForm variant
Change #1058725 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Add singleColumnForm variant
This has been deployed you can see it with adding &variant=singleColumnForm to the url. Variants can be cache sticky so open it in an incogneito window if you are seeing it/not seeing it
Absolutely brilliant @Cstone, thank you so much! I'll check on donate.wiki side how to push the &variant parameter on submit for this test.
Very cool! @ppenloglou you can add pym_variant=singleColumnForm to the donatewiki link to force a variant on paymentswiki