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//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//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//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 paulfairless/grails-lesscss-resources#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 paulfairless/grails-lesscss-resources#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 paulfairless/grails-lesscss-resources#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#25paulfairless/grails-lesscss-resources#25
}

}

—
Reply to this email directly or view it on GitHubhttps://github.com//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.