make the toast work

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -94,6 +94,8 @@ Metamaps.GlobalUI = {
         self.CreateMap.init();
         self.Account.init();
         
+        if ($('#toast').html().trim()) self.showDiv('#toast')
+
         //bind lightbox clicks
         $('.openLightbox').click(function (event) {
             self.openLightbox($(this).attr('data-open'));

app/assets/stylesheets/clean.css.erb

@@ -29,10 +29,6 @@
   width: 100%;
 }
 
-#toast {
-    display: none;
-}
-
 /*.animations {
    -webkit-transition-duration: .5s;
   -moz-transition-duration: .5s;
@@ -734,6 +730,10 @@
 /* toast */
 
 .toast {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    left: 20px;
     background-color: #323232;
     color: #F5F5F5;
     padding: 16px;

app/assets/stylesheets/famous.css

@@ -1,77 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- *
- * Owner: mark@famo.us
- * @license MPL 2.0
- * @copyright Famous Industries, Inc. 2014
- */
-
-
-html {
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-    padding: 0px;
-    overflow: hidden;
-    -webkit-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-}
-
-body {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    margin: 0px;
-    padding: 0px;
-    -webkit-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-    -webkit-font-smoothing: antialiased;
-    -webkit-tap-highlight-color: transparent;
-    -webkit-perspective: 0;
-    perspective: none;
-    overflow: hidden;
-}
-
-.famous-container, .famous-group {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    right: 0px;
-    overflow: visible;
-    -webkit-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-    -webkit-backface-visibility: visible;
-    backface-visibility: visible;
-    pointer-events: none;
-}
-
-.famous-group {
-    width: 0px;
-    height: 0px;
-    margin: 0px;
-    padding: 0px;
-    -webkit-transform-style: preserve-3d;
-    transform-style: preserve-3d;
-}
-
-.famous-surface {
-    position: absolute;
-    -webkit-transform-origin: center center;
-    transform-origin: center center;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    -webkit-transform-style: flat;
-    transform-style: preserve-3d; /* performance */
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    -webkit-tap-highlight-color: transparent;
-    pointer-events: auto;
-}
-
-.famous-container-group {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}

app/assets/stylesheets/gh-fork-ribbon.css

@@ -1,140 +0,0 @@
-/*!
- * "Fork me on GitHub" CSS ribbon v0.1.1 | MIT License
- * https://github.com/simonwhitaker/github-fork-ribbon-css
-*/
-
-/* Left will inherit from right (so we don't need to duplicate code) */
-.github-fork-ribbon {
-  /* The right and left classes determine the side we attach our banner to */
-  position: absolute;
-
-  /* Add a bit of padding to give some substance outside the "stitching" */
-  padding: 2px 0;
-
-  /* Set the base colour */
-  background-color: #9150bc;
-
-  /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.15)));
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
-
-  /* Add a drop shadow */
-  -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
-  -moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
-  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);
-
-  /* Set the font */
-  font: 700 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-  z-index: 9999;
-  pointer-events: auto;
-}
-
-.github-fork-ribbon a,
-.github-fork-ribbon a:hover {
-  /* Set the text properties */
-  color: #fff;
-  text-decoration: none;
-  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
-  text-align: center;
-
-  /* Set the geometry. If you fiddle with these you'll also need
-     to tweak the top and right values in .github-fork-ribbon. */
-  width: 200px;
-  line-height: 20px;
-
-  /* Set the layout properties */
-  display: inline-block;
-  padding: 2px 0;
-
-  /* Add "stitching" effect */
-  border-width: 1px 0;
-  border-style: dotted;
-  border-color: #fff;
-  border-color: rgba(255, 255, 255, 0.7);
-}
-
-.github-fork-ribbon-wrapper {
-  width: 150px;
-  height: 150px;
-  position: absolute;
-  overflow: hidden;
-  top: 0;
-  z-index: 9999;
-  pointer-events: none;
-}
-
-.github-fork-ribbon-wrapper.fixed {
-  position: fixed;
-}
-
-.github-fork-ribbon-wrapper.left {
-  left: 0;
-}
-
-.github-fork-ribbon-wrapper.right {
-  right: 0;
-}
-
-.github-fork-ribbon-wrapper.left-bottom {
-  position: fixed;
-  top: inherit;
-  bottom: 0;
-  left: 0;
-}
-
-.github-fork-ribbon-wrapper.right-bottom {
-  position: fixed;
-  top: inherit;
-  bottom: 0;
-  right: 0;
-}
-
-.github-fork-ribbon-wrapper.right .github-fork-ribbon {
-  top: 42px;
-  right: -43px;
-
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.github-fork-ribbon-wrapper.left .github-fork-ribbon {
-  top: 42px;
-  left: -43px;
-
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}
-
-
-.github-fork-ribbon-wrapper.left-bottom .github-fork-ribbon {
-  top: 80px;
-  left: -43px;
-
-  -webkit-transform: rotate(45deg);
-  -moz-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  -o-transform: rotate(45deg);
-  transform: rotate(45deg);
-}
-
-.github-fork-ribbon-wrapper.right-bottom .github-fork-ribbon {
-  top: 80px;
-  right: -43px;
-
-  -webkit-transform: rotate(-45deg);
-  -moz-transform: rotate(-45deg);
-  -ms-transform: rotate(-45deg);
-  -o-transform: rotate(-45deg);
-  transform: rotate(-45deg);
-}

app/views/layouts/application.html.erb

@@ -58,11 +58,14 @@
                 Press Enter to add the topic
               </div>
             </div>
+            
+            <p id="toast" class="toast">
               <% if devise_error_messages? %>
-              <p id="toast"><%= devise_error_messages! %></p>
+                <%= devise_error_messages! %>
               <% elsif notice %>
-              <p id="toast"><%= notice %></p>
+                <%= notice %>
               <% end %>
+            </p>      
             <div id="loading"></div>
         </div>