new design for ssh_keys_choice page
This commit is contained in:
ARvind Tiwari
parent
a194bd7d37
commit
f530b879f7
5 changed files with 114 additions and 128 deletions
|
|
@ -8,7 +8,7 @@ msgid ""
|
|||
msgstr ""
|
||||
"Project-Id-Version: PACKAGE VERSION\n"
|
||||
"Report-Msgid-Bugs-To: \n"
|
||||
"POT-Creation-Date: 2017-07-31 19:57+0530\n"
|
||||
"POT-Creation-Date: 2017-08-01 19:01+0530\n"
|
||||
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
|
||||
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
|
||||
"Language-Team: LANGUAGE <LL@li.org>\n"
|
||||
|
|
@ -142,28 +142,36 @@ msgstr "vorherige"
|
|||
msgid "next"
|
||||
msgstr "nächste"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:9
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:8
|
||||
msgid "SSH Key"
|
||||
msgstr "SSH Key"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:10
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:9
|
||||
msgid "Choose a key option in order to access your VM"
|
||||
msgstr "Wähle eine Option um Zugriff auf deine VM zu erhalten"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:20
|
||||
msgid "Generating a new key pair"
|
||||
msgstr "Neuen SSH-Key erstellen"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:21
|
||||
msgid "I want to generate a new key pair"
|
||||
msgstr "Ich möchte einen neuen SSH-Key erstellen"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:24
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:25
|
||||
#: .\hosting\templates\hosting\user_key.html:31
|
||||
msgid "Generate"
|
||||
msgstr "Generieren"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:31
|
||||
msgid "Using existing key"
|
||||
msgstr "Nutzung eines existierenden SSH-Keys"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:32
|
||||
msgid "I want to use my existing public key"
|
||||
msgstr "Ich möchte einen existierenden SSH-Key nutzen"
|
||||
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:34
|
||||
#: .\hosting\templates\hosting\choice_ssh_keys.html:35
|
||||
#, fuzzy
|
||||
#| msgid "Upload Key"
|
||||
msgid "Upload"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,58 @@
|
|||
h2,h3,h4,h5{
|
||||
font-family: 'Lato-Light', sans-serif;
|
||||
/* ssh_keys_choice */
|
||||
.dashboard-choice-container h1 {
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
.dashboard-choice-container .page-header {
|
||||
border: 0;
|
||||
}
|
||||
.dashboard-choice-container .page-header p {
|
||||
font-size: 16px;
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
.dashboard-choice-container h2 {
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.choice-container {
|
||||
border: 1px solid #C9C6C6;
|
||||
padding: 25px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.choice-container p{
|
||||
font-size: 18px;
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
.choice-container-top {
|
||||
border-bottom: 1px solid #C9C6C6;
|
||||
padding-bottom: 25px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.choice-btn {
|
||||
min-width: 100px;
|
||||
margin-top: 25px;
|
||||
background-color: #3C5480;
|
||||
color: #fff;
|
||||
border: 2px solid #3C5480;
|
||||
padding: 4px 10px;
|
||||
transition: 0.3s all ease-out;
|
||||
}
|
||||
.choice-btn:focus,
|
||||
.choice-btn:hover,
|
||||
.choice-btn:active {
|
||||
color: #3C5480;
|
||||
background-color: #fff;
|
||||
}
|
||||
.choice-btn-faded {
|
||||
background-color: #8396C4;
|
||||
border: 2px solid #8396C4;
|
||||
}
|
||||
|
||||
|
||||
.ssh-keys-table thead tr th,
|
||||
.ssh-keys-table tbody tr td{
|
||||
color: #717274;
|
||||
|
|
@ -32,11 +84,7 @@ h2,h3,h4,h5{
|
|||
@media (min-width: 768px) {
|
||||
.ssh-header-container {
|
||||
display: flex;
|
||||
/* flex-direction: row-reverse; */
|
||||
/* vertical-align: middle; */
|
||||
/* align-items: center; */
|
||||
justify-content: space-between;
|
||||
/* text-align: right; */
|
||||
}
|
||||
.ssh-header-container p{
|
||||
margin-bottom: 0;
|
||||
|
|
@ -95,7 +143,7 @@ h2,h3,h4,h5{
|
|||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 360px){
|
||||
@media (max-width: 360px){
|
||||
.content-dashboard {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
|
@ -103,75 +151,9 @@ h2,h3,h4,h5{
|
|||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.col-md-12, .col-sm-12{
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.choice-container{
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.choice-container div{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 49%;
|
||||
}
|
||||
.choice-container div h3{
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
/* text-align: center; */
|
||||
font-family: 'Lato-Light', sans-serif;
|
||||
}
|
||||
.choice-container div h3 img:hover{
|
||||
cursor: pointer;
|
||||
}
|
||||
.choice-container div.choice-container-line{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: #c9c6c6;
|
||||
height: 250px;
|
||||
width:1px;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.choice-container div.choice-container-line{
|
||||
display: none;
|
||||
}
|
||||
.choice-container{
|
||||
flex-direction: column;
|
||||
}
|
||||
.choice-container div{
|
||||
width: 100%;
|
||||
}
|
||||
.choice-container div h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-choice-container {
|
||||
max-width: 834px !important;
|
||||
}
|
||||
.choice-button{
|
||||
width: 172px;
|
||||
height: 42px;
|
||||
border-radius: 0;
|
||||
color: white;
|
||||
margin-top: 70px;
|
||||
font-size: 20px;
|
||||
}
|
||||
@media screen and (max-width: 768px){
|
||||
.choice-button{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
.upload-btn{
|
||||
background-color: #337ab7;
|
||||
max-width: 834px !important;
|
||||
}
|
||||
.form_key_name{
|
||||
width:60%;
|
||||
|
|
@ -277,8 +259,6 @@ h2,h3,h4,h5{
|
|||
.custom_form_button{
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
.form_key_name:focus,
|
||||
.form_public_key:focus,
|
||||
.has-error .form_key_name,
|
||||
|
|
@ -291,8 +271,10 @@ h2,h3,h4,h5{
|
|||
.has-success .form_public_key:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.wide400 {
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
}
|
||||
.mob-only {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -304,9 +286,10 @@ h2,h3,h4,h5{
|
|||
.pc-only {
|
||||
display: none;
|
||||
}
|
||||
.choice-container div h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.choice-button{
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}}
|
||||
}
|
||||
}}
|
||||
}
|
||||
}}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<!-- Custom Fonts -->
|
||||
<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link href="//fonts.googleapis.com/css?family=Lato:300,400,500,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
|
||||
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="{% static 'hosting/css/owl.carousel.min.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">
|
||||
|
|
|
|||
|
|
@ -3,45 +3,40 @@
|
|||
{% block content %}
|
||||
<div>
|
||||
<div class="container virtual-machine-container dashboard-container dashboard-choice-container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="col-sm-12">
|
||||
<h2><i class="fa fa-key" aria-hidden="true"></i> {% trans "SSH Key"%}</h2>
|
||||
<h4>{% trans "Choose a key option in order to access your VM" %}.</h4>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="choice-container">
|
||||
<div class="left-choice-container">
|
||||
<h3>{% trans "I want to generate a new key pair" %}.</h3>
|
||||
<form action="#" method="post">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn btn-success choice-button generate-btn">
|
||||
{% trans "Generate"%}
|
||||
</button>
|
||||
</form>
|
||||
<div class="wide400">
|
||||
<div class="page-header">
|
||||
<h1><i class="fa fa-key" aria-hidden="true"></i> {% trans "SSH Key"%}</h1>
|
||||
<p>{% trans "Choose a key option in order to access your VM" %}.</p>
|
||||
</div>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="choice-container">
|
||||
<div class="choice-container-top">
|
||||
<h2>{% trans "Generating a new key pair" %}</h2>
|
||||
<p>{% trans "I want to generate a new key pair" %}.</p>
|
||||
<form class="text-right" action="" method="post">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn choice-btn">
|
||||
{% trans "Generate"%}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="choice-container-line"></div>
|
||||
<div class="right-choice-container">
|
||||
<h3 class="text-center">{% trans "I want to use my existing public key"%}</h3>
|
||||
<form action="{% url 'hosting:create_ssh_key' %}">
|
||||
<button type="submit" class="btn btn-primary choice-button upload-btn">
|
||||
{% trans "Upload"%}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2>{% trans "Using existing key" %}</h2>
|
||||
<p>{% trans "I want to use my existing public key"%}.</p>
|
||||
<form class="text-right" action="{% url 'hosting:create_ssh_key' %}">
|
||||
<button type="submit" class="btn choice-btn choice-btn-faded">
|
||||
{% trans "Upload"%}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="virtual-machine-container dashboard-container ">
|
||||
<div class="row">
|
||||
<div class="container-table col-md-9 col-md-offset-2">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12">
|
||||
<form method="POST" action="" novalidate class="form-ssh">
|
||||
{% csrf_token %}
|
||||
<h3><i class="fa fa-key fa-separate" aria-hidden="true"></i>{% trans "Add your public SSH key" %}</h3>
|
||||
|
|
|
|||
Loading…
Reference in a new issue