Adding css for person (via grunt)

.gitignore

@@ -2,3 +2,6 @@ composer.lock
 vendor/*
 parameters.yml
 *~
+*.DS_Store
+*.sass-cache
+Resources/node_modules/

Resources/Gruntfile.js

@@ -0,0 +1,46 @@
+module.exports = function(grunt) {
+   grunt.initConfig({
+      pkg: grunt.file.readJSON('package.json'),
+
+      chillperson: {
+         folders: {
+            pub: './public',
+            css: '<%= chillperson.folders.pub %>/css/',
+            sass: '<%= chillperson.folders.pub %>/sass/',
+         }
+      },
+      sass: {
+         dist: {
+            options: {
+               debugInfo: true,
+            },
+            files: [{
+               expand: true,
+               cwd: '<%= chillperson.folders.sass.src %>',
+               src: ['*.scss'],
+               dest: '<%= chillperson.folders.css %>',
+               ext: '.css'
+            }]
+         }
+      },
+      watch: {
+         css: {
+            files: [ '<%= chillperson.folders.sass %>/*.scss', '<%= chillperson.folders.sass %>/**/*.scss' ],
+            tasks: ['generatecss'],
+            /*
+            options: {
+               spawn: false,
+               interrupt: true,
+            }
+            */
+         }
+      },
+   });
+
+   grunt.loadNpmTasks('grunt-contrib-sass');
+   grunt.loadNpmTasks('grunt-contrib-watch');
+
+   grunt.registerTask('generatecss', 'sass');
+
+   grunt.registerTask('default', ['generatecss']);
+};

Resources/assets/css/config.rb

@@ -1,33 +0,0 @@
-# Require any additional compass plugins here.
-
-# Tell compass where to find local extensions
-# If you followed directions and ran 'gem install modular-scale' comment the next two lines out:
-#extensions_dir = "bower_components/gumby/sass/extensions"
-
-#Compass::Frameworks.register('modular-scale', :path => File.expand_path("#{extensions_dir}/modular-scale"))
-
-# Uncomment these to use regular Ruby gems.
-require 'modular-scale'
-require 'sassy-math'
-
-# Set this to the root of your project when deployed:
-http_path = "/"
-css_dir = "./../../public/css"
-sass_dir = "sass"
-images_dir = "img"
-
-# You can select your preferred output style here (can be overridden via the command line) :nested or :expanded or :compact or :compressed:
-output_style = :compact
-
-# To enable relative paths to assets via compass helper functions. Uncomment:
-# relative_assets = true
-
-# To disable debugging comments that display the original location of your selectors. Uncomment:
-line_comments = false
-
-
-# If you prefer the indented syntax, you might want to regenerate this
-# project again passing --syntax sass, or you can uncomment this:
-# preferred_syntax = :sass
-# and then run:
-# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Resources/assets/css/sass/person.scss

@@ -1,74 +0,0 @@
-div#person_wrapper {
-    
-    div#general {
-        
-    }
-    
-    div#person_details {
-        margin-top: 50px;
-        
-        
-        .tab-content {
-            border-top: 1px solid #e5e5e5;
-            
-            width: 640px;
-        }
-        
-         dl { 
-             padding: 0.5em; 
-         } 
-         
-         dt { 
-             float: left; 
-             clear: left; 
-             width: 190px; 
-             text-align: right; 
-             font-weight: bold; 
-             color: green; 
-         } 
-         
-         dt:after { 
-             content: " :"; 
-         } 
-         
-         dd { 
-             margin: 0 0 0 199px; 
-             padding: 0 0 0.5em 0; 
-         }
-         
-         label {
-             color: green;
-         }
-         
-         label:not(.radio) {
-             min-width: 190px;
-             font-weight: bold;
-         }
-         
-         label.radio{
-             margin-left: 0.2em;
-         }
-         
-         .has_error {
-             label {
-                 color: red;
-             }
-             
-             ul.errors li {
-                 color: red;
-             }
-             
-             input {
-                 
-             }
-         }
-         
-         div.form_control {
-             .controls {
-                 float: right;
-             }
-         }
-    }
-    
-}
-

Resources/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "chill-person-js-css",
+  "version": "0.0.0",
+  "description": "JS-CSS files for ChillPerson Bundle, a software for social workers",
+  "directories": {
+  },
+  "author": "Champs-Libres <info@champs-libres.coop>",
+  "devDependencies": {
+    "grunt": "^0.4.5",
+    "grunt-contrib-copy": "^0.7.0",
+    "grunt-contrib-sass": "^0.8.1",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-contrib-clean": "^0.6.0"
+  },
+  "dependencies": {}
+}

Resources/public/css/person.css

@@ -0,0 +1,15 @@
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/marcu\/Projects\/Chill\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\000034}}
+div#header-person-name {
+  background: none repeat scroll 0 0 #328474;
+  color: #FFF;
+  padding-top: 1em;
+  padding-bottom: 1em; }
+
+@media -sass-debug-info{filename{font-family:file\:\/\/\/Users\/marcu\/Projects\/Chill\/vendor\/chill-project\/person\/Resources\/public\/sass\/person\.scss}line{font-family:\0000311}}
+div#header-person-details {
+  background: none repeat scroll 0 0 #43b29d;
+  color: #FFF;
+  padding-top: 1em;
+  padding-bottom: 1em; }
+
+/*# sourceMappingURL=person.css.map */

