stephenbaldwin / fuelux-rails Goto Github PK
View Code? Open in Web Editor NEWFuel UX for Rails 3.1/4.0 Asset Pipeline
Home Page: http://exacttarget.github.com/fuelux/
License: Other
Fuel UX for Rails 3.1/4.0 Asset Pipeline
Home Page: http://exacttarget.github.com/fuelux/
License: Other
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?
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;
}
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!
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.
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.
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?
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!
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.