Flat UI Pro 1.2.5 known issues

[reflection]

Hi all,

The 1.2.5 release has some issues I'd like to highlight:

• On the demo page, the video poster image won't work. This is because the
• rake assets:precompile fails with a syntax error unless one comments less/modules/caret.less:12 . This is patched by the gem.

Also, in case you want a quick way to get started with Flat UI Pro 1.2.5 in Rails with Bootstrap 3:

$ rails new frodo
$ cd frodo/
$ echo -e "gem 'therubyracer'\ngem 'jquery-ui-rails'\ngem 'less-rails-bootstrap'" >> Gemfile
$ bundle install

# Add these lines to setup less-rails-bootstrap (via sed or favorite text editor)
#
# In app/assets/javascripts/application.js
# Add //= require twitter/bootstrap
#
# In app/assets/stylesheets/application.css
# Add *= require twitter/bootstrap

$ echo -e "gem 'designmodo-flatuipro-rails', '~> 1.2.5.0.branch'\n" >> Gemfile
$ bundle install

# Change to wherever Flat UI Pro 1.2.5 is
$ rails g flatuipro:install ~/Developer/flatuipro-1.2.5/
$ rails g flatuipro:demo

[amksg]

Hey, firstly thank you for helping me install the theme using your 'quick way' method. Spent the whole afternoon trying to figure things out. Lucky I found your method.

Anyway, I cannot seem to get the carousel working. Was the reason due to "rails helper video_tag" you mentioned? If so, how do I fix it myself?

<div class="demo-row">
        <div class="demo-title">
          <h3 class="demo-panel-title">Carousel</h3>
        </div>
        <div class="demo-content-wide ptl">
          <div id="myCarousel" class="carousel slide" data-interval="false">
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
              <li data-target="#myCarousel" data-slide-to="1"></li>
              <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
              <div class="item active">
                <%= image_tag "carousel/image-01.jpg" %>
                <div class="carousel-caption">
                  <h3>Thumbnail label</h3>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.</p>
                </div>
              </div>
              <div class="item">
                <%= image_tag "carousel/image-02.jpg" %>
                <div class="carousel-caption">
                  <h3>Thumbnail label</h3>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.</p>
                </div>
              </div>
              <div class="item">
                <%= image_tag "carousel/image-03.jpg" %>
                <div class="carousel-caption">
                  <h3>Thumbnail label</h3>
                  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec.</p>
                </div>
              </div>
            </div>
            <!-- Controls -->
            <a class="left carousel-control fui-arrow-left" href="#myCarousel" data-slide="prev"></a>
            <a class="right carousel-control fui-arrow-right" href="#myCarousel" data-slide="next"></a>
          </div>
        </div><!-- /.demo-content -->
      </div><!-- /.demo-row -->

Many thanks again.

[reflection]

Hi amksg,

I can't reproduce any problems with the carousel (I'm assuming you're looking at the demo page). Perhaps you didn't include the javascript correctly because I had a typo in my original instructions (since fixed):

Add "//= require twitter/bootstrap <-- No double quote

[amksg]

Hi thank you for responding to me quickly. I appreciate it.

i did include it. this is my manifest file.

//= require twitter/bootstrap
//= require jquery.ui.all
//= require jquery
//= require jquery.ui.button
//= require jquery.ui.datepicker
//= require jquery.ui.slider
//= require jquery.ui.spinner
//= require jquery.ui.tooltip
//= require jquery.ui.effect
//= require flatuipro
//= require jquery_ujs
//= require turbolinks
//= require_tree .

[reflection]

Perhaps I'm not understanding you correctly.

• Did you check the web error console to see if there are any issues?
• What exactly isn't working?
• Can you attach a screenshot?

[amksg]

The carousel slider was not working.

I managed to fixed it by including

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

in the application.html layout. Not sure why the js file is not included in my application initially.

Thank you for your time. Appreciate it so much. :)

[kovacs]

So I'm confused... are you saying that 1.2.5 should work with rails just fine and the asset pipeline? Because it doesn't for me as it fails during asset compilation.