pangea/django-musician
7
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Code domain configuration details modal.

Browse source
This commit is contained in:
Santiago Lamora 2019-12-12 12:11:07 +01:00
parent 381c6f656e
commit 027dc365be
3 changed files with 75 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
musician/static/musician/css/default.css
View file

@ -220,3 +220,33 @@ h1.service-name {
content: "\f0f3";
font-weight: 900;
}
#configDetailsModal .modal-header {
border-bottom: 0;
text-align: center;
}
#configDetailsModal .modal-header .modal-title {
width: 100%;
}
#configDetailsModal .modal-body {
padding-left: 4rem;
padding-right: 4rem;
}
#configDetailsModal .modal-body label {
width: 50%;
text-align: right;
padding-right: 4%;
}
#configDetailsModal .modal-body span {
display: inline-block;
width: 45%;
}
#configDetailsModal .modal-footer {
border-top: 0;
justify-content: center;
}

1
musician/templates/musician/base.html
View file

@ -93,6 +93,7 @@
<script src="{% static "musician/js/jquery-3.3.1.slim.min.js" %}"></script>
<script src="{% static "musician/js/popper.min.js" %}"></script>
<script src="{% static "musician/js/bootstrap.min.js" %}"></script>
{% block extrascript %}{% endblock %}
{% endblock %}
</body>

43
musician/templates/musician/dashboard.html
View file

@ -39,7 +39,10 @@
<strong>{{ domain.name }}</strong>
</div>
<div class="col-md-8">
<button type="button" class="btn text-secondary" data-toggle="modal" data-target="#configDetailsModal"
data-domain="{{ domain.name }}" data-username="john" data-password="s3cre3t" data-root="/domainname/">
{% trans "view configuration" %} <strong class="fas fa-tools"></strong>
</button>
</div>
<div class="col-md text-right">
{% trans "Expiration date" %}: <strong>{{ domain.expiration_date|date:"SHORT_DATE_FORMAT" }}</strong>
@ -84,4 +87,44 @@
{% endfor %}
<!-- configuration details modal -->
<div class="modal fade" id="configDetailsModal" tabindex="-1" role="dialog" aria-labelledby="configDetailsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-secondary" id="configDetailsModalLabel">Configuration details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h6 class="pl-4 mb-4">{% trans "FTP access:" %}</h6>
<div class="">
<p>
<label>{% trans "Username" %}:</label> <span id="config-username" class="font-weight-bold">username</span><br/>
<label>{% trans "Password:" %}</label> <span id="config-password" class="font-weight-bold">password</span>
</p>
<p class="border-top pt-3"><label>Root directory:</label> <span id="config-root" class="font-weight-bold">root directory</span></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">{% trans "View DNS records" %}</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extrascript %}
<script>
$('#configDetailsModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var modal = $(this);
// Extract info from data-* attributes
modal.find('.modal-title').text(button.data('domain'));
modal.find('.modal-body #config-username').text(button.data('username'));
modal.find('.modal-body #config-password').text(button.data('password'));
modal.find('.modal-body #config-root').text(button.data('root'));
})
</script>
{% endblock %}