bootstrap 3 & font-awesome

.gitignore

@@ -4,4 +4,4 @@ propel/Base
 propel/Map
 propel/Config/config.php
 propel.yml
-
+.sass-cache

config.rb

@@ -1,12 +1,14 @@
 require 'compass/import-once/activate'
-# require 'bootstrap-sass'
+require 'bootstrap-sass'
+require 'font-awesome-sass'
 # Require any additional compass plugins here.
 
 # Set this to the root of your project when deployed:
 http_path = "/"
 css_dir = "web/css"
 sass_dir = "web/sass"
 images_dir = "web/img"
+fonts_dir = "web/fonts"
 javascripts_dir = "web/js"
 
 # You can select your preferred output style here (can be overridden via the command line):

src/controller/SecurityController.php

@@ -15,15 +15,25 @@ function buildLoginForm($app) {
                 new Assert\NotBlank(),
                 new Assert\Email()
             ),
-            'label' => 'Login'
+            'attr' => array(
+                'class' => 'form-control',
+                'placeholder' => 'Email address'
+            )
         ))
         ->add('_password', PasswordType::class, array(
             'constraints' => array(
                 new Assert\NotBlank()
+            ),
+            'attr' => array(
+                'class' => 'form-control',
+                'placeholder' => 'Password'
             )
         ))
         ->add('submit', SubmitType::class, array(
-            'label' => 'Sign in'
+            'label' => 'Sign in',
+            'attr' => array(
+                'class' => 'btn btn-lg btn-primary btn-block'
+            )
         ))
         ->getForm();
 }

src/translation/pl.xlf

@@ -78,6 +78,14 @@
                 <source>You are NOT logged</source>
                 <target>NIE jesteś zalogowany</target>
             </trans-unit>
+            <trans-unit id="email_address">
+                <source>Email address</source>
+                <target>Adres email</target>
+            </trans-unit>
+            <trans-unit id="please_sign_in">
+                <source>Please sign in</source>
+                <target>Zaloguj się</target>
+            </trans-unit>
         </body>
     </file>
 </xliff>

src/view/My/admin.html.twig

@@ -1,13 +1,26 @@
 {% extends layoutAdmin %}
 
+{% block stylesheets %}
+    <link href="{{ asset('css/admin.css') }}" rel="stylesheet">
+{% endblock %}
+
 {% block body %}
-{% if is_granted('IS_AUTHENTICATED_FULLY') %}
-    {{ 'You are logged'|trans }}
-    <br>
-    <a href="{{ path('admin_logout') }}">{{ 'Logout'|trans }}</a>
-{% else %}
-    {{ 'You are NOT logged'|trans }}
-    <br>
-    <a href="{{ path('login') }}">{{ 'Login'|trans }}</a>
-{% endif %}
+    <div class="container">
+        <div class="starter-template">
+            <h1>
+            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
+                {{ 'You are logged'|trans }}
+            {% else %}
+                {{ 'You are NOT logged'|trans }}
+            {% endif %}
+            </h1>
+
+            <br>
+            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
+                <a href="{{ path('admin_logout') }}" class="lead">{{ 'Logout'|trans }}</a>
+            {% else %}
+                <a href="{{ path('login') }}" class="lead">{{ 'Login'|trans }}</a>
+            {% endif %}
+        </div>
+    </div>
 {% endblock %}

src/view/My/example.html.twig

@@ -1,13 +1,40 @@
 {% extends layout %}
 
+{% block stylesheets %}
+    <link href="{{ asset('css/main.css') }}" rel="stylesheet">
+{% endblock %}
+
 {% block body %}
-{{ hello }} {{ 'world'|trans }}!
-<br>
-<a href="{{ url('homepage') }}">Homepage</a>
-<br>
-<a href="{{ url('admin') }}">{{ 'Go to admin panel'|trans }}</a>
-<br>
-{% for month in monthArray %}
-    <p>{{ month }}</p>
-{% endfor %}
+    <div class="site-wrapper">
+        <div class="site-wrapper-inner">
+            <div class="cover-container">
+
+                <div class="masthead clearfix">
+                    <div class="inner">
+                        <h3 class="masthead-brand">{{ hello }} {{ 'world'|trans }}!</h3>
+                        <nav>
+                            <ul class="nav masthead-nav">
+                                <li class="active"><a href="{{ url('homepage') }}">Homepage</a></li>
+                                <li><a href="{{ url('admin') }}">{{ 'Go to admin panel'|trans }}</a></li>
+                            </ul>
+                        </nav>
+                    </div>
+                </div>
+
+                <div class="inner cover">
+                    <h1 class="cover-heading">{{ hello }} {{ 'world'|trans }}!</h1>
+                    {% for month in monthArray %}
+                        <p class="lead">{{ month }}</p>
+                    {% endfor %}
+                </div>
+
+                <div class="mastfoot">
+                    <div class="inner">
+                        <p>Cover template for <a href="http://getbootstrap.com">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
 {% endblock %}

src/view/Security/login.html.twig

@@ -1,8 +1,22 @@
 {% extends layoutAdmin %}
 
+{% block stylesheets %}
+    <link href="{{ asset('css/login.css') }}" rel="stylesheet">
+{% endblock %}
+
 {% block body %}
-{{ error }}
-<form action="{{ path('admin_login_check') }}" method="post">
-    {{ form_widget(form) }}
-</form>
+{% if error %}
+    <div class="alert alert-danger text-center" role="alert">{{ error }}</div>
+{% endif %}
+
+<div class="container">
+    <form class="form-signin" action="{{ path('admin_login_check') }}" method="post">
+        <h2 class="form-signin-heading">{{ 'Please sign in'|trans }}</h2>
+        <label for="_username" class="sr-only">Email address</label>
+        {{ form_widget(form._username) }}
+        <label for="_password" class="sr-only">Password</label>
+        {{ form_widget(form._password) }}
+        {{ form_widget(form.submit) }}
+    </form>
+</div>
 {% endblock %}

src/view/layout.html.twig

@@ -6,14 +6,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Silex2 Base Propel{% endblock %}</title>
 
+    <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
     {% block stylesheets %}
     {% endblock %}
 
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
 </head>
 <body>
 {% block body %}
 {% endblock %}
 
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<script src="{{ asset('js/bootstrap.min.js') }}"></script>
 {% block javascripts %}
 {% endblock %}
 </body>

src/view/layoutAdmin.html.twig

@@ -6,14 +6,24 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}Admin - Silex2 Base Propel{% endblock %}</title>
 
+    <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
     {% block stylesheets %}
     {% endblock %}
 
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
 </head>
 <body>
 {% block body %}
 {% endblock %}
 
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<script src="{{ asset('js/bootstrap.min.js') }}"></script>
 {% block javascripts %}
 {% endblock %}
 </body>

web/css/admin.css

@@ -0,0 +1 @@
+body{padding-top:50px}.starter-template{padding:40px 15px;text-align:center}