new design for ssh_keys_choice page

hosting/locale/de/LC_MESSAGES/django.po

@@ -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"

hosting/static/hosting/css/user_keys.css

@@ -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 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,76 +151,10 @@ 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;
-}
 .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;
     }
-}}
 }
-}}

hosting/templates/hosting/base_short.html

@@ -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' %}">

hosting/templates/hosting/choice_ssh_keys.html

@@ -3,11 +3,11 @@
 {% block content %}
 <div>
 	<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 %}
             <div class="alert alert-warning">
                 {% for message in messages %}
@@ -16,32 +16,27 @@
             </div>
             {% endif %}
             <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 %}
-                                 <button type="submit" class="btn btn-success choice-button generate-btn">
+                        <button type="submit" class="btn choice-btn">
                             {% trans "Generate"%}
                         </button>
                     </form>
 
                 </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"%}
                         </button>
                     </form>
                 </div>
-
 			</div>
-
-                     <div class="clearfix"></div>
-				</div>
-			</div>
-
 	    </div>
 	</div>