update styles and put up deprecation banner

Author: mshwery

Gemfile.lock

@@ -218,5 +218,8 @@ DEPENDENCIES
   uglifier (>= 1.3.0)
   web-console (~> 2.0)
 
+RUBY VERSION
+   ruby 2.1.2p95
+
 BUNDLED WITH
-   1.11.2
+   1.17.3

app/assets/javascripts/routers/list.js.coffee

@@ -7,7 +7,6 @@ window.demo = {
 class listApp.Routers.List extends Backbone.Router
   routes:
     '(/)'                    : 'root'
-    'preview(/)'             : 'preview'
     'dashboard(/)'           : 'lists'
     'dashboard/lists(/)'     : 'lists'
     'dashboard/lists/:id(/)' : 'getList'
@@ -17,19 +16,15 @@ class listApp.Routers.List extends Backbone.Router
 
   initialize: ->
     @toggleLoadScreen()
-    unless $('body').hasClass('pages-home') || $('body').hasClass('pages-preview')
+    unless $('body').hasClass('pages-home')
       @setupSidebar()
 
   getDemoList: ->
     listApp.demo = new listApp.Models.DemoList(window.demo) 
     listApp.view = new listApp.Views.ListsShow({ model: listApp.demo })  
 
-  preview: ->
-    @getDemoList()
-
   root: ->
     @getDemoList()
-    @setupDemo(listApp.view.$el)
 
   cleanupLists: ->
     if listApp.listView
@@ -77,14 +72,3 @@ class listApp.Routers.List extends Backbone.Router
   setupSidebar: ->
     listApp.lists ||= new listApp.Collections.Lists()
     listApp.listsView = new listApp.Views.StacksShow(collection: listApp.lists)
-
-  setupDemo: ($view) ->
-    $view.on('click', @addActiveClassToDemo)
-
-  addActiveClassToDemo: (e) =>
-    h = $(e.target).closest('#demo').outerHeight()
-    $(e.target).closest('#demo').addClass('active')
-    @timer = setTimeout((=> @setMaxHeight()), 1000)
-
-  setMaxHeight: ->
-    $("#demo").addClass('complete')

app/assets/stylesheets/application.css.scss

@@ -23,5 +23,12 @@
 @import 'home';
 @import 'stacks';
 @import 'tasks';
-@import 'preview';
 @import 'people';
+
+#shutdown-notice {
+  background: lightsalmon;
+  color: white;
+  font-weight: bold;
+  padding: 16px 32px;
+  text-align: center;
+}

app/assets/stylesheets/globals.css.scss

@@ -17,7 +17,7 @@ body {
 }
 
 html, body {
-  height: 100%;
+  min-height: 100vh;
 }
 
 h1 {
@@ -46,10 +46,6 @@ button,
   float: right;
 }
 
-.hero {
-  background-color: #f6f6f6;
-}
-
 .show {
   opacity: 1;
   transition: opacity 200ms linear;
@@ -205,8 +201,7 @@ textarea {
   justify-content: center;
 }
 
-.pages-home,
-.pages-preview {
+.pages-home {
   .dots .dot {
     background: white;
   }

app/assets/stylesheets/home.css.scss

@@ -1,9 +1,24 @@
 .pages-home {
-  background: $primary;
+  background: #f3f3f4;
+  display: flex;
+  flex-direction: column;
+}
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+
+  footer {
+    margin-top: auto;
+  }
 }
 
-.pages-home, .pages-preview {
+.pages-home {
   #app {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
     position: relative;
     z-index: 1;
     padding: 0;
@@ -76,33 +91,6 @@
       width: 100%;
     } 
   }
-  
-  #features {
-    padding: 35px 0px;
-    color: #fff;
-    text-align: left;
-
-    li {
-      float: left;
-      width: 50%;
-      padding: 25px 0;
-      
-      @media only screen and (max-width: $medium-breakpoint) {
-        width: 100%;
-      }
-
-      h3, p {
-        padding: 0 30px;
-        margin: 0px;
-        line-height: 24px;
-        font-size: 16px;
-      }
-
-      h3 {
-        font-weight: 600;
-      }
-    }
-  }
 }
 
 footer {
@@ -121,12 +109,6 @@ footer {
       text-align: center;
     }     
   }
-  .right {
-    @media only screen and (max-width: $medium-breakpoint) {
-      float: none;
-      display: block;
-    }
-  }
   a, a:hover {
     color: #525b62;
   }
