New front ui (#633)

* Front Page UI: Add hero * Navbar tweaks and hardcoded about page * Tweak footer * Add aerial mapping section * CSS tweaks * Start integrating map * Add About MapKnitter link to footer + nav links * Update links for kits and about MapKnitter * Get user's location * Get user's location or location is set to default * Get city's name * showing city area * Start adding featured mappers section * Add how to section * Add CTA for add images * Use JS Promises for getting user location * better JS * some texting tweaks * Adding maps to front page * grouping authors nearby ordered by maps count * Showing featured mappers * showing users nearby if location shared * Some refactor + text tweaks * fixing codeclimate issues
publiclab · May 24, 2019 · dc96ada · dc96ada
1 parent 67ad7d5
commit dc96ada
Show file tree

Hide file tree

Showing 36 changed files with 747 additions and 86 deletions.
diff --git a/app/assets/images/map_placeholder.jpg b/app/assets/images/map_placeholder.jpg
diff --git a/app/assets/javascripts/front_ui.js b/app/assets/javascripts/front_ui.js
@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
diff --git a/app/assets/stylesheets/header.css.scss b/app/assets/stylesheets/header.css.scss
@@ -1,5 +1,5 @@
 body {
-  padding-top: 70px;
+  padding-top:55px;
 }
 
 .login-links {
@@ -20,4 +20,19 @@ body {
 .login-links:active {
   color: rgba(0,0,0,.7);
   text-decoration: underline;
+}
+
+.login-form {
+  width: 200px;
+  padding-left: 20px;
+}
+
+.navbar-nav .nav-item {
+  margin-left: 10px;
+}
+
+@media(max-width: 992px) {
+  .navbar-nav .navbar-form {
+    margin-top: 10px;
+  }
 }
diff --git a/app/assets/stylesheets/style.css.scss b/app/assets/stylesheets/style.css.scss
@@ -25,9 +25,63 @@ It was originally created by Caroline Hadilaksono: http://www.hadilaksono.com
     font-style: normal;
 }
 
-.login-form {
-  width: 200px;
-  padding-left: 20px;
+#hero {
+  background-image: url('kite2.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.jumbotron {
+  margin-bottom: 1rem;
+}
+
+.jumbotron-text {
+  text-shadow: 1px 1px 2px #080707;
+  color: white;
+}
+
+.map-list .map-img {
+  max-height: 400px !important;
+}
+
+.map-list div:nth-child(4n+1){
+  clear: left;
+}
+
+.map-location {
+  color: rgb(118, 118, 118);
+  overflow-wrap: break-word;
+  height: 16px;
+  max-height: 16px;
+  margin-bottom: 2px;
+  text-transform: uppercase;
+}
+
+.map-title {
+  margin: 0px;
+  overflow-wrap: break-word;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.4em;
+  color: rgb(72, 72, 72);
+}
+
+.map-details {
+  display: block;
+  text-decoration: none;
+  margin: 0px;
+  overflow-wrap: break-word;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2em;
+}
+
+.alert-link {
+  text-shadow: none;
+}
+
+.card-without-border {
+  border: none;
 }
 
 /* Application-wide styles */
@@ -71,19 +125,113 @@ label small {
 }
 
 .footer {
-  clear: both;
-  margin: 20px 0 20px 0;
-  padding: 20px 60px 40px;
-
+  margin: 20px;
+  padding: 20px;
   border-top: 1px solid #ddd;
+  background:#f6f9fc;
+}
+
+.footer .footer-link {
+  color: #8898aa;
+}
+
+.footer .footer-link:hover {
+  text-decoration: none;
+  color: #32325d;
+}
+
+.footer .footer-title {
+  font-weight: 600;
+  font-weight: bolder;
+  letter-spacing: .025em;
   font-size: 14px;
-  background:#eee;
-  background-color: #f8f8f8;
-  color:#333;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+}
 
-  .col-md-4 {
-    padding-bottom:10px;
-  }
+.rounded-social-buttons {
+  text-align: center;
+}
+
+.rounded-social-buttons .social-button {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  width: 3.125rem;
+  height: 3.125rem;
+  border: 0.125rem solid transparent;
+  padding: 0;
+  text-decoration: none;
+  text-align: center;
+  color: #fefefe;
+  font-size: 1.5625rem;
+  font-weight: normal;
+  line-height: 2em;
+  border-radius: 1.6875rem;
+  transition: all 0.5s ease;
+  margin-right: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.rounded-social-buttons .social-button.facebook {
+  background: #3b5998;
+}
+
+.rounded-social-buttons .social-button.facebook:before {
+  font-family: "FontAwesome";
+  content: "";
+}
+
+.rounded-social-buttons .social-button.facebook:hover {
+  opacity: 0.7;
+}
+
+.rounded-social-buttons .social-button.twitter {
+  background: #55acee;
+}
+
+.rounded-social-buttons .social-button.twitter:before {
+  font-family: "FontAwesome";
+  content: "";
+}
+
+.rounded-social-buttons .social-button.twitter:hover {
+  opacity: 0.7;
+}
+
+.rounded-social-buttons .social-button.youtube {
+  background: #bb0000;
+}
+
+.rounded-social-buttons .social-button.youtube:before {
+  font-family: "FontAwesome";
+  content: "";
+}
+
+.rounded-social-buttons .social-button.youtube:hover {
+  opacity: 0.7;
+}
+
+.rounded-social-buttons .social-button.instagram {
+  background: #125688;
+}
+
+.rounded-social-buttons .social-button.instagram:before {
+  font-family: "FontAwesome";
+  content: "";
+}
+
+.rounded-social-buttons .social-button.instagram:hover {
+  opacity: 0.7;
+}
+
+.mapping-kits {
+  border: none;
+}
+
+.img-icon {
+  max-width: 120px;
 }
 
 .btn.create-map {
@@ -112,3 +260,84 @@ label small {
   background-color: #f2dede;
   border-color: #ebccd1;
 }
+
+.how-to-item {
+  margin-right: -10px;
+  margin-left: -10px;
+}
+
+.section-header {
+  margin: 30px 0;
+}
+
+.mapknitter-info {
+  font-size: 26px;
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.33;
+  letter-spacing: -0.2px;
+  text-align: center;
+  color: #a2aaad;
+}
+
+.learn-more {
+  font-size: 18px;
+  font-weight: 600;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.44;
+  letter-spacing: -0.2px;
+}
+
+.icon-landing {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+}
+
+.item-description {
+  font-size: 18px;
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.44;
+  color: #a2aaad;
+}
+
+.blue-background {
+  background-color: #17a2b8;
+  width: 1000px;
+}
+
+.section-blue-background {
+  max-height: 100px;
+  background-color: #17a2b8;
+  margin: 20px 0;
+  color: white;
+}
+
+.section-blue-background a {
+  display: flex;
+  justify-content: center;
+  font-size: 26px;
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: 1.17;
+  letter-spacing: -0.5px;
+  color: #ffffff;
+  padding: 30px 0 40px 0;
+  justify-content: center !important;
+}
+
+.section-blue-background a:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+@media(max-width: 360px) {
+  #get-started-button {
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -7,7 +7,7 @@ class ApplicationController < ActionController::Base
   helper :all # include all helpers, all the time
 
   before_filter :current_user
-  helper_method :logged_in?
+  helper_method :logged_in?, :current_location
 
   def current_user
     user_id = session[:user_id]
@@ -24,6 +24,10 @@ def current_user
 
   private
 
+  def current_location
+    session[:lat].present? && session[:lon].present?
+  end
+
   def require_login
     unless logged_in?
       path_info = request.env['PATH_INFO']

diff --git a/app/controllers/front_ui_controller.rb b/app/controllers/front_ui_controller.rb
@@ -0,0 +1,36 @@
+# Shadow Controller for the new front page
+class FrontUiController < ApplicationController
+  protect_from_forgery except: :save_location
+
+  def index
+    @mappers = Map.featured_authors.first(4)
+    @maps = Map.new_maps.first(4)
+  end
+
+  def all_maps
+    @maps = Map.new_maps
+  end
+
+  def nearby_mappers
+    @nearby_maps = []
+
+    if current_location.present?
+      lat = session[:lat]
+      lon = session[:lon]
+      @nearby_maps = Map.maps_nearby(lat: lat, lon: lon, dist: 10)
+    end
+
+    @all_mappers = Map.featured_authors
+  end
+
+  def save_location
+    lat = params[:lat].to_f
+    lon = params[:lon].to_f
+
+    session[:lat] = lat
+    session[:lon] = lon
+    render nothing: true
+  end
+
+  def about; end
+end
diff --git a/app/models/map.rb b/app/models/map.rb
@@ -31,6 +31,9 @@ class Map < ActiveRecord::Base
   has_many :annotations, :dependent => :destroy
   belongs_to :user
 
+  scope :active, -> { where(archived: false) }
+  scope :has_user, -> { where('user_id != ?', 0) }
+
   has_many :warpables do
     def public_filenames
       filenames = {}
@@ -258,4 +261,22 @@ def self.map
        .joins(:warpables, :user)
        .group('maps.id')
   end
+
+  def self.featured_authors
+    maps = Map.active.has_user
+
+    author_counts = maps.group('author')
+                        .select('user_id, author, count(1) as maps_count')
+                        .order('maps_count DESC')
+
+    author_counts.map do |a|
+      user = User.find(a.user_id)
+      { user: user, count: a.maps_count, location: user.maps.first.location }
+    end
+  end
+
+  def self.maps_nearby(lat:, lon:, dist:)
+    Map.active
+       .where('lat>? AND lat<? AND lon>? AND lon<?',lat-dist, lat+dist, lon-dist, lon+dist)
+  end
 end
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Place all the behaviors and hooks related to the matching controller here.
		// All this logic will automatically be available in application.js.