Commit 5c33a33c authored by okhin's avatar okhin 🚴

Let's use JS for the call modal

parent 11c151b4
Pipeline #741 failed with stage
......@@ -95,26 +95,3 @@ display: inline-block;
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%;
}
This diff is collapsed.
<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>
<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>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelled-by="callModalLabel" id="callModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="callModalLabel">{{ _("Reach out to ");}} {{ @contact.first_name }}&nbsp;{{ @contact.last_name }}</h4>
</div>
<div class="modal-body">
<div class="row">
<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>
<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>
</div>
</div>
</div>
</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">
<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-default" title="{{ _("Call now") }}" data-toggle="modal" data-target="#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>
......@@ -80,10 +80,20 @@
<!-- random -->
<div class="text-center">
<form class="form-inline" role="form">
<!-- <div class="form-group hidden-xs">
<label class="" for="country">Pays : </label>
<select class="form-control" name="country" id="country" onchange="$('#selcountry').submit()"><option value="">-- Toute l'Europe -- </select>
</div> --><!-- /form-group -->
<!-- Testing with only one contact now
<div class="form-group hidden-xs">
<repeat group="{{ @group_types }}" value="{{ @group_type }}">
<label class="" for="{{ @group_type.name }}">{{ @group_type.name }}</label>
<select class="form-control" name="{{ @group_type.name }}">
<option value="" selected>----</option>
<repeat group="{{ @groups }}" value="{{ @group }}">
<check if="{{ @group.type == @group_type.name }}">
<option value="{{ @group.id }}">{{ @group.name }}</option>
</check>
</repeat>
</select>
</repeat> -->
</div><!-- /form-group -->
<button type="submit" class="btn btn-default hidden-xs" title="Choisir un autre député"><span class="glyphicon glyphicon-refresh"></span></button>
</form>
</div>
......
......@@ -9,6 +9,9 @@
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Global -->
<link href="/static/css/style.css" rel="stylesheet">
<!-- JS Bootstrap -->
<script src="/static/js/jquery-2.1.0.min.js"></script>
<script src="/static/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"></script>
</head>
<body>
<section id="header">
......
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