diff --git a/resources/less/metager/pages/donation.less b/resources/less/metager/pages/donation.less index 3f0fd6ee9bf5396268c3ba071e21238bc066ddc1..804c754a71562211a1390001b5370ac32341100c 100644 --- a/resources/less/metager/pages/donation.less +++ b/resources/less/metager/pages/donation.less @@ -53,19 +53,27 @@ .amount-radio { display:none; } - - .frequency-label { - display: inline-block; - vertical-align: middle; - margin-top: 5px; - height:45px; - font-weight: normal; - text-align: center; - line-height: 40px; - border: 2px solid #a6a6a6; - width: 150px; - border-radius: 6px; - cursor: pointer; + #frequency { + display: flex; + flex-wrap:wrap; + gap: 4px; + .frequency-label { + flex-grow: 1; + display: inline-block; + vertical-align: middle; + height:45px; + margin-bottom: 0; + font-weight: normal; + text-align: center; + line-height: 40px; + border: 2px solid #a6a6a6; + width: 150px; + border-radius: 6px; + cursor: pointer; + } + input:checked + .frequency-label { + border: 2px solid #f47216; + } } #payment-methods { display: flex; @@ -136,10 +144,6 @@ line-height: 21px; } - input[type=radio]:checked + label { - border: 2px solid #f47216; - } - #donate-button { height: 45px; diff --git a/resources/views/spende/spende.blade.php b/resources/views/spende/spende.blade.php index 5f89db6e72e9b8b73fa4167818d923d744379737..6a208393a195aa461726e1f7a7b9cb89a58755fb 100644 --- a/resources/views/spende/spende.blade.php +++ b/resources/views/spende/spende.blade.php @@ -92,19 +92,13 @@ </div> <h3>{!! trans('spende.headline.4') !!}</h3> - - <input type="radio" class="frequency-radio" name="frequency" id="once" value="once" required="required" checked="checked"><label class="frequency-label" for="once">{!! trans('spende.frequency.1') !!}</label> <br> - - <input type="radio" class="frequency-radio" name="frequency" id="monthly" value="monthly" required="required"><label class="frequency-label" for="monthly">{!! trans('spende.frequency.2') !!}</label> - - - <input type="radio" class="frequency-radio" name="frequency" id="quarterly" value="quarterly" required="required"><label class="frequency-label" for="quarterly">{!! trans('spende.frequency.3') !!}</label> <br> - - <input type="radio" class="frequency-radio" name="frequency" id="six-monthly" value="six-monthly" required="required"><label class="frequency-label" for="six-monthly">{!! trans('spende.frequency.4') !!}</label> - - <input type="radio" class="frequency-radio" name="frequency" id="annual" value="annual" required="required"><label class="frequency-label" for="annual">{!! trans('spende.frequency.5') !!}</label> <br> - - <br> + <div id="frequency"> + <input type="radio" class="frequency-radio" name="frequency" id="once" value="once" required="required" @if(empty($data) || $data["frequency"] === "once")checked="checked"@endif><label class="frequency-label" for="once"><nobr>{!! trans('spende.frequency.1') !!}</nobr></label> + <input type="radio" class="frequency-radio" name="frequency" id="monthly" value="monthly" required="required" @if(!empty($data) && $data["frequency"] === "monthly")checked="checked"@endif><label class="frequency-label" for="monthly"><nobr>{!! trans('spende.frequency.2') !!}</nobr></label> + <input type="radio" class="frequency-radio" name="frequency" id="quarterly" value="quarterly" required="required" @if(!empty($data) && $data["frequency"] === "quarterly")checked="checked"@endif><label class="frequency-label" for="quarterly"><nobr>{!! trans('spende.frequency.3') !!}</nobr></label> + <input type="radio" class="frequency-radio" name="frequency" id="six-monthly" value="six-monthly" required="required" @if(!empty($data) && $data["frequency"] === "six-monthly")checked="checked"@endif><label class="frequency-label" for="six-monthly"><nobr>{!! trans('spende.frequency.4') !!}</nobr></label> + <input type="radio" class="frequency-radio" name="frequency" id="annual" value="annual" required="required" @if(!empty($data) && $data["frequency"] === "annual")checked="checked"@endif><label class="frequency-label" for="annual"><nobr>{!! trans('spende.frequency.5') !!}</nobr></label> + </div> <p>{!! trans('spende.lastschrift.2') !!}</p> <input type="hidden" name="dt" value="{{ md5(date('Y') . date('m') . date('d')) }}"> <div class="form-group donation-form-group">