From b9ab4b1655e21c5e611e3a9d2f965a9c91cb88e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Mon, 2 Jun 2014 15:52:05 +0200
Subject: [PATCH] relayout login page

---
 univcloud/static/css/style.css              | 97 ++++++++++++++++++++++++-----
 univcloud/static/js/univcloud.js            |  9 +++
 univcloud/templates/registration/login.html | 18 ++++--
 univcloud/templates/univcloud/base.html     |  2 +-
 4 files changed, 103 insertions(+), 23 deletions(-)

diff --git a/univcloud/static/css/style.css b/univcloud/static/css/style.css
index 6678eed..c1e30e5 100644
--- a/univcloud/static/css/style.css
+++ b/univcloud/static/css/style.css
@@ -72,6 +72,10 @@ ul li.dark-bg h2 {
   position: relative;
 }
 
+#wrap.login-page {
+	width: 100%;
+}
+
 #logout {
   position: absolute;
   right: 0;
@@ -223,15 +227,31 @@ iframe {
 }
 
 #login {
-  float: right;
+  position: absolute;
+  top: 0px;
+  right: 0px;
   /* background: #f5f5f5; */
-  width: 40%;
-  padding: 5px 10px 15px 10px;
-  margin-top: 2%;
+  width: 30%;
+  min-width: 300px;
+  padding: 5px 0px 15px 10px;
+  margin-top: 24px;
   border-radius: 0px;
   /* box-shadow: 0 0 5px black; */
 }
 
+#login h2 {
+        margin-top: 0;
+        text-align: right;
+        margin-right: 10px;
+}
+
+#login form {
+        z-index: 1000;
+        background: #001c3a;
+        display: none;
+        padding: 10px 0 0 10px;
+}
+
 #login label {
   display: inline-block;
   width: 10em;
@@ -239,6 +259,13 @@ iframe {
 
 #login input.submit {
   float: right;
+  background: white;
+  border: 0;
+  padding: 5px;
+  position: relative;
+  right: -3px;
+  top: 3px;
+  font-size: 150%;
 }
 
 .close {
@@ -285,30 +312,67 @@ li.dark-bg:hover .close {
   height: 700px;
 }
 
+#favourite-idps {
+	margin: 0;
+	padding: 0;
+        height: 50px;
+}
+
+#favourite-idps li {
+	display: block;
+	width: 25%;
+	height: 50px;
+	float: left;
+	margin: 0;
+	padding: 0;
+	text-align: center;
+}
+
+#favourite-idps li:nth-child(1) { background: #008ba5; }
+#favourite-idps li:nth-child(2) { background: #583ab3; }
+#favourite-idps li:nth-child(3) { background: #2476eb; }
+#favourite-idps li:nth-child(4) { background: white; }
+
+#favourite-idps li a {
+	padding: 10px;
+	display: block;
+	text-decoration: none;
+	border: none;
+}
+
+#favourite-idps li:nth-child(4) a { color: black; font-size: 300%; padding: 0;}
+
 #idplist {
-  float: left;
-  width: 35%;
-  height: 100%;
-  background-color: #f5f5f5;
+  height: 9em;
+  background-color: white;
   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
   box-shadow: 0 0 5px black;
 }
 
-#idplist ul {
-  height: 90%;
+#idplist ul#idps {
+  display: none;
   overflow-y: scroll;
   overflow-x: hidden;
-  white-space: nowrap;
+  height: 400px;
+  position: absolute;
+  background: white;
+  z-index: 10000;
 }
 
-#idplist ul li {
+#idplist ul#idps li {
   list-style-type: none;
   margin-left: -30px;
+
+  display: block;
+  width: 24%;
+  float: left;
+  padding: 1ex;
+  white-space: normal;
 }
 
-#idplist ul li a {
+#idplist ul#idps li a {
   color: black;
   border-bottom: 0;
 }
@@ -317,14 +381,13 @@ input#search {
   margin: 10px 10px;
   height: 1.5em;
   font-size: 1.2em;
