ocelot-Social-Community/ocelot.social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/ocelot.social.git synced 2026-01-20 20:01:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix donation bar overflow

Browse Source
This commit is contained in:
Wolfgang Huß 2025-12-16 12:01:56 +01:00
parent 3212a2d41d
commit 22f5ceb0bf
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/.vuepress/components/DonationBar.vue
View File

@ -6,8 +6,9 @@
</a>
</h3>
<div class="donation-bar">
<!-- a width of 100% is a bit more as the full width of "donation-bar" one can see if we don't set "overflow: hidden;". I couldn't find how to fix -->
<div class="donation-bar-value" :style="{ width: ((currentValue <= target ? currentValue : target) / target) * 100 + '%' }">
{{ currentValueStr }}
<span class="donation-bar-value-str">{{ currentValueStr }}</span>
</div>
</div>
<p>
@ -128,6 +129,7 @@ const timeFrameStr = computed(() => {
<style scoped>
.donation-bar {
width: 100%;
overflow: hidden;
border: 1px solid var(--notice-c-accent-bg);
border-radius: 10px;
margin: 20px 0 20px 0;
@ -142,6 +144,10 @@ const timeFrameStr = computed(() => {
padding-right: 10px;
}
.donation-bar-value-str{
margin-right: 10px;
}
@media (max-width: 830px) {
.donation-bar-value {
font-size: 1.5em;