Donations by Siropu [Paid] 1.4.1

[Tom McIntyre]

My semi custom donate button/progress bar widget is now working fine for larger screens, but the widget is not responsive and with the rather wide button I have in place, it looks strange on a mobile device.
Is there an easy fix that would let me center the button one one line and make the progress bar full width on the next line.
I think I might be able to figure out how to do this in Siropo_donations.less, but I would appreciate any help I can get.

 

[Siropu]

Is there an easy fix that would let me center the button one one line and make the progress bar full width on the next line.

Try this code:

<xf:css src="siropu_donations.less">
    #siropuDonateWidget
    {
        display: flex;
    }
    @media (max-width: {{ property('responsiveNarrow') }})
    {
        #siropuDonateWidget
        {
            display: block;
        }
        .siropuDonations-donateButton
        {
            width: 100%;
        }
    }
</xf:css>

<xf:foreach loop="$goals" value="$goal">
    <xf:set var="$progressPercent" value="{$goal.getProgressPercent()}" />
    <div id="siropuDonateWidget">
        <xf:button href="{{ link('donations/donate', null, {'donation_goal_id': $goal.donation_goal_id}) }}" class="button--cta  siropuDonations-donateButton" style="padding: 5px;font-size: inherit;" overlay="true" fa="fas fa-donate">{{ phrase('siropu_donations_donate') }}</xf:button>
        <div class="siropuDonations-progressBar" style="flex: 1;">
            <div class="siropuDonations-progressBar--bar" style="width: {$progressPercent}%; "></div>
            <div class="siropuDonations-progressBar--progress" style="width: {$progressPercent}%;">{$progressPercent}%</div>
        </div>
    </div>
</xf:foreach>

 

[Tom McIntyre]

Do the two code sections go in siropu_donations.less and siropu_donations_widget_donate respectively?

 

[Siropu]

Replace the code you have now with the one above in siropu_donations_widget_donate

 

[Tom McIntyre]

That was what I had done, but there was no effect when I changed to a narrow screen setting on my laptop. It does work when I view the site on my iPhone. That seems strange, but not likely related to your code.

NAWCC is a custom style from PixelExit.

 

[Tom McIntyre]

I decided that the two bar design with the top bars as the button and the bottom the progress bard actually looked best and worked on both my worksations and mobile devices.

I also have old data from the Themehouse donation facility and was looking at the donations table in the database. I noticed that the field definitions are essentially the same and the userid's are accurate for my current system.

Is there a good reason not to just move that data to the donation table for your addon? That will give me another 1,138 donations and allow creation of a donations history table by year.

 

[Siropu]

I noticed that the field definitions are essentially the same and the userid's are accurate for my current system.

Please send me a DM with a screenshot of the table structure.

 

[Nathan LaChine]

Donation box not showing text, compared settings to other donation goals and cannot explain why text isn't showing. What am I missing?

 

[Siropu]

What am I missing?

Your goal has expired.

 

[Nathan LaChine]

Hahaha it's always the simplest of things thank you