-  width: 90%;
+  width: calc(100% - 20px);
+  border: none;
 }
 
 #map {
-  float: right;
-  width: 63%;
+  width: 100%;
   height: 100%;
-  box-shadow: 0 0 5px black;
 }
 
 div.gridster > ul > li.dragging {
diff --git a/univcloud/static/js/univcloud.js b/univcloud/static/js/univcloud.js
index 27e7c5a..481397b 100644
--- a/univcloud/static/js/univcloud.js
+++ b/univcloud/static/js/univcloud.js
@@ -69,6 +69,11 @@ map.on('mousedown click popupclose', noRedirect);
 function refreshmarkers() {
 	var listItems = $('ul#idps').children();
 	var searchValue = $('input#search').val().toLowerCase();
+	if (searchValue === '') {
+		$('#idps').hide();
+	} else {
+		$('#idps').show();
+	}
 	var new_markers = new Array();
 	for ( var i = listItems.length - 1; i >= 0; i-- ) {
 		item = $(listItems[i]);
@@ -167,4 +172,8 @@ $('ul#idps').on('keydown', function(e) {
 	};
 });
 
+$('#others').click(function() {
+	$('#idps').toggle();
+});
+
 });
diff --git a/univcloud/templates/registration/login.html b/univcloud/templates/registration/login.html
index 276bbac..34a93c5 100644
--- a/univcloud/templates/registration/login.html
+++ b/univcloud/templates/registration/login.html
@@ -12,7 +12,7 @@
 {% endblock %}
 
 {% block wrapper %}
-<div id="wrap">
+<div id="wrap" class="login-page">
 {% endblock %}
 
 {% block user-links %}
@@ -22,7 +22,13 @@
 
 <div id="map-and-idplist">
 <div id="idplist">
-  <input type="text" id="search" x-webkit-speech speech>
+  <input type="text" id="search" placeholder="Recherchez votre établissement d'origine ou cliquez sur le bouton ⋯ pour une liste complète" x-webkit-speech speech>
+  <ul id="favourite-idps">
+    <li><a href="#">Université de Paris 3 - Sorbonne Nouvelle ***TEST***</a></li>
+    <li><a href="#">Montpellier Supagro</a></li>
+    <li><a href="#">École central de Nantes</a></li>
+    <li id="others"><a href="#">⋯</a></li>
+  </ul>
   <ul id="idps">
   {% include "univcloud/idplist.html" %}
   </ul>
@@ -30,15 +36,16 @@
 <div id="map"></div>
 </div>
 
-<div id="login">
+<div id="login" style="display: none;">
+
+        <h2 onclick="$('#login form').toggle();">Connexion locale</h2>
 
-<h2>Connexion locale</h2>
+<form method="post" id="login-form" action="{% url 'django.contrib.auth.views.login' %}">
 
 {% if form.errors %}
 <p>{% trans 'Mot de passe incorrect.' %}</p>
 {% endif %}
 
-<form method="post" id="login-form" action="{% url 'django.contrib.auth.views.login' %}">
 {% csrf_token %}
 
 <p>
@@ -52,6 +59,7 @@
 
 <input type="submit" value="Se connecter" class="submit login" />
 <input type="hidden" name="next" value="{{ next }}" />
+<br style="clear: both;"/>
 </form>
 
 </div>
diff --git a/univcloud/templates/univcloud/base.html b/univcloud/templates/univcloud/base.html
index 638b8f1..3a26c0c 100644
--- a/univcloud/templates/univcloud/base.html
+++ b/univcloud/templates/univcloud/base.html
@@ -18,7 +18,7 @@
   {% endblock %}
     {% if not popup %}
     <div id="header">
-      <h1>Portail des services UnivCloud</h1>
+      <h1>Accès eduspot</h1>
       <a href="#" id="portal">Retour au portail</a>
       <a href="/accounts/logout" id="logout">Déconnexion</a>
     </div>
-- 
2.0.0