Split the help popup in antoher html -
Hide the help and the login at the begining so we don't see them while the page is loading -
Minor css update
--- a/src/hdalab/static/hdalab/css/additionnal_renkan.css Fri Jan 09 11:11:51 2015 +0100
+++ b/src/hdalab/static/hdalab/css/additionnal_renkan.css Fri Jan 09 11:51:40 2015 +0100
@@ -33,4 +33,107 @@
.Rk-HdaTags-Search-Icon {
background: url("../img/tag_purple.png") no-repeat 5px 2px;
}
-
+.renkan_help{
+ line-height: 32px;
+ float: right;
+ display: inline-block;
+}
+.renkan_help p {
+ display: inline;
+ font-size: 10px;
+}
+.renkan_help a {
+ display:block;
+}
+.renkan_help ul {
+ text-align: left;
+ display: inline;
+ margin: 0;
+ padding: 10px 2px 10px 0;
+ list-style: none;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
+}
+.renkan_help ul li{
+ z-index: 500;
+ font: bold 12px/18px sans-serif;
+ display: inline-block;
+ margin-right: -4px;
+ position: relative;
+ padding: 5px;
+ background: #fff;
+ cursor: pointer;
+ width:340px;
+ -moz-transition: all 0.2s;
+}
+.renkan_help ul li:hover{
+ background: #555;
+ color:#fff;
+}
+.renkan_help ul li ul {
+ padding: 0;
+ position: absolute;
+ top: 28px;
+ left: 0;
+ width: 100%;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ display: none;
+ opacity: 0;
+ visibility: hidden;
+ -moz-transition: opacity 0.2s;
+}
+.renkan_help ul li ul li {
+ display: block;
+ transition: background-color 0.3s ease 0s;
+}
+.renkan_help ul li:hover ul {
+ display: block;
+ opacity: 1;
+ visibility: visible;
+}
+.renkan_help ul.disable,
+.renkan_help ul.disable li,
+.renkan_help ul.disable li:hover{
+ background: none repeat scroll 0 0 #eeeeee;
+ box-shadow: none;
+ color: #c1c1c1;
+ cursor: default;
+}
+#graph-circle {
+ background: url("../img/graph-circle.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
+}
+#graph-line {
+ background: url("../img/graph-line.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
+}
+#graph-lineH {
+ background: url("../img/graph-lineH.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
+}
+#graph-line:hover a,
+#graph-circle:hover a{
+ color: #4f5451;
+}
+#graph-line:hover,
+#graph-circle:hover
+{
+ background-color: rgb(224,224,224);
+}
+#toggle-help{
+/* position: absolute; */
+ background: url('../img/toggle-help.png') no-repeat right center;
+ background-size: 28px 28px;
+ height: 28px;
+ width: 28px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-left: 20px;
+}
+#dialog-form{
+ display: none;
+}
+#help-container{
+ display: none;
+ padding:10px;
+ background: rgba(221,221,221,0.97);
+ border:none;
+}
\ No newline at end of file
--- a/src/hdalab/static/hdalab/css/renkan_help.css Fri Jan 09 11:11:51 2015 +0100
+++ b/src/hdalab/static/hdalab/css/renkan_help.css Fri Jan 09 11:51:40 2015 +0100
@@ -1,107 +1,6 @@
-.renkan_help{
- line-height: 32px;
- float: right;
- display: inline-block;
-}
-.renkan_help p {
- display: inline;
- font-size: 10px;
-}
-.renkan_help a {
- display:block;
-}
-.renkan_help ul {
- text-align: left;
- display: inline;
- margin: 0;
- padding: 10px 2px 10px 0;
- list-style: none;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
-}
-.renkan_help ul li{
- z-index: 500;
- font: bold 12px/18px sans-serif;
- display: inline-block;
- margin-right: -4px;
- position: relative;
- padding: 5px;
- background: #fff;
- cursor: pointer;
- width:340px;
- -moz-transition: all 0.2s;
-}
-.renkan_help ul li:hover{
- background: #555;
- color:#fff;
-}
-.renkan_help ul li ul {
- padding: 0;
- position: absolute;
- top: 28px;
- left: 0;
- width: 100%;
- -webkit-box-shadow: none;
- -moz-box-shadow: none;
- box-shadow: none;
- display: none;
- opacity: 0;
- visibility: hidden;
- -moz-transition: opacity 0.2s;
-}
-.renkan_help ul li ul li {
- display: block;
- transition: background-color 0.3s ease 0s;
-}
-.renkan_help ul li:hover ul {
- display: block;
- opacity: 1;
- visibility: visible;
-}
-.renkan_help ul.disable,
-.renkan_help ul.disable li,
-.renkan_help ul.disable li:hover{
- background: none repeat scroll 0 0 #eeeeee;
- box-shadow: none;
- color: #c1c1c1;
- cursor: default;
-}
-#graph-circle {
- background: url("../img/graph-circle.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
-}
-#graph-line {
- background: url("../img/graph-line.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
-}
-#graph-lineH {
- background: url("../img/graph-lineH.png") no-repeat scroll right 5px center / 25px 25px #ffffff;
-}
-#graph-line:hover a,
-#graph-circle:hover a{
- color: #4f5451;
-}
-#graph-line:hover,
-#graph-circle:hover
-{
- background-color: rgb(224,224,224);
-}
-#toggle-help{
-/* position: absolute; */
- background: url('../img/toggle-help.png') no-repeat right center;
- background-size: 28px 28px;
- height: 28px;
- width: 28px;
- display: inline-block;
- vertical-align: middle;
- margin-left: 20px;
-}
-
/* #################################################### */
/* -------------------- help Popup -------------------- */
/* #################################################### */
-#help-container{
- padding:10px;
- background: rgba(221,221,221,0.97);
- border:none;
-}
.ui-dialog {
z-index:600;
@@ -221,7 +120,7 @@
height: 31px;
width: 31px;
}
-.img-close{
+#help-slideshow .img-close{
text-align: right;
position:absolute;
right:10px;
@@ -230,7 +129,6 @@
padding-right:40px;
background: url('../img/close.png') no-repeat right center;
background-size: 34px 34px;
-
}
.slideShowTitle{
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/hdalab/templates/help_popup.html Fri Jan 09 11:51:40 2015 +0100
@@ -0,0 +1,46 @@
+{% load static %}
+{% load i18n %}
+
+<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/renkan_help.css' %}" />
+
+<div id="help-slideshow">
+ <a class="img-close" href="#">{% trans 'Fermer<br>ce didacticiel' %}</a>
+ <ul class="bjqs">
+ <li class="slide1">
+ <div class="slideShowTitle">{% trans 'Aide : Bienvenue !' %}</div>
+ <div class="column-left">
+ <p>{% trans 'Cet outil (RENKAN) vous permet de representer, spatialiser et organiser des collections de ressources du portails histoire des arts avec d’autres sites Web.<br><br>Vous pouvez déplacer chaque noeud en cliquant dessus et en déplacant votre curseur.' %}</p>
+ </div>
+ <div class="column-center">
+ <p class="columnTitle">{% trans 'Légende' %}</p>
+ <label class="img-requete">{% trans 'Requête' %}</label>
+ <label class="img-ressource">{% trans 'Ressource' %}</label>
+ <label class="img-tag">{% trans 'Tag' %}</label>
+ </div>
+
+ <div class="column-right">
+ <p>{% trans 'En cliquant sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir, modifier en utilisant le menu circulaire comme ci dessous.' %}</p>
+ <img src="{% static 'hdalab/img/menu.png' %}" class="img-menu">
+ </div>
+ </li>
+ <li class="slide2">
+ <div class="slideShowTitle">{% trans 'Aide : Ajouter, Editer, Organiser, Enregistrer !' %}</div>
+ <div class="column-left">
+ <h1 class="columnTitle">{% trans '1. Ajouter' %}</h1>
+ <p>{% trans 'Une fois ce didacticiel fermer vous pouvez ajouter des ressources en faisant “drag and drop” a partir de n’importe qu’elle fenetre de navigation web.' %}</p><br>
+ <img src="{% static 'hdalab/img/extend.png' %}" class="img-extend" />
+ <p>{% trans 'En cliquant sur l’icone à gauche vous pouvez ouvrir le panel de recherche pour retrouver des ressources du site HDA ou Wikipédia.' %}</p>
+ </div>
+ <div class="column-center">
+ <h1 class="columnTitle">{% trans '2. Editer et organiser' %}</h1>
+ <p>{% blocktrans %}Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br><br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre de texte.{% endblocktrans %}</p>
+ </div>
+ <div class="column-right">
+ <h1 class="columnTitle">{% trans '3. Enregistrer' %}</h1>
+ <p>{% trans 'En cliquant sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir, modifier en utilisant le menu circulaire comme ci dessous.' %}</p><br>
+ <img src="{% static 'hdalab/img/save.png' %}" class="img-save" />
+ <p>{% blocktrans %}Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.{% endblocktrans %}</p>
+ </div>
+ </li>
+ </ul>
+ </div>
\ No newline at end of file
--- a/src/hdalab/templates/renkan_edit.html Fri Jan 09 11:11:51 2015 +0100
+++ b/src/hdalab/templates/renkan_edit.html Fri Jan 09 11:51:40 2015 +0100
@@ -9,7 +9,6 @@
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" />
- <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/renkan_help.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" />
{% endblock %}
@@ -113,12 +112,10 @@
success: function(data, textStatus, jqXHR) {
var d = $(data);
if($(".ok",d).length==1){
+ console.log("ok");
$("#dialog-form").html($(".ok",d)[0]);
$(".hello-user").remove();
$("#nav").append($(".username",d).children());
- //$("#dialog-form .close").click(function(){
- // dialog.dialog( "close" );
- //});
io_options.user_authenticated = true;
$(".Rk-Save-Button").addClass("Rk-Save-Online");
dialog.dialog( "close" );
@@ -209,47 +206,7 @@
</div>
<div id="help-container" class="">
- <div id="help-slideshow">
- <a class="img-close" href="#">{% trans 'Fermer<br>ce didacticiel' %}</a>
- <ul class="bjqs">
- <li class="slide1">
- <div class="slideShowTitle">{% trans 'Aide : Bienvenue !' %}</div>
- <div class="column-left">
- <p>{% trans 'Cet outil (RENKAN) vous permet de representer, spatialiser et organiser des collections de ressources du portails histoire des arts avec d’autres sites Web.<br><br>Vous pouvez déplacer chaque noeud en cliquant dessus et en déplacant votre curseur.' %}</p>
- </div>
- <div class="column-center">
- <p class="columnTitle">{% trans 'Légende' %}</p>
- <label class="img-requete">{% trans 'Requête' %}</label>
- <label class="img-ressource">{% trans 'Ressource' %}</label>
- <label class="img-tag">{% trans 'Tag' %}</label>
- </div>
-
- <div class="column-right">
- <p>{% trans 'En cliquant sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir, modifier en utilisant le menu circulaire comme ci dessous.' %}</p>
- <img src="{% static 'hdalab/img/menu.png' %}" class="img-menu">
- </div>
- </li>
- <li class="slide2">
- <div class="slideShowTitle">{% trans 'Aide : Ajouter, Editer, Organiser, Enregistrer !' %}</div>
- <div class="column-left">
- <h1 class="columnTitle">{% trans '1. Ajouter' %}</h1>
- <p>{% trans 'Une fois ce didacticiel fermer vous pouvez ajouter des ressources en faisant “drag and drop” a partir de n’importe qu’elle fenetre de navigation web.' %}</p><br>
- <img src="{% static 'hdalab/img/extend.png' %}" class="img-extend" />
- <p>{% trans 'En cliquant sur l’icone à gauche vous pouvez ouvrir le panel de recherche pour retrouver des ressources du site HDA ou Wikipédia.' %}</p>
- </div>
- <div class="column-center">
- <h1 class="columnTitle">{% trans '2. Editer et organiser' %}</h1>
- <p>{% blocktrans %}Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br><br>Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre de texte.{% endblocktrans %}</p>
- </div>
- <div class="column-right">
- <h1 class="columnTitle">{% trans '3. Enregistrer' %}</h1>
- <p>{% trans 'En cliquant sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir, modifier en utilisant le menu circulaire comme ci dessous.' %}</p><br>
- <img src="{% static 'hdalab/img/save.png' %}" class="img-save" />
- <p>{% blocktrans %}Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.{% endblocktrans %}</p>
- </div>
- </li>
- </ul>
- </div>
+ {% include 'help_popup.html' %}
</div>
<div class="rnk-wrapper">