@@ -141,73 +123,23 @@ footer {
   #demo {
     width: 60%;
     padding: 20px 5%;
-    max-height: 300px;
     overflow: hidden;
-    cursor: pointer;
-    transition: padding 300ms ease-in-out, max-height 500ms ease-in-out;
-    transform: translate3d(0,0,0);
-    perspective: 1000;
 
     @media only screen and (max-width: $medium-breakpoint) {
       display: none;
     } 
 
     .selected-list {
-      margin: 0 -3px -3px;
-      transition: margin 300ms ease-in-out;
       position: relative;
       min-width: 0px;
     }
-
-    &:hover {
-      padding-top: 0px;
-      padding-bottom: 40px;
-    }
-    
-    &.active {
-      cursor: auto;
-      max-height: 1000px;
-      padding-top: 0;
-      padding-bottom: 0;
-
-      .selected-list {
-        margin: 0 -3px 50px;
-      }
-    
-      &.complete {
-        transition: max-height 0s;
-        max-height: none;
-      }
-    }
   }  
 }
 
 .home {
   display: none;
 }
 
-.pages-preview {
-  background: #fff;
-
-  #demo {
-    .home {
-      display: block;
-      float: left;
-    }
-  }
-
-  footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-
-    @media only screen and (max-width: $medium-breakpoint) {
-      position: relative;
-    }    
-  }
-}
-
 .logo-square {
   background: $primary;
   border-radius: 3px;

app/assets/stylesheets/preview.css.scss

@@ -5,9 +5,6 @@ class PagesController < ApplicationController
   def home
   end
 
-  def preview
-  end
-
   def dashboard
   end
 

app/controllers/pages_controller.rb

@@ -8,13 +8,8 @@ def index
   end
 
   def new
-    @stack = Stack.new
-
-    if @stack.save
-      redirect_to new_stack_list_path(@stack)
-    else
-      redirect_to :root
-    end
+    # no longer support list creation
+    redirect_to :root
   end
 
   def show

app/controllers/stacks_controller.rb

@@ -29,6 +29,10 @@
 </head>
 <body class="<%= body_class.join(" ") %>">
 
+  <div id="shutdown-notice">
+    This version of minimalist will be shutting down on November 2nd, 2020.
+  </div>
+
   <%#= render "layouts/notifications" %>
 
   <div id="load-screen" class="dots show">

app/views/layouts/application.html.erb

@@ -1,5 +1,4 @@
 <div class="hero">
-
   <section class="wrap">
     <header>
       <div class='logo'>
@@ -16,7 +15,6 @@
       </h2>
       <%= image_tag 'try-me.png', :class => 'try-me' %>
       <div class="actions">
-        <%= link_to "Start a list", new_stack_url, :class => 'btn' %>
         <%= link_to user_omniauth_authorize_path(:google_oauth2), class: 'btn btn-primary' do %>
           <svg class="icon-google-icon"><use xlink:href="/assets/icons.svg#icon-google-icon"></use></svg>
           <span>Sign in with Google</span>
@@ -25,31 +23,8 @@
     </div>
   </section>
 </div>
-<div id="features" class="wrap">
-  <ul class="clearfix">
-    <li>
-      <h3>With you everywhere –</h3>
-      <p>The internet makes your lists magically available anywhere. You can access them on your phone, tablet, or computer.</p>
-    </li>
-    <li>
-      <h3>No need to log-in –</h3>
-      <p>You don't need an account to use minimalist. Your lists will live at a special url so just bookmark that and you're good to go!</p>
-    </li>
-    <li>
-      <h3>Even better on mobile –</h3>
-      <p>This was made mobile-first, so although it's not in the App Store it supports touch gestures like swiping, dragging and tapping.</p>
-    </li>
-    <li>
-      <h3>Simple, Shareable –</h3>
-      <p>Anyone you share your link with can access your lists the same as you. Because some lists are better shared (and some are not).</p>
-    </li>
-  </ul>
-</div>
 <footer>
   <div class="wrap clearfix">
-    <div class="right">
-      <%= list_total %> Lists. <%= task_total %> Todos.
-    </div>
-    © <%= Time.now.year %> Made by <a href='http://twitter.com/mshwery' target="_blank">@mshwery</a>. <a class="twitter icon-twitter" href='http://twitter.com/get_minimalist' title="@get_minimalist" target="_blank"></a>
+    © <%= Time.now.year %> Made by <a href='http://twitter.com/mshwery' target="_blank">@mshwery</a>.
   </div>
 </footer>

app/views/pages/home.html.erb

@@ -33,7 +33,6 @@
     end
   end
 
-  get 'preview' => 'pages#preview'
   get 'dashboard' => 'pages#dashboard'
   get 'dashboard/*all', to: 'pages#dashboard'