* Fixed sidebar collapse (links now work)
* Changed fontawsome icons to bootstrap icones
This commit is contained in:
David Smith 2020-07-14 18:38:58 +01:00
parent ec558a484f
commit a3d9232ea9
9 changed files with 105 additions and 50 deletions

View File

@ -115,7 +115,7 @@ pre.highlight code {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 25px;
padding-left: 10px;
}
.sidebar .menu-list ul .sub-menu li:hover,
@ -129,19 +129,6 @@ pre.highlight code {
display: block;
}
.sidebar .menu-list ul .sub-menu li a:before,
.sidebar .menu-list li .sub-menu li a:before {
font-family: FontAwesome;
font-size: 14px;
font-weight: bold;
content: "\f105";
display: inline;
vertical-align: middle;
padding-left: 0;
padding-right: 7px;
margin-left: -12px;
}
.sidebar .menu-list li {
padding-left: 0px;
border-left: 3px solid #2e353d;
@ -153,10 +140,8 @@ pre.highlight code {
color: white;
}
.sidebar .menu-list li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
.sidebar .menu-list li a svg {
}
.sidebar .menu-list li:hover {

View File

@ -5,22 +5,26 @@
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"><i class="fa fa-key"></i> Basic Authentication</h3>
<h3 class="modal-title">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
<path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
Basic Authentication
</h3>
</div>
<form class="form-horizontal authentication-basic-form">
<form class="authentication-basic-form">
<div class="modal-body">
<div class="form-group">
<label for="authorization" class="col-sm-2 control-label">Username:</label>
<div class="row mb-3">
<label for="authorization" class="col-sm-2 col-form-label">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" required>
</div>
</div>
<div class="form-group">
<label for="authorization" class="col-sm-2 control-label">Password:</label>
<div class="row mb-3">
<label for="authorization" class="col-sm-2 col-form-label">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" required>
</div>
@ -28,7 +32,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Use Basic Authentication</button>
</div>
</form>

View File

@ -5,7 +5,12 @@
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"><i class="fa fa-key"></i> Session Authentication</h3>
<h3 class="modal-title">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
<path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
Session Authentication</h3>
</div>
<form class="form-horizontal authentication-session-form">
@ -23,7 +28,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
{% if user.is_authenticated %}
<button type="submit" class="btn btn-primary">Use Session Authentication</button>
{% endif %}

View File

@ -5,28 +5,33 @@
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title"><i class="fa fa-key"></i> Token Authentication</h3>
<h3 class="modal-title">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-key mb-1" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
<path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
Token Authentication</h3>
</div>
<form class="form-horizontal authentication-token-form">
<form class="authentication-token-form">
<div class="modal-body">
<div class="form-group">
<label for="prefix" class="col-sm-2 control-label">Scheme:</label>
<div class="row mb-3">
<label for="prefix" class="col-sm-2 col-form-label">Scheme:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="scheme" placeholder="Bearer" aria-describedby="schemeHelpBlock" required>
<span id="schemeHelpBlock" class="help-block">Either a registered authentication scheme such as <code>Bearer</code>, or a custom schema such as <code>Token</code> or <code>JWT</code>.</span>
<span id="schemeHelpBlock" class="form-text">Either a registered authentication scheme such as <code>Bearer</code>, or a custom schema such as <code>Token</code> or <code>JWT</code>.</span>
</div>
</div>
<div class="form-group">
<label for="token" class="col-sm-2 control-label">Token:</label>
<div class="row mb-3">
<label for="token" class="col-sm-2 col-form-label">Token:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="token" placeholder="XXXX-XXXX-XXXX-XXXX" aria-describedby="helpBlock" required>
<span id="tokenHelpBlock" class="help-block">A valid API token.</span>
<span id="tokenHelpBlock" class="form-text">A valid API token.</span>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Use Token Authentication</button>
</div>
</form>

View File

@ -16,7 +16,13 @@
{% if document|data %}
{% for section_key, section in document|data|items %}
{% if section_key %}
<h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a href="#{{ section_key }}"><i class="fa fa-link" aria-hidden="true"></i>
<h2 id="{{ section_key }}" class="coredocs-section-title">{{ section_key }} <a href="#{{ section_key }}">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-link-45deg" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M5.712 6.96l.167-.167a1.99 1.99 0 0 1 .896-.518 1.99 1.99 0 0 1 .518-.896l.167-.167A3.004 3.004 0 0 0 6 5.499c-.22.46-.316.963-.288 1.46z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/>
<path d="M10 9.5a2.99 2.99 0 0 0 .288-1.46l-.167.167a1.99 1.99 0 0 1-.896.518 1.99 1.99 0 0 1-.518.896l-.167.167A3.004 3.004 0 0 0 10 9.501z"/>
</svg>
</a></h2>
{% endif %}

View File

@ -9,7 +9,6 @@
<title>{{ document.title }}</title>
<link href="{% static 'rest_framework/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/css/bootstrap-theme.min.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/css/font-awesome-4.0.3.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/docs/css/base.css' %}" rel="stylesheet">
<link href="{% static 'rest_framework/docs/css/jquery.json-view.min.css' %}" rel="stylesheet">

View File

@ -12,7 +12,13 @@
</div>
</div>
<h3 class="modal-title"><i class="fa fa-exchange"></i> {{ link.title|default:link_key }}</h3>
<h3 class="modal-title">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="mb-1 bi bi-arrow-left-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
{{ link.title|default:link_key }}</h3>
</div>

View File

@ -7,14 +7,25 @@
style="float: right; margin-top: 20px"
data-toggle="modal"
data-target="#{{ section_key }}_{{ link_key|slugify }}_modal">
<i class="fa fa-exchange"></i> Interact
<svg width="1em" height="1em" viewBox="0 0 16 16" class="mb-1 bi bi-arrow-left-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.146 7.646a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L12.793 11l-2.647-2.646a.5.5 0 0 1 0-.708z"/>
<path fill-rule="evenodd" d="M2 11a.5.5 0 0 1 .5-.5H13a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 11zm3.854-9.354a.5.5 0 0 1 0 .708L3.207 5l2.647 2.646a.5.5 0 1 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z"/>
<path fill-rule="evenodd" d="M2.5 5a.5.5 0 0 1 .5-.5h10.5a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
Interact
</button>
<h3 id="{{ section_key }}-{{ link_key|slugify }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key|slugify }}"><i class="fa fa-link" aria-hidden="true"></i>
<h3 id="{{ section_key }}-{{ link_key|slugify }}" class="coredocs-link-title">{{ link.title|default:link_key }} <a href="#{{ section_key }}-{{ link_key|slugify }}">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-link-45deg" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.715 6.542L3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.001 1.001 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
<path d="M5.712 6.96l.167-.167a1.99 1.99 0 0 1 .896-.518 1.99 1.99 0 0 1 .518-.896l.167-.167A3.004 3.004 0 0 0 6 5.499c-.22.46-.316.963-.288 1.46z"/>
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 0 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 0 0-4.243-4.243L6.586 4.672z"/>
<path d="M10 9.5a2.99 2.99 0 0 0 .288-1.46l-.167.167a1.99 1.99 0 0 1-.896.518 1.99 1.99 0 0 1-.518.896l-.167.167A3.004 3.004 0 0 0 10 9.501z"/>
</svg>
</a></h3>
<div class="meta">
<span class="label label-primary">{{ link.action|upper }}</span>
<span class="badge bg-secondary">{{ link.action|upper }}</span>
<code>{{ link.url }}</code>
</div>

View File

@ -2,26 +2,54 @@
<div class="sidebar">
<h3 class="brand"><a href="#">{{ document.title }}</a></h3>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<svg data-toggle="collapse" data-target="#menu-content" width="2.5em" height="2.5em" viewBox="0 0 16 16" class="toggle-btn bi bi-three-dots-vertical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
{% if document|data %}
{% for section_key, section in document|data|items %}
<li data-toggle="collapse" data-target="#{{ section_key }}-dropdown" class="collapsed">
<a><i class="fa fa-dot-circle-o fa-lg"></i> {% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %} <span class="arrow"></span></a>
<a class="d-flex align-items-center">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mr-2 ml-2 bi bi-bullseye" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path fill-rule="evenodd" d="M8 13A5 5 0 1 0 8 3a5 5 0 0 0 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/>
<path fill-rule="evenodd" d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/>
<path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
</svg>
{% if section_key %}{{ section_key }}{% else %}API Endpoints{% endif %}
<svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-auto mr-3 bi bi-chevron-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
</svg>
</a>
</li>
<ul class="sub-menu {% if section_key %}collapse{% endif %}" id="{{ section_key }}-dropdown">
{% for link_key, link in section|schema_links|items %}
<li><a href="#{{ section_key }}-{{ link_key|slugify }}">{{ link.title|default:link_key }}</a></li>
<li>
<a href="#{{ section_key }}-{{ link_key|slugify }}">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-chevron-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
{{ link.title|default:link_key }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% endif %}
</ul>
<ul class="menu-list menu-list-bottom">
<li data-toggle="collapse" data-target="#auth-control" class="collapsed">
<a><i class="fa fa-user fa-lg"></i> Authentication</a> <span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span>
<a>
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mb-1 mr-2 ml-3 bi bi-person-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
</svg>
Authentication
</a>
<span id="selected-authentication">{% if user.is_authenticated %}session{% else %}none{% endif %}</span>
</li>
<ul class="sub-menu collapse out" id="auth-control">
<li {% if not user.is_authenticated %}class="active"{% endif %}><a data-auth="none" href="#">none</a></li>
@ -31,7 +59,13 @@
</ul>
<li data-toggle="collapse" data-target="#language-control" class="collapsed">
<a><i class="fa fa-code fa-lg"></i> Source Code</a> <span id="selected-language">{{ langs | first }}</span>
<a>
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="mb-1 ml-3 mr-2 bi bi-code-slash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0zm-.999-3.124a.5.5 0 0 1 .33.625l-4 13a.5.5 0 0 1-.955-.294l4-13a.5.5 0 0 1 .625-.33z"/>
</svg>
Source Code
</a>
<span id="selected-language">{{ langs | first }}</span>
</li>
<ul class="sub-menu collapse out" id="language-control">
{% for lang in langs %}