Commit 4f2b5c39 authored by Olga Brani's avatar Olga Brani

astakos: Improved style for API access page

parent 3aa87ac0
......@@ -115,8 +115,10 @@ span.action-desc { display: block; color: #fff;}
h2 .header-actions { float: right; font-size: 0.8em;}
.api-access-view div.detail .title {
float: left;
display: block;
font-size: 0.8em;
text-align: center;
margin-bottom: 1em;
}
.api-access-view div.detail .dummy-input,
......@@ -124,11 +126,12 @@ h2 .header-actions { float: right; font-size: 0.8em;}
{
border: none;
text-decoration: none;
width: 80%;
width: 100%;
font-family: monospace;
position: absolute;
left: 20%;
cursor: pointer;
color: #F24E53;
text-align: center;
display: block;
}
.api-access-view div.detail .dummy-input { display: none;}
......@@ -148,16 +151,21 @@ h2 .header-actions { float: right; font-size: 0.8em;}
.api-access-view div.detail .expires {
font-size: 9px;
font-family: 'Open Sans', sans-serif;
position: absolute;
left: 20%;
top: 25px;
text-align: center;
color:#b3b3b3;
display: block;
}
.api-access-view p.sub {
font-size: 0.7em;
color:#b3b3b3;
padding-top:6px;
text-align: center;
}
.api-access-view p.sub span {
max-width: 230px;
display: block;
margin:0 auto;
}
.api-access-view .api-clients h3 {
......@@ -169,12 +177,10 @@ h2 .header-actions { float: right; font-size: 0.8em;}
}
.token-view .actions {
position: absolute;
right:0;
text-align: center;
font-size:13px;
max-width: 230px;
overflow: hidden;
top:0;
width: 100%;
margin-top: 1em;
}
.renew-token .confirm {
......@@ -189,5 +195,5 @@ h2 .header-actions { float: right; font-size: 0.8em;}
.renew-token .sub,
.renew-token .confirm,
.renew-token .close {
visibility: hidden;
display: none;
}
\ No newline at end of file
......@@ -21,8 +21,4 @@ dl.alt-style { width:auto; }
#token-confirm { position:relative; top:8px; left:auto; }
form.submit-inline .form-row.submit { position:static; margin-top:20px; }
.api-access-view div.detail .title { float:none;width:auto; }
.api-access-view div.detail input { position: static; width: 100%; display: block;}
.api-access-view div.detail .expires { position: static;}
.token-view .actions { position: static; }
\ No newline at end of file
\ No newline at end of file
......@@ -10,8 +10,3 @@
.stats .bar { margin:0 25px; }
.token-view .actions { left:20%; position: relative; top:50px;}
.api-access-view div.detail .expires { }
.api-access-view div.detail .title { max-width: 120px; }
\ No newline at end of file
......@@ -432,15 +432,17 @@ $('#members-table tr .check input').click(function(e){
$('.renew-token a.do').click(function(e){
e.preventDefault();
e.stopPropagation();
$(this).hide();
var els = [$(".renew-token .sub"),$('.renew-token .confirm'), $('.renew-token .close')];
_.each(els, function (el) { el.css({'visibility':'visible'});})
_.each(els, function (el) { el.show();})
})
$('.renew-token a.close').click(function(e){
e.preventDefault();
e.stopPropagation();
var els = [$(".renew-token .sub"),$('.renew-token .confirm'), $('.renew-token .close')];
_.each(els, function (el) { el.css({'visibility':'hidden'});})
_.each(els, function (el) { el.hide();})
$('.renew-token a.do').show();
})
......
......@@ -11,39 +11,19 @@
{% block page.body %}
<form>{% csrf_token %}</form>
<div class="api-access-view">
<div class="subsection">
<div>
{% block page.body.title %}
<h2>API ACCESS</h2>
{% endblock %}
{% block page.body.description %}
<div class="two-cols dotted clearfix">
<div class="rt">
<p>
If
you want to learn more about the specification of the REST API itself,
please take a look at the <a href="https://www.synnefo.org/docs"
alt="Synnefo documentation">Synnefo documentation</a>.
</p>
</div>
<div class="lt">
<p>{{ BRANDING_SERVICE_NAME }} provides a complete REST API that allows you to access and
control your virtual resources programmatically. This means you can execute
all the actions you do from the {{ BRANDING_SERVICE_NAME }} Web UI by using a command
line client or importing the corresponding library inside your own code.</p>
</div>
</div>
<h2>API details</h2>
{% endblock %}
<p class="dotted">
To use {{ BRANDING_SERVICE_NAME }} via its REST API you will need the following Authentication URL
and API token:<br /><br />
</p>
</div>
<div class="subsection dotted">
{% block page.body.token %}
<h2>API details</h2>
<p>
To use {{ BRANDING_SERVICE_NAME }} via its REST API you will need the following Authentication URL
and API token:<br /><br />
</p>
<div class="token-view">
<div class="detail small clearfix">
<span class="title">Authentication URL</span>
......@@ -67,8 +47,8 @@
<a href="#" class="do">renew token</a>
<a href="#" class="confirm">confirm</a>
<a href="#" class="close">x</a>
<p class="sub">Every time you renew it, make sure to
update the clients you use with the new token.</p>
<p class="sub"><span>Every time you renew it, make sure to
update the clients you use with the new token.</span></p>
</div>
</div>
......@@ -80,7 +60,31 @@
{% endblock %}
</div>
<div class="subsection">
<h2>GENERAL</h2>
{% block page.body.description %}
<div class="two-cols dotted clearfix">
<div class="rt">
<p>
If
you want to learn more about the specification of the REST API itself,
please take a look at the <a href="https://www.synnefo.org/docs"
alt="Synnefo documentation">Synnefo documentation</a>.
</p>
</div>
<div class="lt">
<p>{{ BRANDING_SERVICE_NAME }} provides a complete REST API that allows you to access and
control your virtual resources programmatically. This means you can execute
all the actions you do from the {{ BRANDING_SERVICE_NAME }} Web UI by using a command
line client or importing the corresponding library inside your own code.</p>
</div>
</div>
{% endblock %}
</div>
<div class="two-cols dotted clearfix">
<div class="rt">
......
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