--- a/src/hdalab/static/hdalab/css/additionnal_renkan.css Thu Nov 20 11:51:09 2014 +0100
+++ b/src/hdalab/static/hdalab/css/additionnal_renkan.css Thu Nov 20 11:51:29 2014 +0100
@@ -32,49 +32,188 @@
.Rk-HdaTags-Search-Icon {
background: url("../img/tag_purple.png") no-repeat 5px 2px;
}
-/* help */
+
+/* -------- help Popup -------- */
.renkan_help{
- font-size: 12px;
- height: 15px;
- margin-bottom: 10px;
- width: 100%;
+ display: inline;
+ line-height: 38px;
}
+
#toggle-help{
float: right;
+ background: url('../img/toggle-help.png') no-repeat right center;
+ height: 32px;
+ width: 32px;
}
+
#help-container{
- display: none;
- height: 360px;
+ padding:10px;
+ background: rgba(221,221,221,0.97);
+ border:none;
+}
+
+.ui-dialog {
+ border:none;
+ padding:0px;
+ border-radius:0px;
+ box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
+}
+
+.ui-dialog-titlebar-close,
+.ui-dialog-titlebar{
+ display:none;
+}
+
+.ui-widget-content{
+ background: transparent;
+}
+
+.column-left,
+.column-right,
+.column-center{
+ font-family: Arial;
+ font-size: 11pt;
+ display: list-item;
+}
+
+.slides{
+ list-style:none;
}
-#help-slideshow{
- height: 320px;
+
+.slides li{
+ display:none;
+}
+
+.slides li current{
+ display:initial;
+}
+
+/* --- Slide1 --- */
+li.slide1 .column-left,
+li.slide1 .column-right,
+li.slide1 .column-center{
+ margin-right:50px;
}
-ul.bjqs-controls.v-centered li a{
- display:block;
- padding:10px;
- background:#fff;
- color:#000;
- text-decoration: none;
+
+li.slide1 .column-left{
+ float: left;
+ width: 30%;
+ margin-top:5px;
+}
+li.slide1 .column-right{
+ float: right;
+ width: 30%;
+ padding-right: 60px;
+ margin-top:5px;
+}
+li.slide1 .column-center{
+ display: inline-block;
+ width: 10%;;
+}
+
+/* --- Slide2 --- */
+li.slide2
+.column-left,
+.column-right,
+.column-center{
+ margin-right:20px;
}
-ul.bjqs-controls.v-centered li a:hover{
- background:#000;
- color:#fff;
+li.slide2 .column-left{
+ float: left;
+ width: 30%;
+}
+li.slide2 .column-right{
+ float: right;
+ width: 30%;
+ padding-right:20px;
+}
+li.slide2 .column-center{
+ display: inline-block;
+ width: 30%;
+}
+
+
+.img-requete,
+.img-ressource,
+.img-tag{
+ line-height: 39px;
+ display: list-item;
+ padding-left: 55px;
+ background-repeat: no-repeat;
+ margin-bottom: 25px;
}
-ol.bjqs-markers li a{
- padding:5px 10px;
- background:#000;
- color:#fff;
- margin:5px;
- text-decoration: none;
+.img-requete{
+ background-image: url("../img/requete.png");
+ background-size: 39px 39px;
+}
+.img-ressource{
+ background-image: url("../img/ressource.png");
+ margin-left:2px;
+ background-size: 35px 35px;
+}
+.img-tag{
+ background-image: url("../img/tag.png");
+ background-size: 39px 39px;
+}
+.img-menu{
+ size:201px 103px;
+ margin-top:20px;
+}
+.img-save,
+.img-extend{
+ margin-right: 7px;
+ padding-top: 3px;
+ float:left;
+ height: 31px;
+ width: 31px;
+}
+.img-close{
+ text-align: right;
+ position:absolute;
+ right:10px;
+ top:10px;
+ height: 34px;
+ padding-right:40px;
+ background: url('../img/close.png') no-repeat right center;
+ background-size: 34px 34px;
+
}
-ol.bjqs-markers li.active-marker a,
-ol.bjqs-markers li a:hover{
- background: #999;
+.slideShowTitle{
+ font-family: "Helvetica Neue";
+ font-size: 26pt;
+ font-stretch: condensed;
+ margin-bottom: 10px;
+}
+
+.columnTitle{
+ font-family: Helvetica Neue;
+ font-stretch: condensed;
+ font-size: 17pt;
+ margin-top: 0px;
+ margin-bottom: 10px;
}
-p.bjqs-caption{
- background: rgba(255,255,255,0.5);
-}
\ No newline at end of file
+ul.bjqs-controls li.bjqs-next a{
+ text-align: right;
+ position:absolute;
+ right:10px;
+ bottom:10px;
+ height: 34px;
+ vertical-align: middle;
+ padding-right:40px;
+ background: url('../img/arrow-right.png') no-repeat;
+ background-size: 34px 34px;
+ right:10px;
+}
+ul.bjqs-controls li.bjqs-prev a{
+ display: none;
+}
+
+ul.bjqs-controls li a:hover{
+}
+
+/* --------- Fin Help Popup --------- */
+
--- a/src/hdalab/templates/renkan_edit.html Thu Nov 20 11:51:09 2014 +0100
+++ b/src/hdalab/templates/renkan_edit.html Thu Nov 20 11:51:29 2014 +0100
@@ -9,14 +9,15 @@
<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/help-popup.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" />
{% endblock %}
{% block js_import %}
{{block.super}}
<script src="{% static 'hdalab/lib/bjqs-1.3.min.js' %}"></script>
- <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script>
- <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script>
+ <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script>
+ <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script>
<script src="{% static 'renkanmanager/lib/underscore-min.js' %}"></script>
<script src="{% static 'renkanmanager/lib/backbone.js' %}"></script>
<script src="{% static 'renkanmanager/lib/backbone-relational.js' %}"></script>
@@ -79,13 +80,13 @@
$(function() {
var form;
-
+
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
- });
+ });
function manageLoginForm(e, form){
e.preventDefault();
@@ -118,26 +119,39 @@
});
}
- form = dialog.find( "form" ).on( "submit", function( event ) {
- manageLoginForm(event, this);
- });
-
- // Slider init
- $('#help-slideshow').bjqs({
- animtype: 'slide',
- height: 320,
- width: 960,
- showcontrols: true,
- nexttext: "{% trans 'Next' %}",
- prevtext: "{% trans 'Previous' %}",
- showmarkers : true,
- centermarkers : true,
- automatic: false
- });
- $("#toggle-help").click(function(){
- $('#help-container').toggle();
- });
- });
+ form = dialog.find( "form" ).on( "submit", function( event ) {
+ manageLoginForm(event, this);
+ });
+
+ //help dialog init
+ var help_dialog = $( "#help-container" ).dialog({
+ autoOpen: false,
+ height: 330,
+ width: 880,
+ resizable: false,
+ draggable: false,
+ create: function (event, ui) {
+ var help_slideshow = $('#help-slideshow').bjqs({
+ responsive:false,
+ height: 320,
+ width: 870,
+ animtype: 'slide',
+ showcontrols: true,
+ centercontrols: false,
+ nexttext: "",
+ showmarkers : false,
+ automatic: false
+ });
+
+ $("#toggle-help").click(function(){
+ help_dialog.dialog("open");
+ });
+ $(".img-close").click(function(){
+ help_dialog.dialog("close");
+ });
+ }
+ });
+ });
</script>
{% endblock %}
@@ -148,17 +162,64 @@
</div>
<div class="renkan_help">
<span id="circle-shape"><a href="{{ switch_shape_url }}">{% if 'shape=circle' in switch_shape_url %}{% trans 'See the graph in circle' %}{% else %}{% trans 'See the graph in lines' %}{% endif %}</a></span>
- <span id="toggle-help" class="hand">{% trans 'Need help ?' %}</span>
+ <a id="toggle-help" href="#"></a>
</div>
-<div id="help-container">
+
+<div id="help-container" class="">
<div id="help-slideshow">
- <ul class="bjqs">
- <li>Slide 1</li>
- <li>Slide 2</li>
- <li>Slide 3</li>
- </ul>
+ <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>{% blocktrans %}
+ 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.
+ {% endblocktrans %}
+ </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>{% blocktrans %}
+ En cliquand sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir,
+ modifier en utilisant le menu circulaire comme ci dessous.
+ {% endblocktrans %}</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 sur 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>{% trans 'Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.' %}</p>
+ </div>
+ </li>
+ </ul>
</div>
</div>
+
<div class="rnk-wrapper">
<div class="rnk-container">
<div id="renkan"></div>