bootstrap styles in forms fields

src/Bundle/ChillCustomFieldsBundle/Resources/views/CustomFieldsRendering/text.html.twig

@@ -1 +1,7 @@
-{% if text is not empty %}{{ text|nl2br }}{% else %}<span class="custom_fields_text empty">{{ 'None'|trans }}</span>{% endif %}
+{% if text is not empty %}
+    {% apply markdown_to_html %}
+    {{ text|raw }}
+    {% endapply %}
+{% else %}
+    <span class="custom_fields_text empty">{{ 'None'|trans }}</span>
+{% endif %}

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss

@@ -11,11 +11,29 @@ h1, h2, .h1, .h2 {
 }
 
 .chill-user-quote {
-  border-left: 10px solid #eec84a;
+  border-left: 10px solid $yellow;
   margin: 1.5em 10px;
-  padding: .5em 10px;
+  padding: .5em 15px;
   quotes: "\201C" "\201D" "\2018" "\2019";
-  background-color: #e6e6e6;
+  background-color: $gray-100;
+  blockquote {
+    border-left: 0.4em solid $gray-400;
+    padding-left: 0.9em;
+    margin-left: 0.9em;
+    font-style: italic;
+  }
+}
+form fieldset {
+  margin-top: 1em;
+  & > legend {
+    font-size: 1.438em;
+    font-weight: 700;
+    width: 100%;
+    border-bottom: 3px solid $gray-200;
+    margin-bottom: 1em;
+    h2 {
+    }
+  }
 }
 
 div.chill_address {
@@ -79,7 +97,7 @@ nav.navbar {
     font-family: Open Sans;
     font-weight: 300;
     clear: both;
-    color: #fff;
+    color: $white;
     font-size: .9em;
     line-height: 1.5em;
     margin: auto;

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/custom/_variables.scss

@@ -10,7 +10,7 @@
  */
 
 $white:    #fff !default;
-$gray-100: #f8f9fa !default;
+$gray-100: #f3f3f3 !default;
 $gray-200: #e6e6e6 !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -19,33 +19,35 @@
 {% block form_row %}
 {% apply spaceless %}
     {% if form.vars.hideLabel is not defined or form.vars.hideLabel == false %}
-    <div class="container-fluid">
+    <div class="container-fluid mb-2">
-        <div class="{% apply spaceless %}
+        <div class="row">
-            {% if attr.class is defined and ('cf-title' in attr.class or 'cf-fields' in attr.class ) %}
+            <div class="{% apply spaceless %}
-                grid-12
+                {% if attr.class is defined and ('cf-title' in attr.class or 'cf-fields' in attr.class ) %}
-            {% elseif attr.class is defined and 'multiple-cf-inline' in attr.class %}
+                    col-12
-                grid-2  grid-mobile-4 grid-tablet-4 mobile-clear tablet-clear
+                {% elseif attr.class is defined and 'multiple-cf-inline' in attr.class %}
-            {% else %}
+                    col-2  col-mobile-4 col-tablet-4 mobile-clear tablet-clear
-                grid-4 clear
+                {% else %}
+                    col-4 clear
+                {% endif %}
+            {% endapply %}">
+            {% if attr.class is not defined or ('cf-title' not in attr.class and 'cf-fields' not in attr.class ) %}
+                {{ form_label(form) }}
             {% endif %}
-        {% endapply %}">
+            </div>
-        {% if attr.class is not defined or ('cf-title' not in attr.class and 'cf-fields' not in attr.class ) %}
+            <div class="{% apply spaceless %}
-            {{ form_label(form) }}
+                {% if attr.class is defined and 'cf-title' in attr.class  %}
-        {% endif %}
+                    col-12
-        </div>
+                {% elseif attr.class is defined and 'cf-fields' in attr.class %}
-        <div class="{% apply spaceless %}
+                    col-12 parent
-            {% if attr.class is defined and 'cf-title' in attr.class  %} 
+                {% elseif attr.class is defined and 'multiple-cf-inline' in attr.class %}
-                grid-12
+                    col-2 col-mobile-8 col-tablet-8 multiple-cf-inline
-            {% elseif attr.class is defined and 'cf-fields' in attr.class %}
+                {% else %}
-                grid-12 parent
+                    col-8
-            {% elseif attr.class is defined and 'multiple-cf-inline' in attr.class %} 
+                {% endif %}
-                grid-2 grid-mobile-8 grid-tablet-8 multiple-cf-inline
+            {% endapply %}">
-            {% else %}
+                {{ form_widget(form)  }}
-                grid-8
+                {{ form_errors(form) }}
-            {% endif %}
+            </div>
-        {% endapply %}">
-            {{ form_widget(form)  }}
-            {{ form_errors(form) }}
         </div>
     </div>
     {% else %}
@@ -62,7 +64,6 @@
             {{ form_widget(child) }}
             {{ form_label(child, '', {'label_attr': { 'class' : 'inline'} }) }}
         </span>
-        <br/>
     {% endfor %}
     </div>
     <script type="text/javascript">
@@ -84,16 +85,17 @@
             </div>
         {%- else -%}
             <div class="container-fluid">
-                <div class="grid-6 grid-tablet-12 gid-mobile-12 no-gutter">
+                <div class="row">
-                    <span class="inline-choice">
+                    <div class="col-6 col-tablet-12 gid-mobile-12 no-gutter">
-                        {{ form_widget(child) }}
+                        <span class="inline-choice">
-                        {{ form_label(child, '', {'label_attr': { 'class' : 'inline'} }) }}
+                            {{ form_widget(child) }}
-                    </span>
+                            {{ form_label(child, '', {'label_attr': { 'class' : 'inline'} }) }}
+                        </span>
+                    </div>
+                    <div class="col-6 col-tablet-12 gid-mobile-12  no-gutter">
+                        {{ form_widget(form._other, {'attr': {'class': 'input-text-other-value'} }) }}
+                    </div>
                 </div>
-                <div class="grid-6 grid-tablet-12 gid-mobile-12  no-gutter">
-                    {{ form_widget(form._other, {'attr': {'class': 'input-text-other-value'} }) }}
-                </div>
-                
             </div>
         {%- endif -%}
     {% endfor %}

src/Bundle/ChillPersonBundle/Resources/views/Person/edit.html.twig

@@ -125,15 +125,15 @@
 {{ form_rest(form) }}
 
 
-<ul class="grid-12 sticky-form-buttons record_actions ">
+<ul class="col-12 list-inline sticky-form-buttons record_actions ">
-    <li class="cancel">
+    <li class="list-inline-item justify-content-start">
-        <a href="{{ path('chill_person_view',  {'person_id' : person.id}) }}" class="sc-button grey center margin-5">
+        <a href="{{ path('chill_person_view',  {'person_id' : person.id}) }}" class="btn btn-secondary">
             <i class="fa fa-arrow-left"></i>
             {{ 'Return'|trans }}
         </a>
     </li>
-    <li>
+    <li class="list-inline-item justify-content-end">
-    <button class="sc-button bt-save" type="submit">{{ 'Save'|trans }}</button>
+        <button class="btn btn-success" type="submit">{{ 'Save'|trans }}</button>
     </li>
 </ul>
 

src/Bundle/ChillPersonBundle/Resources/views/layout.html.twig

@@ -124,7 +124,7 @@
 {% endblock %}
 
 {% block layout_wvm_content %}
-    <div class="container-fluid mt-3 content">
+    <div class="mt-3 content">
         {% block personcontent %}<!-- block personcontent empty -->{%endblock%}
     </div>
 {% endblock %}