lentil 0.6.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d0071e0e9cac7e3e22897146471625cdc522ca8b
-  data.tar.gz: d25b8819f50541f248855b0ac6584bad2ce256d7
+  metadata.gz: a11b089a6d4bc21efe829d74b7a25f32d5fe9ca8
+  data.tar.gz: 874ae943f1002737d9e86e4cce251c3f6947743e
 SHA512:
-  metadata.gz: b6fd1f6e993cfa866b1448ba22e0a07a7f5750cc3a527d1a9a2b247c39fcdb324ae97fb177ad4cb4f7a91f0f61cdac0f81a2e12e5ee230920f1adabed2977358
-  data.tar.gz: 878f9f2cbadd5fb71b9804c07d2235a90390c13c126086b6cecca2dd6cdbd09992c426e680280bd554485c7b8c62a403b006c757583056a9fb2fdbd1faaa0b89
+  metadata.gz: 999ac34b75ce666a04275af1122df4df9778893e41c5821adf1aa6b3399af3310c1b1e1bf072290a19ae96a6d855e4391d4c4fecb7369a8161038dfdbf0ccb87
+  data.tar.gz: 97fb8b1ef0881f6ba6de165f4d30f03c52b8248528fa53111c26aa1a6b44137331e83c0c1100a7b5139d602d647cf0b8ca11236e94102e36f5d38c833ae3fe3e

data/README.md

