Merge pull request #575 from datosgobar/558-login-page-styles

558 login page styles

series_tiempo_ar_api/apps/management/admin.py

@@ -55,3 +55,5 @@ class IntegrationTestTaskAdmin(AbstractTaskAdmin):
 admin.site.unregister(RepeatableJob)
 admin.site.register(RepeatableJob, RepeatableJobAdmin)
 admin.site.register(APIIndexingConfig, SingletonAdmin)
+
+admin.site.login_template = 'login.html'

series_tiempo_ar_api/apps/management/static/management/css/global.css

@@ -0,0 +1,5 @@
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }

series_tiempo_ar_api/apps/management/static/management/css/styles.css

@@ -0,0 +1,176 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap");
+header {
+  box-shadow: rgba(0, 0, 0, 0.5) 0 0 12px 0;
+  box-sizing: content-box;
+  color: rgb(0, 0, 0);
+  display: block;
+  font-size: 16px;
+  height: 71.9886px;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 15px;
+  padding-right: 15px;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 4;}
+
+  header img {
+  padding-left: 5%; }
+
+.login {
+  width: 100%;
+  height: 900px;
+  padding-top: 10vh; }
+  .login * {
+    font-family: "Roboto", sans-serif;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: #333333; }
+  .login .l-wrapper {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto; }
+    .login .l-wrapper .head-wrapper {
+      position: relative;
+      margin: 0 auto 50px auto;
+      width: 100%;
+      max-width: 400px;
+      height: 130px;
+    }
+      .login .l-wrapper .head-wrapper img, .login .l-wrapper .head-wrapper h4 {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%); }
+      .login .l-wrapper .head-wrapper img {
+        width: 100%;
+        height: auto;
+        -o-object-fit: contain;
+        object-fit: contain; }
+      .login .l-wrapper .head-wrapper h4 {
+        font-size: 34px;
+        color: #3994f9;
+        text-align: center;
+        width: 600px; }
+      .login .l-wrapper .errornote {
+        width: 100%;
+        max-width: 600px;
+        font-size: 14px;
+        font-weight: 700;
+        display: block;
+        padding: 10px 12px;
+        margin: auto auto 15px auto;
+        color: #ba2121;
+        border: 1px solid #ba2121;
+        border-radius: 4px;
+        background-color: #fff;
+        background-position: 5px 12px; }
+      .login .l-wrapper .head-wrapper p {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        font-weight: 700;
+        font-size: 20px;
+        -webkit-transform: translateX(-50%);
+        -ms-transform: translateX(-50%);
+        transform: translateX(-50%); }
+    .login .l-wrapper p {
+      text-align: center;
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 15px; }
+    .login .l-wrapper form {
+      width: 100%;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 40px 30px 15px 40px;
+      border: 1px solid white;
+      border-radius: 10px;
+      -webkit-box-shadow: 0px 0px 5px #b2b3b2;
+      box-shadow: 0px 0px 5px #b2b3b2; }
+      .login .l-wrapper form label input {
+        outline: none;
+        width: 100%;
+        height: 40px;
+        padding: 0 15px;
+        margin-top: 5px;
+        margin-bottom: 15px;
+        border: 1px solid #b2b3b2;
+        border-radius: 6px; }
+      .login .l-wrapper form label * {
+        display: block; }
+      .login .l-wrapper form table {
+        width: 100%;
+        border: 0;
+        border-collapse: collapse; }
+        .login .l-wrapper form table tr {
+          width: 100%; }
+          .login .l-wrapper form table tr td {
+            position: relative;
+            width: 50%;
+            vertical-align: bottom; }
+            .login .l-wrapper form table tr td:first-child {
+              text-align: left;
+              vertical-align: center; }
+              .login .l-wrapper form table tr td:first-child input {
+                opacity: 0;
+                position: absolute;
+                margin: 0;
+                padding: 0;
+                height: 0;
+                top: 0;
+                left: 0;
+                cursor: pointer; }
+                .login .l-wrapper form table tr td:first-child input:not(:checked) ~ span:after {
+                  position: absolute;
+                  content: '';
+                  width: 15px;
+                  height: 15px;
+                  left: -30px;
+                  top: 0;
+                  background: transparent;
+                  border: 2px solid #3994f9; }
+                .login .l-wrapper form table tr td:first-child input:checked ~ span:after {
+                  position: absolute;
+                  content: '';
+                  width: 15px;
+                  height: 15px;
+                  left: -30px;
+                  top: 0;
+                  background: #3994f9;
+                  border: 2px solid #3994f9; }
+              .login .l-wrapper form table tr td:first-child span {
+                position: relative;
+                display: block;
+                float: left;
+                margin-left: 30px; }
+            .login .l-wrapper form table tr td:last-child {
+              text-align: right; }
+              .login .l-wrapper form table tr td:last-child a:link, .login .l-wrapper form table tr td:last-child a:visited, .login .l-wrapper form table tr td:last-child a:active {
+                text-decoration: none;
+                outline: none;
+                border: 0px;
+                color: #3994f9; }
+              .login .l-wrapper form table tr td:last-child a:hover {
+                color: #0879f8; }
+            .login .l-wrapper form table tr td label {
+              display: block; }
+      .login .l-wrapper form input[type="submit"] {
+        display: block;
+        margin: 30px auto;
+        padding: 10px 15px;
+        cursor: pointer;
+        text-transform: uppercase;
+        color: white;
+        outline: none;
+        border: none;
+        border-radius: 2px;
+        width: auto;
+        background: #3994f9; }
+        .login .l-wrapper form input[type="submit"]:hover {
+          background: #0879f8; }

series_tiempo_ar_api/apps/management/templates/login.html

@@ -0,0 +1,50 @@
+{% load i18n static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" type="text/css" href="{% static 'management/css/global.css' %}"/>
+    <link rel="stylesheet" type="text/css" href="{% static 'management/css/styles.css' %}"/>
+</head>
+
+<header>
+    <img src="{% static 'management/logo-secretaria-header.png' %}"/>
+</header>
+<body>
+<div class="login">
+    <div class="l-wrapper">
+        <div class="head-wrapper">
+            <img src="{% static 'management/series-tiempo.png' %}" alt="">
+            <!-- <h4>Sistema de monitoreo de apertura</h4> -->
+            <!-- <p class="catalog-title">catalog title</p> -->
+        </div>
+        <p>Ingresá a tu cuenta</p>
+        {% if form.errors and not form.non_field_errors %}
+        <p class="errornote">
+        {% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
+        </p>
+        {% endif %}
+
+        {% if form.non_field_errors %}
+        {% for error in form.non_field_errors %}
+        <p class="errornote">
+            {{ error }}
+        </p>
+        {% endfor %}
+        {% endif %}
+        <form action="{{ app_path }}" method="post" id="login-form">
+            {% csrf_token %}
+            <label for="{{ form.username.id_for_label }}">{{form.username.label_tag}}{{ form.username }}
+            <label for="{{ form.password.id_for_label }}">{{form.password.label_tag}}{{ form.password }}
+            <input type="hidden" name="next" value="{{ next }}"/>
+            <input type="submit" value="{% trans 'Log in' %}"/>
+        </form>
+    </div>
+</div>
+</body>
+
+</html>