Commit a27df5f2 authored by okhin's avatar okhin 🚴

Fixing the call modal in pure CSS (yeah)

parent 388467ba
......@@ -96,6 +96,25 @@ background-color: #ccc;
padding: .5em 1em;
}
#callModal {
visibility:hidden;
}
#callModal:target {
visibility:visible;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
.cmodal .panel{
margin: auto;
background: rgba(255, 255, 255, 1);
max-width: 80%;
min-width: 50%;
}
<include href="header.html" />
<include href="{{ @block_content }}" />
<include href="call.html" />
<include href="footer.html" />
<h2>{{ _("Call for free") }}</h2>
<div class="overlay" id="callModal">
<div class="cmodal container-fluid panel panel-default">
<div class="panel-heading">
<h2>{{ _("Reach out to ");}} {{ @contact.first_name }}&nbsp;{{ @contact.last_name }}
<a type="button" class="btn close" href="#" aria-label="Close"><span aria-hidden="true">&times;</span></a></h2>
</div>
<div class="row panel-body">
<div class="col-sm-6">
<h2>{{ _("Call for free") }}</h2>
<form method="post" action="/call/{{ @contact.id }}">
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact.id }}">
<p>{{ _("If you want to call for free, you must provide us with your phone number (the PiPhone will call that number to initiate the communication).") }}</p>
<form method="post" action="/call/{{ @contact.id }}">
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact.id }}">
<p>{{ _("If you want to call for free, you must provide us with your phone number (the PiPhone will call that number to initiate the communication).") }}</p>
<p>
<label for="phone">{{_("Your phone number:") }}</label>
<input type="text" name="phone" id="phone" placeholder="+33123456789001" />
</p>
<p>
{{ _('Starting with your <a href="https://en.wikipedia.org/wiki/List_of_country_calling_codes#Zones_3-4:_Europe">country code</a>, without the initial 0') }}
</p>
<input class="btn btn-default" type="submit" value="{{ _("I'm ready, call me") }}" />
</form>
</div>
<div class="col-sm-6">
<h2>{{ _("Call at your expense") }}</h2>
<p>{{ _("If you don't want to call for free, here is the number of the current MEP (you can either dial it from your phone or push the button if any VoIP client is installed on your device.") }}</p>
<a class="btn btn-default" href="tel:{{ @contact.phone }}" target="_blank">☎ {{ @contact.phone }}</a>
<p>
<label for="phone">{{_("Your phone number:") }}</label>
<input type="text" name="phone" id="phone" placeholder="+33123456789001" />
</p>
<p>
{{ _('Starting with your <a href="https://en.wikipedia.org/wiki/List_of_country_calling_codes#Zones_3-4:_Europe">country code</a>, without the initial 0') }}
</p>
<input type="submit" value="{{ _("I'm ready, call me") }}" />
</form>
<h2>{{ _("Call at your expense") }}</h2>
<p>{{ _("If you don't want to call for free, here is the number of the current MEP (you can either dial it from your phone or push the button if any VoIP client is installed on your device.") }}</p>
<a href="tel:{{ @contact.tel }}" target="_blank">☎ {{ @contact.tel }}</a>
<p><a href="/">{{ _("Cancel the call") }}</a></p>
</div>
</div>
</div>
</div>
......@@ -29,7 +29,7 @@
<abbr title="{{ _("Phone number") }}">{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a>
<br class="visible-xs-block">
<button type="button" class="btn btn-default" title="{{ _("Call now") }}" data-toggle="modal" data-target="#CallModal"><span class="glyphicon glyphicon-earphone"></span></button>
<a type="button" class="btn btn-default" title="{{ _("Call now") }}" href="#callModal"><span class="glyphicon glyphicon-earphone"></span></button>
<a type="button" class="btn btn-info" title="{{ _("Get more info...") }}" href="#"><span class="glyphicon glyphicon-info-sign"></span></a>
<a type="button" class="btn btn-default visible-xs-inline-block" title="{{ _("Choose someone else") }}" href="#"><span class="glyphicon glyphicon-refresh"></span></a>
</p>
......@@ -63,7 +63,7 @@
</div>
<!-- /committees -->
</div>
<!-- /-- gauche -->
<!-- /gauche -->
<!-- droite -->
<div class="col-md-4">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment