Permalink
Browse files

added info modal box to bricks edit interface

  • Loading branch information...
inmarelibero committed Nov 15, 2012
1 parent c57f4a4 commit 70043a35ffcb91b9fe7b81925d0476266e37d946
View
@@ -32,6 +32,7 @@ assetic:
- %kernel.root_dir%/../web/assets/bootstrap/js/bootstrap-dropdown.js
- %kernel.root_dir%/../web/assets/bootstrap/js/bootstrap-tab.js
- %kernel.root_dir%/../web/assets/bootstrap/js/bootstrap-alert.js
+ - %kernel.root_dir%/../web/assets/bootstrap/js/bootstrap-modal.js
- @BricksSiteBundle/Resources/js/*/*.js
filters:
- cssrewrite
@@ -182,3 +182,31 @@ MAIN NAVBAR
}
}
}
+
+/******************************************************************************************
+MODALS
+
+rules to customize the info modals.
+
+for example: Bricks\SiteBundle\resources\views\macros\macrosInfo.html.twig
+******************************************************************************************/
+/* general style for modal windows */
+.modal { width: 700px;
+ .modal-body { font-weight: normal;
+ ul { padding-left: 20px;
+ li { list-style-type: disc;}
+ }
+ }
+}
+
+/* info modal */
+.info-modal-caller {
+ color: #3D80E6;
+ line-height: 16px;
+ font-size: 16px;
+
+ &:hover {
+ text-decoration: none;
+ }
+}
+
@@ -0,0 +1,34 @@
+{#
+ bootstrapInfoModal
+
+ displays an icon through which open a modal dialog box, to display some informations
+
+ parameters:
+ - title: the title of the modal box (preceed by default by the label "Help:"). the id of the tag is based on this field,
+ so it should be unique
+ - body: html or plain text to display in the main section of the modal box
+#}
+{% macro bootstrapInfoModal(title, body) %}
+
+ {% set modalId = "modal-"~title|lower|replace({' ': '-'}) %}
+
+ <a href="#{{ modalId }}" class="info-modal-caller" role="button" data-toggle="modal">
+ <i class="icon-question-sign"></i>
+ </a>
+
+ <div id="{{ modalId }}" class="modal hide fade info-modal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+ <h3>
+ Help: {{ title|raw }}
+ </h3>
+ </div>
+ <div class="modal-body">
+ {{ body|raw }}
+ </div>
+ <div class="modal-footer">
+ <a href="#" class="btn" data-dismiss="modal" >Close</a>
+ </div>
+ </div>
+
+{% endmacro %}
@@ -24,3 +24,33 @@ brick:
content: content
preview: preview
confirm_deletion: "This operation cannot be undone. Confirm the deletion?"
+
+ help:
+ title:
+ title: Brick title
+ body: |
+ This is the title of the brick (piece of code/guide/recipe) you are creating.
+ <br><br>
+ A good <b>Title</b> should be:
+ <br>
+ <ul>
+ <li>
+ <b>full of keywords</b>: try putting in the title all the keywords related to the subject of your guide
+ </li>
+ <li>
+ <b>comprehensive</b>: the title should be as short and simple as possible; this field will be displayed in the whole symfonybricks.com as well as in the result pages of the search engines
+ </li>
+ </ul>
+ <br><br>
+ <i>Example</i>: if the brick you are going to create is about <i>"embedding the Bootstrap css rules for forms in a Symfony2 project, using smart macros. And I'd like them to be flexible and adaptable"</i>, surely using it as title is not good thing.
+ <br><br>
+ Since keywords are: "bootstrap, embed, form, macro, twig, integrate/integration", better titles could be:
+ <br>
+ <ul>
+ <li>
+ <i>"Integrate Bootstrap base css Form styles in twig templates"</i>
+ </li>
+ <li>
+ <i>"Use of macros to integrate Bootstrap base css Form styles in twig templates"</i>
+ </li>
+ </ul>
@@ -24,3 +24,33 @@ brick:
content: contenido
preview: previsualización
confirm_deletion: "Esta operación no puede ser anulada. ¿Seguir?"
+
+ help:
+ title:
+ title: Título del Brick
+ body: |
+ Este es el título del Brick (pieza de código/guía/receta) que estás creando.
+ <br><br>
+ Un buen <b>Título</b> debería:
+ <br>
+ <ul>
+ <li>
+ <b>incluir todas las palabras clave</b>: tratar de incluir en el título todas las palabras clave relacionadas con el tema que estás tratando
+ </li>
+ <li>
+ <b>ser comprensible</b>: el título debería ser lo más breve y simple posible, este campo se mostrará en todo symfonybricks.com, y también en las páginas de los resultados de los motores de búsqueda
+ </li>
+ </ul>
+ <br><br>
+ <i>Ejemplo</i>: si el Brick que estás creando trata el tema <i>"embedding the Bootstrap css rules for forms in a Symfony2 project, using smart macros. And I'd like them to be flexible and adaptable"</i>, ciertamente utilizar esto como un título no es una buena opción.
+ <br><br>
+ Dado que las palabras clave son: "bootstrap, embed, form, macro, twig, integrate/integration", títulos mejores podrían ser:
+ <br>
+ <ul>
+ <li>
+ <i>"Integrate Bootstrap base css Form styles in twig templates"</i>
+ </li>
+ <li>
+ <i>"Use of macros to integrate Bootstrap base css Form styles in twig templates"</i>
+ </li>
+ </ul>
@@ -24,4 +24,33 @@ brick:
content: contenuto
preview: anteprima
confirm_deletion: "Questa operazione non può essere annullata. Continuare?"
-
+
+ help:
+ title:
+ title: Titolo del Brick
+ body: |
+ Questo è il titolo del Brick (porzione di codice/guida/ricetta) che stai creando.
+ <br><br>
+ Un buon <b>Titolo</b> dovrebbe:
+ <br>
+ <ul>
+ <li>
+ <b>comprendere tutte le keywords</b>: prova ad inserire nel titolo tutte le parole chiave relative all'argomento che stai trattando
+ </li>
+ <li>
+ <b>essere comprensibile</b>: Il titolo dovrebbe essere più corto e semplice possibile; questo campo verrà visualizzato in tutto symfonybricks.com, e anche nelle pagine dei risultati dei vari motori di ricerca
+ </li>
+ </ul>
+ <br><br>
+ <i>Esempio</i>: se il brick che stai creando tratta l'argomento <i>"embedding the Bootstrap css rules for forms in a Symfony2 project, using smart macros. And I'd like them to be flexible and adaptable"</i>, sicuramente usare questo come titolo non è una buona scelta.
+ <br><br>
+ Dal momento che le keywords sono: "bootstrap, embed, form, macro, twig, integrate/integration", dei titoli migliori possono essere:
+ <br>
+ <ul>
+ <li>
+ <i>"Integrate Bootstrap base css Form styles in twig templates"</i>
+ </li>
+ <li>
+ <i>"Use of macros to integrate Bootstrap base css Form styles in twig templates"</i>
+ </li>
+ </ul>
@@ -1,5 +1,7 @@
{% extends "BricksUserBundle::layout.html.twig" %}
+{% import "BricksSiteBundle::macros/macrosInfo.html.twig" as macrosInfo %}
+
{% block main %}
<div class="row">
@@ -29,6 +31,10 @@
<div class="control-group">
<label class="control-label" for="{{ form.title.vars.id }}">
+ {# info modal #}
+ {{ macrosInfo.bootstrapInfoModal('brick.help.title.title'|trans({}, 'UserBundle'), 'brick.help.title.body'|trans({}, 'UserBundle')) }}
+
+ {# label #}
{{ 'brick.title'|trans({}, 'UserBundle')|capitalize }}
</label>
<div class="controls">

0 comments on commit 70043a3

Please sign in to comment.