From f530b879f7be6284a84ab37db71057ca0c816393 Mon Sep 17 00:00:00 2001 From: ARvind Tiwari Date: Tue, 1 Aug 2017 19:05:52 +0530 Subject: [PATCH] new design for ssh_keys_choice page --- hosting/locale/de/LC_MESSAGES/django.po | 18 ++- hosting/static/hosting/css/user_keys.css | 151 ++++++++---------- hosting/templates/hosting/base_short.html | 2 +- .../templates/hosting/choice_ssh_keys.html | 69 ++++---- hosting/templates/hosting/user_key.html | 2 +- 5 files changed, 114 insertions(+), 128 deletions(-) diff --git a/hosting/locale/de/LC_MESSAGES/django.po b/hosting/locale/de/LC_MESSAGES/django.po index 6b50f62d..ea3d682e 100644 --- a/hosting/locale/de/LC_MESSAGES/django.po +++ b/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 \n" "Language-Team: LANGUAGE \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" diff --git a/hosting/static/hosting/css/user_keys.css b/hosting/static/hosting/css/user_keys.css index ac903182..8ad6382f 100644 --- a/hosting/static/hosting/css/user_keys.css +++ b/hosting/static/hosting/css/user_keys.css @@ -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; } -} -}} -} -}} -} -}} \ No newline at end of file + .choice-container div h3 { + font-size: 16px; + } + .choice-button{ + margin-top: 20px; + } +} \ No newline at end of file diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html index d1fc9887..368c2b6a 100644 --- a/hosting/templates/hosting/base_short.html +++ b/hosting/templates/hosting/base_short.html @@ -28,7 +28,7 @@ - + diff --git a/hosting/templates/hosting/choice_ssh_keys.html b/hosting/templates/hosting/choice_ssh_keys.html index dd0335c8..44ddfebb 100644 --- a/hosting/templates/hosting/choice_ssh_keys.html +++ b/hosting/templates/hosting/choice_ssh_keys.html @@ -3,45 +3,40 @@ {% block content %}
-
-
-
-

 {% trans "SSH Key"%}

-

{% trans "Choose a key option in order to access your VM" %}.

- {% if messages %} -
- {% for message in messages %} - {{ message }} - {% endfor %} -
- {% endif %} -
-
-

{% trans "I want to generate a new key pair" %}.

-
- {% csrf_token %} - -
+
+
+

 {% trans "SSH Key"%}

+

{% trans "Choose a key option in order to access your VM" %}.

+
+ {% if messages %} +
+ {% for message in messages %} + {{ message }} + {% endfor %} +
+ {% endif %} +
+
+

{% trans "Generating a new key pair" %}

+

{% trans "I want to generate a new key pair" %}.

+
+ {% csrf_token %} + +
-
-
-
-

{% trans "I want to use my existing public key"%}

-
- -
-
- -
- -
-
+
+
+

{% trans "Using existing key" %}

+

{% trans "I want to use my existing public key"%}.

+
+ +
+
-
diff --git a/hosting/templates/hosting/user_key.html b/hosting/templates/hosting/user_key.html index 9b54499f..fcf22888 100644 --- a/hosting/templates/hosting/user_key.html +++ b/hosting/templates/hosting/user_key.html @@ -5,7 +5,7 @@
-
+
{% csrf_token %}

{% trans "Add your public SSH key" %}