diff --git a/resources/less/metager/pages/donation.less b/resources/less/metager/pages/donation.less index e28bd2e287ac45cd9f2b8a2244413f9a5f87c64d..79ab450e8a139dcdee0e8eca10784d656c984a46 100644 --- a/resources/less/metager/pages/donation.less +++ b/resources/less/metager/pages/donation.less @@ -9,16 +9,9 @@ } .section { .card-light; - margin: 8px 0; + margin: 0; } - .col-left .section{ - margin: 8px; - margin-left: 0; - @media(max-width: @screen-small){ - margin-right: 0; - } - } #direct-payment > p { margin: 0; } @@ -145,5 +138,27 @@ #amount-custom:checked + label{ line-height: 21px; } + + #content-container { + margin-top: 8px; + display: grid; + grid-template-columns: 1fr 300px; + grid-template-rows: auto auto 1fr; + grid-template-areas: "form ." "form ." "form ."; + gap: 8px 8px; + @media(max-width: 860px){ + grid-template-rows: 1fr auto; + grid-template-areas: "form form" ". ."; + } + @media(max-width: 740px){ + grid-template-columns: 1fr; + grid-template-rows: 1fr auto auto; + grid-template-areas: "form " "." "."; + } + + .form { + grid-area: form; + } + } } \ No newline at end of file diff --git a/resources/views/spende/spende.blade.php b/resources/views/spende/spende.blade.php index 7ac00e69c94caae4b01ad107477816a76531b38f..d5b6a42062cf976581afdf313540d07bd380513d 100644 --- a/resources/views/spende/spende.blade.php +++ b/resources/views/spende/spende.blade.php @@ -13,9 +13,9 @@ 'beitrittlink' => LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), '/beitritt') ])</p> </div> - <div class="two-col"> + <div id="content-container"> @if (app('request')->input('method') == "paypal") - <form class="col-left" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> + <form class="form" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top"> <div class="section"> <h3>{!! trans('spende.headline.5') !!}</h3> <div id="payment-methods"> @@ -42,7 +42,7 @@ </div> </form> @elseif ((app('request')->input('method') == "bank-transfer")) - <div class="section"> + <div class="section form"> <h3>{!! trans('spende.headline.5') !!}</h3> <div id="payment-methods"> <a class="payment-label" href="?method=debit">{!! trans('spende.head.lastschrift') !!}</a> @@ -60,7 +60,7 @@ </p> </div> @else - <form class="col-left" method="post"> + <form method="post" class="form"> <div class="section"> <h3>{!! trans('spende.headline.5') !!}</h3> <div id="payment-methods"> @@ -120,22 +120,20 @@ </div> </form> @endif - <div class="col-right"> - <div class="section"> - <p>{!! trans('spende.lastschrift.10') !!}</p> - </div> - <div class="section"> - <h3>{!! trans('spende.member.1') !!}</h3> - <p>{!! trans('spende.member.2') !!}</p> - <ul> - <li>{!! trans('spende.member.3') !!}</li> - <li>{!! trans('spende.member.4') !!}</li> - <li>{!! trans('spende.member.5') !!}</li> - <li>{!! trans('spende.member.6') !!}</li> - </ul> - <a class="btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/beitritt/") }}">{!! trans('spende.member.7') !!}</a> - </div> + <div class="section"> + <p>{!! trans('spende.lastschrift.10') !!}</p> </div> + <div class="section member"> + <h3>{!! trans('spende.member.1') !!}</h3> + <p>{!! trans('spende.member.2') !!}</p> + <ul> + <li>{!! trans('spende.member.3') !!}</li> + <li>{!! trans('spende.member.4') !!}</li> + <li>{!! trans('spende.member.5') !!}</li> + <li>{!! trans('spende.member.6') !!}</li> + </ul> + <a class="btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/beitritt/") }}">{!! trans('spende.member.7') !!}</a> + </div> </div> </div> @endsection