diff options
Diffstat (limited to 'workshop_app/templates')
| -rw-r--r-- | workshop_app/templates/workshop_app/view_workshoptype_details.html | 95 | ||||
| -rw-r--r-- | workshop_app/templates/workshop_app/view_workshoptype_list.html | 1 |
2 files changed, 92 insertions, 4 deletions
diff --git a/workshop_app/templates/workshop_app/view_workshoptype_details.html b/workshop_app/templates/workshop_app/view_workshoptype_details.html index 60d63a4..625434a 100644 --- a/workshop_app/templates/workshop_app/view_workshoptype_details.html +++ b/workshop_app/templates/workshop_app/view_workshoptype_details.html @@ -7,10 +7,50 @@ {% block extra %} <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> --> - + <style> + /* The Modal (background) */ + .modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ + } + + /* Modal Content */ + .modal-content { + background-color: #fefefe; + margin: auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + } + + /* The Close Button */ + .close { + color: #aaaaaa; + float: right; + font-size: 28px; + font-weight: bold; + } + + .close:hover, + .close:focus { + color: #000; + text-decoration: none; + cursor: pointer; + } + </style> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -{% endblock %} + {% endblock %} {% block header %} <nav class="navbar navbar-default navbar-custom"> @@ -67,13 +107,31 @@ <td>{{ w.workshoptype_name }}</td> <td>{{ w.workshoptype_duration }}</td> <td><a href="{{URL_ROOT}}/file_view/{{ w.id }}" class="btn btn-default btn-sm" class="accordion-toggle" >View Workshop Details</a></td> + </tr> </tbody> {% endfor %} </table> <a style="color: white;" href="{{ URL_ROOT }}/book/"><button class="btn btn-primary btn-lg" style="float: right;">Start Booking Now</button></a> +<button id="mailBtn" class="btn btn-info btn-lg">Share Details</button> </div> + <!-- The Modal --> + <div id="mailModal" class="modal"> + + <!-- Modal content --> + <div class="modal-content"> + <span class="close">×</span> + <p>Separate Multiple Email Id's using <strong> comma (,)</strong></p> + <form action="{{URL_ROOT}}/share_details/" method="POST"> + {% csrf_token %} + <label > Email: </label> + <input name="email" type='email' multiple> + <input type='submit'> + </form> + </div> + </div> + <!-- Page Navigation --> <div class="container"> @@ -100,5 +158,34 @@ </ul> </nav> </div> - </div> -{% endblock %}
\ No newline at end of file + </div> <script> + // Get the modal + var modal = document.getElementById("mailModal"); + + // Get the button that opens the modal + var btn = document.getElementById("mailBtn"); + + // Get the <span> element that closes the modal + var span = document.getElementsByClassName("close")[0]; + + // When the user clicks the button, open the modal + btn.onclick = function() { + modal.style.display = "block"; + } + + // When the user clicks on <span> (x), close the modal + span.onclick = function() { + modal.style.display = "none"; + } + + // When the user clicks anywhere outside of the modal, close it + window.onclick = function(event) { + if (event.target == modal) { + modal.style.display = "none"; + } + } + + + </script> + +{% endblock %} diff --git a/workshop_app/templates/workshop_app/view_workshoptype_list.html b/workshop_app/templates/workshop_app/view_workshoptype_list.html index 1777307..3e3221b 100644 --- a/workshop_app/templates/workshop_app/view_workshoptype_list.html +++ b/workshop_app/templates/workshop_app/view_workshoptype_list.html @@ -61,6 +61,7 @@ <td>{{ w.workshoptype_duration }}</td> <td><a class="btn btn-default btn-sm" href="{{URL_ROOT}}/file_view/{{ w.id }}">View Workshop Details</a></td> {% if request.user.profile.position == 'coordinator' %} + {% endif %} </tr> </tbody> |