White Gap between navbar and header when viewed on mobile.

[zorrme]

There is a white gap between top navbar and header.

[zorrme]

Also would like to know about this plugin SPECTRAwebPlugin ?

[joergrech]

Can you describe the problem with the gap between the navbar and the header in more detail? If possible please make a screenshot.

Regarding SPECTRAwebPlugin: please ignore that - it is a remainder from another project.

[zorrme]

This is the screenshot, see the white bar between blue and black.

On 29/10/2012, at 9:40 PM, Jörg Rech notifications@github.com wrote:

Can you describe the problem with the gap between the navbar and the header in more detail? If possible please make a screenshot.

Regarding SPECTRAwebPlugin: please ignore that - it is a remainder from another project.

— Reply to this email directly or view it on GitHub.

[zorrme]

The easiest way to reproduce is to change the width of the browser and the white gap appears.

On 29/10/2012, at 9:40 PM, Jörg Rech notifications@github.com wrote:

Can you describe the problem with the gap between the navbar and the header in more detail? If possible please make a screenshot.

Regarding SPECTRAwebPlugin: please ignore that - it is a remainder from another project.

— Reply to this email directly or view it on GitHub.

[joergrech]

Hi, I did not received you image - maybe github filtered it out. Please send it to joerg.rech@gmail.com

Best regards, Joerg

On Mon, Oct 29, 2012 at 11:42 AM, zorrme notifications@github.com wrote:

This is the screenshot, see the white bar between blue and black.

On 29/10/2012, at 9:40 PM, Jörg Rech notifications@github.com wrote:

Can you describe the problem with the gap between the navbar and the header in more detail? If possible please make a screenshot.

Regarding SPECTRAwebPlugin: please ignore that - it is a remainder from another project.

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/joergrech/KickstartWithBootstrap/issues/18#issuecomment-9862097.

Dr. Jörg Rech Freelancer Grails | Java | jQuery | iOS | Android Kriegsstr. 164 76133 Karlsruhe, Germany

Twitter: http://twitter.com/joergrech Web: http://www.joerg-rech.com Xing: http://www.xing.com/profile/Joerg_Rech/ LinkedIn: http://www.linkedin.com/in/joergrech

[zorrme]

Was because of some configuration changes I did, sorry

[zorrme]

Sorry, but SkinA has the above mentioned problem.

[zorrme]

Joerg,

Could you please use this approach ?

In your Resource file:

'bootstrap_utils' {
    dependsOn 'jquery'

    resource url: [dir: 'datepicker/js', file: 'bootstrap-datepicker.js']
    resource url: [dir: 'kickstart/js', file: 'kickstart.js']
    resource url: [dir: 'kickstart/js', file: 'checkboxes.js']
    resource url: [dir: 'datepicker/css', file: 'datepicker.css']
    resource url: [dir: 'kickstart/css', file: 'docs.css']
    resource url: [dir: 'kickstart/css', file: 'kickstart.css']

} // do not compile less here if (grails.util.Environment.current == grails.util.Environment.PRODUCTION) { } else { // compile less }

and then leave kickstart.gsp unchanged ?

On 29/10/2012, at 10:14 PM, Jörg Rech notifications@github.com wrote:

Hi, I did not received you image - maybe github filtered it out. Please send it to joerg.rech@gmail.com

Best regards, Joerg

On Mon, Oct 29, 2012 at 11:42 AM, zorrme notifications@github.com wrote:

This is the screenshot, see the white bar between blue and black.

On 29/10/2012, at 9:40 PM, Jörg Rech notifications@github.com wrote:

Can you describe the problem with the gap between the navbar and the header in more detail? If possible please make a screenshot.

Regarding SPECTRAwebPlugin: please ignore that - it is a remainder from another project.

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/joergrech/KickstartWithBootstrap/issues/18#issuecomment-9862097.

Dr. Jörg Rech Freelancer Grails | Java | jQuery | iOS | Android Kriegsstr. 164 76133 Karlsruhe, Germany

Twitter: http://twitter.com/joergrech Web: http://www.joerg-rech.com Xing: http://www.xing.com/profile/Joerg_Rech/ LinkedIn: http://www.linkedin.com/in/joergrech — Reply to this email directly or view it on GitHub.

[joergrech]

