sanghee/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

new design for ssh_keys_choice page

Browse source
This commit is contained in:
ARvind Tiwari 2017-08-01 19:05:52 +05:30
parent a194bd7d37
commit f530b879f7
5 changed files with 114 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
hosting/locale/de/LC_MESSAGES/django.po
View file

@ -8,7 +8,7 @@ msgid ""
msgstr "" msgstr ""
"Project-Id-Version: PACKAGE VERSION\n" "Project-Id-Version: PACKAGE VERSION\n"
"Report-Msgid-Bugs-To: \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" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n" "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
"Language-Team: LANGUAGE <LL@li.org>\n" "Language-Team: LANGUAGE <LL@li.org>\n"
@ -142,28 +142,36 @@ msgstr "vorherige"
msgid "next" msgid "next"
msgstr "nächste" msgstr "nächste"
#: .\hosting\templates\hosting\choice_ssh_keys.html:9 #: .\hosting\templates\hosting\choice_ssh_keys.html:8
msgid "SSH Key" msgid "SSH Key"
msgstr "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" msgid "Choose a key option in order to access your VM"
msgstr "Wähle eine Option um Zugriff auf deine VM zu erhalten" msgstr "Wähle eine Option um Zugriff auf deine VM zu erhalten"
#: .\hosting\templates\hosting\choice_ssh_keys.html:20 #: .\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" msgid "I want to generate a new key pair"
msgstr "Ich möchte einen neuen SSH-Key erstellen" 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 #: .\hosting\templates\hosting\user_key.html:31
msgid "Generate" msgid "Generate"
msgstr "Generieren" msgstr "Generieren"
#: .\hosting\templates\hosting\choice_ssh_keys.html:31 #: .\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" msgid "I want to use my existing public key"
msgstr "Ich möchte einen existierenden SSH-Key nutzen" 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 #, fuzzy
#| msgid "Upload Key" #| msgid "Upload Key"
msgid "Upload" msgid "Upload"

147
hosting/static/hosting/css/user_keys.css
View file

@ -1,6 +1,58 @@
h2,h3,h4,h5{ /* ssh_keys_choice */
font-family: 'Lato-Light', sans-serif; .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 thead tr th,
.ssh-keys-table tbody tr td{ .ssh-keys-table tbody tr td{
color: #717274; color: #717274;
@ -32,11 +84,7 @@ h2,h3,h4,h5{
@media (min-width: 768px) { @media (min-width: 768px) {
.ssh-header-container { .ssh-header-container {
display: flex; display: flex;
/* flex-direction: row-reverse; */
/* vertical-align: middle; */
/* align-items: center; */
justify-content: space-between; justify-content: space-between;
/* text-align: right; */
} }
.ssh-header-container p{ .ssh-header-container p{
margin-bottom: 0; margin-bottom: 0;
@ -95,7 +143,7 @@ h2,h3,h4,h5{
padding-right: 5px; padding-right: 5px;
} }
} }
@media screen and (max-width: 360px){ @media (max-width: 360px){
.content-dashboard { .content-dashboard {
width: 100% !important; width: 100% !important;
} }
@ -103,75 +151,9 @@ h2,h3,h4,h5{
padding-right: 5px; padding-right: 5px;
padding-left: 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 { .dashboard-choice-container {
max-width: 834px !important; 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;
} }
.form_key_name{ .form_key_name{
width:60%; width:60%;
@ -277,8 +259,6 @@ h2,h3,h4,h5{
.custom_form_button{ .custom_form_button{
border-radius: 0; border-radius: 0;
} }
.form_key_name:focus, .form_key_name:focus,
.form_public_key:focus, .form_public_key:focus,
.has-error .form_key_name, .has-error .form_key_name,
@ -291,8 +271,10 @@ h2,h3,h4,h5{
.has-success .form_public_key:focus { .has-success .form_public_key:focus {
box-shadow: none; box-shadow: none;
} }
.wide400 {
max-width: 400px;
margin: auto;
}
.mob-only { .mob-only {
display: none; display: none;
} }
@ -304,9 +286,10 @@ h2,h3,h4,h5{
.pc-only { .pc-only {
display: none; display: none;
} }
.choice-container div h3 {
font-size: 16px;
}
.choice-button{
margin-top: 20px;
}
} }
}}
}
}}
}
}}

2
hosting/templates/hosting/base_short.html
View file

@ -28,7 +28,7 @@
<!-- Custom Fonts --> <!-- Custom Fonts -->
<link href='//fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> <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 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="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.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}"> <link rel="stylesheet" href="{% static 'hosting/css/owl.theme.default.min.css' %}">

35
hosting/templates/hosting/choice_ssh_keys.html
View file

@ -3,11 +3,11 @@
{% block content %} {% block content %}
<div> <div>
<div class="container virtual-machine-container dashboard-container dashboard-choice-container"> <div class="container virtual-machine-container dashboard-container dashboard-choice-container">
<div class="row"> <div class="wide400">
<div class="col-md-12"> <div class="page-header">
<div class="col-sm-12"> <h1><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "SSH Key"%}</h1>
<h2><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "SSH Key"%}</h2> <p>{% trans "Choose a key option in order to access your VM" %}.</p>
<h4>{% trans "Choose a key option in order to access your VM" %}.</h4> </div>
{% if messages %} {% if messages %}
<div class="alert alert-warning"> <div class="alert alert-warning">
{% for message in messages %} {% for message in messages %}
@ -16,32 +16,27 @@
</div> </div>
{% endif %} {% endif %}
<div class="choice-container"> <div class="choice-container">
<div class="left-choice-container"> <div class="choice-container-top">
<h3>{% trans "I want to generate a new key pair" %}.</h3> <h2>{% trans "Generating a new key pair" %}</h2>
<form action="#" method="post"> <p>{% trans "I want to generate a new key pair" %}.</p>
<form class="text-right" action="" method="post">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-success choice-button generate-btn"> <button type="submit" class="btn choice-btn">
{% trans "Generate"%} {% trans "Generate"%}
</button> </button>
</form> </form>
</div> </div>
<div class="choice-container-line"></div> <div>
<div class="right-choice-container"> <h2>{% trans "Using existing key" %}</h2>
<h3 class="text-center">{% trans "I want to use my existing public key"%}</h3> <p>{% trans "I want to use my existing public key"%}.</p>
<form action="{% url 'hosting:create_ssh_key' %}"> <form class="text-right" action="{% url 'hosting:create_ssh_key' %}">
<button type="submit" class="btn btn-primary choice-button upload-btn"> <button type="submit" class="btn choice-btn choice-btn-faded">
{% trans "Upload"%} {% trans "Upload"%}
</button> </button>
</form> </form>
</div> </div>
</div> </div>
<div class="clearfix"></div>
</div>
</div>
</div> </div>
</div> </div>