@@ -169,7 +169,7 @@ div.header {
 
 ### Embeddable iframe view
 
-This is a simple responsive non-interactive image grid that is intended to be embedded as an iframe. You can find this at `http://YOUR_HOST/images/iframe`.
+This is a simple responsive non-interactive image grid that is intended to be embedded as an iframe. You can find this at `http://YOUR_HOST/images/iframe`. Image sizes in the grid are determined using a range of possible image widths, with the smallest width defaulting to 64px and the largest width calculated as 1.5 times the smallest width. The smallest width may be configured by including an integer parameter to the iframe URL, for example: `http://YOUR_HOST/images/iframe?smallest_width=40`. Currently, values greater than 320 may result in loss of resolution.
 
 ### Large animated view
 

data/app/assets/javascripts/lentil/addinfinitescroll.js.erb

@@ -34,6 +34,9 @@ function addinfinitescroll() {
         },
         function () {
             addimageerrors();
+
+            addobjectfit();
+
             // on callback, if fancybox is open
             // then close it and reopen at the same spot
             // this fakes dynamic loading of new images

data/app/assets/javascripts/lentil/addobjectfit.js

@@ -0,0 +1,9 @@
+//= require polyfill.object-fit/polyfill.object-fit
+
+function addobjectfit() {
+  objectFit.polyfill({
+    selector: '.square-media',
+    fittype: 'cover',
+    disableCrossDomain: 'true'
+  });
+}

data/app/assets/javascripts/lentil/{iframe.js → iframe.js.erb}

@@ -1,3 +1,5 @@
+//= require lentil/addobjectfit
+
 (function () {
   var Iframe = {
     init: function () {
@@ -10,12 +12,14 @@
 
       // Remove images that error out
       images = document.getElementsByClassName('instagram-img');
-      for (var i = 1; i < images.length; i++) {
+      for (var i = 0; i < images.length; i++) {
         images[i].addEventListener('error', function (e) {
           e.srcElement.parentNode.remove();
         }, false);
       }
 
+      addobjectfit();
+
       // Respond to viewport changes
       window.onresize = function (event) {
         self.buildFrame();
@@ -87,8 +91,8 @@
       height = window.innerHeight;
 
       // Acceptable image sizes
-      smallestImage = 64;
-      largestImage = 97;
+      smallestImage = lentil_smallest_width; // Global variable from view
+      largestImage = smallestImage * 1.5;
 
       mostColumns = Math.ceil(width/smallestImage);
       leastColumns = Math.ceil(width/largestImage);
@@ -101,7 +105,8 @@
       // Set width of images to build layout
       images = document.getElementsByClassName('iframe-tile');
       for (var i = 0; i < images.length; i++) {
-        images[i].style.width = String(percent) + '%';
+        images[i].style.width = String(percent) + 'vw';
+        images[i].style.height = String(percent) + 'vw';
       }
 
       // Set height of wrapper div for overflow

data/app/assets/javascripts/lentil/imageerrors.js

@@ -1,8 +1,5 @@
 function addimageerrors() {
     $(".instagram-img, .battle-img, .fancybox-img, .fancybox-video").off("error").on("error", function () {
         $(this).parents("div.image-tile, li.image-animate-tile").remove();
-        /*if ($("body.images_animate") || $("body.images_staff_picks_animate")) {
-            addanimatedimages();
-        }*/
     });
 }

data/app/assets/javascripts/lentil/images.js

@@ -9,6 +9,7 @@
 //= require lentil/imageerrors
 //= require lentil/addanimatedimages
 //= require touchswipe/jquery.touchSwipe
+//= require lentil/addobjectfit
 
 // wrapped in anonymous function so FANCYBOX_SPINNER
 // is accessible by both addinfinitescroll and addfancybox
@@ -40,6 +41,7 @@
         $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
 
         addimageerrors();
+        addobjectfit();
 
         if (window.history.pushState) {
             addfancybox();
@@ -52,4 +54,4 @@
         }
 
     });
-  })();
+  })();

data/app/assets/stylesheets/lentil.css.scss

@@ -5,4 +5,5 @@
 @import "chosen";
 @import "lentil/images";
 @import "lentil/image_animation";
-@import "lentil/thisorthat";
+@import "lentil/thisorthat";
+@import "polyfill.object-fit/polyfill.object-fit";

data/app/assets/stylesheets/lentil/breakpoint/sass/_components.scss

@@ -89,7 +89,7 @@ div.grid {
 
 div.images {
     display:inline;
-   // word-spacing: normal;
+    // word-spacing: normal;
 }
 
 .wrapper {
@@ -100,10 +100,44 @@ div.images {
     margin-top: 65px;
 }
 
-.image-tile {
+/*Force square tiles*/
+.image-tile, .image-animate-tile, .battle-image-tile > div, .header {
     position: relative;
-    padding: 2px 4px 2px 4px;
-    margin: 0;
+    padding: 0px;
+    overflow: hidden;
+
+    &:before {
+        content: "";
+        padding-top: 100%;
+        display: block;
+    }
+
+    > *:first-child {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        margin: 2px 4px 2px 4px;
+        overflow: hidden;
+
+        .square-media {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            overflow: hidden;
+        }
+    }
+}
+
+.image-animate-tile > a {
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.header > div {
+    padding: 0px 10px 10px 10px !important;
+    margin: 2px 0px 0px 4px;
 }
 
 .text-overlay {
@@ -275,21 +309,21 @@ a.leaderboard {
 }
 
 .desktop-leaderboard-wrapper .btn {
-  margin-left: -5px;
-  background-color: hsl(200, 100%, 29%) !important;
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a6f9", endColorstr="#006293");
-  background-image: -khtml-gradient(linear, left top, left bottom, from(#00a6f9), to(#006293));
-  background-image: -moz-linear-gradient(top, #00a6f9, #006293);
-  background-image: -ms-linear-gradient(top, #00a6f9, #006293);
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a6f9), color-stop(100%, #006293));
-  background-image: -webkit-linear-gradient(top, #00a6f9, #006293);
-  background-image: -o-linear-gradient(top, #00a6f9, #006293);
-  background-image: linear-gradient(#00a6f9, #006293);
-  border-color: #006293 #006293 hsl(200, 100%, 24%);
-  color: #fff !important;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
-  -webkit-font-smoothing: antialiased;
+    margin-left: -5px;
+    background-color: hsl(200, 100%, 29%) !important;
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a6f9", endColorstr="#006293");
+    background-image: -khtml-gradient(linear, left top, left bottom, from(#00a6f9), to(#006293));
+    background-image: -moz-linear-gradient(top, #00a6f9, #006293);
+    background-image: -ms-linear-gradient(top, #00a6f9, #006293);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a6f9), color-stop(100%, #006293));
+    background-image: -webkit-linear-gradient(top, #00a6f9, #006293);
+    background-image: -o-linear-gradient(top, #00a6f9, #006293);
+    background-image: linear-gradient(#00a6f9, #006293);
+    border-color: #006293 #006293 hsl(200, 100%, 24%);
+    color: #fff !important;
+    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33);
+    -webkit-font-smoothing: antialiased;
 }
 
 // Photographer Info

data/app/assets/stylesheets/lentil/breakpoint/sass/_structure.scss

@@ -2,8 +2,7 @@
 // =============================================================================
 
 @include breakpoint(6, $label: 'phone'){
-    .header { font-size: .68em; }
-    .image-tile { width: fluid(3); font-size: .68em; }
+    .image-tile, div.header { width: fluid(3); font-size: .68em; }
     .solo-image { width: fluid(6); font-size: .68em; }
     .side-filler { width: fluid(0);}
 
@@ -15,7 +14,7 @@
 }
 
 @include breakpoint(9, $label: 'phone'){
-    .image-tile { width: fluid(3); }
+    .image-tile, div.header { width: fluid(3); }
     .solo-image { width: fluid(9); }
     .side-filler { width: fluid(0);}
     .trunc-small {display: none;}
@@ -24,7 +23,7 @@
 }
 
 @include breakpoint(12, $label: 'tablet'){
-    .image-tile { width: fluid(4); font-size: 1.45em; }
+    .image-tile, div.header { width: fluid(4); font-size: 1.45em; }
     .solo-image { width: fluid(12); font-size: 1.45em; }
     .side-filler { width: fluid(0); }
 
@@ -68,7 +67,7 @@
 }
 
 @include breakpoint(18, $label: 'desktop'){
-    .image-tile { width: fluid(6); }
+    .image-tile, div.header { width: fluid(6); }
     .solo-image { width: fluid(14); }
     .side-filler { width: fluid(2); }
     .contribute { width: fluid(14); }
@@ -87,11 +86,11 @@
     div.header {
         font-size: 1.6em;
         display: inline-block;
-        height: 292px;
-        width: 291px;
-        margin: 2px 5px 0 4px ;
-        padding: 0 10px 10px 10px;
-        background: gray;
+
+        > div {
+            padding: 0 10px 10px 10px;
+            background: gray;
+        }
     }
 
     div.header h1 a {
@@ -172,7 +171,7 @@
 }
 
 @include breakpoint(24, $label: 'desktop'){
-    .image-tile { width: fluid(6); }
+    .image-tile, div.header { width: fluid(6); }
     .solo-image { width: fluid(14); }
     .side-filler { width: fluid(5); }
 
@@ -193,13 +192,14 @@
 }
 
 @include breakpoint(30, $label: 'desktop'){
-    .image-tile { width: fluid(6); }
+    .image-tile, div.header { width: fluid(6); }
     .solo-image { width: fluid(14); }
     .side-filler { width: fluid(8); }
     .contribute { width: fluid(15); }
     .pointofview { width: fluid(9); }
     .termsofuse { width: fluid(15); }
 
+
     // Battle View
     .battle-image-wrap { width: fluid(14); }
     .battle-image-tile { width: 80%; }
@@ -208,7 +208,7 @@
 
 @include breakpoint(36, $label: 'eboard') {
 
-    .image-tile { width: fluid(6); }
+    .image-tile, div.header { width: fluid(6); }
     .solo-image { width: fluid(16); }
     .side-filler { width: fluid(10); }
 
@@ -218,5 +218,5 @@
 }
 
 @include breakpoint(124, $label: 'microtile'){
-    .image-tile { width: fluid(8); }
+    .image-tile, div.header { width: fluid(8); }
 }

data/app/assets/stylesheets/lentil/iframe.css.scss

@@ -2,14 +2,22 @@
 
 // Styles for iframe view
 body.lentil-images_iframe {
-  background: none;
-  line-height: 0;
-  margin: 0;
+    background: none;
+    line-height: 0;
+    margin: 0;
 }
 
 .lentil-images_iframe {
   img {
     margin: 0;
+    max-width: none;
+    width: 100%;
+    height: 100%;
+  }
+
+  .square-media {
+      object-fit: cover;
+      overflow: hidden;
   }
 
   #iframe-wrapper {
@@ -23,4 +31,4 @@ body.lentil-images_iframe {
     margin: 0;
     padding: 0;
   }
-}
+}

data/app/controllers/lentil/images_controller.rb

@@ -57,8 +57,13 @@ module Lentil
       render 'animate'
     end
 
+    def numeric_string?(str)
+      Float(str) != nil rescue false
+    end
+
     def iframe
       @images = Image.includes(:user).approved.recent.limit(125)
+      @smallest_width = numeric_string?(params['smallest_width']) ? params['smallest_width'] : 64
       render :action => "iframe", :layout => "lentil/iframe"
     end
   end

data/app/views/layouts/lentil/iframe.html.erb

@@ -10,6 +10,12 @@
 
   <%= meta_description_tag %>
   <%= stylesheet_link_tag "lentil/iframe", :media => "all" %>
+
+  <!-- Define global to make @smallest_width instance variable accessible to JS -->
+  <script>
+    var lentil_smallest_width = <%= @smallest_width %>;
+  </script>
+
   <%= javascript_include_tag "lentil/iframe" %>
   <%= yield :javascript_includes %>
 

data/app/views/lentil/images/_image_tiles.erb

@@ -3,11 +3,11 @@
         <div id="image_<%= image.id %>" class="grid__cell image-tile">
             <% unless image.media_type == "video" %>
                 <%= link_to url_for(image), 'data-fancybox-href' => image.jpeg, 'data-fancybox-group' => "image-tile-gallery", :class => :fancybox  do %>
-                    <%= image_tag(image.jpeg, :class => "instagram-img " + image.id.to_s, :alt => image.description, :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
+                    <%= image_tag(image.jpeg, :class => "square-media instagram-img " + image.id.to_s, :alt => image.description, :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
                 <% end %>
             <% else %>
                 <%= link_to url_for(image), 'data-fancybox-href' => image.video_url, 'data-fancybox-group' => "image-tile-gallery", :class => :fancybox  do %>
-                    <%= video_tag(image.video_url, :autoplay => "true", :muted => "true", :loop => "true", :class => "instagram-img-" + image.id.to_s, :class => "instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :poster => image.jpeg, :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
+                    <%= video_tag(image.video_url, :autoplay => "true", :muted => "true", :loop => "true", :class => "square-media instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :poster => image.jpeg, :data => {:battles_count => image.battles_count, :win_pct => image.win_pct, :popularity => image.popular_score, :staff_like => image.staff_like, :like_votes_count => image.like_votes_count, :media_type => image.media_type}) %>
                 <% end %>
             <% end %>
 

data/app/views/lentil/images/animate.html.erb

@@ -10,9 +10,9 @@
         <li class="image-animate-tile">
           <a href="#">
             <% unless image.media_type == "video" %>
-              <%= image_tag(image.jpeg, :class => "instagram-img") %>
+              <%= image_tag(image.jpeg, :class => "square-media instagram-img") %>
             <% else %>
-              <%= video_tag(image.video_url, :autoplay => "true", :muted => "true", :loop => "true", :poster => image.jpeg, :class => "instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :data => {:media_type => image.media_type}) %>
+              <%= video_tag(image.video_url, :autoplay => "true", :muted => "true", :loop => "true", :poster => image.jpeg, :class => "square-media instagram-img " + image.id.to_s, :height => "100%", :width => "100%", :data => {:media_type => image.media_type}) %>
             <% end %>
           </a>
         </li>
@@ -24,4 +24,4 @@
       <h1 class="url"><%= link_to main_app.root_url, main_app.root_url %></h2>
     </div>
   </div>
-</div>
+</div>

data/app/views/lentil/images/iframe.html.erb

@@ -2,7 +2,7 @@
   <div id="iframe-wrapper">
     <% @images.each do |image| %>
       <div class="iframe-tile">
-        <%= image_tag(image.thumbnail_url, :class => "instagram-img " + image.id.to_s, :alt => image.description) %>
+        <%= image_tag(image.medium_url, :class => "square-media instagram-img " + image.id.to_s, :alt => image.description) %>
       </div>
     <% end -%>
   </div>

data/app/views/lentil/images/index.html.erb

@@ -1,7 +1,7 @@
- <% content_for :feed_auto_discovery do %>
-   <%# FIXME: Let's revisit this for whether it ought to be on each page and what the purpose is. %>
-   <%= auto_discovery_link_tag(:rss, params.dup.merge({:format => :rss}) ) %>
-   <%= auto_discovery_link_tag(:atom, params.dup.merge({:format => :atom}) ) %>
+<% content_for :feed_auto_discovery do %>
+  <%# FIXME: Let's revisit this for whether it ought to be on each page and what the purpose is. %>
+  <%= auto_discovery_link_tag(:rss, params.dup.merge({:format => :rss}) ) %>
+  <%= auto_discovery_link_tag(:atom, params.dup.merge({:format => :atom}) ) %>
 <% end -%>
 <% title @title %>
 <%= render :partial => "/layouts/lentil/top_navigation" %>
@@ -27,23 +27,25 @@
 <section class="wrapper">
   <div class="grid">
     <div class="grid__cell header">
-      <h1><%= link_to application_name, main_app.root_path %></h1>
-      <ul class="header_nav">
-        <li><%= nav_link t('lentil.nav.battle'), :thisorthat_battle %></li>
-        <li><%= nav_link t('lentil.nav.about'), :pages_about %></li>
-      </ul>
-      <ul class="header_nav">
-        <li><%= nav_link t('lentil.nav.recent'), main_app.root_path %></a></li>
+      <div>
+        <h1><%= link_to application_name, main_app.root_path %></h1>
+        <ul class="header_nav">
+          <li><%= nav_link t('lentil.nav.battle'), :thisorthat_battle %></li>
+          <li><%= nav_link t('lentil.nav.about'), :pages_about %></li>
+        </ul>
+        <ul class="header_nav">
+          <li><%= nav_link t('lentil.nav.recent'), main_app.root_path %></a></li>
         <li><%= nav_link t('lentil.nav.popular'), :images_popular %></li>
         <li><%= nav_link t('lentil.nav.staff_picks'), :images_staff_picks %></li>
       </ul>
     </div>
-    <%= render :partial => "/lentil/images/image_tiles" %>
   </div>
+  <%= render :partial => "/lentil/images/image_tiles" %>
+</div>
 <% if params[:controller] == "lentil/images"  %>
   <div id="paging">
     <%= will_paginate @images %>
   </div>
 <% end -%>
 </section>
-<div id="spinner-overlay" style="display:none;"></div>
+<div id="spinner-overlay" style="display:none;"></div>