Hi zorrme, thank you for your feedback. However I'm not exactly sure what you are proposing. The problem I wanted to solve is that the compilation of less files might take too much time in a PAAS (and it defintely does in CloudFoundry). Furthermore, a productive system will/should not recompile the resources every time it starts a new instance but use the compiled versions. Therefore, I have a introduced an environment-based switch in Config.groovy to define the less resource-bundles in KickstartResources.groovy. In Kickstart.gsp these resources are then used in dev or test but not in prod.

A better solution would be to store the compiled Less-resources in a file within the project and then link them in prod directly - but I think they are only available during runtime in the directory /static/....

If I understand your approach you would set the switch in KickstartResources.groovy or Config.groovy and just use Kickstart.gsp as before (just one r:require tag). However in production mode you would, nevertheless, have to reference the original resources.

I will look into the client-side compilation of less files, e.g., with the Kickstrap Project (http://getkickstrap.com/). This would solve the compilation during startup.

If you have a better solution or if I misunderstood your idea please tell me.

Best regards, Joerg

On Fri, Nov 2, 2012 at 4:40 AM, zorrme notifications@github.com wrote:

Joerg,

Could you please use this approach ?

In your Resource file:

'bootstrap_utils' { dependsOn 'jquery'

resource url: [dir: 'datepicker/js', file: 'bootstrap-datepicker.js'] resource url: [dir: 'kickstart/js', file: 'kickstart.js'] resource url: [dir: 'kickstart/js', file: 'checkboxes.js'] resource url: [dir: 'datepicker/css', file: 'datepicker.css'] resource url: [dir: 'kickstart/css', file: 'docs.css'] resource url: [dir: 'kickstart/css', file: 'kickstart.css'] } // do not compile less here if (grails.util.Environment.current == grails.util.Environment.PRODUCTION) { } else { // compile less }

and then leave kickstart.gsp unchanged ?

On 29/10/2012, at 10:14 PM, Jörg Rech notifications@github.com wrote:

Hi, I did not received you image - maybe github filtered it out. Please send it to joerg.rech@gmail.com

Best regards, Joerg

On Mon, Oct 29, 2012 at 11:42 AM, zorrme notifications@github.com wrote:

This is the screenshot, see the white bar between blue and black.

On 29/10/2012, at 9:40 PM, Jörg Rech notifications@github.com wrote:

Can you describe the problem with the gap between the navbar and the header in more detail? If possible please make a screenshot.

Regarding SPECTRAwebPlugin: please ignore that - it is a remainder from another project.

— Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHub< https://github.com/joergrech/KickstartWithBootstrap/issues/18#issuecomment-9862097>.

Dr. Jörg Rech Freelancer Grails | Java | jQuery | iOS | Android Kriegsstr. 164 76133 Karlsruhe, Germany

Twitter: http://twitter.com/joergrech Web: http://www.joerg-rech.com Xing: http://www.xing.com/profile/Joerg_Rech/ LinkedIn: http://www.linkedin.com/in/joergrech — Reply to this email directly or view it on GitHub.

— Reply to this email directly or view it on GitHubhttps://github.com/joergrech/KickstartWithBootstrap/issues/18#issuecomment-10004063.

Dr. Jörg Rech Freelancer Grails | Java | jQuery | iOS | Android Kriegsstr. 164 76133 Karlsruhe, Germany

Twitter: http://twitter.com/joergrech Web: http://www.joerg-rech.com Xing: http://www.xing.com/profile/Joerg_Rech/ LinkedIn: http://www.linkedin.com/in/joergrech

[zorrme]

You could change your KickstartResources.groovy to something like this, and this way you will not have to change kickstart.gsp:

/ Settings for the resources and less-css plugins to "compile" less files into css grails.resources.modules = {

// do not compile less here if (grails.util.Environment.current == grails.util.Environment.PRODUCTION) {

    /* Skin Definitions */
    'bootstrap' {
        dependsOn 'jquery'
        resource url: [dir: 'bootstrap/js', file: 'bootstrap.min.js']
        resource url: [dir: 'bootstrap/css', file: 'bootstrap.css']
        resource url: [dir: 'bootstrap/css', file: 'bootstrap-responsive.css']
    }   
}   
else {
/* Skin Definitions */
'bootstrap'     {   
    dependsOn   'jquery'
    resource url: [dir: 'bootstrap/js',     file: 'bootstrap.min.js']
    resource url: [dir: 'less/bootstrap',   file: 'bootstrap.less']
    resource url: [dir: 'less/bootstrap',   file: 'responsive.less']
    resource url: "less/dummy.css" // empty css: see https://github.com/paulfairless/grails-lesscss-resources/issues/25
}   
'bootstrap_skinA'   {   
    dependsOn   'jquery'
    resource url: [dir: 'bootstrap/js',         file: 'bootstrap.min.js']
    resource url: [dir: 'less/bootstrap_skinA', file: 'bootstrap.less']
    resource url: [dir: 'less/bootstrap_skinA', file: 'responsive.less']
    resource url: "less/dummy.css" // empty css: see https://github.com/paulfairless/grails-lesscss-resources/issues/25
} 

} // This is safe because it does not use less
'bootstrap_utils' {
dependsOn 'jquery' // resource url: [dir: 'FontAwesome/css', file: 'font-awesome.css'] resource url: [dir: 'datepicker/js', file: 'bootstrap-datepicker.js'] resource url: [dir: 'kickstart/js', file: 'kickstart.js'] resource url: [dir: 'kickstart/js', file: 'checkboxes.js'] resource url: [dir: 'datepicker/css', file: 'datepicker.css'] resource url: [dir: 'kickstart/css', file: 'docs.css'] resource url: [dir: 'kickstart/css', file: 'kickstart.css'] resource url: "less/dummy.css" // empty css: see https://github.com/paulfairless/grails-lesscss-resources/issues/25 }
}

[joergrech]

Hi zorrme, great - thank you for the tip. I did not see the forest for the trees. I integrated your solution in version 0.8.6.

Many thanks, Joerg

On Fri, Nov 2, 2012 at 11:29 AM, zorrme notifications@github.com wrote:

You could change your KickstartResources.groovy to something like this, and this way you will not have to change kickstart.gsp:

/ Settings for the resources and less-css plugins to "compile" less files into css grails.resources.modules = {

// do not compile less here if (grails.util.Environment.current == grails.util.Environment.PRODUCTION) {

/* Skin Definitions */
'bootstrap' {
    dependsOn 'jquery'
    resource url: [dir: 'bootstrap/js', file: 'bootstrap.min.js']
    resource url: [dir: 'bootstrap/css', file: 'bootstrap.css']
    resource url: [dir: 'bootstrap/css', file: 'bootstrap-responsive.css']
}

} else { /* Skin Definitions */ 'bootstrap' { dependsOn 'jquery' resource url: [dir: 'bootstrap/js', file: 'bootstrap.min.js'] resource url: [dir: 'less/bootstrap', file: 'bootstrap.less'] resource url: [dir: 'less/bootstrap', file: 'responsive.less'] resource url: "less/dummy.css" // empty css: see https://github.com/paulfairless/grails-lesscss-resources/issues/25 } 'bootstrap_skinA' { dependsOn 'jquery' resource url: [dir: 'bootstrap/js', file: 'bootstrap.min.js'] resource url: [dir: 'less/bootstrap_skinA', file: 'bootstrap.less'] resource url: [dir: 'less/bootstrap_skinA', file: 'responsive.less'] resource url: "less/dummy.css" // empty css: see https://github.com/paulfairless/grails-lesscss-resources/issues/25 }

} // This is safe because it does not use less

'bootstrap_utils' {

dependsOn 'jquery' // resource url: [dir: 'FontAwesome/css', file: 'font-awesome.css']

resource url: [dir: 'datepicker/js', file: 'bootstrap-datepicker.js'] resource url: [dir: 'kickstart/js', file: 'kickstart.js'] resource url: [dir: 'kickstart/js', file: 'checkboxes.js'] resource url: [dir: 'datepicker/css', file: 'datepicker.css'] resource url: [dir: 'kickstart/css', file: 'docs.css'] resource url: [dir: 'kickstart/css', file: 'kickstart.css'] resource url: "less/dummy.css" // empty css: see paulfairless/grails-lesscss-resources#25https://github.com/paulfairless/grails-lesscss-resources/issues/25 }

}

— Reply to this email directly or view it on GitHubhttps://github.com/joergrech/KickstartWithBootstrap/issues/18#issuecomment-10010173.

Dr. Jörg Rech Freelancer Grails | Java | jQuery | iOS | Android Kriegsstr. 164 76133 Karlsruhe, Germany

Twitter: http://twitter.com/joergrech Web: http://www.joerg-rech.com Xing: http://www.xing.com/profile/Joerg_Rech/ LinkedIn: http://www.linkedin.com/in/joergrech

[joergrech]

Furthermore, I solved the "White Gap" problem in the skins. When switching skins the new skin is listed as the last module - therefore the corrections in Kickstart.gsp (within the util module) was not applied. I now use two different util module for each skin and made them depending on the core module.