stephenbaldwin / fuelux-rails Goto Github PK

View Code? Open in Web Editor NEW

27.0 27.0 10.0 423 KB

Fuel UX for Rails 3.1/4.0 Asset Pipeline

Home Page: http://exacttarget.github.com/fuelux/

License: Other

Ruby 94.98% JavaScript 2.71% CSS 2.31%

fuelux-rails's People

Contributors

Stargazers

Watchers

Forkers

mmc1ntyre mathieugagne agate sunilvrao kfelichko italianchef icleversoft zshannon gurbinder533 bilyz192

fuelux-rails's Issues

Unable to generate files on Windows

Trying to run rails g fuelux:install and I get the following error:

[WARNING] Please install gem 'therubyracer' to use Less.
C:/BitNami/rubystack-1.9.3-16/ruby/lib/ruby/gems/1.9.1/gems/less-2.4.0/lib/less/
java_script/v8_context.rb:2:in `require': cannot load such file -- v8 (LoadError
)

Is there a way around this since therubyracer doesn't work on windows?

radio

Hello i'm trying to use radio but in some reason it doesn't included in fuelux mixin on compile…

Gemfile

gem 'fuelux-rails', :git => 'git://github.com/stephenbaldwin/fuelux-rails.git'

Gemfile.lock

GIT
  remote: git://github.com/stephenbaldwin/fuelux-rails.git
  revision: 4a466b5b32411bcb4605a479d1fc28efd3e745cd
  specs:
    fuelux-rails (2.3.1)
      actionpack (>= 3.1)
      execjs
      less-rails
      railties (>= 3.1)
GEM
  remote: https://rubygems.org/
  specs:
    less (2.3.2)
    less-rails (2.3.3)

app/assets/stylesheets/bootstrap_and_overrides.css.less

@import "twitter/bootstrap/bootstrap";
body { padding-top: 60px; }
@import "twitter/bootstrap/responsive";

// Set the correct sprite paths
@iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white.png");

@fontAwesomeEotPath: asset-path("fontawesome-webfont.eot?v=3.0.2");
@fontAwesomeEotPath_iefix: asset-path("fontawesome-webfont.eot?#iefix&v=3.0.2");
@fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff?v=3.0.2");
@fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf?v=3.0.2");

// Font Awesome
@import "fontawesome";
/*  FUELUX */
@import 'fuelux.less';

and finally compiled part of bootstrap_and_overrides.css from FUELUX comment till bottom…
i don't see any section about radio...

/*  FUELUX */
.combobox {
  display: inline-block;
}
.combobox a {
  font-size: 14px;
}
.combobox button.btn {
  border-radius: 0 4px 4px 0;
}
.datagrid thead {
  background-color: #f9f9f9;
}
.datagrid thead .datagrid-header-title {
  float: left;
  line-height: 28px;
  font-weight: normal;
  font-size: 14px;
  margin-right: 10px;
}
.datagrid thead .datagrid-header-left {
  float: left;
}
.datagrid thead .datagrid-header-right {
  float: right;
}
.datagrid thead .datagrid-header-right .search,
.datagrid thead .datagrid-header-left .search,
.datagrid thead .datagrid-header-right .filter,
.datagrid thead .datagrid-header-left .filter {
  margin-left: 8px;
  margin-bottom: 0;
}
.datagrid thead .datagrid-header-right .search .dropdown-menu,
.datagrid thead .datagrid-header-left .search .dropdown-menu,
.datagrid thead .datagrid-header-right .filter .dropdown-menu,
.datagrid thead .datagrid-header-left .filter .dropdown-menu {
  top: auto;
  left: auto;
}
.datagrid thead .sorted {
  color: #333333;
  text-shadow: 'none';
  background-color: #f1f1f1;
  background-image: -moz-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: -o-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: linear-gradient(to bottom, #f9f9f9, #e5e5e5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#ffe5e5e5', GradientType=0);
  border-color: #e5e5e5 #e5e5e5 #bebebe;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.datagrid thead .sorted i {
  float: right;
  margin-top: 2px;
}
.datagrid thead .sortable {
  cursor: pointer;
}
.datagrid thead .sortable:hover {
  color: #333333;
  text-shadow: 'none';
  background-color: #f1f1f1;
  background-image: -moz-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: -o-linear-gradient(top, #f9f9f9, #e5e5e5);
  background-image: linear-gradient(to bottom, #f9f9f9, #e5e5e5);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#ffe5e5e5', GradientType=0);
  border-color: #e5e5e5 #e5e5e5 #bebebe;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.datagrid tfoot {
  background-color: #f9f9f9;
}
.datagrid tfoot .datagrid-footer-left {
  float: left;
}
.datagrid tfoot .datagrid-footer-left .grid-controls {
  margin-top: 7px;
}
.datagrid tfoot .datagrid-footer-left .grid-controls select {
  margin: 0 5px 1px;
  width: 60px;
}
.datagrid tfoot .datagrid-footer-left .grid-controls .grid-pagesize {
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
}
.datagrid tfoot .datagrid-footer-left .grid-controls .grid-pagesize .dropdown-menu {
  top: auto;
  left: auto;
}
.datagrid tfoot .datagrid-footer-left .grid-controls span {
  font-weight: normal;
}
.datagrid tfoot .datagrid-footer-right {
  float: right;
}
.datagrid tfoot .datagrid-footer-right .grid-pager > span {
  font-weight: normal;
  position: relative;
  top: 8px;
}
.datagrid tfoot .datagrid-footer-right .grid-pager .dropdown-menu {
  min-width: 50px;
}
.datagrid tfoot .datagrid-footer-right .grid-pager .combobox {
  display: inline-block;
  position: relative;
  top: -2px;
  vertical-align: baseline;
  margin-bottom: 4px;
}
.datagrid tfoot .datagrid-footer-right .grid-pager > button {
  position: relative;
  top: 7px;
}
.datagrid-stretch-header {
  border-bottom: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 0;
}
.datagrid-stretch-header thead:last-child tr:last-child > th:first-child,
.datagrid-stretch-header thead:last-child tr:last-child > th:last-child {
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-bottomright: 0;
  border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-bottomleft: 0;
  border-bottom-left-radius: 0;
}
.datagrid-stretch-wrapper {
  border: 1px solid #dddddd;
  overflow: auto;
}
.datagrid-stretch-wrapper .datagrid {
  border: none;
  border-collapse: collapse;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  margin-bottom: 0;
}
.datagrid-stretch-wrapper .datagrid td,
.datagrid-stretch-wrapper .datagrid th {
  border-bottom: 1px solid #dddddd;
}
.datagrid-stretch-wrapper .datagrid td:first-child,
.datagrid-stretch-wrapper .datagrid th:first-child {
  border-left: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}
.datagrid-stretch-footer {
  border-top: 0;
  -webkit-border-top-right-radius: 0;
  -moz-border-radius-topright: 0;
  border-top-right-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topleft: 0;
  border-top-left-radius: 0;
}
.datagrid-stretch-footer th {
  border-top: 0;
}
.pillbox {
  padding: 3px;
}
.pillbox ul {
  display: inline-block;
  margin: 0;
}
.pillbox li {
  font-size: 11.844px;
  font-weight: bold;
  line-height: 21px;
  color: #ffffff;
  vertical-align: baseline;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  padding: 1px 4px 2px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  display: inline-block;
  margin: 2px;
  cursor: pointer;
  float: left;
}
.pillbox li:after {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
  filter: alpha(opacity=20);
  padding-left: 4px;
  position: relative;
  top: -2px;
  content: " \00D7";
}
.pillbox li:hover:after {
  opacity: 0.4;
  filter: alpha(opacity=40);
}
.pillbox li.status-important {
  background-color: #b94a48;
}
.pillbox li.status-warning {
  background-color: #f89406;
}
.pillbox li.status-success {
  background-color: #468847;
}
.pillbox li.status-info {
  background-color: #3a87ad;
}
.spinner input {
  width: 43px;
  float: left;
}
.spinner .btn {
  position: relative;
  width: 20px;
  height: 14px;
  padding-top: 0;
  padding-right: 9px;
  padding-left: 9px;
}
.spinner .btn.disabled {
  cursor: not-allowed;
}
.spinner .spinner-buttons {
  position: relative;
  float: left;
  height: 28px;
  width: 20px;
  left: -22px;
}
.spinner .spinner-up {
  padding: 0 0 4px 1px;
  top: 2px;
}
.spinner .spinner-up i {
  position: relative;
  top: -4px;
}
.spinner .spinner-down {
  padding: 0 0 4px 1px;
  top: 2px;
  height: 13px;
}
.spinner .spinner-down i {
  position: relative;
  top: -5px;
}
.search {
  display: inline-block;
}
.select .dropdown-label {
  padding: 0 10px 0 0;
  margin: 0;
  display: inline-block;
  text-align: left;
  font-weight: normal;
  color: #333;
}
#selectTextSize {
  display: inline-block;
  position: absolute;
  visibility: hidden;
  top: 0;
}
.tree {
  border: 1px solid #BBBBBB;
  border-radius: 4px 4px 4px 4px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 15px 0 15px;
  position: relative;
}
.tree .tree-folder {
  width: 100%;
  min-height: 20px;
  cursor: pointer;
  margin-top: 1px;
}
.tree .tree-folder .tree-folder-header {
  position: relative;
  height: 20px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.tree .tree-folder .tree-folder-header:hover {
  background-color: #dfeef5;
}
.tree .tree-folder .tree-folder-header i {
  position: absolute;
  float: left;
  top: 1px;
  left: 5px;
}
.tree .tree-folder .tree-folder-header .tree-folder-name {
  position: absolute;
  left: 29px;
}
.tree .tree-folder .tree-folder-content {
  margin-left: 23px;
}
.tree .tree-item {
  position: relative;
  width: 100%;
  height: 20px;
  cursor: pointer;
  margin-top: 1px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.tree .tree-item:hover {
  background-color: #dfeef5;
}
.tree .tree-item .tree-item-name {
  position: absolute;
  left: 29px;
}
.tree .tree-item .tree-dot {
  position: absolute;
  top: 8px;
  left: 10px;
  display: block;
  width: 4px;
  height: 4px;
  background-color: #333333;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.tree .tree-item .icon-ok {
  position: absolute;
  top: 1px;
  left: 5px;
}
.tree .tree-selected {
  background-color: #b9dff1;
}
.tree .tree-selected:hover {
  background-color: #b9dff1;
}
.wizard {
  *zoom: 1;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  background-color: #f9f9f9;
}
.wizard:before,
.wizard:after {
  display: table;
  content: "";
  line-height: 0;
}
.wizard:after {
  clear: both;
}
.wizard:before,
.wizard:after {
  display: table;
  content: "";
  line-height: 0;
}
.wizard:after {
  clear: both;
}
.wizard ul {
  list-style: none outside none;
  padding: 0;
  margin: 0;
  /* set z-index on steps for chevron overlap */

}
.wizard ul li {
  float: left;
  margin: 0;
  padding: 0 20px 0 30px;
  height: 46px;
  line-height: 46px;
  position: relative;
  background: #ededed;
  color: #999999;
  font-size: 16px;
  cursor: default;
}
.wizard ul li .chevron {
  border: 24px solid transparent;
  border-left: 14px solid #d4d4d4;
  border-right: 0;
  display: block;
  position: absolute;
  right: -14px;
  top: 0;
}
.wizard ul li .chevron:before {
  border: 24px solid transparent;
  border-left: 14px solid #ededed;
  border-right: 0;
  content: "";
  display: block;
  position: absolute;
  right: 1px;
  top: -24px;
}
.wizard ul li.complete {
  background: #f3f4f5;
  color: #468847;
}
.wizard ul li.complete:hover {
  background: #e7eff8;
  cursor: pointer;
}
.wizard ul li.complete:hover .chevron:before {
  border-left: 14px solid #e7eff8;
}
.wizard ul li.complete .chevron:before {
  border-left: 14px solid #f3f4f5;
}
.wizard ul li.active {
  background: #f1f6fc;
  color: #3a87ad;
}
.wizard ul li.active .chevron:before {
  border-left: 14px solid #f1f6fc;
}
.wizard ul li .badge {
  margin-right: 8px;
}
.wizard ul li:nth-child(1) {
  border-radius: 4px 0 0 4px;
  padding-left: 20px;
  z-index: 10;
}
.wizard ul li:nth-child(2) {
  z-index: 9;
}
.wizard ul li:nth-child(3) {
  z-index: 8;
}
.wizard ul li:nth-child(4) {
  z-index: 7;
}
.wizard ul li:nth-child(5) {
  z-index: 6;
}
.wizard ul li:nth-child(6) {
  z-index: 5;
}
.wizard ul li:nth-child(7) {
  z-index: 4;
}
.wizard ul li:nth-child(8) {
  z-index: 3;
}
.wizard ul li:nth-child(9) {
  z-index: 2;
}
.wizard ul li:nth-child(10) {
  z-index: 1;
}
.wizard .actions {
  line-height: 44px;
  float: right;
  padding-right: 15px;
  vertical-align: middle;
}
.wizard .actions a {
  line-height: 45px;
  font-size: 12px;
  margin-right: 8px;
}
.wizard .actions .btn-prev i {
  margin-right: 5px;
}
.wizard .actions .btn-next i {
  margin-left: 5px;
}
.step-content .step-pane {
  display: none;
}
.step-content .active {
  display: block;
}

License missing from gemspec

RubyGems.org doesn't report a license for your gem. This is because it is not specified in the gemspec of your last release.

via e.g.

  spec.license = 'MIT'
  # or
  spec.licenses = ['MIT', 'GPL-2']

Including a license in your gemspec is an easy way for rubygems.org and other tools to check how your gem is licensed. As you can imagine, scanning your repository for a LICENSE file or parsing the README, and then attempting to identify the license or licenses is much more difficult and more error prone. So, even for projects that already specify a license, including a license in your gemspec is a good practice. See, for example, how rubygems.org uses the gemspec to display the rails gem license.

There is even a License Finder gem to help companies/individuals ensure all gems they use meet their licensing needs. This tool depends on license information being available in the gemspec. This is an important enough issue that even Bundler now generates gems with a default 'MIT' license.

I hope you'll consider specifying a license in your gemspec. If not, please just close the issue with a nice message. In either case, I'll follow up. Thanks for your time!

Appendix:

If you need help choosing a license (sorry, I haven't checked your readme or looked for a license file), GitHub has created a license picker tool. Code without a license specified defaults to 'All rights reserved'-- denying others all rights to use of the code.
Here's a list of the license names I've found and their frequencies

p.s. In case you're wondering how I found you and why I made this issue, it's because I'm collecting stats on gems (I was originally looking for download data) and decided to collect license metadata,too, and make issues for gemspecs not specifying a license as a public service :). See the previous link or my blog post about this project for more information.

Typo in warning message in installation generator

There is a small typo in the install_generators.rb file:
The warning message states that "bootstrap_overrides.css.less" is missing whereby it should be "bootstrap_and_overrides.css.less".
Might lead to confusion for people who run into the issue.

checkbox.less and radio.less failed to load

When I try to import fuelux into my rails app, I found that the checkbox.less and the radio.less didn't load into the application.css.

I try to copy the two files into app/assets/stylesheets, but an error raised by less/less-rails when parsing the statement: url(image-path('form.png')), the message is expect ')' got '(', seems that less don't know the method image-path.

I guess that's the problem why the two files are not loaded, so I open a new issue in less.rb project cowboyd/less.rb#62, the author provides me with some solution.

Then I change the the url(image-path('form.png') to image-url('form.png'), but it still not loaded into application.css, I copy them to app/assets/stylesheets, it works, loaded and no error raised.

I wonder what's the problem with the two files?

Some optimization in lib/generators/fuelux/install_generator.rb

if content.match(/require_tree\s+.\s*$/)
# Good enough - that'll include our Fuel UX js

the comment here is not suite for a gem, require_tree . won't automatic include the assets in gem files, we need to include it in application.js as you say in the last section of readme.md.

So the generator should always add a directive 'require fuelux' to the application.js if there has no one.

Also, I don't know why the fuelux.js does not require fuelux/checkbox and the fuelux/loader?

Show/Hide button

I've installed this gem - pretty awesome. However, I'm having a few issues with the wizard.

Question here: http://stackoverflow.com/questions/14687497/how-to-hide-show-back-next-button-with-javascript-in-a-rails-from-wizard

Also - I was considering doing a pull request for the prerequisites to get this gem installed correctly.

error 'fuelux.less' wasn't found.

I have been using bootstrap and I tried to install fuelux on top of it,
I did bundle and I ran rails g fuelux:install,
then it inserted "@import 'fuelux.less'; " in bootstrap_and_overrides.less
then I added the line
"//= require fuelux.js" to application.js
and when I reload the page I get this error!

Less::Error - Cannot call method 'charAt' of undefined

Hello!

I followed the instructions on the README file, however I get the following error:
Less::Error - Cannot call method 'charAt' of undefined

Any idea what might be the cause?

Thanks!

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.