Skip to content

Instantly share code, notes, and snippets.

@cnkevinlee

cnkevinlee/Gemfile

Forked from chrisjacob/Gemfile
Last active August 29, 2015 14:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cnkevinlee/4b348169fa2e2e0f2450 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cnkevinlee/4b348169fa2e2e0f2450 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
README.md

Simple guide to integrating Pages v1.0.0 with Rails v4.1.1

  1. Organise everything under /vender (screenshot) ... I'll explain in a minute, for now just create the following subfolders: /vender/pages-core, /vender/pages-demo and /vender/pages-plugins.

  2. Pages v1.0.0 includes some CSS that is specific to it's Demo, but doesn't include the images in the build. You can download a zip of them here: https://www.dropbox.com/s/hc8hvd3sj17uiib/pages-demo.zip?dl=0 ... extract this zip into your /vender/pages-demo folder. FYI here is the zips content:

    img/

./img:
dashboard/
demo/
maps/
social/

./img/dashboard:
pages_hero.jpg

./img/demo:
tick.svg

./img/maps:
marker-alt-complete.svg
marker-alt-danger.svg
marker-alt-master.svg
marker-alt-primary.svg
marker-alt-success.svg
marker-alt-warning.svg
marker-complete.svg
marker-danger.svg
marker-master.svg
marker-primary.svg
marker-success.svg
marker-warning.svg
pulse-alt-complete.svg
pulse-alt-danger.svg
pulse-alt-master.svg
pulse-alt-primary.svg
pulse-alt-success.svg
pulse-alt-warning.svg
pulse-complete.svg
pulse-danger.svg
pulse-master.svg
pulse-primary.svg
pulse-success.svg
pulse-warning.svg

./img/social:
person-cropped.jpg
quote.jpg

  3. From the Pages v1.0.0 zip you downloaded from Themeforest copy the contents of build/getting_started/pages into /vender/pages-core.

  4. Then copy the contents of build/getting_started/assets/plugins into /vender/pages-plugins

  5. Open config/application.rb and add the following inside of class Application < Rails::Application:

    # Add folders to Asset Pipeline available paths
# Note that app/assets takes precedence, and will mask corresponding paths in lib and vendor
config.assets.paths << File.join(Rails.root, '/vendor/pages')

  6. Copy the contents of build/getting_started/assets/img into app/assets/images.

  7. Copy build/getting_started/pages/ico over to app/assets/images/ico.

  8. Under app/assets/stylesheets create a new file called pages-asset-pipeline.less then copy and paste this code into it.

  9. Your app/assets/stylesheets/application.css should look something like this.

  10. Your app/assets/javascripts/application.js should look something like this.

  11. You will probably also want to add this into your code e.g. in app/assets/javascripts/script.js

  12. You may have noticed I'm using Turbolinks. Here's the important parts of my /Gemfile.

  13. Copy over the content's of build/getting_started/index.html into app/views/layouts/application.html.erb

  14. Open app/views/layouts/application.html.erb and make the following changes...

  15. Change the HEAD to this

    <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <meta charset="utf-8" />
  <title>Your Title Here</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="apple-touch-icon" href="<%= image_path('ico/60.png') %>">
  <link rel="apple-touch-icon" sizes="76x76" href="<%= image_path('ico/76.png') %>">
  <link rel="apple-touch-icon" sizes="120x120" href="<%= image_path('ico/120.png') %>">
  <link rel="apple-touch-icon" sizes="152x152" href="<%= image_path('ico/152.png') %>">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta content="" name="description" />
  <meta content="" name="author" />

  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

  <!--[if lte IE 9]>
  <link href="/pages/css/ie9.css?v=pages-v1.0.0" rel="stylesheet" type="text/css" />
  <![endif]-->

  <script type="text/javascript">
    window.onload = function() {
      // fix for windows 8
      if (navigator.appVersion.indexOf("Windows NT 6.2") != -1)
        document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="/pages/css/windows.chrome.fix.css?v=pages-v1.0.0" />'
    }
  </script>

  <%= csrf_meta_tags %>

  <%= yield :head %>
</head>

  16. Search for src to find all references to images... update the paths to use Asset Pipeline e.g. data-src-retina="<%= image_path('profiles/1x.jpg') %>" and <img src="<%= image_path('logo_white.png') %>" alt="logo" ... etc

  17. Link up your navigation e.g.

    <li class="<%= controller_name == 'home' ? 'active' : '' %>">
    <%= link_to(home_path) do %>
        <span class="title">Home</span>
    <% end %>
    <span class="icon-thumbnail "><i class="fa fa-home"></i></span>
</li>

  18. Before your closing BODY tag add your JS

    <!-- JS at bottom of page to improve load time, and only loaded once with 'data-turbolinks-eval' == false  -->
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, 'data-turbolinks-eval' => false %>

</body>
</html>

  19. To test your assets being bundled togther into 1 file (and cache busted) you can set this in config/environments/development.rb.

    # Debug mode disables concatenation and preprocessing of assets.
# This option may cause significant delays in view rendering with a large
# number of complex assets.
config.assets.debug = false

# Generate digests for assets URLs.
config.assets.digest = true

  20. Run bundle to install any gems, then restart/start your server to take in any changes to development.rb and application.rb.

  21. Well done, you made it, grab a beer!

Raw
application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
* BEGIN VENDOR CSS FOR PAGES
*= require pages-plugins/pace/pace-theme-flash
*= require pages-plugins/boostrapv3/css/bootstrap.min
*= require pages-plugins/font-awesome/css/font-awesome
*= require pages-plugins/jquery-scrollbar/jquery.scrollbar
*= require pages-plugins/bootstrap-select2/select2
*= require pages-plugins/switchery/css/switchery.min
*
* BEGIN CORE TEMPLATE CSS FOR PAGES
*= require pages-core/css/pages-icons
*= require pages-core/css/pages
*
* BEGIN PAGES ASSET PIPELINE OVERRIDE
*= require ./pages-asset-pipeline
*
* BEGIN SITE STYLES
*= require ./style
*
* I prefer to list stylesheets in a specific order, so I comment out require_tree .
**** require_tree .
*/
Raw
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
// BEGIN VENDOR JS FOR PAGES (plus add in jquery.turbolinks)
//= require pages-plugins/pace/pace.min
//= require pages-plugins/jquery/jquery-1.8.3.min
//= require jquery.turbolinks
//= require jquery_ujs
//= require pages-plugins/modernizr.custom
//= require pages-plugins/jquery-ui/jquery-ui.min
//= require pages-plugins/boostrapv3/js/bootstrap.min
//= require pages-plugins/jquery/jquery-easy
//= require pages-plugins/jquery-unveil/jquery.unveil.min
//= require pages-plugins/jquery-bez/jquery.bez.min
//= require pages-plugins/jquery-ios-list/jquery.ioslist.min
//= require pages-plugins/imagesloaded/imagesloaded.pkgd.min
//= require pages-plugins/jquery-actual/jquery.actual.min
//= require pages-plugins/jquery-scrollbar/jquery.scrollbar.min
// BEGIN CORE TEMPLATE JS FOR PAGES
//= require pages-core/js/pages
// BEGIN SITE SCRIPTS
//= require ./script
// I prefer to list scripts in a specific order, so I comment out require_tree .
// require_tree .
//= require turbolinks
Raw
Gemfile
gem 'rails', '4.1.1'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
gem 'jquery-turbolinks'
# Gems for twitter LESS -> CSS and JS support
gem 'execjs'
gem 'therubyracer'
gem "less-rails"
Raw
pages-asset-pipeline.less
/*
* Override Pages v1.0.0 css & plugins to use the Rails Asset Pipeline
*/
/* pages-plugins/boostrapv3/css/bootstrap.min */
@font-face {
font-family: 'Glyphicons Halflings';
src: asset-url('pages-plugins/boostrapv3/fonts/glyphicons-halflings-regular.eot');
src: asset-url('pages-plugins/boostrapv3/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), asset-url('pages-plugins/boostrapv3/fonts/glyphicons-halflings-regular.woff') format('woff'), asset-url('pages-plugins/boostrapv3/fonts/glyphicons-halflings-regular.ttf') format('truetype'), asset-url('pages-plugins/boostrapv3/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
/* pages-plugins/font-awesome/css/font-awesome */
@font-face {
font-family: 'FontAwesome';
src: asset-url('pages-plugins/font-awesome/fonts/fontawesome-webfont.eot?v=4.2.0');
src: asset-url('pages-plugins/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), asset-url('pages-plugins/font-awesome/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), asset-url('pages-plugins/font-awesome/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), asset-url('pages-plugins/font-awesome/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* pages-plugins/bootstrap-select2/select2 */
.select2-container .select2-choice abbr {
background: asset-url('pages-plugins/bootstrap-select2/select2.png') right top no-repeat;
}
.select2-container .select2-choice .select2-arrow b {
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat 0 1px;
}
.select2-search input {
background: #fff asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat 100% -22px;
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
html[dir="rtl"] .select2-search input {
background: #fff asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat -37px -22px;
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: asset-url('pages-plugins/bootstrap-select2/select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
.select2-search input.select2-active {
background: #fff asset-url('pages-plugins/bootstrap-select2/select2-spinner.gif') no-repeat 100%;
background: asset-url('pages-plugins/bootstrap-select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
background: asset-url('pages-plugins/bootstrap-select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: asset-url('pages-plugins/bootstrap-select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
background: asset-url('pages-plugins/bootstrap-select2/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
.select2-more-results.select2-active {
background: #f4f4f4 asset-url('pages-plugins/bootstrap-select2/select2-spinner.gif') no-repeat 100%;
}
.select2-container-multi .select2-choices .select2-search-field input.select2-active {
background: #fff asset-url('pages-plugins/bootstrap-select2/select2-spinner.gif') no-repeat 100% !important;
}
.select2-search-choice-close {
background: asset-url('pages-plugins/bootstrap-select2/select2.png') right top no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
.select2-search input,
.select2-search-choice-close,
.select2-container .select2-choice abbr,
.select2-container .select2-choice .select2-arrow b {
background-image: asset-url('pages-plugins/bootstrap-select2/select2x2.png') !important;
}
}
/* pages-core/css/pages-icons */
@font-face {
font-family: 'pages-icon';
src:asset-url('pages-core/fonts/pages-icon/Pages-icon.eot?-u69vo5');
src:asset-url('pages-core/fonts/pages-icon/Pages-icon.eot?#iefix-u69vo5') format('embedded-opentype'),
asset-url('pages-core/fonts/pages-icon/Pages-icon.woff?-u69vo5') format('woff'),
asset-url('pages-core/fonts/pages-icon/Pages-icon.ttf?-u69vo5') format('truetype'),
asset-url('pages-core/fonts/pages-icon/Pages-icon.svg?-u69vo5#Pages-icon') format('svg');
font-weight: normal;
font-style: normal;
}
/* pages-core/css/pages */
.pace .pace-activity {
background: asset-url('pages-core/img/progress/progress-circle-success.svg') no-repeat top left;
}
.quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note {
background-image: asset-url('pages-core/img/notes_lines.png');
}
.icon-set {
background: asset-url('pages-core/img/icons/top_tray.png') no-repeat;
}
.portlet-icon-refresh-lg-master {
background-image: asset-url('pages-core/img/progress/progress-circle-lg-master-static.svg');
}
.portlet-icon-refresh-lg-white {
background-image: asset-url('pages-core/img/progress/progress-circle-lg-white-static.svg');
}
.portlet-icon-refresh-lg-master-animated {
background-image: asset-url('pages-core/img/progress/progress-circle-lg-master.svg');
}
.portlet-icon-refresh-lg-white-animated {
background-image: asset-url('pages-core/img/progress/progress-circle-lg-white.svg');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v5/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'), url(http://fonts.gstatic.com/s/montserrat/v5/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff'), asset-url('pages-core/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v5/IQHow_FEYlDC4Gzy_m8fcmaVI6zN22yiurzcBKxPjFE.woff2) format('woff2'), url(http://fonts.gstatic.com/s/montserrat/v5/IQHow_FEYlDC4Gzy_m8fcnbFhgvWbfSbdVg11QabG8w.woff) format('woff'), asset-url('pages-core/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
}
.alert .close {
background: asset-url("pages-core/img/icons/noti-cross.png") no-repeat scroll 0 0 transparent;
}
.progress-bar-indeterminate {
background: asset-url('pages-core/img/progress/progress-bar-master.svg') no-repeat top left;
}
.progress-bar-indeterminate.progress-bar-primary {
background-image: asset-url('pages-core/img/progress/progress-bar-primary.svg');
}
.progress-bar-indeterminate.progress-bar-complete {
background-image: asset-url('pages-core/img/progress/progress-bar-complete.svg');
}
.progress-bar-indeterminate.progress-bar-success {
background-image: asset-url('pages-core/img/progress/progress-bar-success.svg');
}
/* TODO : This asset is currently missing in v1.0.0 - see: https://github.com/revoxltd/pages/issues/69
.progress-bar-indeterminate.progress-bar-info {
background-image: asset-url('pages-core/img/progress/progress-bar-info.svg');
}
*/
.progress-bar-indeterminate.progress-bar-warning {
background-image: asset-url('pages-core/img/progress/progress-bar-warning.svg');
}
.progress-bar-indeterminate.progress-bar-danger {
background-image: asset-url('pages-core/img/progress/progress-bar-danger.svg');
}
.progress-bar-indeterminate.progress-bar-master {
background-image: asset-url('pages-core/img/progress/progress-bar-master.svg');
}
.progress-circle-indeterminate {
background: asset-url('pages-core/img/progress/progress-circle-master.svg') no-repeat top left;
}
.progress-circle-indeterminate.progress-circle-warning {
background-image: asset-url('pages-core/img/progress/progress-circle-warning.svg');
}
.progress-circle-indeterminate.progress-circle-danger {
background-image: asset-url('pages-core/img/progress/progress-circle-danger.svg');
}
/* TODO : This asset is currently missing in v1.0.0 - see: https://github.com/revoxltd/pages/issues/69
.progress-circle-indeterminate.progress-circle-info {
background-image: asset-url('pages-core/img/progress/progress-circle-info.svg');
}
*/
.progress-circle-indeterminate.progress-circle-primary {
background-image: asset-url('pages-core/img/progress/progress-circle-primary.svg');
}
.progress-circle-indeterminate.progress-circle-success {
background-image: asset-url('pages-core/img/progress/progress-circle-success.svg');
}
.progress-circle-indeterminate.progress-circle-complete {
background-image: asset-url('pages-core/img/progress/progress-circle-complete.svg');
}
.editor-icon {
background-image: asset-url("pages-core/img/editor_tray.png");
}
/* TODO : This asset is currently missing in v1.0.0 - see: https://github.com/revoxltd/pages/issues/68
@font-face {
font-family: 'icomoon';
src: asset-url('pages-core/fonts/icomoon/icomoon.eot?-rdnm34');
src: asset-url('pages-core/fonts/icomoon/icomoon.eot?#iefix-rdnm34') format('embedded-opentype'), asset-url('pages-core/fonts/icomoon/icomoon.woff?-rdnm34') format('woff'), asset-url('pages-core/fonts/icomoon/icomoon.ttf?-rdnm34') format('truetype'), asset-url('pages-core/fonts/icomoon/icomoon.svg?-rdnm34#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
*/
.social-wrapper .social .cover-photo:before {
background-image: asset-url("pages-core/img/linear_gradient.png");
}
.mapplic-pin {
background-image: asset-url('pages-demo/img/maps/marker-master.svg');
background-size: contain;
}
.mapplic-pin.pulse {
background-image: asset-url('pages-demo/img/maps/pulse-master.svg');
}
.mapplic-pin.pulse.green {
background-image: asset-url('pages-demo/img/maps/pulse-success.svg');
}
.mapplic-pin.pulse.blue {
background-image: asset-url('pages-demo/img/maps/pulse-complete.svg');
}
.mapplic-pin.pulse.purple {
background-image: asset-url('pages-demo/img/maps/pulse-primary.svg');
}
.mapplic-pin.pulse.yellow {
background-image: asset-url('pages-demo/img/maps/pulse-warning.svg');
}
.mapplic-pin.pulse.red {
background-image: asset-url('pages-demo/img/maps/pulse-danger.svg');
}
.mapplic-pin.pulse-alt {
background-image: asset-url('pages-demo/img/maps/pulse-alt-master.svg');
}
.mapplic-pin.pulse-alt.green {
background-image: asset-url('pages-demo/img/maps/pulse-alt-success.svg');
}
.mapplic-pin.pulse-alt.blue {
background-image: asset-url('pages-demo/img/maps/pulse-alt-complete.svg');
}
.mapplic-pin.pulse-alt.purple {
background-image: asset-url('pages-demo/img/maps/pulse-alt-primary.svg');
}
.mapplic-pin.pulse-alt.yellow {
background-image: asset-url('pages-demo/img/maps/pulse-alt-warning.svg');
}
.mapplic-pin.pulse-alt.red {
background-image: asset-url('pages-demo/img/maps/pulse-alt-danger.svg');
}
.mapplic-pin.marker {
background-image: asset-url('pages-demo/img/maps/marker-master.svg');
}
.mapplic-pin.marker.green {
background-image: asset-url('pages-demo/img/maps/marker-success.svg');
}
.mapplic-pin.marker.blue {
background-image: asset-url('pages-demo/img/maps/marker-complete.svg');
}
.mapplic-pin.marker.purple {
background-image: asset-url('pages-demo/img/maps/marker-primary.svg');
}
.mapplic-pin.marker.yellow {
background-image: asset-url('pages-demo/img/maps/marker-warning.svg');
}
.mapplic-pin.marker.red {
background-image: asset-url('pages-demo/img/maps/marker-danger.svg');
}
.mapplic-pin.marker-alt {
background-image: asset-url('pages-demo/img/maps/marker-alt-master.svg');
}
.mapplic-pin.marker-alt.green {
background-image: asset-url('pages-demo/img/maps/marker-alt-success.svg');
}
.mapplic-pin.marker-alt.blue {
background-image: asset-url('pages-demo/img/maps/marker-alt-complete.svg');
}
.mapplic-pin.marker-alt.purple {
background-image: asset-url('pages-demo/img/maps/marker-alt-primary.svg');
}
.mapplic-pin.marker-alt.yellow {
background-image: asset-url('pages-demo/img/maps/marker-alt-warning.svg');
}
.mapplic-pin.marker-alt.red {
background-image: asset-url('pages-demo/img/maps/marker-alt-danger.svg');
}
.widget-1:after {
background-image: asset-url("pages-demo/img/dashboard/pages_hero.jpg");
}
.widget-1:before {
background-image: asset-url('pages-core/img/linear_gradient.png');
}
.widget-2:after {
background-image: asset-url("pages-demo/img/social/person-cropped.jpg");
}
.widget-18-post {
background: asset-url('pages-demo/img/social/quote.jpg');
}
.builder a.active:before {
background-image: asset-url('pages-demo/img/demo/tick.svg');
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2) {
.icon-set {
background: asset-url('pages-core/img/icons/top_tray_2x.png');
}
.editor-icon {
background-image: asset-url("pages-core/img/editor_tray_2x.png");
}
.alert .close {
background: asset-url("pages-core/img/icons/noti-cross-2x.png") no-repeat scroll 0 0 transparent;
}
}
Raw
script.js
(function($) {
'use strict';
/*
* Window.onload will be triggered on the first page load as normal, and then manually for Turbolinks pages.
*/
window.loadEventsBound = false;
$(document).on('page:change', function(){
if(window.loadEventsBound) {
// Assuming all JS and CSS is downloaded and processed on the first page load...
// ...then when loading a new page via Turbolinks the only thing delaying Window.onload is Images.
// So use: http://imagesloaded.desandro.com -- and JavaScript is all like "You images done yet or what?"
imagesLoaded('body', function(){
$(window).trigger('load');
});
}
});
$(window).on('load', function(){
window.loadEventsBound = true;
// console.log('Window loaded');
});
/*
* Pages - taken from the Pages framework assets/js/script.js
*/
$(document).ready(function() {
// Initializes search overlay plugin.
// Replace onSearchSubmit() and onKeyEnter() with
// your logic to perform a search and display results
$('[data-pages="search"]').search({
searchField: '#overlay-search',
closeButton: '.overlay-close',
suggestions: '#overlay-suggestions',
brand: '.brand',
onSearchSubmit: function(searchString) {
console.log("Search for: " + searchString);
},
onKeyEnter: function(searchString) {
console.log("Live search for: " + searchString);
var searchField = $('#overlay-search');
var searchResults = $('.search-results');
clearTimeout($.data(this, 'timer'));
searchResults.fadeOut("fast");
var wait = setTimeout(function() {
searchResults.find('.result-name').each(function() {
if (searchField.val().length != 0) {
$(this).html(searchField.val());
searchResults.fadeIn("fast");
}
});
}, 500);
$(this).data('timer', wait);
}
});
});
})(window.jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment