snipette/snipette-crowdfunding-site
snipette/snipette-crowdfunding-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Reduce size of pledge header on mobile

Browse source 
It's anyway a bit annoying, so let's make it less so...
This commit is contained in:
Hippo 2022-01-11 14:46:37 +05:30
parent 577e10baaa
commit 08580c1817
1 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/index.htm.twig
View file

@ -48,8 +48,10 @@
<div class="h-0 md:h-auto bg-orange-600 w-full p-0 md:p-3 md:rounded-t-md"> <div class="h-0 md:h-auto bg-orange-600 w-full p-0 md:p-3 md:rounded-t-md">
<h4 class="font-sans text-center text-white">Make Analog affordable</h4> <h4 class="font-sans text-center text-white">Make Analog affordable</h4>
</div> </div>
<div class="p-5"> <div class="flex flex-row md:flex-col items-stretch">
<div class="flex justify-between mb-1"> <div class="w-full">
<div class="p-2 md:p-5">
<div class="flex justify-between md:mb-1">
<span class="text-base font-medium text-orange-700">{{progress_rupees}} rupees</span> <span class="text-base font-medium text-orange-700">{{progress_rupees}} rupees</span>
<span class="text-sm font-medium text-orange-700">Goal: ₹{{goal_rupees}}</span> <span class="text-sm font-medium text-orange-700">Goal: ₹{{goal_rupees}}</span>
</div> </div>
@ -58,15 +60,22 @@
</div> </div>
<div class="flex justify-between mb-1"> <div class="flex justify-between md:mb-1">
<span class="text-base font-medium text-orange-700">{{progress_people}} people</span> <span class="text-base font-medium text-orange-700">{{progress_people}} people</span>
<span class="text-sm font-medium text-orange-700">Goal: {{goal_people}}</span> <span class="text-sm font-medium text-orange-700">Goal: {{goal_people}}</span>
</div> </div>
<div class="w-full bg-gray-200 rounded-full h-2.5"> <div class="w-full bg-gray-200 rounded-full h-2.5">
<div class="bg-orange-600 h-2.5 rounded-full" {{percent_people|raw}}></div> <div class="bg-orange-600 h-2.5 rounded-full" {{percent_people|raw}}></div>
</div> </div>
</div>
</div>
<a href="#pledge-form" class="font-sans text-base mt-4 p-2 border-2 border-solid border-orange-700 text-orange-700 hover:border-orange-500 hover:text-orange-500 uppercase rounded w-full inline-block text-center">Add your Pledge</a> <div class="w-16 md:w-full md:px-5 md:pb-5">
<a href="#pledge-form" class="h-full font-sans no-underline text-base p-2 border-2 border-solid border-orange-700 bg-orange-700 md:bg-white text-white md:text-orange-700 hover:border-orange-500 hover:bg-orange-500 md:hover:bg-white md:hover:text-orange-500 uppercase rounded w-full inline-block text-center flex justify-center items-center">
<span class="hidden md:inline">Add your Pledge</span>
<span class="inline md:hidden">Pledge Now</span>
</a>
</div>
</div> </div>
</div> </div>
{% if recent_pledges %} {% if recent_pledges %}