Resources/public/css/person.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": ";AAGA,sBAAuB;EACnB,UAAU,EAAE,8BAAwC;EACpD,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;;;AAGvB,yBAA0B;EACtB,UAAU,EAAE,8BAAmC;EAC/C,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG",
+"sources": ["../sass/person.scss"],
+"names": [],
+"file": "person.css"
+}

Resources/public/sass/person.scss

@@ -0,0 +1,16 @@
+
+@import '../../../../main/Resources/public/sass/config/colors';
+
+div#header-person-name {
+    background: none repeat scroll 0 0 $chill-green-dark;
+    color: #FFF;
+    padding-top: 1em;
+    padding-bottom: 1em;
+}
+
+div#header-person-details {
+    background: none repeat scroll 0 0 $chill-green;
+    color: #FFF;
+    padding-top: 1em;
+    padding-bottom: 1em;
+}

Resources/views/layout.html.twig

@@ -16,15 +16,24 @@
 #}
 {% extends "ChillMainBundle::layout.html.twig" %}
 
+
+{% block css %}
+    {% stylesheets  output="css/person.css" filter="cssrewrite"
+        "bundles/chillperson/css/person.css"
+    %}
+        <link rel="stylesheet" href="{{ asset_url }}"/>
+    {% endstylesheets %}
+{% endblock %}
+
 {% block layout_content %}
 
     <div class="grid-12 parent" id="header-person-name" >
         <div class="grid-10 push-1 parent">
             <div class="grid-3">
-                <span style="font-family:'open_sansbold'">{{ 'Lastname'|trans|upper  }}</span> : {{ person.lastName|upper }}
+                <span class="open_sansbold">{{ 'Lastname'|trans|upper  }}</span> : {{ person.lastName|upper }}
             </div>
             <div class="grid-3">
-                <span style="font-family:'open_sansbold'">{{ 'Fistname'|trans|upper}}</span> : {{  person.firstName|upper }}
+                <span class="open_sansbold">{{ 'Fistname'|trans|upper}}</span> : {{  person.firstName|upper }}
             </div>
             <div class="grid-3">
                 <i class="fa  fa-{% spaceless %}
@@ -47,7 +56,7 @@
     <div class="grid-12 parent" id="header-person-details" >
         <div class="grid-10 push-1 parent">
             <div class="grid-3">
-                <span style="font-family:'open_sansbold'">{{ 'Birthdate'|trans|upper  }}</span> :
+                <span class="open_sansbold">{{ 'Birthdate'|trans|upper  }}</span> :
                 {% if person.birthdate == null %}
                     {{ 'Unknown date of birth'|trans }}, {{ ('person.gender.' ~ 
                         person.gender)|trans }}
@@ -56,7 +65,7 @@
                 {% endif %}
             </div>
             <div class="grid-3">
-                <span style="font-family:'open_sansbold'">{{ 'Nationality'|trans|upper}}</span> :
+                <span class="open_sansbold">{{ 'Nationality'|trans|upper}}</span> :
                 {% if person.nationality is not null %}
                     {{ person.nationality.name|localize_translatable_string }}
                 {% else %}
@@ -64,7 +73,7 @@
                 {% endif %}
             </div>
             <div class="grid-3">
-                <span style="font-family:'open_sansbold'">{{ 'Spoken languages'|trans|upper}}</span> : 
+                <span class="open_sansbold">{{ 'Spoken languages'|trans|upper}}</span> : 
                 {% if person.spokenLanguages|length == 0 %}
                     {{ 'Unknown spoken languages'|trans }}
                 {% else %}
@@ -78,13 +87,6 @@
 
     <div id="person_details" class="content parent">
         <section class="container"> 
-            {# Note: activeRouteKey should be defined in Controller or child layout #}       
-            {{ chill_menu('person', {
-                 'layout': 'ChillPersonBundle::menu.html.twig',
-                 'args' : {'person_id': person.id },
-                 'activeRouteKey': activeRouteKey
-            }) }}
-                          
             <div class="grid-8">
                 {# Flash messages ! #}
                 <div class="container">
@@ -115,6 +117,13 @@
 
                 {% block personcontent %}<!-- block personcontent empty -->{%endblock%}
             </div>
+
+            {# Note: activeRouteKey should be defined in Controller or child layout #}  
+            {{ chill_menu('person', {
+                'layout': 'ChillPersonBundle::menu.html.twig',
+                'args' : {'person_id': person.id },
+                'activeRouteKey': activeRouteKey
+            }) }}
         </section>
     </div>
 </div>

Resources/views/menu.html.twig

@@ -15,8 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 #}
 <div class="grid-4">
-    <ul class="tab-nav follow-href-path">
+    <ul class="tab-nav">
-        <li class="title">{{ 'Person Menu'|trans }}</li>
         {% for route in routes %}
             <li class="{% spaceless  %}
                         {% if route.key == activeRouteKey %}