├── .gitignore ├── .ruby-version ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── Procfile ├── README.md ├── Rakefile ├── app ├── assets │ ├── config │ │ └── manifest.js │ ├── images │ │ └── .keep │ ├── javascripts │ │ ├── application.js │ │ ├── cable.js │ │ ├── channels │ │ │ └── .keep │ │ └── google_maps_autocomplete.js │ └── stylesheets │ │ ├── README.md │ │ ├── application.scss │ │ ├── components │ │ ├── _alert.scss │ │ ├── _avatars.scss │ │ ├── _badges.scss │ │ └── _index.scss │ │ ├── config │ │ ├── _bootstrap_variables.scss │ │ └── _variables.scss │ │ ├── flats.scss │ │ ├── layout │ │ ├── _footer.scss │ │ ├── _index.scss │ │ ├── _navbar.scss │ │ └── _utilities.scss │ │ ├── pages │ │ ├── _home.scss │ │ └── _index.scss │ │ └── vendor │ │ ├── _animation_cheat_sheet.scss │ │ └── _index.scss ├── channels │ └── application_cable │ │ ├── channel.rb │ │ └── connection.rb ├── controllers │ ├── application_controller.rb │ ├── concerns │ │ └── .keep │ ├── flats_controller.rb │ └── pages_controller.rb ├── helpers │ ├── application_helper.rb │ └── flats_helper.rb ├── jobs │ └── application_job.rb ├── mailers │ └── application_mailer.rb ├── models │ ├── application_record.rb │ ├── concerns │ │ └── .keep │ └── flat.rb └── views │ ├── flats │ ├── destroy.js.erb │ ├── index.html.erb │ └── new.html.erb │ ├── layouts │ ├── application.html.erb │ ├── mailer.html.erb │ └── mailer.text.erb │ ├── pages │ └── home.html.erb │ └── shared │ └── _flashes.html.erb ├── bin ├── bundle ├── rails ├── rake ├── setup ├── spring └── update ├── browser_key.png ├── config.ru ├── config ├── application.rb ├── boot.rb ├── cable.yml ├── database.yml ├── environment.rb ├── environments │ ├── development.rb │ ├── production.rb │ └── test.rb ├── initializers │ ├── application_controller_renderer.rb │ ├── assets.rb │ ├── backtrace_silencers.rb │ ├── cookies_serializer.rb │ ├── filter_parameter_logging.rb │ ├── geocoder.rb │ ├── inflections.rb │ ├── mime_types.rb │ ├── session_store.rb │ ├── simple_form.rb │ ├── simple_form_bootstrap.rb │ └── wrap_parameters.rb ├── locales │ ├── en.yml │ └── simple_form.en.yml ├── puma.rb ├── routes.rb ├── secrets.yml └── spring.rb ├── dashboard.png ├── db ├── migrate │ ├── 20160808145400_create_flats.rb │ └── 20160808161318_add_coordinates_to_flats.rb ├── schema.rb └── seeds.rb ├── lib ├── assets │ └── .keep ├── tasks │ └── .keep └── templates │ └── erb │ └── scaffold │ └── _form.html.erb ├── log └── .keep ├── public ├── 404.html ├── 422.html ├── 500.html ├── apple-touch-icon-precomposed.png ├── apple-touch-icon.png ├── favicon.ico └── robots.txt └── vendor └── assets ├── javascripts └── .keep └── stylesheets └── .keep /.gitignore: -------------------------------------------------------------------------------- 1 | .bundle 2 | log/*.log 3 | tmp/**/* 4 | tmp/* 5 | *.swp 6 | .DS_Store 7 | public/assets 8 | 9 | # Ignore application configuration 10 | /config/application.yml 11 | -------------------------------------------------------------------------------- /.ruby-version: -------------------------------------------------------------------------------- 1 | 2.6.5 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | ruby '2.6.5' 3 | 4 | gem 'rails', '5.2.0' 5 | gem 'puma' 6 | gem 'pg' 7 | gem 'figaro' 8 | gem 'jbuilder', '~> 2.0' 9 | gem 'redis' 10 | 11 | gem 'sass-rails' 12 | gem 'jquery-rails' 13 | gem 'uglifier' 14 | gem 'bootstrap-sass' 15 | gem 'font-awesome-sass' 16 | gem 'simple_form' 17 | gem 'geocoder' 18 | gem 'country_select' 19 | gem 'autoprefixer-rails' 20 | 21 | group :development, :test do 22 | gem 'pry-byebug' 23 | gem 'pry-rails' 24 | gem 'spring' 25 | gem 'listen', '~> 3.0.5' 26 | gem 'spring-watcher-listen', '~> 2.0.0' 27 | end 28 | 29 | group :production do 30 | gem 'rails_12factor' 31 | end 32 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | actioncable (5.2.0) 5 | actionpack (= 5.2.0) 6 | nio4r (~> 2.0) 7 | websocket-driver (>= 0.6.1) 8 | actionmailer (5.2.0) 9 | actionpack (= 5.2.0) 10 | actionview (= 5.2.0) 11 | activejob (= 5.2.0) 12 | mail (~> 2.5, >= 2.5.4) 13 | rails-dom-testing (~> 2.0) 14 | actionpack (5.2.0) 15 | actionview (= 5.2.0) 16 | activesupport (= 5.2.0) 17 | rack (~> 2.0) 18 | rack-test (>= 0.6.3) 19 | rails-dom-testing (~> 2.0) 20 | rails-html-sanitizer (~> 1.0, >= 1.0.2) 21 | actionview (5.2.0) 22 | activesupport (= 5.2.0) 23 | builder (~> 3.1) 24 | erubi (~> 1.4) 25 | rails-dom-testing (~> 2.0) 26 | rails-html-sanitizer (~> 1.0, >= 1.0.3) 27 | activejob (5.2.0) 28 | activesupport (= 5.2.0) 29 | globalid (>= 0.3.6) 30 | activemodel (5.2.0) 31 | activesupport (= 5.2.0) 32 | activerecord (5.2.0) 33 | activemodel (= 5.2.0) 34 | activesupport (= 5.2.0) 35 | arel (>= 9.0) 36 | activestorage (5.2.0) 37 | actionpack (= 5.2.0) 38 | activerecord (= 5.2.0) 39 | marcel (~> 0.3.1) 40 | activesupport (5.2.0) 41 | concurrent-ruby (~> 1.0, >= 1.0.2) 42 | i18n (>= 0.7, < 2) 43 | minitest (~> 5.1) 44 | tzinfo (~> 1.1) 45 | arel (9.0.0) 46 | autoprefixer-rails (6.4.0.1) 47 | execjs 48 | bootstrap-sass (3.4.1) 49 | autoprefixer-rails (>= 5.2.1) 50 | sassc (>= 2.0.0) 51 | builder (3.2.3) 52 | byebug (9.0.5) 53 | coderay (1.1.1) 54 | concurrent-ruby (1.1.5) 55 | countries (2.1.4) 56 | i18n_data (~> 0.8.0) 57 | money (~> 6.9) 58 | sixarm_ruby_unaccent (~> 1.1) 59 | unicode_utils (~> 1.4) 60 | country_select (3.1.1) 61 | countries (~> 2.0) 62 | sort_alphabetical (~> 1.0) 63 | crass (1.0.5) 64 | erubi (1.9.0) 65 | execjs (2.7.0) 66 | ffi (1.9.25) 67 | figaro (1.1.1) 68 | thor (~> 0.14) 69 | font-awesome-sass (4.6.2) 70 | sass (>= 3.2) 71 | geocoder (1.6.1) 72 | globalid (0.4.1) 73 | activesupport (>= 4.2.0) 74 | i18n (1.0.1) 75 | concurrent-ruby (~> 1.0) 76 | i18n_data (0.8.0) 77 | jbuilder (2.7.0) 78 | activesupport (>= 4.2.0) 79 | multi_json (>= 1.2) 80 | jquery-rails (4.1.1) 81 | rails-dom-testing (>= 1, < 3) 82 | railties (>= 4.2.0) 83 | thor (>= 0.14, < 2.0) 84 | listen (3.0.8) 85 | rb-fsevent (~> 0.9, >= 0.9.4) 86 | rb-inotify (~> 0.9, >= 0.9.7) 87 | loofah (2.3.1) 88 | crass (~> 1.0.2) 89 | nokogiri (>= 1.5.9) 90 | mail (2.7.0) 91 | mini_mime (>= 0.1.1) 92 | marcel (0.3.2) 93 | mimemagic (~> 0.3.2) 94 | method_source (0.8.2) 95 | mimemagic (0.3.2) 96 | mini_mime (1.0.0) 97 | mini_portile2 (2.4.0) 98 | minitest (5.12.2) 99 | money (6.11.3) 100 | i18n (>= 0.6.4, < 1.1) 101 | multi_json (1.13.1) 102 | nio4r (2.5.2) 103 | nokogiri (1.10.5) 104 | mini_portile2 (~> 2.4.0) 105 | pg (0.18.4) 106 | pry (0.10.4) 107 | coderay (~> 1.1.0) 108 | method_source (~> 0.8.1) 109 | slop (~> 3.4) 110 | pry-byebug (3.4.0) 111 | byebug (~> 9.0) 112 | pry (~> 0.10) 113 | pry-rails (0.3.4) 114 | pry (>= 0.9.10) 115 | puma (4.3.3) 116 | nio4r (~> 2.0) 117 | rack (2.0.7) 118 | rack-test (1.1.0) 119 | rack (>= 1.0, < 3) 120 | rails (5.2.0) 121 | actioncable (= 5.2.0) 122 | actionmailer (= 5.2.0) 123 | actionpack (= 5.2.0) 124 | actionview (= 5.2.0) 125 | activejob (= 5.2.0) 126 | activemodel (= 5.2.0) 127 | activerecord (= 5.2.0) 128 | activestorage (= 5.2.0) 129 | activesupport (= 5.2.0) 130 | bundler (>= 1.3.0) 131 | railties (= 5.2.0) 132 | sprockets-rails (>= 2.0.0) 133 | rails-dom-testing (2.0.3) 134 | activesupport (>= 4.2.0) 135 | nokogiri (>= 1.6) 136 | rails-html-sanitizer (1.3.0) 137 | loofah (~> 2.3) 138 | rails_12factor (0.0.3) 139 | rails_serve_static_assets 140 | rails_stdout_logging 141 | rails_serve_static_assets (0.0.5) 142 | rails_stdout_logging (0.0.5) 143 | railties (5.2.0) 144 | actionpack (= 5.2.0) 145 | activesupport (= 5.2.0) 146 | method_source 147 | rake (>= 0.8.7) 148 | thor (>= 0.18.1, < 2.0) 149 | rake (13.0.1) 150 | rb-fsevent (0.9.7) 151 | rb-inotify (0.9.7) 152 | ffi (>= 0.5.0) 153 | redis (3.3.1) 154 | sass (3.7.4) 155 | sass-listen (~> 4.0.0) 156 | sass-listen (4.0.0) 157 | rb-fsevent (~> 0.9, >= 0.9.4) 158 | rb-inotify (~> 0.9, >= 0.9.7) 159 | sass-rails (5.0.6) 160 | railties (>= 4.0.0, < 6) 161 | sass (~> 3.1) 162 | sprockets (>= 2.8, < 4.0) 163 | sprockets-rails (>= 2.0, < 4.0) 164 | tilt (>= 1.1, < 3) 165 | sassc (2.2.1) 166 | ffi (~> 1.9) 167 | simple_form (5.0.0) 168 | actionpack (>= 5.0) 169 | activemodel (>= 5.0) 170 | sixarm_ruby_unaccent (1.2.0) 171 | slop (3.6.0) 172 | sort_alphabetical (1.1.0) 173 | unicode_utils (>= 1.2.2) 174 | spring (1.7.2) 175 | spring-watcher-listen (2.0.0) 176 | listen (>= 2.7, < 4.0) 177 | spring (~> 1.2) 178 | sprockets (3.7.2) 179 | concurrent-ruby (~> 1.0) 180 | rack (> 1, < 3) 181 | sprockets-rails (3.2.1) 182 | actionpack (>= 4.0) 183 | activesupport (>= 4.0) 184 | sprockets (>= 3.0.0) 185 | thor (0.20.0) 186 | thread_safe (0.3.6) 187 | tilt (2.0.5) 188 | tzinfo (1.2.5) 189 | thread_safe (~> 0.1) 190 | uglifier (3.0.1) 191 | execjs (>= 0.3.0, < 3) 192 | unicode_utils (1.4.0) 193 | websocket-driver (0.7.0) 194 | websocket-extensions (>= 0.1.0) 195 | websocket-extensions (0.1.3) 196 | 197 | PLATFORMS 198 | ruby 199 | 200 | DEPENDENCIES 201 | autoprefixer-rails 202 | bootstrap-sass 203 | country_select 204 | figaro 205 | font-awesome-sass 206 | geocoder 207 | jbuilder (~> 2.0) 208 | jquery-rails 209 | listen (~> 3.0.5) 210 | pg 211 | pry-byebug 212 | pry-rails 213 | puma 214 | rails (= 5.2.0) 215 | rails_12factor 216 | redis 217 | sass-rails 218 | simple_form 219 | spring 220 | spring-watcher-listen (~> 2.0.0) 221 | uglifier 222 | 223 | RUBY VERSION 224 | ruby 2.6.5p114 225 | 226 | BUNDLED WITH 227 | 1.17.2 228 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | © 2023 La Loco SAS, head of Le Wagon Group - All rights reserved 2 | -------------------------------------------------------------------------------- /Procfile: -------------------------------------------------------------------------------- 1 | web: bundle exec puma -C config/puma.rb 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | There are two important files: 2 | 3 | - The [`flats/new` view](https://github.com/lewagon/google-maps-autocomplete/blob/master/app/views/flats/new.html.erb) using the `simple_form` gem and the requirement of the Google Place API javascript file. 4 | - The [`google_maps_autocomplete.js`](https://github.com/lewagon/google-maps-autocomplete/blob/master/app/assets/javascripts/google_maps_autocomplete.js) files initializing the form to autocomplete. 5 | 6 | The key set in the second file can be used in the following referrer: 7 | 8 |  9 | 10 | Two APIs have been used for this Rails project (turned on in the Google Developer Console): 11 | 12 | 1. Google Places API Web Service 13 | 2. Google Maps Geocoding API 14 | 15 |  16 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | # Add your own tasks in files placed in lib/tasks ending in .rake, 2 | # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. 3 | 4 | require_relative 'config/application' 5 | 6 | Rails.application.load_tasks 7 | -------------------------------------------------------------------------------- /app/assets/config/manifest.js: -------------------------------------------------------------------------------- 1 | //= link_tree ../images 2 | //= link_directory ../javascripts .js 3 | //= link_directory ../stylesheets .css 4 | -------------------------------------------------------------------------------- /app/assets/images/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/google-maps-autocomplete/16e145091ee15f2dcbe3cbc8c561c131c06f1b3c/app/assets/images/.keep -------------------------------------------------------------------------------- /app/assets/javascripts/application.js: -------------------------------------------------------------------------------- 1 | //= require jquery 2 | //= require jquery_ujs 3 | //= require bootstrap-sprockets 4 | //= require_tree . 5 | -------------------------------------------------------------------------------- /app/assets/javascripts/cable.js: -------------------------------------------------------------------------------- 1 | // Action Cable provides the framework to deal with WebSockets in Rails. 2 | // You can generate new channels where WebSocket features live using the rails generate channel command. 3 | // 4 | //= require action_cable 5 | //= require_self 6 | //= require_tree ./channels 7 | 8 | (function() { 9 | this.App || (this.App = {}); 10 | 11 | App.cable = ActionCable.createConsumer(); 12 | 13 | }).call(this); 14 | -------------------------------------------------------------------------------- /app/assets/javascripts/channels/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/google-maps-autocomplete/16e145091ee15f2dcbe3cbc8c561c131c06f1b3c/app/assets/javascripts/channels/.keep -------------------------------------------------------------------------------- /app/assets/javascripts/google_maps_autocomplete.js: -------------------------------------------------------------------------------- 1 | function onPlaceChanged() { 2 | var place = this.getPlace(); 3 | var components = getAddressComponents(place); 4 | 5 | var flatAddress = document.getElementById('flat_address'); 6 | flatAddress.blur(); 7 | flatAddress.value = components.address; 8 | 9 | document.getElementById('flat_zip_code').value = components.zip_code; 10 | document.getElementById('flat_city').value = components.city; 11 | 12 | if (components.country_code) { 13 | var selector = '#flat_country option[value="' + components.country_code + '"]'; 14 | document.querySelector(selector).selected = true; 15 | } 16 | } 17 | 18 | function getAddressComponents(place) { 19 | // If you want lat/lng, you can look at: 20 | // - place.geometry.location.lat() 21 | // - place.geometry.location.lng() 22 | 23 | if (window.console && typeof console.log === "function") { 24 | console.log(place); 25 | } 26 | 27 | var street_number = null; 28 | var route = null; 29 | var zip_code = null; 30 | var city = null; 31 | var country_code = null; 32 | for (var i in place.address_components) { 33 | var component = place.address_components[i]; 34 | for (var j in component.types) { 35 | var type = component.types[j]; 36 | if (type === 'street_number') { 37 | street_number = component.long_name; 38 | } else if (type === 'route') { 39 | route = component.long_name; 40 | } else if (type === 'postal_code') { 41 | zip_code = component.long_name; 42 | } else if (type === 'locality') { 43 | city = component.long_name; 44 | } else if (type === 'postal_town' && city === null) { 45 | city = component.long_name; 46 | } else if (type === 'country') { 47 | country_code = component.short_name; 48 | } 49 | } 50 | } 51 | 52 | return { 53 | address: street_number === null ? route : (street_number + ' ' + route), 54 | zip_code: zip_code, 55 | city: city, 56 | country_code: country_code 57 | }; 58 | } 59 | 60 | document.addEventListener("DOMContentLoaded", function() { 61 | var flatAddress = document.getElementById('flat_address'); 62 | 63 | if (flatAddress) { 64 | var autocomplete = new google.maps.places.Autocomplete(flatAddress, { types: ['geocode'] }); 65 | google.maps.event.addListener(autocomplete, 'place_changed', onPlaceChanged); 66 | google.maps.event.addDomListener(flatAddress, 'keydown', function(e) { 67 | if (e.key === "Enter") { 68 | e.preventDefault(); // Do not submit the form on Enter. 69 | } 70 | }); 71 | } 72 | }); 73 | -------------------------------------------------------------------------------- /app/assets/stylesheets/README.md: -------------------------------------------------------------------------------- 1 | ## Setup 2 | 3 | Ensure you have the following gems in your Rails `Gemfile` 4 | 5 | ```ruby 6 | # Gemfile 7 | gem 'bootstrap-sass' 8 | gem 'font-awesome-sass' 9 | gem 'simple_form' 10 | gem 'autoprefixer-rails' 11 | ``` 12 | 13 | In your terminal, generate SimpleForm Bootstrap config. 14 | 15 | ```bash 16 | $ bundle install 17 | $ rails generate simple_form:install --bootstrap 18 | ``` 19 | 20 | Then replace Rails' stylesheets by Le Wagon's stylesheets: 21 | 22 | ``` 23 | $ rm -rf app/assets/stylesheets 24 | $ curl -L https://github.com/lewagon/stylesheets/archive/master.zip > stylesheets.zip 25 | $ unzip stylesheets.zip -d app/assets && rm stylesheets.zip && mv app/assets/rails-stylesheets-master app/assets/stylesheets 26 | ``` 27 | 28 | Don't forget the sprockets directives in `assets/application.js` 29 | 30 | ```javascript 31 | // app/assets/javascripts/application.js 32 | 33 | //= require jquery 34 | //= require jquery_ujs 35 | //= require bootstrap-sprockets 36 | //= require_tree . 37 | ``` 38 | 39 | And the viewport in the layout 40 | 41 | ```html 42 | 43 |
44 | 45 | 46 | 47 | 48 | ``` 49 | 50 | ## Adding new `.scss` files 51 | 52 | Look at your main `application.scss` file to see how SCSS files are imported. 53 | 54 | ```scss 55 | // Graphical variables 56 | @import "config/variables"; 57 | @import "config/bootstrap_variables"; 58 | 59 | // External libraries 60 | @import "bootstrap"; 61 | @import "font-awesome-sprockets"; 62 | @import "font-awesome"; 63 | 64 | // Your CSS 65 | @import "layout/index"; 66 | @import "components/index"; 67 | @import "pages/index"; 68 | @import "vendor/index"; 69 | ``` 70 | 71 | For every folder (**`components`**, **`layout`**, **`pages`**, **`vendor`**), there is one `_index.scss` partial which is responsible for importing all the other partials of its folder. 72 | 73 | **Example 1**: Let's say you add a new `_contact.scss` file in **`pages`** then modify `pages/_index.scss` as: 74 | 75 | ```scss 76 | // pages/_index.scss 77 | @import "home"; 78 | @import "contact"; 79 | ``` 80 | 81 | **Example 2**: Let's say you add a new `_sidebar.scss` file in **`layout`** then modify `layout/_index.scss` as: 82 | 83 | ```scss 84 | // layout/_index.scss 85 | @import "base"; 86 | @import "utilities"; 87 | @import "footer"; 88 | @import "navbar"; 89 | @import "sidebar"; 90 | ``` 91 | 92 | ## Navbar template 93 | 94 | Our `layout/_navbar.scss` code works well with our home-made ERB template which you can find 95 | 96 | - [version without login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon_without_login.html.erb). 97 | - [version with login](https://github.com/lewagon/awesome-navbars/blob/master/templates/_navbar_wagon.html.erb). 98 | 99 | -------------------------------------------------------------------------------- /app/assets/stylesheets/application.scss: -------------------------------------------------------------------------------- 1 | // Graphical variables 2 | @import "config/variables"; 3 | @import "config/bootstrap_variables"; 4 | 5 | // External libraries 6 | @import "bootstrap-sprockets"; 7 | @import "bootstrap"; 8 | @import "font-awesome-sprockets"; 9 | @import "font-awesome"; 10 | 11 | // Your CSS 12 | @import "layout/index"; 13 | @import "components/index"; 14 | @import "pages/index"; 15 | @import "vendor/index"; 16 | -------------------------------------------------------------------------------- /app/assets/stylesheets/components/_alert.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * Your CSS code for flash notices and alerts 3 | * ------------------------------------- */ 4 | 5 | .alert { 6 | margin: 0; 7 | text-align: center; 8 | color: white; 9 | } 10 | .alert-info { 11 | background: $green; 12 | } 13 | .alert-warning { 14 | background: $red; 15 | } 16 | -------------------------------------------------------------------------------- /app/assets/stylesheets/components/_avatars.scss: -------------------------------------------------------------------------------- 1 | .avatar { 2 | width: 30px; 3 | border-radius: 50%; 4 | } 5 | .avatar-large { 6 | width: 50px; 7 | border-radius: 50%; 8 | } 9 | .avatar-bordered { 10 | width: 30px; 11 | border-radius: 50%; 12 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 13 | border: white 1px solid; 14 | } 15 | .avatar-square { 16 | width: 30px; 17 | border-radius: 0px; 18 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 19 | border: white 1px solid; 20 | } 21 | -------------------------------------------------------------------------------- /app/assets/stylesheets/components/_badges.scss: -------------------------------------------------------------------------------- 1 | .badge-container { 2 | position: relative; 3 | font-size: 25px; 4 | line-height: 30px; 5 | width: 30px; 6 | color: grey; 7 | } 8 | .badge { 9 | position: absolute; 10 | top: -5px; 11 | right: -5px; 12 | font-size: 10px; 13 | color: white; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | height: 18px; 18 | width: 18px; 19 | text-align: center; 20 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1); 21 | border-radius: 50%; 22 | } 23 | .badge-red { 24 | background: #EE5F5B; 25 | } 26 | .badge-green { 27 | background: #32B796; 28 | } 29 | .badge-blue { 30 | background: #469AE0; 31 | } 32 | .badge-black { 33 | background: black; 34 | } 35 | .badge-bordered { 36 | box-shadow: 0 1px 2px rgba(0,0,0,0.2); 37 | border: white 1px solid; 38 | } 39 | -------------------------------------------------------------------------------- /app/assets/stylesheets/components/_index.scss: -------------------------------------------------------------------------------- 1 | @import "alert"; 2 | @import "avatars"; 3 | @import "badges"; -------------------------------------------------------------------------------- /app/assets/stylesheets/config/_bootstrap_variables.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * Bootstrap sass variable 3 | * (see http://getbootstrap.com/customize/#less-variables) 4 | * ------------------------------------- */ 5 | 6 | // General style 7 | $font-family-sans-serif: $base-font; 8 | $body-bg: white; 9 | $font-size-base: $base-size; 10 | $line-height-base: $base-height; 11 | $headings-font-family: $header-font; 12 | 13 | // Semantic color scheme 14 | $brand-primary: $blue; 15 | $brand-success: $green; 16 | $brand-info: $yellow; 17 | $brand-danger: $red; 18 | $brand-warning: $orange; 19 | 20 | // Buttons / inputs radius 21 | $border-radius-base: 2px; 22 | $border-radius-large: 2px; 23 | $border-radius-small: 2px; -------------------------------------------------------------------------------- /app/assets/stylesheets/config/_variables.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * Fonts 3 | * ------------------------------------- */ 4 | // Google fonts 5 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Raleway:400,100,300,700,500"); 6 | $base-font: "Open Sans", "Helvetica", "sans-serif"; 7 | $header-font: "Raleway", "Helvetica", "sans-serif"; 8 | 9 | // Local fonts (uncomment following lines) 10 | // @font-face { 11 | // font-family: "Font Name"; 12 | // src: font-url('FontFile.eot'); 13 | // src: font-url('FontFile.eot?#iefix') format('embedded-opentype'), 14 | // font-url('FontFile.woff') format('woff'), 15 | // font-url('FontFile.ttf') format('truetype') 16 | // } 17 | // $my-font: "Font Name"; 18 | 19 | // Font-size and line-height 20 | $base-size: 16px; 21 | $base-height: 1.4; 22 | 23 | /* ------------------------------------- 24 | * Colors 25 | * ------------------------------------- */ 26 | // Scheme 27 | $brand-color: #D23333; 28 | 29 | $red: #EE5F5B; 30 | $blue: #469AE0; 31 | $yellow: #FDB631; 32 | $orange: #E67E22; 33 | $green: #32B796; 34 | 35 | // Gray scale 36 | $gray-darker: lighten(#000, 13.5%); // #222 37 | $gray-dark: lighten(#000, 20%); // #333 38 | $gray: lighten(#000, 33.5%); // #555 39 | $gray-light: lighten(#000, 46.7%); // #777 40 | $gray-lighter: lighten(#000, 93.5%); // #eee 41 | -------------------------------------------------------------------------------- /app/assets/stylesheets/flats.scss: -------------------------------------------------------------------------------- 1 | // Place all the styles related to the flats controller here. 2 | // They will automatically be included in application.css. 3 | // You can use Sass (SCSS) here: http://sass-lang.com/ 4 | -------------------------------------------------------------------------------- /app/assets/stylesheets/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | // Your footer style 2 | -------------------------------------------------------------------------------- /app/assets/stylesheets/layout/_index.scss: -------------------------------------------------------------------------------- 1 | @import "utilities"; 2 | @import "footer"; 3 | @import "navbar"; 4 | -------------------------------------------------------------------------------- /app/assets/stylesheets/layout/_navbar.scss: -------------------------------------------------------------------------------- 1 | /* Main class */ 2 | .navbar-wagon { 3 | box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03); 4 | background: white; 5 | transition: all 0.3s ease; 6 | display: flex; 7 | height: 70px; 8 | padding: 0px 30px; 9 | align-items: center; 10 | justify-content: space-between; 11 | } 12 | 13 | /* Optional class to fix the navbar on top */ 14 | .navbar-wagon-fixed { 15 | position: fixed; 16 | left: 0px; 17 | top: 0px; 18 | z-index: 1; 19 | width: 100%; 20 | } 21 | 22 | /* Navbar logo */ 23 | .navbar-wagon-brand img { 24 | width: 50px; 25 | } 26 | 27 | /* Navbar right section (with form, links, button) */ 28 | .navbar-wagon-right { 29 | display: flex; 30 | align-items: center; 31 | justify-content: space-between; 32 | } 33 | 34 | /* Navbar item */ 35 | .navbar-wagon-item { 36 | flex: 0 1 auto; 37 | cursor: pointer; 38 | padding: 0 20px; 39 | } 40 | 41 | /* Navbar standard link */ 42 | .navbar-wagon-link { 43 | color: #616668; 44 | font-size: 14px; 45 | } 46 | .navbar-wagon-link:hover { 47 | color: #da552f; 48 | text-decoration: none; 49 | } 50 | 51 | /* Navbar right button */ 52 | .navbar-wagon-button { 53 | margin-left: 10px; 54 | padding: 0 20px; 55 | border-radius: 20em; 56 | line-height: 40px; 57 | background-color: #D23333; 58 | color: white; 59 | font-size: 14px; 60 | border: 2px solid #D23333; 61 | } 62 | .navbar-wagon-button:hover { 63 | color: white; 64 | background: #D23333; 65 | border-color: #ac2626; 66 | } 67 | 68 | /* Navbar search form */ 69 | .navbar-wagon-search { 70 | flex: 0 1 300px; 71 | display: flex; 72 | justify-content: flex-end; 73 | padding: 0 10px; 74 | position: relative; 75 | } 76 | .navbar-wagon-search-btn { 77 | line-height: 40px; 78 | color: #E6E6E6; 79 | border: none; 80 | background: transparent; 81 | position: absolute; 82 | right: 14px; 83 | top: -2px; 84 | z-index: 1; 85 | } 86 | .navbar-wagon-search-input { 87 | flex: 0 1 300px; 88 | transition: all 0.15s ease; 89 | line-height: 40px; 90 | font-weight: lighter; 91 | color: #666666; 92 | border: 1px solid #E6E6E6; 93 | border-radius: 5px; 94 | padding: 0 10px; 95 | font-size: 14px; 96 | outline: none; 97 | } 98 | .navbar-wagon-search-input:focus { 99 | border: 1px solid #CCCCCC; 100 | } 101 | 102 | /* Navbar dropdown menu */ 103 | .navbar-wagon-dropdown-menu { 104 | margin-top: 15px; 105 | box-shadow: 1px 1px 4px #E6E6E6; 106 | border-color: #E6E6E6; 107 | } 108 | .navbar-wagon-dropdown-menu li > a { 109 | transition: color 0.3s ease; 110 | font-weight: lighter !important; 111 | color: #999999 !important; 112 | font-size: 15px !important; 113 | line-height: 22px !important; 114 | padding: 10px 20px; 115 | } 116 | .navbar-wagon-dropdown-menu li > a:hover { 117 | background: transparent !important; 118 | color: black !important; 119 | } 120 | .navbar-wagon-dropdown-menu:before { 121 | content: ' '; 122 | height: 10px; 123 | width: 10px; 124 | position: absolute; 125 | right: 10px; 126 | top: -6px; 127 | background-color: white; 128 | transform: rotate(45deg); 129 | border-left: 1px solid #E6E6E6; 130 | border-top: 1px solid #E6E6E6; 131 | } 132 | -------------------------------------------------------------------------------- /app/assets/stylesheets/layout/_utilities.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * Utilities classes 3 | * These are examples of utilities classes 4 | * Feel free to change them and create your own 5 | * ------------------------------------- */ 6 | 7 | // Paddings 8 | .padded { 9 | padding-top: 5em; 10 | padding-bottom: 5em; 11 | } 12 | 13 | // Backgrounds 14 | .bg-black { 15 | background: #4a4a4a; 16 | } 17 | .bg-grey { 18 | background: #aeaeae; 19 | } 20 | .bg-blue { 21 | background: #00a3e1; 22 | } 23 | .bg-dark-blue { 24 | background: #3b5998; 25 | } 26 | 27 | .padded-top { 28 | margin-top: 2em; 29 | } 30 | -------------------------------------------------------------------------------- /app/assets/stylesheets/pages/_home.scss: -------------------------------------------------------------------------------- 1 | /* ------------------------------------- 2 | * CSS code specific to home page 3 | * (margin/padding adjustments) 4 | * ------------------------------------- */ 5 | -------------------------------------------------------------------------------- /app/assets/stylesheets/pages/_index.scss: -------------------------------------------------------------------------------- 1 | @import "home"; -------------------------------------------------------------------------------- /app/assets/stylesheets/vendor/_animation_cheat_sheet.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ============================================== 3 | CSS3 ANIMATION CHEAT SHEET 4 | ============================================== 5 | 6 | Made by Justin Aguilar 7 | 8 | www.justinaguilar.com/animations/ 9 | 10 | Questions, comments, concerns, love letters: 11 | justin@justinaguilar.com 12 | ============================================== 13 | */ 14 | 15 | /* 16 | ============================================== 17 | slideDown 18 | ============================================== 19 | */ 20 | 21 | 22 | .slideDown{ 23 | animation-name: slideDown; 24 | -webkit-animation-name: slideDown; 25 | 26 | animation-duration: 1s; 27 | -webkit-animation-duration: 1s; 28 | 29 | animation-timing-function: ease; 30 | -webkit-animation-timing-function: ease; 31 | 32 | visibility: visible !important; 33 | } 34 | 35 | @keyframes slideDown { 36 | 0% { 37 | transform: translateY(-100%); 38 | } 39 | 50%{ 40 | transform: translateY(8%); 41 | } 42 | 65%{ 43 | transform: translateY(-4%); 44 | } 45 | 80%{ 46 | transform: translateY(4%); 47 | } 48 | 95%{ 49 | transform: translateY(-2%); 50 | } 51 | 100% { 52 | transform: translateY(0%); 53 | } 54 | } 55 | 56 | @-webkit-keyframes slideDown { 57 | 0% { 58 | -webkit-transform: translateY(-100%); 59 | } 60 | 50%{ 61 | -webkit-transform: translateY(8%); 62 | } 63 | 65%{ 64 | -webkit-transform: translateY(-4%); 65 | } 66 | 80%{ 67 | -webkit-transform: translateY(4%); 68 | } 69 | 95%{ 70 | -webkit-transform: translateY(-2%); 71 | } 72 | 100% { 73 | -webkit-transform: translateY(0%); 74 | } 75 | } 76 | 77 | /* 78 | ============================================== 79 | slideUp 80 | ============================================== 81 | */ 82 | 83 | 84 | .slideUp{ 85 | animation-name: slideUp; 86 | -webkit-animation-name: slideUp; 87 | 88 | animation-duration: 1s; 89 | -webkit-animation-duration: 1s; 90 | 91 | animation-timing-function: ease; 92 | -webkit-animation-timing-function: ease; 93 | 94 | visibility: visible !important; 95 | } 96 | 97 | @keyframes slideUp { 98 | 0% { 99 | transform: translateY(100%); 100 | } 101 | 50%{ 102 | transform: translateY(-8%); 103 | } 104 | 65%{ 105 | transform: translateY(4%); 106 | } 107 | 80%{ 108 | transform: translateY(-4%); 109 | } 110 | 95%{ 111 | transform: translateY(2%); 112 | } 113 | 100% { 114 | transform: translateY(0%); 115 | } 116 | } 117 | 118 | @-webkit-keyframes slideUp { 119 | 0% { 120 | -webkit-transform: translateY(100%); 121 | } 122 | 50%{ 123 | -webkit-transform: translateY(-8%); 124 | } 125 | 65%{ 126 | -webkit-transform: translateY(4%); 127 | } 128 | 80%{ 129 | -webkit-transform: translateY(-4%); 130 | } 131 | 95%{ 132 | -webkit-transform: translateY(2%); 133 | } 134 | 100% { 135 | -webkit-transform: translateY(0%); 136 | } 137 | } 138 | 139 | /* 140 | ============================================== 141 | slideLeft 142 | ============================================== 143 | */ 144 | 145 | 146 | .slideLeft{ 147 | animation-name: slideLeft; 148 | -webkit-animation-name: slideLeft; 149 | 150 | animation-duration: 1s; 151 | -webkit-animation-duration: 1s; 152 | 153 | animation-timing-function: ease-in-out; 154 | -webkit-animation-timing-function: ease-in-out; 155 | 156 | visibility: visible !important; 157 | } 158 | 159 | @keyframes slideLeft { 160 | 0% { 161 | transform: translateX(150%); 162 | } 163 | 50%{ 164 | transform: translateX(-8%); 165 | } 166 | 65%{ 167 | transform: translateX(4%); 168 | } 169 | 80%{ 170 | transform: translateX(-4%); 171 | } 172 | 95%{ 173 | transform: translateX(2%); 174 | } 175 | 100% { 176 | transform: translateX(0%); 177 | } 178 | } 179 | 180 | @-webkit-keyframes slideLeft { 181 | 0% { 182 | -webkit-transform: translateX(150%); 183 | } 184 | 50%{ 185 | -webkit-transform: translateX(-8%); 186 | } 187 | 65%{ 188 | -webkit-transform: translateX(4%); 189 | } 190 | 80%{ 191 | -webkit-transform: translateX(-4%); 192 | } 193 | 95%{ 194 | -webkit-transform: translateX(2%); 195 | } 196 | 100% { 197 | -webkit-transform: translateX(0%); 198 | } 199 | } 200 | 201 | /* 202 | ============================================== 203 | slideRight 204 | ============================================== 205 | */ 206 | 207 | 208 | .slideRight{ 209 | animation-name: slideRight; 210 | -webkit-animation-name: slideRight; 211 | 212 | animation-duration: 1s; 213 | -webkit-animation-duration: 1s; 214 | 215 | animation-timing-function: ease-in-out; 216 | -webkit-animation-timing-function: ease-in-out; 217 | 218 | visibility: visible !important; 219 | } 220 | 221 | @keyframes slideRight { 222 | 0% { 223 | transform: translateX(-150%); 224 | } 225 | 50%{ 226 | transform: translateX(8%); 227 | } 228 | 65%{ 229 | transform: translateX(-4%); 230 | } 231 | 80%{ 232 | transform: translateX(4%); 233 | } 234 | 95%{ 235 | transform: translateX(-2%); 236 | } 237 | 100% { 238 | transform: translateX(0%); 239 | } 240 | } 241 | 242 | @-webkit-keyframes slideRight { 243 | 0% { 244 | -webkit-transform: translateX(-150%); 245 | } 246 | 50%{ 247 | -webkit-transform: translateX(8%); 248 | } 249 | 65%{ 250 | -webkit-transform: translateX(-4%); 251 | } 252 | 80%{ 253 | -webkit-transform: translateX(4%); 254 | } 255 | 95%{ 256 | -webkit-transform: translateX(-2%); 257 | } 258 | 100% { 259 | -webkit-transform: translateX(0%); 260 | } 261 | } 262 | 263 | /* 264 | ============================================== 265 | slideExpandUp 266 | ============================================== 267 | */ 268 | 269 | 270 | .slideExpandUp{ 271 | animation-name: slideExpandUp; 272 | -webkit-animation-name: slideExpandUp; 273 | 274 | animation-duration: 1.6s; 275 | -webkit-animation-duration: 1.6s; 276 | 277 | animation-timing-function: ease-out; 278 | -webkit-animation-timing-function: ease -out; 279 | 280 | visibility: visible !important; 281 | } 282 | 283 | @keyframes slideExpandUp { 284 | 0% { 285 | transform: translateY(100%) scaleX(0.5); 286 | } 287 | 30%{ 288 | transform: translateY(-8%) scaleX(0.5); 289 | } 290 | 40%{ 291 | transform: translateY(2%) scaleX(0.5); 292 | } 293 | 50%{ 294 | transform: translateY(0%) scaleX(1.1); 295 | } 296 | 60%{ 297 | transform: translateY(0%) scaleX(0.9); 298 | } 299 | 70% { 300 | transform: translateY(0%) scaleX(1.05); 301 | } 302 | 80%{ 303 | transform: translateY(0%) scaleX(0.95); 304 | } 305 | 90% { 306 | transform: translateY(0%) scaleX(1.02); 307 | } 308 | 100%{ 309 | transform: translateY(0%) scaleX(1); 310 | } 311 | } 312 | 313 | @-webkit-keyframes slideExpandUp { 314 | 0% { 315 | -webkit-transform: translateY(100%) scaleX(0.5); 316 | } 317 | 30%{ 318 | -webkit-transform: translateY(-8%) scaleX(0.5); 319 | } 320 | 40%{ 321 | -webkit-transform: translateY(2%) scaleX(0.5); 322 | } 323 | 50%{ 324 | -webkit-transform: translateY(0%) scaleX(1.1); 325 | } 326 | 60%{ 327 | -webkit-transform: translateY(0%) scaleX(0.9); 328 | } 329 | 70% { 330 | -webkit-transform: translateY(0%) scaleX(1.05); 331 | } 332 | 80%{ 333 | -webkit-transform: translateY(0%) scaleX(0.95); 334 | } 335 | 90% { 336 | -webkit-transform: translateY(0%) scaleX(1.02); 337 | } 338 | 100%{ 339 | -webkit-transform: translateY(0%) scaleX(1); 340 | } 341 | } 342 | 343 | /* 344 | ============================================== 345 | expandUp 346 | ============================================== 347 | */ 348 | 349 | 350 | .expandUp{ 351 | animation-name: expandUp; 352 | -webkit-animation-name: expandUp; 353 | 354 | animation-duration: 0.7s; 355 | -webkit-animation-duration: 0.7s; 356 | 357 | animation-timing-function: ease; 358 | -webkit-animation-timing-function: ease; 359 | 360 | visibility: visible !important; 361 | } 362 | 363 | @keyframes expandUp { 364 | 0% { 365 | transform: translateY(100%) scale(0.6) scaleY(0.5); 366 | } 367 | 60%{ 368 | transform: translateY(-7%) scaleY(1.12); 369 | } 370 | 75%{ 371 | transform: translateY(3%); 372 | } 373 | 100% { 374 | transform: translateY(0%) scale(1) scaleY(1); 375 | } 376 | } 377 | 378 | @-webkit-keyframes expandUp { 379 | 0% { 380 | -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); 381 | } 382 | 60%{ 383 | -webkit-transform: translateY(-7%) scaleY(1.12); 384 | } 385 | 75%{ 386 | -webkit-transform: translateY(3%); 387 | } 388 | 100% { 389 | -webkit-transform: translateY(0%) scale(1) scaleY(1); 390 | } 391 | } 392 | 393 | /* 394 | ============================================== 395 | fadeIn 396 | ============================================== 397 | */ 398 | 399 | .fadeIn{ 400 | animation-name: fadeIn; 401 | -webkit-animation-name: fadeIn; 402 | 403 | animation-duration: 1.5s; 404 | -webkit-animation-duration: 1.5s; 405 | 406 | animation-timing-function: ease-in-out; 407 | -webkit-animation-timing-function: ease-in-out; 408 | 409 | visibility: visible !important; 410 | } 411 | 412 | @keyframes fadeIn { 413 | 0% { 414 | transform: scale(0); 415 | opacity: 0.0; 416 | } 417 | 60% { 418 | transform: scale(1.1); 419 | } 420 | 80% { 421 | transform: scale(0.9); 422 | opacity: 1; 423 | } 424 | 100% { 425 | transform: scale(1); 426 | opacity: 1; 427 | } 428 | } 429 | 430 | @-webkit-keyframes fadeIn { 431 | 0% { 432 | -webkit-transform: scale(0); 433 | opacity: 0.0; 434 | } 435 | 60% { 436 | -webkit-transform: scale(1.1); 437 | } 438 | 80% { 439 | -webkit-transform: scale(0.9); 440 | opacity: 1; 441 | } 442 | 100% { 443 | -webkit-transform: scale(1); 444 | opacity: 1; 445 | } 446 | } 447 | 448 | /* 449 | ============================================== 450 | expandOpen 451 | ============================================== 452 | */ 453 | 454 | 455 | .expandOpen{ 456 | animation-name: expandOpen; 457 | -webkit-animation-name: expandOpen; 458 | 459 | animation-duration: 1.2s; 460 | -webkit-animation-duration: 1.2s; 461 | 462 | animation-timing-function: ease-out; 463 | -webkit-animation-timing-function: ease-out; 464 | 465 | visibility: visible !important; 466 | } 467 | 468 | @keyframes expandOpen { 469 | 0% { 470 | transform: scale(1.8); 471 | } 472 | 50% { 473 | transform: scale(0.95); 474 | } 475 | 80% { 476 | transform: scale(1.05); 477 | } 478 | 90% { 479 | transform: scale(0.98); 480 | } 481 | 100% { 482 | transform: scale(1); 483 | } 484 | } 485 | 486 | @-webkit-keyframes expandOpen { 487 | 0% { 488 | -webkit-transform: scale(1.8); 489 | } 490 | 50% { 491 | -webkit-transform: scale(0.95); 492 | } 493 | 80% { 494 | -webkit-transform: scale(1.05); 495 | } 496 | 90% { 497 | -webkit-transform: scale(0.98); 498 | } 499 | 100% { 500 | -webkit-transform: scale(1); 501 | } 502 | } 503 | 504 | /* 505 | ============================================== 506 | bigEntrance 507 | ============================================== 508 | */ 509 | 510 | 511 | .bigEntrance{ 512 | animation-name: bigEntrance; 513 | -webkit-animation-name: bigEntrance; 514 | 515 | animation-duration: 1.6s; 516 | -webkit-animation-duration: 1.6s; 517 | 518 | animation-timing-function: ease-out; 519 | -webkit-animation-timing-function: ease-out; 520 | 521 | visibility: visible !important; 522 | } 523 | 524 | @keyframes bigEntrance { 525 | 0% { 526 | transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); 527 | opacity: 0.2; 528 | } 529 | 30% { 530 | transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); 531 | opacity: 1; 532 | } 533 | 45% { 534 | transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); 535 | opacity: 1; 536 | } 537 | 60% { 538 | transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); 539 | opacity: 1; 540 | } 541 | 75% { 542 | transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); 543 | opacity: 1; 544 | } 545 | 90% { 546 | transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); 547 | opacity: 1; 548 | } 549 | 100% { 550 | transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); 551 | opacity: 1; 552 | } 553 | } 554 | 555 | @-webkit-keyframes bigEntrance { 556 | 0% { 557 | -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); 558 | opacity: 0.2; 559 | } 560 | 30% { 561 | -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); 562 | opacity: 1; 563 | } 564 | 45% { 565 | -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); 566 | opacity: 1; 567 | } 568 | 60% { 569 | -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); 570 | opacity: 1; 571 | } 572 | 75% { 573 | -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); 574 | opacity: 1; 575 | } 576 | 90% { 577 | -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); 578 | opacity: 1; 579 | } 580 | 100% { 581 | -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); 582 | opacity: 1; 583 | } 584 | } 585 | 586 | /* 587 | ============================================== 588 | hatch 589 | ============================================== 590 | */ 591 | 592 | .hatch{ 593 | animation-name: hatch; 594 | -webkit-animation-name: hatch; 595 | 596 | animation-duration: 2s; 597 | -webkit-animation-duration: 2s; 598 | 599 | animation-timing-function: ease-in-out; 600 | -webkit-animation-timing-function: ease-in-out; 601 | 602 | transform-origin: 50% 100%; 603 | -ms-transform-origin: 50% 100%; 604 | -webkit-transform-origin: 50% 100%; 605 | 606 | visibility: visible !important; 607 | } 608 | 609 | @keyframes hatch { 610 | 0% { 611 | transform: rotate(0deg) scaleY(0.6); 612 | } 613 | 20% { 614 | transform: rotate(-2deg) scaleY(1.05); 615 | } 616 | 35% { 617 | transform: rotate(2deg) scaleY(1); 618 | } 619 | 50% { 620 | transform: rotate(-2deg); 621 | } 622 | 65% { 623 | transform: rotate(1deg); 624 | } 625 | 80% { 626 | transform: rotate(-1deg); 627 | } 628 | 100% { 629 | transform: rotate(0deg); 630 | } 631 | } 632 | 633 | @-webkit-keyframes hatch { 634 | 0% { 635 | -webkit-transform: rotate(0deg) scaleY(0.6); 636 | } 637 | 20% { 638 | -webkit-transform: rotate(-2deg) scaleY(1.05); 639 | } 640 | 35% { 641 | -webkit-transform: rotate(2deg) scaleY(1); 642 | } 643 | 50% { 644 | -webkit-transform: rotate(-2deg); 645 | } 646 | 65% { 647 | -webkit-transform: rotate(1deg); 648 | } 649 | 80% { 650 | -webkit-transform: rotate(-1deg); 651 | } 652 | 100% { 653 | -webkit-transform: rotate(0deg); 654 | } 655 | } 656 | 657 | 658 | /* 659 | ============================================== 660 | bounce 661 | ============================================== 662 | */ 663 | 664 | 665 | .bounce{ 666 | animation-name: bounce; 667 | -webkit-animation-name: bounce; 668 | 669 | animation-duration: 1.6s; 670 | -webkit-animation-duration: 1.6s; 671 | 672 | animation-timing-function: ease; 673 | -webkit-animation-timing-function: ease; 674 | 675 | transform-origin: 50% 100%; 676 | -ms-transform-origin: 50% 100%; 677 | -webkit-transform-origin: 50% 100%; 678 | } 679 | 680 | @keyframes bounce { 681 | 0% { 682 | transform: translateY(0%) scaleY(0.6); 683 | } 684 | 60%{ 685 | transform: translateY(-100%) scaleY(1.1); 686 | } 687 | 70%{ 688 | transform: translateY(0%) scaleY(0.95) scaleX(1.05); 689 | } 690 | 80%{ 691 | transform: translateY(0%) scaleY(1.05) scaleX(1); 692 | } 693 | 90%{ 694 | transform: translateY(0%) scaleY(0.95) scaleX(1); 695 | } 696 | 100%{ 697 | transform: translateY(0%) scaleY(1) scaleX(1); 698 | } 699 | } 700 | 701 | @-webkit-keyframes bounce { 702 | 0% { 703 | -webkit-transform: translateY(0%) scaleY(0.6); 704 | } 705 | 60%{ 706 | -webkit-transform: translateY(-100%) scaleY(1.1); 707 | } 708 | 70%{ 709 | -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); 710 | } 711 | 80%{ 712 | -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); 713 | } 714 | 90%{ 715 | -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); 716 | } 717 | 100%{ 718 | -webkit-transform: translateY(0%) scaleY(1) scaleX(1); 719 | } 720 | } 721 | 722 | 723 | /* 724 | ============================================== 725 | pulse 726 | ============================================== 727 | */ 728 | 729 | .pulse{ 730 | animation-name: pulse; 731 | -webkit-animation-name: pulse; 732 | 733 | animation-duration: 1.5s; 734 | -webkit-animation-duration: 1.5s; 735 | 736 | animation-iteration-count: infinite; 737 | -webkit-animation-iteration-count: infinite; 738 | } 739 | 740 | @keyframes pulse { 741 | 0% { 742 | transform: scale(0.9); 743 | opacity: 0.4; 744 | } 745 | 50% { 746 | transform: scale(1.1); 747 | opacity: 1; 748 | } 749 | 100% { 750 | transform: scale(0.9); 751 | opacity: 0.4; 752 | } 753 | } 754 | 755 | @-webkit-keyframes pulse { 756 | 0% { 757 | -webkit-transform: scale(0.95); 758 | opacity: 0.4; 759 | } 760 | 50% { 761 | -webkit-transform: scale(1.1); 762 | opacity: 1; 763 | } 764 | 100% { 765 | -webkit-transform: scale(0.95); 766 | opacity: 0.4; 767 | } 768 | } 769 | 770 | /* 771 | ============================================== 772 | floating 773 | ============================================== 774 | */ 775 | 776 | .floating{ 777 | animation-name: floating; 778 | -webkit-animation-name: floating; 779 | 780 | animation-duration: 1s; 781 | -webkit-animation-duration: 1s; 782 | 783 | animation-iteration-count: infinite; 784 | -webkit-animation-iteration-count: infinite; 785 | } 786 | 787 | @keyframes floating { 788 | 0% { 789 | transform: translateY(0%); 790 | } 791 | 50% { 792 | transform: translateY(8%); 793 | } 794 | 100% { 795 | transform: translateY(0%); 796 | } 797 | } 798 | 799 | @-webkit-keyframes floating { 800 | 0% { 801 | -webkit-transform: translateY(0%); 802 | } 803 | 50% { 804 | -webkit-transform: translateY(8%); 805 | } 806 | 100% { 807 | -webkit-transform: translateY(0%); 808 | } 809 | } 810 | 811 | /* 812 | ============================================== 813 | tossing 814 | ============================================== 815 | */ 816 | 817 | .tossing{ 818 | animation-name: tossing; 819 | -webkit-animation-name: tossing; 820 | 821 | animation-duration: 2.5s; 822 | -webkit-animation-duration: 2.5s; 823 | 824 | animation-iteration-count: infinite; 825 | -webkit-animation-iteration-count: infinite; 826 | } 827 | 828 | @keyframes tossing { 829 | 0% { 830 | transform: rotate(-4deg); 831 | } 832 | 50% { 833 | transform: rotate(4deg); 834 | } 835 | 100% { 836 | transform: rotate(-4deg); 837 | } 838 | } 839 | 840 | @-webkit-keyframes tossing { 841 | 0% { 842 | -webkit-transform: rotate(-4deg); 843 | } 844 | 50% { 845 | -webkit-transform: rotate(4deg); 846 | } 847 | 100% { 848 | -webkit-transform: rotate(-4deg); 849 | } 850 | } 851 | 852 | /* 853 | ============================================== 854 | pullUp 855 | ============================================== 856 | */ 857 | 858 | .pullUp{ 859 | animation-name: pullUp; 860 | -webkit-animation-name: pullUp; 861 | 862 | animation-duration: 1.1s; 863 | -webkit-animation-duration: 1.1s; 864 | 865 | animation-timing-function: ease-out; 866 | -webkit-animation-timing-function: ease-out; 867 | 868 | transform-origin: 50% 100%; 869 | -ms-transform-origin: 50% 100%; 870 | -webkit-transform-origin: 50% 100%; 871 | } 872 | 873 | @keyframes pullUp { 874 | 0% { 875 | transform: scaleY(0.1); 876 | } 877 | 40% { 878 | transform: scaleY(1.02); 879 | } 880 | 60% { 881 | transform: scaleY(0.98); 882 | } 883 | 80% { 884 | transform: scaleY(1.01); 885 | } 886 | 100% { 887 | transform: scaleY(0.98); 888 | } 889 | 80% { 890 | transform: scaleY(1.01); 891 | } 892 | 100% { 893 | transform: scaleY(1); 894 | } 895 | } 896 | 897 | @-webkit-keyframes pullUp { 898 | 0% { 899 | -webkit-transform: scaleY(0.1); 900 | } 901 | 40% { 902 | -webkit-transform: scaleY(1.02); 903 | } 904 | 60% { 905 | -webkit-transform: scaleY(0.98); 906 | } 907 | 80% { 908 | -webkit-transform: scaleY(1.01); 909 | } 910 | 100% { 911 | -webkit-transform: scaleY(0.98); 912 | } 913 | 80% { 914 | -webkit-transform: scaleY(1.01); 915 | } 916 | 100% { 917 | -webkit-transform: scaleY(1); 918 | } 919 | } 920 | 921 | /* 922 | ============================================== 923 | pullDown 924 | ============================================== 925 | */ 926 | 927 | .pullDown{ 928 | animation-name: pullDown; 929 | -webkit-animation-name: pullDown; 930 | 931 | animation-duration: 1.1s; 932 | -webkit-animation-duration: 1.1s; 933 | 934 | animation-timing-function: ease-out; 935 | -webkit-animation-timing-function: ease-out; 936 | 937 | transform-origin: 50% 0%; 938 | -ms-transform-origin: 50% 0%; 939 | -webkit-transform-origin: 50% 0%; 940 | } 941 | 942 | @keyframes pullDown { 943 | 0% { 944 | transform: scaleY(0.1); 945 | } 946 | 40% { 947 | transform: scaleY(1.02); 948 | } 949 | 60% { 950 | transform: scaleY(0.98); 951 | } 952 | 80% { 953 | transform: scaleY(1.01); 954 | } 955 | 100% { 956 | transform: scaleY(0.98); 957 | } 958 | 80% { 959 | transform: scaleY(1.01); 960 | } 961 | 100% { 962 | transform: scaleY(1); 963 | } 964 | } 965 | 966 | @-webkit-keyframes pullDown { 967 | 0% { 968 | -webkit-transform: scaleY(0.1); 969 | } 970 | 40% { 971 | -webkit-transform: scaleY(1.02); 972 | } 973 | 60% { 974 | -webkit-transform: scaleY(0.98); 975 | } 976 | 80% { 977 | -webkit-transform: scaleY(1.01); 978 | } 979 | 100% { 980 | -webkit-transform: scaleY(0.98); 981 | } 982 | 80% { 983 | -webkit-transform: scaleY(1.01); 984 | } 985 | 100% { 986 | -webkit-transform: scaleY(1); 987 | } 988 | } 989 | 990 | /* 991 | ============================================== 992 | stretchLeft 993 | ============================================== 994 | */ 995 | 996 | .stretchLeft{ 997 | animation-name: stretchLeft; 998 | -webkit-animation-name: stretchLeft; 999 | 1000 | animation-duration: 1.5s; 1001 | -webkit-animation-duration: 1.5s; 1002 | 1003 | animation-timing-function: ease-out; 1004 | -webkit-animation-timing-function: ease-out; 1005 | 1006 | transform-origin: 100% 0%; 1007 | -ms-transform-origin: 100% 0%; 1008 | -webkit-transform-origin: 100% 0%; 1009 | } 1010 | 1011 | @keyframes stretchLeft { 1012 | 0% { 1013 | transform: scaleX(0.3); 1014 | } 1015 | 40% { 1016 | transform: scaleX(1.02); 1017 | } 1018 | 60% { 1019 | transform: scaleX(0.98); 1020 | } 1021 | 80% { 1022 | transform: scaleX(1.01); 1023 | } 1024 | 100% { 1025 | transform: scaleX(0.98); 1026 | } 1027 | 80% { 1028 | transform: scaleX(1.01); 1029 | } 1030 | 100% { 1031 | transform: scaleX(1); 1032 | } 1033 | } 1034 | 1035 | @-webkit-keyframes stretchLeft { 1036 | 0% { 1037 | -webkit-transform: scaleX(0.3); 1038 | } 1039 | 40% { 1040 | -webkit-transform: scaleX(1.02); 1041 | } 1042 | 60% { 1043 | -webkit-transform: scaleX(0.98); 1044 | } 1045 | 80% { 1046 | -webkit-transform: scaleX(1.01); 1047 | } 1048 | 100% { 1049 | -webkit-transform: scaleX(0.98); 1050 | } 1051 | 80% { 1052 | -webkit-transform: scaleX(1.01); 1053 | } 1054 | 100% { 1055 | -webkit-transform: scaleX(1); 1056 | } 1057 | } 1058 | 1059 | /* 1060 | ============================================== 1061 | stretchRight 1062 | ============================================== 1063 | */ 1064 | 1065 | .stretchRight{ 1066 | animation-name: stretchRight; 1067 | -webkit-animation-name: stretchRight; 1068 | 1069 | animation-duration: 1.5s; 1070 | -webkit-animation-duration: 1.5s; 1071 | 1072 | animation-timing-function: ease-out; 1073 | -webkit-animation-timing-function: ease-out; 1074 | 1075 | transform-origin: 0% 0%; 1076 | -ms-transform-origin: 0% 0%; 1077 | -webkit-transform-origin: 0% 0%; 1078 | } 1079 | 1080 | @keyframes stretchRight { 1081 | 0% { 1082 | transform: scaleX(0.3); 1083 | } 1084 | 40% { 1085 | transform: scaleX(1.02); 1086 | } 1087 | 60% { 1088 | transform: scaleX(0.98); 1089 | } 1090 | 80% { 1091 | transform: scaleX(1.01); 1092 | } 1093 | 100% { 1094 | transform: scaleX(0.98); 1095 | } 1096 | 80% { 1097 | transform: scaleX(1.01); 1098 | } 1099 | 100% { 1100 | transform: scaleX(1); 1101 | } 1102 | } 1103 | 1104 | @-webkit-keyframes stretchRight { 1105 | 0% { 1106 | -webkit-transform: scaleX(0.3); 1107 | } 1108 | 40% { 1109 | -webkit-transform: scaleX(1.02); 1110 | } 1111 | 60% { 1112 | -webkit-transform: scaleX(0.98); 1113 | } 1114 | 80% { 1115 | -webkit-transform: scaleX(1.01); 1116 | } 1117 | 100% { 1118 | -webkit-transform: scaleX(0.98); 1119 | } 1120 | 80% { 1121 | -webkit-transform: scaleX(1.01); 1122 | } 1123 | 100% { 1124 | -webkit-transform: scaleX(1); 1125 | } 1126 | } 1127 | -------------------------------------------------------------------------------- /app/assets/stylesheets/vendor/_index.scss: -------------------------------------------------------------------------------- 1 | @import "animation_cheat_sheet"; 2 | -------------------------------------------------------------------------------- /app/channels/application_cable/channel.rb: -------------------------------------------------------------------------------- 1 | module ApplicationCable 2 | class Channel < ActionCable::Channel::Base 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/channels/application_cable/connection.rb: -------------------------------------------------------------------------------- 1 | module ApplicationCable 2 | class Connection < ActionCable::Connection::Base 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/controllers/application_controller.rb: -------------------------------------------------------------------------------- 1 | class ApplicationController < ActionController::Base 2 | protect_from_forgery with: :exception 3 | end 4 | -------------------------------------------------------------------------------- /app/controllers/concerns/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/google-maps-autocomplete/16e145091ee15f2dcbe3cbc8c561c131c06f1b3c/app/controllers/concerns/.keep -------------------------------------------------------------------------------- /app/controllers/flats_controller.rb: -------------------------------------------------------------------------------- 1 | class FlatsController < ApplicationController 2 | def index 3 | @flats = Flat.all.order(created_at: :desc) 4 | end 5 | 6 | def new 7 | @flat = Flat.new 8 | end 9 | 10 | def create 11 | @flat = Flat.new(flat_params) 12 | if @flat.save 13 | redirect_to root_path, notice: 'Your flat has been created' 14 | else 15 | render :new 16 | end 17 | end 18 | 19 | def destroy 20 | @flat = Flat.find(params[:id]) 21 | @flat.destroy 22 | end 23 | 24 | private 25 | 26 | def flat_params 27 | params.require(:flat).permit(:address, :zip_code, :city, :country) 28 | end 29 | end 30 | -------------------------------------------------------------------------------- /app/controllers/pages_controller.rb: -------------------------------------------------------------------------------- 1 | class PagesController < ApplicationController 2 | def home 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /app/helpers/application_helper.rb: -------------------------------------------------------------------------------- 1 | module ApplicationHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/helpers/flats_helper.rb: -------------------------------------------------------------------------------- 1 | module FlatsHelper 2 | end 3 | -------------------------------------------------------------------------------- /app/jobs/application_job.rb: -------------------------------------------------------------------------------- 1 | class ApplicationJob < ActiveJob::Base 2 | end 3 | -------------------------------------------------------------------------------- /app/mailers/application_mailer.rb: -------------------------------------------------------------------------------- 1 | class ApplicationMailer < ActionMailer::Base 2 | default from: 'from@example.com' 3 | layout 'mailer' 4 | end 5 | -------------------------------------------------------------------------------- /app/models/application_record.rb: -------------------------------------------------------------------------------- 1 | class ApplicationRecord < ActiveRecord::Base 2 | self.abstract_class = true 3 | end 4 | -------------------------------------------------------------------------------- /app/models/concerns/.keep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lewagon/google-maps-autocomplete/16e145091ee15f2dcbe3cbc8c561c131c06f1b3c/app/models/concerns/.keep -------------------------------------------------------------------------------- /app/models/flat.rb: -------------------------------------------------------------------------------- 1 | class Flat < ApplicationRecord 2 | validates :address, presence: true 3 | validates :zip_code, presence: true 4 | validates :city, presence: true 5 | validates :country, presence: true 6 | 7 | geocoded_by :full_address 8 | after_validation :geocode, if: :full_address_changed? 9 | 10 | def full_address 11 | "#{address}, #{zip_code} #{city} #{ISO3166::Country[country].name}" 12 | end 13 | 14 | def full_address_changed? 15 | address_changed? || zip_code_changed? || city_changed? || country_changed? 16 | end 17 | end 18 | -------------------------------------------------------------------------------- /app/views/flats/destroy.js.erb: -------------------------------------------------------------------------------- 1 | <% if @flat %> 2 | $("[data-flat-id='<%= @flat.id %>']").remove(); 3 | <% end %> 4 | -------------------------------------------------------------------------------- /app/views/flats/index.html.erb: -------------------------------------------------------------------------------- 1 |5 | <%= link_to new_flat_path do %> 6 | Add a flat 7 | <% end %> 8 | | 9 | <%= link_to "https://github.com/lewagon/google-maps-autocomplete#readme", target: :blank do %> 10 | Source code 11 | <% end %> 12 |
13 | 14 | <% if @flats.any? %> 15 |Address | 19 |Latitude | 20 |Longitude | 21 ||
---|---|---|---|
<%= flat.full_address %> | 27 |<%= flat.latitude %> | 28 |<%= flat.longitude %> | 29 |30 | <%= link_to flat_path(flat), method: :delete, remote: true, data: { confirm: 'Delete flat?' } do %> 31 | 32 | <% end %> 33 | | 34 |
You may have mistyped the address or the page may have moved.
63 |If you are the application owner check the logs for more information.
65 |Maybe you tried to change something you didn't have access to.
63 |If you are the application owner check the logs for more information.
65 |If you are the application owner check the logs for more information.
64 |