mirror of
https://github.com/retspen/webvirtcloud
synced 2026-11-10 20:26:48 +00:00
webvirtcloud.css still carried the upstream panel's rules for what
Bootstrap 5.3 has as utilities and components:
- the page's bottom space (body padding) is pb-5 on base.html's body,
and the console page no longer has to undo it;
- the VM page's action tabs (.action-button, .action-block with a
fixed 65px width) are text-center with a d-block icon; its tab panes
(#power ... #undefine, one rule each) mt-3;
- the bordered sub-tab panes (.tab-pane-bordered, a fixed #eee border
that dark themes could not change) border border-top-0 p-3;
- the search box and header buttons (.search, .btn-header) m-1 and
mt-1; the SSH key select (.keyselect) a form-select;
- the boot order list (.multipleselect, fixed size, #c0c0c0 border) a
list-group of form-check-input items; its unused .multipleselect-on
goes;
- table cells centred by a global rule are align-middle on each table.
Two rules against Bootstrap's behaviour go: menus opened on hover on
wide screens (Bootstrap opens them on a click, and keyboard and touch
users had no hover), and "a { outline: 0 }", which hid the keyboard
focus ring.
The paragraph and page-header margins and the 900px container stay
for a separate change: they set every page's layout.
121 lines
5.8 KiB
HTML
121 lines
5.8 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% load i18n %}
|
|
{% load bootstrap_icons %}
|
|
|
|
{% block title %}{% trans "User Profile" %} - {{ user }}{% endblock %}
|
|
{% block page_heading %}{% trans "User Profile" %}: {{ user }}{% endblock page_heading %}
|
|
|
|
{% block page_heading_extra %}
|
|
{% if otp_enabled %}
|
|
<form method="post" action="{% url 'accounts:admin_email_otp' user.id %}" class="d-inline">{% csrf_token %}
|
|
<button type="submit" class="btn btn-secondary" title="{% trans "Email OTP QR code" %}">
|
|
{% bs_icon 'qr-code' %}
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
<a href="{% url 'admin:user_update' user.id %}?next={% url 'accounts:account' user.id %}" class="btn btn-primary" title="{% trans "Edit user" %}">
|
|
{% bs_icon 'pencil' %}
|
|
</a>
|
|
<a href="{% url 'accounts:user_instance_create' user.id %}" class="btn btn-success" title="{% trans "Create user instance" %}">
|
|
{% bs_icon 'plus-circle-fill' %}
|
|
</a>
|
|
{% endblock page_heading_extra %}
|
|
|
|
{% block content %}
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#instances" type="button" role="tab" aria-controls="instances" aria-selected="true">
|
|
{% trans "Instances" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#public-keys" type="button" role="tab" aria-controls="public-keys" aria-selected="false">
|
|
{% trans "Public Keys" %}
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#apitokens" type="button" role="tab" aria-controls="apitokens" aria-selected="false">
|
|
{% trans "API Tokens" %}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane active" id="instances">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">{% trans "Instance" %}</th>
|
|
<th scope="col">{% trans "VNC" %}</th>
|
|
<th scope="col">{% trans "Resize" %}</th>
|
|
<th scope="col">{% trans "Delete" %}</th>
|
|
<th scope="colgroup" colspan="2">{% trans "Action" %}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for inst in user_insts %}
|
|
<tr>
|
|
<td>{{ forloop.counter }}</td>
|
|
<td><a href="{% url 'instances:instance' inst.instance.id %}">{{ inst.instance.name }}</a></td>
|
|
<td>{% if inst.is_vnc %}{% bs_icon 'check' %}{% endif %}</td>
|
|
<td>{% if inst.is_change %}{% bs_icon 'check' %}{% endif %}</td>
|
|
<td>{% if inst.is_delete %}{% bs_icon 'check' %}{% endif %}</td>
|
|
<td style="width:5px;">
|
|
<a href="{% url 'accounts:user_instance_update' inst.id %}" class="btn btn-sm btn-secondary" title="{% trans "edit" %}">
|
|
{% bs_icon 'pencil' %}
|
|
</a>
|
|
</td>
|
|
<td style="width:5px;">
|
|
<a class="btn btn-sm btn-secondary" href="{% url 'accounts:user_instance_delete' inst.id %}" title="{% trans "Delete" %}">
|
|
{% bs_icon 'trash' %}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% empty %}
|
|
<tr><td colspan="7" class="text-body-secondary">{% trans "No VMs." %}</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="public-keys">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">{% trans "Key name" %}</th>
|
|
<th scope="col">{% trans "Public key" %}</th>
|
|
<th scope="col"><span class="visually-hidden">{% trans "Action" %}</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for publickey in publickeys %}
|
|
<tr>
|
|
<td>{{ publickey.keyname }}</td>
|
|
<td title="{{ publickey.keypublic }}">{{ publickey.keypublic|truncatechars:64 }}</td>
|
|
<td style="width:5px;">
|
|
<a class="btn btn-sm btn-secondary" href="{% url 'accounts:account_ssh_key_delete' user.id publickey.id %}" title="{% trans "Delete" %}">
|
|
{% bs_icon 'trash' %}
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane fade" id="apitokens">
|
|
{% if api_tokens %}
|
|
{% include "api_token_table.html" with owner=user %}
|
|
{% else %}
|
|
<p class="text-body-secondary mt-3">{% trans "No API tokens." %}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock content %}
|
|
{% block script %}
|
|
{% include "tab_from_hash.html" %}
|
|
{% endblock %}
|