Skip to content
Snippets Groups Projects
Commit fc49e409 authored by jan.bednarik's avatar jan.bednarik
Browse files

donate: Project page mobile css tweaks

parent bcf862ee
No related branches found
No related tags found
2 merge requests!293Release,!292Updates
Hide whitespace changes
Inline Side-by-side
donate/static/donate/assets/css/style.css
+ 21
− 4
View file @ fc49e409
...@@ -698,7 +698,6 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { ...@@ -698,7 +698,6 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
} }
.donate-form__left { .donate-form__left {
background: #090A0B;
color: white; color: white;
flex: 0 0 auto; flex: 0 0 auto;
justify-content: space-between; justify-content: space-between;
...@@ -794,10 +793,9 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { ...@@ -794,10 +793,9 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
align-items: center; align-items: center;
} }
.donate-form__icon { .donate-form__icon {
max-width: 2.5rem; max-width: 12rem;
margin-bottom: 0rem;
order: 1; order: 1;
margin-left: 1.8rem; margin: 0 auto;
} }
.donate-form__left-content { .donate-form__left-content {
order: 0; order: 0;
...@@ -872,6 +870,12 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { ...@@ -872,6 +870,12 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
padding: 1.8rem; padding: 1.8rem;
} }
@media screen and (max-width: 991px) {
.project-donate-form__left {
display: none;
}
}
/* FOOTER */ /* FOOTER */
.socials { .socials {
...@@ -1047,6 +1051,10 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { ...@@ -1047,6 +1051,10 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
.project__sharing-box-bottom {
display: none;
}
@media screen and (max-width: 991px) { @media screen and (max-width: 991px) {
.article__sharing-box .card-body { .article__sharing-box .card-body {
padding: 1.8rem; padding: 1.8rem;
...@@ -1066,6 +1074,15 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { ...@@ -1066,6 +1074,15 @@ footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
margin-bottom: 0; margin-bottom: 0;
margin-right: 1.2rem; margin-right: 1.2rem;
} }
.project__sharing-box-bottom {
display: block;
margin-top: 3rem;
}
.project__sharing-box-top {
display: none;
}
} }
......
donate/templates/donate/donate_project_page.html
+ 109
− 94
View file @ fc49e409
...@@ -29,116 +29,131 @@ ...@@ -29,116 +29,131 @@
<section class="section--primary"> <section class="section--primary">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-lg-8 col-xl-7 mb-4 mb-lg-0 richtext">
{% if page.gallery %}
<div class="row project-images mb-3">
{% for block in page.gallery %}
{% image block.value width-2000 as img %}
{% image block.value fill-150x100 as thumb %}
<div class="col-6 col-md-3">
<a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ img.alt }}"></a>
</div><!-- /column -->
{% endfor %}
</div><!-- /row -->
{% endif %}
{{ page.body|richtext }}
</div><!-- /column --> <div class="col-12 col-lg-8 col-xl-7 mb-4 mb-lg-0 order-2 order-lg-1 richtext">
<div class="col-12 col-lg-4 offset-xl-1"><!-- /column --> {% if page.gallery %}
<div class="project-donate-form mb-4"> <div class="row project-images mb-3">
{% for block in page.gallery %}
{% image block.value width-2000 as img %}
{% image block.value fill-150x100 as thumb %}
<div class="col-6 col-md-3">
<a data-fancybox="gallery" href="{{ img.url }}"><img data-src="{{ thumb.url }}" class="lazyload img-fluid" alt="{{ img.alt }}"></a>
</div><!-- /column -->
{% endfor %}
</div><!-- /row -->
{% endif %}
{{ page.body|richtext }}
<div class="article__sharing-box project__sharing-box-bottom">
<div class="card-body">
<div class="sharing-box__content">
<div class="text"><h3 class="lead">Sdílení je aktem lásky</h3></div>
</div>
<div class="sharing-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ page.full_url|urlencode }}" target="_blank" class="btn btn-facebook"><i class="icon-facebook-f"></i></a>
<a href="https://twitter.com/intent/tweet?text=Podpoř projekt {{ page.title|urlencode }}&url={{ page.full_url|urlencode }}" target="_blank" class="btn btn-twitter"><i class="icon-twitter"></i></a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ page.full_url|urlencode }}" target="_blank" class="btn btn-linkedin"><i class="icon-linkedin"></i></a>
</div>
</div>
</div><!-- /article__sharing-box -->
<div class="project-donate-form__left"> </div><!-- /column -->
<div class="project-donate-form__left-content">
<h2 class="lead mb-0">Podpoř projekt</h2>
</div><!-- /project-donate-form__left-content -->
</div><!-- /project-donate-form__left -->
<div class="project-donate-form__right"> <div class="col-12 col-lg-4 offset-xl-1 order-1 order-lg-2">
{% if page.expected_amount %} <div class="project-donate-form mb-5">
<h5>
Vybráno <strong>{{ page.get_donated_amount|intcomma }}&nbsp;Kč</strong> <div class="project-donate-form__left">
z <strong>{{ page.expected_amount|intcomma }}&nbsp;Kč</strong> <div class="project-donate-form__left-content">
</h5> <h2 class="lead mb-0">Podpoř projekt</h2>
<div class="progress"> </div><!-- /project-donate-form__left-content -->
<div class="progress-bar" role="progressbar" style="width: {{ page.donated_percentage }}%" aria-valuenow="{{ page.donated_percentage }}" aria-valuemin="0" aria-valuemax="100"></div> </div><!-- /project-donate-form__left -->
<div class="project-donate-form__right">
{% if page.expected_amount %}
<h5>
Vybráno <strong>{{ page.get_donated_amount|intcomma }}&nbsp;Kč</strong>
z <strong>{{ page.expected_amount|intcomma }}&nbsp;Kč</strong>
</h5>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: {{ page.donated_percentage }}%" aria-valuenow="{{ page.donated_percentage }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<hr>
{% comment %}
<h5><strong>24 lidí</strong> přispělo</h5>
<h5><strong>40 dní</strong> do konce</h5>
<hr>
{% endcomment %}
{% else %}
<h5>Zatím vybráno <strong>{{ page.get_donated_amount|intcomma }}&nbsp;Kč</strong></h5>
{% endif %}
{% if page.show_donate_form %}
<form id="js-donate-form" method="post">
{% csrf_token %}
<input type="hidden" name="portal_project_id" value="{{ page.portal_project_id }}">
{% if page.allow_periodic_donations %}
<div class="form-group row mb-2 align-items-center">
<legend class="col-form-label col-md-12 col-form-label-lg">Typ příspěvku</legend>
<div class="col-md-12">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="periodicity1" name="periodicity" value="730" class="custom-control-input" checked>
<label class="custom-control-label col-form-label-lg" for="periodicity1">Měsíční</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="periodicity2" name="periodicity" value="99999" class="custom-control-input">
<label class="custom-control-label col-form-label-lg" for="periodicity2">Jednorázový</label>
</div>
</div>
</div> </div>
<hr>
{% comment %}
<h5><strong>24 lidí</strong> přispělo</h5>
<h5><strong>40 dní</strong> do konce</h5>
<hr>
{% endcomment %}
{% else %} {% else %}
<h5>Zatím vybráno <strong>{{ page.get_donated_amount|intcomma }}&nbsp;Kč</strong></h5> <input type="hidden" name="periodicity" value="99999">
{% endif %} {% endif %}
<div class="form-group row mb-4 align-items-center">
{% if page.show_donate_form %} <legend class="col-form-label col-md-12 col-form-label-lg">Částka</legend>
<form id="js-donate-form" method="post"> <div class="col-md-12">
{% csrf_token %} {% include "donate/form_amounts_snippet.html" %}
<input type="hidden" name="portal_project_id" value="{{ page.portal_project_id }}"> </div>
{% if page.allow_periodic_donations %} </div>
<div class="form-group row mb-2 align-items-center"> <div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
<legend class="col-form-label col-md-12 col-form-label-lg">Typ příspěvku</legend> <div class="col-md-12">
<div class="col-md-12"> <div class="input-group input-group-lg mb-3 custom-amount">
<div class="custom-control custom-radio custom-control-inline"> <input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
<input type="radio" id="periodicity1" name="periodicity" value="730" class="custom-control-input" checked> <div class="input-group-append">
<label class="custom-control-label col-form-label-lg" for="periodicity1">Měsíční</label> <span class="input-group-text" id="customamount-currency">Kč</span>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="periodicity2" name="periodicity" value="99999" class="custom-control-input">
<label class="custom-control-label col-form-label-lg" for="periodicity2">Jednorázový</label>
</div>
</div>
</div>
{% else %}
<input type="hidden" name="periodicity" value="99999">
{% endif %}
<div class="form-group row mb-4 align-items-center">
<legend class="col-form-label col-md-12 col-form-label-lg">Částka</legend>
<div class="col-md-12">
{% include "donate/form_amounts_snippet.html" %}
</div>
</div>
<div class="form-group row mb-2 align-items-center" id="js-custom-amount-input" style="display: none;">
<div class="col-md-12">
<div class="input-group input-group-lg mb-3 custom-amount">
<input type="number" class="form-control" id="customamount" name="custom_amount" aria-describedby="customamount-currency">
<div class="input-group-append">
<span class="input-group-text" id="customamount-currency">Kč</span>
</div>
</div> </div>
</div> </div>
</div>
<div class="form-group row mb-0 mt-4">
<div class="col-12">
<button type="submit" class="btn btn-danger btn-lg">Darovat</button>
</div> </div>
</div>
<div class="form-group row mb-0 mt-4">
<div class="col-12">
<button type="submit" class="btn btn-danger btn-lg">Darovat</button>
</div> </div>
</form> </div>
{% endif %} </form>
{% endif %}
</div><!-- /project-donate-form__right --> </div><!-- /project-donate-form__right -->
</div> </div>
<div class="article__sharing-box"> <div class="article__sharing-box project__sharing-box-top">
<div class="card-body"> <div class="card-body">
<div class="sharing-box__content"> <div class="sharing-box__content">
<div class="icon"><i class="icon-heart"></i></div> <div class="icon"><i class="icon-heart"></i></div>
<div class="text"><h3 class="lead">Sdílení je aktem lásky</h3></div> <div class="text"><h3 class="lead">Sdílení je aktem lásky</h3></div>
</div>
<div class="sharing-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ page.full_url|urlencode }}" target="_blank" class="btn btn-facebook"><i class="icon-facebook-f"></i></a>
<a href="https://twitter.com/intent/tweet?text=Podpoř projekt {{ page.title|urlencode }}&url={{ page.full_url|urlencode }}" target="_blank" class="btn btn-twitter"><i class="icon-twitter"></i></a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ page.full_url|urlencode }}" target="_blank" class="btn btn-linkedin"><i class="icon-linkedin"></i></a>
</div>
</div> </div>
<div class="image"><img data-src="{% static "donate/img/vlajka.jpg" %}" class="img-fluid lazyload" alt="Vlajka pirátů"></div> <div class="sharing-buttons">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ page.full_url|urlencode }}" target="_blank" class="btn btn-facebook"><i class="icon-facebook-f"></i></a>
<a href="https://twitter.com/intent/tweet?text=Podpoř projekt {{ page.title|urlencode }}&url={{ page.full_url|urlencode }}" target="_blank" class="btn btn-twitter"><i class="icon-twitter"></i></a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={{ page.full_url|urlencode }}" target="_blank" class="btn btn-linkedin"><i class="icon-linkedin"></i></a>
</div>
</div>
{#<div class="image"><img data-src="{% static "donate/img/vlajka.jpg" %}" class="img-fluid lazyload" alt="Vlajka pirátů"></div>#}
</div><!-- /article__sharing-box --> </div><!-- /article__sharing-box -->
</div><!-- /column --> </div><!-- /column -->
</div> <!-- /row --> </div> <!-- /row -->
</div> <!-- /container --> </div> <!-- /container -->
</section> </section>
......
donate/templates/donate/donate_project_page_coalition.html
+ 8
− 6
View file @ fc49e409
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
<section class="section--primary"> <section class="section--primary">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-12 col-lg-8 col-xl-7 mb-4 mb-lg-0 richtext content-block">
<div class="col-12 col-lg-8 col-xl-7 mb-4 mb-lg-0 order-2 order-lg-1 richtext content-block">
{% if page.gallery %} {% if page.gallery %}
<div class="row project-images mb-3"> <div class="row project-images mb-3">
{% for block in page.gallery %} {% for block in page.gallery %}
...@@ -60,13 +60,11 @@ ...@@ -60,13 +60,11 @@
{% endfor %} {% endfor %}
</div><!-- /row --> </div><!-- /row -->
{% endif %} {% endif %}
{{ page.body|richtext }} {{ page.body|richtext }}
</div><!-- /column --> </div><!-- /column -->
<div class="col-12 col-lg-4 offset-xl-1"><!-- /column --> <div class="col-12 col-lg-4 offset-xl-1 order-1 order-lg-2">
<div class="project-donate-form mb-4"> <div class="project-donate-form mb-5">
<div class="project-donate-form__left"> <div class="project-donate-form__left">
<div class="project-donate-form__left-content"> <div class="project-donate-form__left-content">
...@@ -127,7 +125,8 @@ ...@@ -127,7 +125,8 @@
{% endif %} {% endif %}
</div> </div>
</div> </div><!-- /column -->
</div> </div>
</div> </div>
</section> </section>
...@@ -145,6 +144,9 @@ ...@@ -145,6 +144,9 @@
</div><!-- /column --> </div><!-- /column -->
<div class="col-12 col-md-6 text-md-right"> <div class="col-12 col-md-6 text-md-right">
<p class="mb-0">Tento web využívá soubory cookies - <a href="/soubory-cookies/">více informací</a></p> <p class="mb-0">Tento web využívá soubory cookies - <a href="/soubory-cookies/">více informací</a></p>
<p><a href="/osobni-udaje/">Zásady zpracování osobních údajů</a></p>
<p><a href="/obchodni-podminky/">Obchodní podmínky</a></p>
</div><!-- /column -->
</div><!-- /column --> </div><!-- /column -->
</div><!-- /row --> </div><!-- /row -->
</div><!-- /container --> </div><!-- /container -->
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft