Skip to content

Instantly share code, notes, and snippets.

@chrisjacob

chrisjacob/Gemfile

Last active February 6, 2020 08:26
Show Gist options
  • Save chrisjacob/a070de58e98dff4f6d62 to your computer and use it in GitHub Desktop.
Save chrisjacob/a070de58e98dff4f6d62 to your computer and use it in GitHub Desktop.
Download ZIP
Simple guide to integrating Pages v1.0.0 with Rails v4.1.1
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);
@carlocasorzo
Copy link

Hi Chris
Thank you very much for this guide.
It worked great for me in development, but I get an error in the asset precompilation when pushing to heroku or when precompiling locally.
I get a SASS syntax error in some file I can't identify
Do you have any clue what I'm missing?

Thanks for your help

@NilAndNull
Copy link

Hi Chris,

Great guide!!

As a Rails Developer, this guides helps a lot.

Can you update your guide to Pages 1.1.0 ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment