hogumathi-app/hogumathi_app/templates/partial/brand-info-bs.html

<div class="container-fluid w-100 ">

<style>

.brand-info ul {
	list-style: none;
	padding-left: 0;
}

.brand-info ul li {
	padding-left: 0;
}

.brand-info ul li a.btn {
	text-align: left;
}

.brand-info ul li .form-control {
	overflow-wrap: break-word;
}

@media (min-width: 992px) {
	.ms-lg-35 {
		margin-left: 35% !important;
	}
}



</style>

<div class="brand-info w-100 p-2 bg-body border-black">

<div class="bg-body border-bottom border-dark sticky-lg-top mb-5 mb-lg-0" style="z-index: 9999">
{% if 'logo_href' in brand %}

<center>
<img class="m-4 w-25 w-lg-50" src="{{ brand.logo_href }}" style="float: left">

</center>

{% endif %}


<h1>{{ brand.display_name }}</h1>



{% if brand.description %}
{% for para in brand.description.split('\n') %}
<p>{{ para }}</p>
{% endfor %}
{% endif %}

</div>

<div class="ms-0 ms-lg-35">
{% if gumroad and gumroad.products %}

	<h2>Products</h2>
	
	
	<div class="row row-cols-2 row-cols-lg-3 g-2 mb-3 mt-1">
		{% for product in gumroad.products %}
		<div class="col-sm">
			<div class="card">
				<img src="{{ product.cover_image_uri }}" class="card-img-top">
				<h5 class="card-title">{{ product.name }}</h5>
				<p class="card-text">({{ product.price }})</p>
				
				<a href="{{ product.href }}" class="btn btn-primary">
					<i class="bi-box2-heart"></i>
					On Gumroad
				</a>
				
			</div>
		</div>
		{% endfor %}
	</div>

	


{% endif %}




{% if patreon or (gumroad and gumroad.subscriptions and len(gumroad.subscriptions)) %}
	<h2>Subscriptions</h2>

	<ul>

	{% if patreon %}
	<li>
		<div class="input-group mb-1" style="width: fit-content">
			<a class="btn btn-primary" href="{{ patreon.href }}">
				<i class="bi-calendar-heart"></i>
				Patreon
			</a>
			<span class="form-control px-4" >
				@{{ patreon.id }}
			</span>
		</div>
	</li>
	{% endif %}

	{% for sub in gumroad.subscriptions %}
	{% if sub.tiers  %}
	<li>
		<h4>{{ sub.name }} on Gumroad</h4>
		<ul>
		{% for tier in sub.tiers %}
		<li>
			
			<div class="input-group mb-1" style="width: fit-content">
				<a class="btn btn-primary" href="{{ sub.href }}?option={{ tier.option }}">
					<i class="bi-calendar-heart"></i>
					{{ tier.name }}
				</a>
				<span class="form-control px-4" >
					{{ tier.yearly }}/yr or {{ tier.monthly }}/mo
				</span>
			</div>
		
			<!--
			<a href="{{ sub.href }}?option={{ tier.option }}">
			{{ tier.name }}
			</a>
			({{ tier.yearly }}/yr or {{ tier.monthly }}/mo)
			-->
		</li>
		{% endfor %}
		</ul>
	</li>
	{% else %}
	<li>
		
		<div class="input-group mb-1" style="width: fit-content">
			<a class="btn btn-primary" href="{{ sub.href }}">
				<i class="bi-calendar-heart"></i>
				{{ sub.name }}
			</a>
			<span class="form-control px-4" >
				{{ sub.yearly }}/yr or {{ sub.monthly }}/mo
			</span>
		</div>
	</li>
	{% endif %}
	{% endfor %}

	</ul>
{% endif %}


{% if venmo %}
<h2>Tips</h2>

<ul>

{% if venmo %}
<li>
	<div class="input-group" style="width: fit-content">
		<a class="btn btn-primary" href="{{ venmo.href }}">
			<i class="bi-heart"></i>
			Venmo
		</a>
		<span class="form-control" >
			@{{ venmo.id }}
		</span>
	</div>
</li>
{% endif %}

</ul>
{% endif %}


