Files
@ cb5b5ec23fc2
Branch filter:
Location: website/www/conservancy/static/css/forms.css - annotation
cb5b5ec23fc2
1.8 KiB
text/css
supporter: Refactor amount-checking JavaScript.
* Separate out amount-parsing and reacting into separate events. This sets
the stage for other elements to react to the custom
'conservancy:newamount' event.
* Set up events in the context of each supporter form, with closures. This
lets us avoid weird CSS selector gymnastics in the event, and instead
drill down from the form to find the elements we need.
There are no functional changes in this code, barring bugs.
* Separate out amount-parsing and reacting into separate events. This sets
the stage for other elements to react to the custom
'conservancy:newamount' event.
* Set up events in the context of each supporter form, with closures. This
lets us avoid weird CSS selector gymnastics in the event, and instead
drill down from the form to find the elements we need.
There are no functional changes in this code, barring bugs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 8605b65783f9 8605b65783f9 8605b65783f9 8605b65783f9 b93cc61e8b33 b93cc61e8b33 b93cc61e8b33 9bfb5e10dec2 b93cc61e8b33 b93cc61e8b33 86e780340a2b b93cc61e8b33 b93cc61e8b33 194f95d0168c b93cc61e8b33 b93cc61e8b33 b93cc61e8b33 b93cc61e8b33 86e780340a2b b93cc61e8b33 b93cc61e8b33 b93cc61e8b33 b93cc61e8b33 9bfb5e10dec2 b93cc61e8b33 b93cc61e8b33 b93cc61e8b33 86e780340a2b 9bfb5e10dec2 b93cc61e8b33 b93cc61e8b33 86e780340a2b 86e780340a2b 5f9a4395f3d8 5f9a4395f3d8 5f9a4395f3d8 5f9a4395f3d8 5f9a4395f3d8 5f9a4395f3d8 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 9bfb5e10dec2 b90413809f26 b9b4695f97d7 b93cc61e8b33 b90413809f26 b90413809f26 b90413809f26 8bfe2e16f426 9897e3d9cead 9897e3d9cead 9897e3d9cead b93cc61e8b33 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 9897e3d9cead 1328b725b14f 8bfe2e16f426 9897e3d9cead 34648758b017 9897e3d9cead 9897e3d9cead 870d25d9e3e8 870d25d9e3e8 870d25d9e3e8 870d25d9e3e8 9897e3d9cead 9897e3d9cead 6e3468bc9852 6e3468bc9852 6e3468bc9852 6e3468bc9852 6e3468bc9852 6e3468bc9852 6e3468bc9852 6e3468bc9852 19ef9d196b0e af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 af5d12f7a1d6 | .supporter-type-selection .prolog > span:first-child {
font-weight: bold;
}
.supporter-form-input {
margin-bottom: .5em;
white-space: nowrap;
}
.supporter-form-input label {
display: inline-block;
font-weight: bold;
white-space: normal;
}
.supporter-form-input input[name=amount],
.supporter-form-input input[name=a3] {
width: 5em;
}
.supporter-form-input input[type=radio] {
margin-left: 1em;
margin-right: .2em;
}
.supporter-form-input input[type=radio]:first-of-type {
margin-left: 0;
}
.supporter-form-submit {
text-align: center;
}
.form-error, .supporter-form-input .input-group p {
margin-left: 1em;
font-size: 80%;
white-space: normal;
}
.form-error {
color: red;
}
input.invalid, textarea.invalid {
border: 2px solid red;
}
input.valid, textarea.valid {
border: 2px solid green;
}
.supporter-type-selector {
clear: both;
font-size: 125%;
text-align: center;
}
h1.appeal {
margin-top: -.75em;
}
img.appeal-left {
float: left;
padding-right: 1em;
margin: .25em;
min-width: 8%;
max-width: 30%;
height: auto;
}
img.appeal-right {
float: right;
padding-left: 1em;
margin: .25em;
min-width: 8%;
max-width: 30%;
width: auto;
}
img.appeal {
float: left;
padding-right: 1em;
min-width: 10%;
max-width: 85%;
width: auto;
}
img.appeal-header {
max-width: 100%;
width: auto;
margin-top: 0em;
}
img.appeal-footer {
max-width: 40%;
float: right;
width: 10%;
min-width: 1%;
height: auto;
}
img.appeal-match {
float: left;
height: auto;
border: 1px solid #fff;
width: 10%;
margin-top: .25em;
margin-bottom: .25em;
margin-right: 1em;
background: #eee;
}
p.appeal-match-text {
width: 100%;
border: 1px solid #fff;
background: #eee;
}
|