# HG changeset patch # User rougeronj # Date 1416480689 -3600 # Node ID a2a04e7db6802260bc4c027e73617c698ceb6098 # Parent 5c0628ae52be0e599157b7d1d81276ebf2ab0d98 Add help popup to html and css diff -r 5c0628ae52be -r a2a04e7db680 src/hdalab/static/hdalab/css/additionnal_renkan.css --- 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 --------- */ + diff -r 5c0628ae52be -r a2a04e7db680 src/hdalab/templates/renkan_edit.html --- 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 @@ + {% endblock %} {% block js_import %} {{block.super}} - - + + @@ -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"); + }); + } + }); + }); {% endblock %} @@ -148,17 +162,64 @@
{% if 'shape=circle' in switch_shape_url %}{% trans 'See the graph in circle' %}{% else %}{% trans 'See the graph in lines' %}{% endif %} - {% trans 'Need help ?' %} +
-
+ +
-
    -
  • Slide 1
    • -
  • Slide 2
    • -
  • Slide 3
    • -
+ {% trans 'Fermer
ce didacticiel' %} +
    +
  • +
    {% trans 'Aide : Bienvenue !' %}
    +
    +

    {% 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.

    + Vous pouvez déplacer chaque noeud en cliquant dessus et en déplacant votre curseur. + {% endblocktrans %} +

    +
    +
    +

    {% trans 'Légende' %}

    + + + +
    + +
    +

    {% 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 %}

    + +
    +
    • +
  • +
    {% trans 'Aide : Ajouter, Editer, Organiser, Enregistrer !' %}
    +
    +

    {% trans '1. Ajouter' %}

    +

    {% 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.' %}


    + +

    {% 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.' %}

    +
    +
    +

    {% trans '2. Editer et organiser' %}

    +

    {% blocktrans %} + Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.

    + 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 %}

    +
    +
    +

    {% trans '3. Enregistrer' %}

    +

    {% 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.' %}


    + +

    {% trans 'Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.' %}

    +
    +
    • +
+