{% if twitter or youtube or mastodon or receipt_tracker %}
	<h2>On Hogumathi</h2>

	<ul>

	{% if twitter %}
	<li>
		<div class="input-group mb-1" style="width: fit-content">
		
			<a href="{{ twitter.hogu_href }}" class="btn btn-primary">
				<i class="bi-twitter"></i>
				<span class="d-none d-md-inline">
					Twitter
				</span>
			</a>
			<span class="form-control">
				@{{ twitter.username }}
				
			</span>
		</div>
		<!--
		<small class="d-none d-md-inline">
			(<a class="text-decoration-none" href="{{ twitter.href }}">on Twitter.com</a>)
		</small>
		[<a href="{{ twitter.href }}">source</a>]
		-->
	</li>
	{% endif %}

	{% if youtube %}
	<li>
		<div class="input-group mb-1" style="width: fit-content">
		
			<a href="{{ youtube.hogu_href }}" class="btn btn-primary">
				<i class="bi-youtube"></i>
				<span class="d-none d-md-inline">
					YouTube
				</span>
			</a>
			<span class="form-control">
				@{{ youtube.username }}
			</span>
		</div>
	
		<!--
		<a href="{{ youtube.hogu_href }}">YouTube</a> (@{{ youtube.username }}) [<a href="{{ youtube.href }}">source</a>]
		-->
	</li>
	{% endif %}

	{% if mastodon %}
	<li>
		<div class="input-group mb-1" style="width: fit-content">
		
			<a href="{{ mastodon.hogu_href }}" class="btn btn-primary">
				<i class="bi-mastodon"></i>
				<span class="d-none d-md-inline">
					Mastodon
				</span>
			</a>
			<span class="form-control">
				@{{ mastodon.username }}@{{ mastodon.instance }}
			</span>
		</div>
	
		<!--
		<a href="{{ mastodon.hogu_href }}">Mastodon</a> (@{{ mastodon.username }}@{{ mastodon.instance }}) [<a href="{{ mastodon.href }}">source</a>]
		-->
	</li>
	{% endif %}

	{% if receipt_tracker %}
	<li>
		<div class="input-group mb-1" style="width: fit-content">
		
			<a href="{{ receipt_tracker.hogu_href }}" class="btn btn-primary">
				<i class="bi-rss"></i>
				<span class="d-none d-md-inline">
					RSS
				</span>
			</a>
			<span class="form-control">
				{{ receipt_tracker.href }}
			</span>
		</div>
		<!--
		<a href="{{ receipt_tracker.hogu_href }}">Receipts</a> [<a href="{{ receipt_tracker.href }}">source</a>]
		-->
	</li>
	{% endif %}

	</ul>
{% endif %}

{% if mailchimp or discord %}
	<h2>Community</h2>

	<ul>

	{% if mailchimp %}
	<li><a href="{{ mailchimp.href }}">Mailchimp</a></li>
	{% endif %}

	{% if discord %}
	<li><a href="{{ discord.href }}">Discord</a></li>
	{% endif %}

	</ul>
{% endif %}

{% if twitch or instagram %}
	<h2>Other Socials</h2>

	<ul>

	{% if twitch %}
	<li>
		<div class="input-group mb-1" style="width: fit-content">
		
			<a href="{{ twitch.hogu_href }}" class="btn btn-primary">
				<i class="bi-twitch"></i>
				<span class="d-none d-md-inline">
					Twitch
				</span>
			</a>
			<span class="form-control">
				@{{ twitch.id }}
			</span>
		</div>
		<!--
		<a href="{{ twitch.href }}">Twitch</a> (@{{ twitch.id }})</a>
		-->
	</li>
	{% endif %}


	{% if instagram %}
	<li>
		<div class="input-group mb-1" style="width: fit-content">
		
			<a href="{{ instagram.href }}" class="btn btn-primary">
				<i class="bi-instagram"></i>
				<span class="d-none d-md-inline">
					Instagram
				</span>
			</a>
			<span class="form-control">
				@{{ instagram.id }}
			</span>
		</div>
		<!--
		<a href="{{ instagram.href }}">Instagram</a> (@{{ instagram.id }})</a>
		-->
	</li>
	{% endif %}
	</ul>
{% endif %}



{% if contributors %}

	<h2>Contributors</h2>
	
	<p>Thanks to our kind contributors for helping support development:</p>
	
	<table class="table table-striped">
		<thead>
		<tr>
			<th>Name</th>
			<th>Amount (Est)</th>
		</tr>
		</thead>
		<tbody>
		{% for contributor in contributors %}
			<tr>
				<td>{{ contributor.name }}</td>
				<td>{{ contributor.amount }}</td>
			</tr>
		{% endfor %}
		</tbody>
	</table>

{% endif %}

</div>

</div>
</div>