Skip to content

Commit

Permalink
Tidies up grant-details template (#9102)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gdixon
gdixon authored Jun 15, 2021
1 parent 35979d4 commit 1e080eb
Showing 1 changed file with 77 additions and 72 deletions.
149 changes: 77 additions & 72 deletions app/grants/templates/grants/detail/template-grant-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,87 +301,92 @@ <h3>About</h3>
</div>

<!-- CLR details and Add-to/remove-from cart -->
<div class="grant-checkout rounded shadow-sm bg-white px-3 pt-3 pb-2 border">
<div v-if="grant.clr_prediction_curve?.length" style="max-width: 250px;" :class="`mx-auto mb-3 mt-2 position-relative${grant.clr_round_num && grant.is_clr_eligible ? '' : ' clr-disabled'}`">
<svg width="145" height="77" viewBox="0 0 145 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.15491 76.0846C1.15491 22.2514 19.2304 -0.706763 108.423 1.27248" stroke="#C4C1CF" stroke-width="2"/>
<line x1="19" y1="21.5" x2="145" y2="21.5" stroke="#11BC92" stroke-dasharray="5 5"/>
<line x1="2" y1="74.5" x2="145" y2="74.5" stroke="#11BC92" stroke-dasharray="5 5"/>
</svg>
<div class="d-inline-flex flex-column-reverse mt-n4 position-absolute" style="right: 0px;">
<div v-for="(prediction, index) in grant.clr_prediction_curve" v-if="grant.clr_prediction_curve && (index == 1 || index == 3)" class="bg-white d-flex flex-column" style="flex: 1 1 50%;margin-top: 14px;">
<!-- 1, 100 $ matching (reversed to display against fake chart) -->
<span>$[[prediction[0] ]] contribution</span>
<span class="text-secondary"><b>$[[prediction[2] || 0 | round]] match</b></span>
<div class="grant-checkout">
<div class="rounded shadow-sm bg-white px-3 pt-3 pb-3 border">
<div v-if="grant.clr_prediction_curve?.length" style="max-width: 250px;" :class="`mx-auto mb-3 mt-2 position-relative${grant.clr_round_num && grant.is_clr_eligible ? '' : ' clr-disabled'}`">
<svg width="145" height="77" viewBox="0 0 145 77" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.15491 76.0846C1.15491 22.2514 19.2304 -0.706763 108.423 1.27248" stroke="#C4C1CF" stroke-width="2"/>
<line x1="19" y1="21.5" x2="145" y2="21.5" stroke="#11BC92" stroke-dasharray="5 5"/>
<line x1="2" y1="74.5" x2="145" y2="74.5" stroke="#11BC92" stroke-dasharray="5 5"/>
</svg>
<div class="d-inline-flex flex-column-reverse mt-n4 position-absolute" style="right: 0px;">
<div v-for="(prediction, index) in grant.clr_prediction_curve" v-if="grant.clr_prediction_curve && (index == 1 || index == 3)" class="bg-white d-flex flex-column" style="flex: 1 1 50%;margin-top: 14px;">
<!-- 1, 100 $ matching (reversed to display against fake chart) -->
<span>$[[prediction[0] ]] contribution</span>
<span class="text-secondary"><b>$[[prediction[2] || 0 | round]] match</b></span>
</div>
</div>
</div>
</div>

<template v-if="grant.link_to_new_grant">
<a :href="grant.link_to_new_grant" class="btn btn-block btn-primary">Visit the active grant to fund</a>
</template>
<template v-else-if="!grant.active">
<button type="button" class="btn btn-block btn-primary" disabled>
{% trans "This Grant Is Not Active" %}
</button>
</template>
<template v-else>
<button class="btn btn-block btn-outline-danger" @click="removeFromCart()" v-if="grant.isInCart">Remove From Cart</button>
<button class="btn btn-block btn-primary" @click="addToCart()" v-else >Add to Cart</button>
</template>


{% if should_show_claim_match_button %}
<div id="match-payout-section">
<hr class="my-4">
<button @click="claimMatch(grant.admin_address)" class="btn btn-primary btn-block mb-2" id="claim-match">
Claim Match
<template v-if="grant.link_to_new_grant">
<a :href="grant.link_to_new_grant" class="btn btn-block btn-primary">Visit the active grant to fund</a>
</template>
<template v-else-if="!grant.active">
<button type="button" class="btn btn-block btn-primary" disabled>
{% trans "This Grant Is Not Active" %}
</button>
<div class="font-smaller-1">
Match payouts are ready to be claimed! Use the button above to send the earned match amount to this grant.
</div>
</div>
{% endif %}
</div>
</template>
<template v-else>
<button class="btn btn-block btn-outline-danger" @click="removeFromCart()" v-if="grant.isInCart">Remove From Cart</button>
<button class="btn btn-block btn-primary" @click="addToCart()" v-else >Add to Cart</button>
</template>

<div class="row text-grey-400 font-smaller-1">

<!-- Grants Fav-->
<div class="col-md-6">
<template v-if="isUserLogged">
<button @click="toggleFollowingGrant(grant.id, $event)"
v-b-tooltip.hover.bottom="!grant.favorite ? 'follow' : 'unfollow'"
:class="`pl-0 btn btn-link mx-0 my-auto ${!grant.favorite ? 'text-grey-300' : 'text-primary'}`"
:data-grant="grant.id"
>
<i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
Follow
</button>
</template>
{% if should_show_claim_match_button %}
<div id="match-payout-section">
<hr class="my-4">
<button @click="claimMatch(grant.admin_address)" class="btn btn-primary btn-block mb-2" id="claim-match">
Claim Match
</button>
<div class="font-smaller-1 text-center">
Match payouts are ready to be claimed! Use the button above to send the earned match amount to this grant.
</div>
</div>
{% endif %}
</div>

<!-- Grants Rules-->
<div class="col-md-6">
<div class="d-inline font-smaller-2 cursor-pointer" id="popover-target-1">
<i class="fas fa-info-circle mr-2"></i>
Rules
<div class="col-12 mt-2">
<div class="row text-grey-400 font-smaller-1">

<!-- Grants Fav-->
<div class="col-md-4">
<template v-if="isUserLogged">
<button @click="toggleFollowingGrant(grant.id, $event)"
v-b-tooltip.hover.bottom="!grant.favorite ? 'follow' : 'unfollow'"
:class="`pl-0 btn btn-link mx-0 my-auto ${!grant.favorite ? 'text-grey-300' : 'text-primary'}`"
:data-grant="grant.id"
>
<i :class="`${!grant.favorite ? 'far' : 'fa' } fa-star`" ></i>
Follow
</button>
</template>
</div>

<!-- Grants Rules-->
<div class="col-md-8 text-right">
<div class="d-inline font-smaller-2 cursor-pointer" id="popover-target-1" style="width: 65px;">
<i class="fas fa-info-circle mr-2"></i>
Rules
</div>
<b-popover target="popover-target-1" triggers="hover" placement="left">
<template #title>Rules</template>
<p>Matching will not be applied if the rules are broken. Rules TLDR:</p>
<ul class="pl-3">
<li><b>DO NOT</b> offer anyone a quid-pro-quo for a contribution.</li>
<li><b>DO NOT</b> make up a new identity to contribute.</li>
<li><b>DO NOT</b> try to falsify a contribution.</li>
</ul>
If you see someone breaking the rules, please use 'Flag Grant' to report them.
</b-popover>

<!-- Grants Flag-->
<button @click="flag" class="btn ml-1 px-1" style="width: 65px;">
<i class="text-grey-400 fas fa-flag mr-2"></i>
Flag
</button>
</div>

</div>
<b-popover target="popover-target-1" triggers="hover" placement="left">
<template #title>Rules</template>
<p>Matching will not be applied if the rules are broken. Rules TLDR:</p>
<ul class="pl-3">
<li><b>DO NOT</b> offer anyone a quid-pro-quo for a contribution.</li>
<li><b>DO NOT</b> make up a new identity to contribute.</li>
<li><b>DO NOT</b> try to falsify a contribution.</li>
</ul>
If you see someone breaking the rules, please use 'Flag Grant' to report them.
</b-popover>

<!-- Grants Flag-->
<button @click="flag" class="btn ml-3 px-1">
<i class="text-grey-400 fas fa-flag mr-1"></i>
Flag
</button>
</div>

</div>
Expand Down

0 comments on commit 1e080eb

Please sign in to comment.