derbyjs / d-bootstrap Goto Github PK

are you aware that the standard install of derby fails because of the git dependencies in the package.json derby-ui-boot ? If someone does not have git installed the install fails silently, and then when they run node server.js it fails with 👍
C:_data\derbyjs\app>node server.js
Master pid 1992

module.js:340
throw err;
^
Error: Cannot find module 'derby-ui-boot'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object. (C:_data\derbyjs\app\lib\app\index.js:2:8)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)

Does anyone know of any example code that uses these components? Thanks!

For anyone interested in implementing the navbar, you can use this as an example of how it could be done:

http://jsfiddle.net/cjblomqvist/AkBF5/

(This ticket is only meant as a means to document my example, so no pressure on implementing).

How can we add other elements of bootstrap to work properly with Derby?

For example, I added a navbar. The styling is nice. But the dropdown don't work when resizing the navbar to a smaller size.

When resized, the click on the menu doesn't work because Bootstrap is not fully included :

Considering this package exists to provide a port of the upstream https://github.com/twbs/bootstrap javascript to derby's component system, I propose that this package's release numbering mirror the upstream css major and minor semver numbering, especially since it repackages it.

npm install derby-ui-boot failed by git clone for bootstrap

npm ERR! git clone git://github.com/twitter/bootstrap.git Cloning into bare repository '/home/dobled/.npm/_git-remotes/git-github-com-twitter-bootstrap-git-8e14791d'...

The new git is

[email protected]:twbs/bootstrap.git

I haven't found a convenient way to use derby-ui-boot to load customized or partial Bootstrap CSS into my project, short of manually including a custom (and ugly) LESS file in my /styles folder. I'd like to be able to specify a variable overrides LESS file (local to my app) somewhere in the statement:

derby.use(require('derby-ui-boot'))

but all my attempts have failed. Instead, I've resorted to creating this .less file local to my Derby app, and not running derby.use(require('derby-ui-boot')) at all:

/* Core variables and mixins */
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/variables.less";
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/mixins.less";

/* CSS Reset */
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/reset.less";

/* Grid system and page structure */
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/scaffolding.less";
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/grid.less";
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/layouts.less";

/* Base CSS */
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/type.less";
/*@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/code.less";*/
@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/forms.less";
/*@import "../../node_modules/derby-ui-boot/node_modules/bootstrap/less/tables.less";*/

/* .... etc. */

/* ========================
   Bootstrap customizations
   ========================*/

@bodyBackground: #edf0f3;
@baseFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@navbarInverseBackground:                saturate( darken( @navbarInverseBackgroundHighlight, 13% ), 10% );
@navbarInverseBackgroundHighlight:       #435744;
@navbarInverseText:                      saturate( mix( @navbarInverseBackground, #fff, 30% ), 5% );
@navbarInverseLinkColor:                 @navbarInverseText;

This achieves the desired result, without having to make any direct modifications to Bootstrap files, allowing for convenient upgrades. But it's ugly as hell!

I have a dropdown with value changes. It opens, closes and changes as expected, except the label value doesn't change....

   <div class="form-group">
      <label for="inputGender" class="col-sm-3 control-label">Gender</label>
      <div class="col-sm-2">
        <dropdown value="{{_page.user.gender}}">
          <option value="None">None</option>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </dropdown>
      </div>
    </div>

Any thoughts?

see upstream implementation of alerts component written in jQuery

proposed template use

<alert type="success">
  ...
  <a href="#" class="alert-link">...</a>
  <dismiss>&times;</dismiss>
</alert>

1. The package.json still contains the old URL for the github for bootstrap: this has changed to github.com/twbs/bootstrap.git
2. Adding node_modules to an npm module doesn't work because during npm install it will try and load the real modules instead of seeing what's there. I have another module which has a checked in dependency and I just changed the folder to be something else and then it works fine.
3. I was going to remove bootstrap from checking and add the new URL to package.json and make a pull request.

I have been using this package for a while now. All of a sudden it stopped working. I can require the package in my app, but I do not see the boot:tabs and bootstrap css is not loaded at all. I tested with a new install of node and with versions 0.8.20 -23 as well as the latest. I'm not sure why this is happening?

see upstream implementation of Affix written in jQuery

proposed template use

<affix offset-top="60" offset-bottom="200">
  <!-- Affixed elements here -->
</affix>

What's the best way to include components in our apps which aren't provided by bootstrap default? bootstrap-popover.js and responsive.less, for example, exist in in node_modules/bootstrap, but (as I understand it from Bootstrap's documentation) must be manually imported/included for use. If I try @import "../node_modules/derby-ui-boot/node_modules/bootstrap/less/bootstrap-responsive.min.less"; , no cigar

When I try to run the example i get:

daslicht:example daslicht$ node server.js
Master pid 2045
Error requiring server module from `/Users/daslicht/derby/derby-auth/example/lib/server`

/Users/daslicht/derby/derby-auth/example/node_modules/derby/lib/cluster.js:41
    throw e;
          ^
Error: Invalid plugin.decorate value: undefined
    at EventEmitter.module.exports.use (/Users/daslicht/derby/derby-auth/example/node_modules/racer/lib/plugin.js:32:13)
    at Object.<anonymous> (/Users/daslicht/derby/derby-auth/example/lib/auth/index.js:4:7)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (/Users/daslicht/derby/derby-auth/example/node_modules/coffee-script/lib/coffee-script/coffee-script.js:211:36)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/daslicht/derby/derby-auth/example/lib/server/index.js:6:11)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (/Users/daslicht/derby/derby-auth/example/node_modules/coffee-script/lib/coffee-script/coffee-script.js:211:36)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at requireServer (/Users/daslicht/derby/derby-auth/example/node_modules/derby/lib/cluster.js:38:18)
    at Object.run (/Users/daslicht/derby/derby-auth/example/node_modules/derby/lib/cluster.js:13:18)
    at EventEmitter.run (/Users/daslicht/derby/derby-auth/example/node_modules/derby/lib/derby.server.js:36:16)
    at Object.<anonymous> (/Users/daslicht/derby/derby-auth/example/server.js:4:22)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3
daslicht:example daslicht$ 

Hi all

Is it possible to use other on-click event on top of the existing on-click="toggle()" call?

Cheers

There are two problems which prevent icons from being displayed:

1. Twitter Bootstrap uses relative paths for the icon sprites by default
2. the icons will not be in the public path of the application

I haven't tried yet, but I think #1 is easily solvable by adding second style which overrides the default @iconSpritePath and @iconWhiteSpritePath values.
#2 is trickier. Derby could add support for exposing static files in components. This could be configured similarly to the current styles configuration. However, I don't see an easy way to make these files accessible through the router.

An easier solution would be to add an optional configuration to derby-ui-boot, say linkImages which should be set by the application to its public path. If the decorator sees this option it will symlink the image files into the public directory and set the icon path variables accordingly.

I'm happy to help with implementing this. Which one should I implement? Do you see any other approach?