Hide poll hint into a modal

locale/de.json

@@ -37,6 +37,7 @@
         "Link": "Link",
         "Search": "Suche",
         "Creation date:": "Erstellungsdatum:",
+        "Caption": "Bildunterschrift",
         "ASTERISK": "*"
     },
     "Date": {

locale/en.json

@@ -37,6 +37,7 @@
     "Link": "Link",
     "Search": "Search",
     "Creation date:": "Creation date:",
+    "Caption": "Caption",
     "ASTERISK": "*"
   },
   "Date" : {

locale/es.json

@@ -37,6 +37,7 @@
         "Link": "ES_Lien",
         "Search": "Búsqueda",
         "Creation date:": "ES_Date de création :",
+        "Caption": "Leyenda",
         "ASTERISK": "*"
     },
     "Date": {

locale/fr.json

@@ -37,6 +37,7 @@
     "Link": "Lien",
     "Search": "Chercher",
     "Creation date:": "Date de création :",
+    "Caption": "Légende",
     "ASTERISK": "*"
   },
   "Date": {

locale/it.json

@@ -37,6 +37,7 @@
     "Link": "Link",
     "Search": "IT_Chercher",
     "Creation date:": "IT_Date de création :",
+    "Caption": "Titolo",
     "ASTERISK": "*"
   },
   "Date": {

tpl/part/poll_hint.tpl

@@ -1,11 +1,35 @@
-{if $active}
+<div id="hint_modal" class="modal fade">
-    <div class="alert alert-info">
+    <div class="modal-dialog modal-lg">
-        <p>{__('studs', 'If you want to vote in this poll, you have to give your name, choose the values that fit best for you and validate with the plus button at the end of the line.')}</p>
+        <div class="modal-content">
-        <p aria-hidden="true"><b>{__('Generic', 'Legend:')}</b> <span class="glyphicon glyphicon-ok"></span> = {__('Generic', 'Yes')}, <b>(<span class="glyphicon glyphicon-ok"></span>)</b> = {__('Generic', 'Ifneedbe')}, <span class="glyphicon glyphicon-ban-circle"></span> = {__('Generic', 'No')}</p>
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+                <h4 class="modal-title">{__('Generic', 'Caption')}</h4>
+            </div>
+            <div class="modal-body">
+                {if $active}
+                    <div class="alert alert-info">
+                        <p>{__('studs', 'If you want to vote in this poll, you have to give your name, choose the values that fit best for you and validate with the plus button at the end of the line.')}</p>
+
+                        <p aria-hidden="true"><b>{__('Generic', 'Legend:')}</b> <span
+                                    class="glyphicon glyphicon-ok"></span>
+                            = {__('Generic', 'Yes')}, <b>(<span class="glyphicon glyphicon-ok"></span>)</b>
+                            = {__('Generic', 'Ifneedbe')}, <span class="glyphicon glyphicon-ban-circle"></span>
+                            = {__('Generic', 'No')}</p>
+                    </div>
+                {else}
+                    <div class="alert alert-danger">
+                        <p>{__('studs', 'POLL_LOCKED_WARNING')}</p>
+
+                        <p aria-hidden="true"><b>{__('Generic', 'Legend:')}</b> <span
+                                    class="glyphicon glyphicon-ok"></span>
+                            = {__('Generic', 'Yes')}, <b>(<span class="glyphicon glyphicon-ok"></span>)</b>
+                            = {__('Generic', 'Ifneedbe')}, <span class="glyphicon glyphicon-ban-circle"></span>
+                            = {__('Generic', 'No')}</p>
+                    </div>
+                {/if}
+            </div>
+        </div>
     </div>
-{else}
+</div>
-    <div class="alert alert-danger">
-        <p>{__('studs', 'POLL_LOCKED_WARNING')}</p>
-        <p aria-hidden="true"><b>{__('Generic', 'Legend:')}</b> <span class="glyphicon glyphicon-ok"></span> = {__('Generic', 'Yes')}, <b>(<span class="glyphicon glyphicon-ok"></span>)</b> = {__('Generic', 'Ifneedbe')}, <span class="glyphicon glyphicon-ban-circle"></span> = {__('Generic', 'No')}</p>
-    </div>
-{/if}

tpl/part/poll_hint_admin.tpl

@@ -1,7 +1,34 @@
-<div class="alert alert-info">
+<div id="hint_modal" class="modal fade">
-    <p>{__('adminstuds', 'As poll administrator, you can change all the lines of this poll with this button')} <span class="glyphicon glyphicon-pencil"></span><span class="sr-only">{__('Generic', 'Edit')}</span>,
+    <div class="modal-dialog modal-lg">
-        {__('adminstuds', 'remove a column or a line with')} <span class="glyphicon glyphicon-remove text-danger"></span><span class="sr-only">{__('Generic', 'Remove')}</span>
+        <div class="modal-content">
-        {__('adminstuds', 'and add a new column with')} <span class="glyphicon glyphicon-plus text-success"></span><span class="sr-only">{__('adminstuds', 'Add a column')}</span>.</p>
+            <div class="modal-header">
-    <p>{__('adminstuds', 'Finally, you can change the informations of this poll like the title, the comments or your email address.')}</p>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-    <p aria-hidden="true"><strong>{__('Generic', 'Legend:')}</strong> <span class="glyphicon glyphicon-ok"></span> = {__('Generic', 'Yes')}, <b>(<span class="glyphicon glyphicon-ok"></span>)</b> = {__('Generic', 'Ifneedbe')}, <span class="glyphicon glyphicon-ban-circle"></span> = {__('Generic', 'No')}</p>
+                    <span aria-hidden="true">&times;</span>
-</div>
+                </button>
+                <h4 class="modal-title">{__('Generic', 'Caption')}</h4>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-info">
+                    <p>{__('adminstuds', 'As poll administrator, you can change all the lines of this poll with this button')}
+                        <span class="glyphicon glyphicon-pencil"></span><span
+                                class="sr-only">{__('Generic', 'Edit')}</span>,
+                        {__('adminstuds', 'remove a column or a line with')} <span
+                                class="glyphicon glyphicon-remove text-danger"></span><span
+                                class="sr-only">{__('Generic', 'Remove')}</span>
+                        {__('adminstuds', 'and add a new column with')} <span
+                                class="glyphicon glyphicon-plus text-success"></span><span
+                                class="sr-only">{__('adminstuds', 'Add a column')}</span>.</p>
+
+                    <p>{__('adminstuds', 'Finally, you can change the informations of this poll like the title, the comments or your email address.')}</p>
+
+                    <p aria-hidden="true"><strong>{__('Generic', 'Legend:')}</strong> <span
+                                class="glyphicon glyphicon-ok"></span> = {__('Generic', 'Yes')}, <b>(<span
+                                    class="glyphicon glyphicon-ok"></span>)</b> = {__('Generic', 'Ifneedbe')}, <span
+                                class="glyphicon glyphicon-ban-circle"></span> = {__('Generic', 'No')}</p>
+                </div>
+            </div>
+        </div>
+        <!-- /.modal-content -->
+    </div>
+    <!-- /.modal-dialog -->
+</div><!-- /.modal -->

tpl/part/vote_table_classic.tpl

@@ -2,7 +2,10 @@
     {$best_choices = [0]}
 {/if}
 
-<h3>{__('Poll results', 'Votes of the poll')} {if $hidden}<i>({__('PollInfo', 'Results are hidden.')})</i>{/if}</h3>
+<h3>
+    {__('Poll results', 'Votes of the poll')} {if $hidden}<i>({__('PollInfo', 'Results are hidden.')})</i>{/if}
+    <a href="" data-toggle="modal" data-target="#hint_modal"><i class="glyphicon glyphicon-info-sign"></i></a>
+</h3>
 
 <div id="tableContainer" class="tableContainer">
     <form action="{if $admin}{poll_url id=$admin_poll_id admin=true}{else}{poll_url id=$poll_id}{/if}" method="POST"  id="poll_form">

tpl/part/vote_table_date.tpl

@@ -2,7 +2,10 @@
     {$best_choices = [0]}
 {/if}
 
-<h3>{__('Poll results', 'Votes of the poll')} {if $hidden}<i>({__('PollInfo', 'Results are hidden.')})</i>{/if}</h3>
+<h3>
+    {__('Poll results', 'Votes of the poll')} {if $hidden}<i>({__('PollInfo', 'Results are hidden.')})</i>{/if}
+    <a href="" data-toggle="modal" data-target="#hint_modal"><i class="glyphicon glyphicon-info-sign"></i></a>
+</h3>
 
 
 <div id="tableContainer" class="tableContainer">