-
Organise everything under
/vender(screenshot) ... I'll explain in a minute, for now just create the following subfolders:/vender/pages-core,/vender/pages-demoand/vender/pages-plugins. -
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-demofolder. 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 -
From the Pages v1.0.0 zip you downloaded from Themeforest copy the contents of
build/getting_started/pagesinto/vender/pages-core. -
Then copy the contents of
build/getting_started/assets/pluginsinto/vender/pages-plugins -
Open
config/application.rband add the following inside ofclass 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')
-
Copy the contents of
build/getting_started/assets/imgintoapp/assets/images. -
Copy
build/getting_started/pages/icoover toapp/assets/images/ico. -
Under
app/assets/stylesheetscreate a new file calledpages-asset-pipeline.lessthen copy and paste this code into it. -
Your
app/assets/stylesheets/application.cssshould look something like this. -
Your
app/assets/javascripts/application.jsshould look something like this. -
You will probably also want to add this into your code e.g. in
app/assets/javascripts/script.js -
You may have noticed I'm using Turbolinks. Here's the important parts of my
/Gemfile. -
Copy over the content's of
build/getting_started/index.htmlintoapp/views/layouts/application.html.erb -
Open
app/views/layouts/application.html.erband make the following changes... -
Change the
HEADto 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>
-
Search for
srcto 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 -
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>
-
Before your closing
BODYtag 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>
-
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
-
Run
bundleto install any gems, then restart/start your server to take in any changes todevelopment.rbandapplication.rb. -
Well done, you made it, grab a beer!
Last active
February 6, 2020 08:26
-
-
Save chrisjacob/a070de58e98dff4f6d62 to your computer and use it in GitHub Desktop.
Simple guide to integrating Pages v1.0.0 with Rails v4.1.1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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 . | |
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (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); |
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
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