diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 02d94bc7..bf23855d 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -495,10 +495,16 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null, $(this).parents('.CardOnGraph').find('.go-link').attr('href', link); }); + // when you click the addmap button $('.addMap').click(function(event) { createNewMap(); }); + //bind lightbox clicks + $('.openLightbox').click(function() { + openLightbox($(this).attr('data-open')); + }); + // bind keyboard handlers $('body').bind('keyup', function(e) { switch(e.which) { @@ -691,3 +697,10 @@ function openNodeShowcard(node) { //node.setData('dim', 1, 'current'); MetamapsModel.showcardInUse = node.id; } + +function openLightbox(which) { + $('.lightboxContent').hide(); + $('#' + which).show(); + $('#lightbox_overlay').show(); + $('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' ); +} diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 6d00590f..5c7c6f80 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -1476,6 +1476,99 @@ background-size: 30px 30px; } + + +/* lightboxes */ + +#lightbox_overlay { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: fixed; + z-index: 1000000; + display:none; +} + +#lightbox_main { + width: 550px; + height: auto; + margin: 0 auto; + z-index: 2; + position: relative; + top:50%; + background-color: transparent; +} + +#lightbox_screen { + top: 0; + left: 0; + z-index: 1; + width: 100%; + position: absolute; + background-color: #000; + opacity: 0.42; + filter: alpha(opacity=42); + -moz-opacity: 0.42; +} + +#lightbox_overlay #lightbox_main #lightbox_header { +padding: 6px 5px 1px 0; +background-color: #333; +font-weight: bold; +height: 18px; +border: solid 2px #000; +} + +#lightbox_overlay #lightbox_main a#lightbox_close { + /*background-image: url(../images/barometer_close.png);*/ + cursor: pointer; + height: 42px; + outline-color: -moz-use-text-color; + outline-style: none; + outline-width: medium; + overflow: hidden; + position: absolute; + top: -23px; + right: -22px; + width: 42px; + z-index: 4; + border: none; +} + +#lightbox_content { + background: silver; + padding: 20px; +} + +.lightboxContent h3 { + font-style: italic; + text-transform: uppercase; + font-family: 'vinyl'; + font-size: 30px; + line-height:35px; + color:black; +} + +.lightboxContent { + display:none; +} + +.openLightbox { + cursor:pointer; +} + +#about ul { + list-style:none; +} +#about ul li { + display:inline-block; + padding:5px; +} +#about li a { + color:#097A51; +} + /* --- styling the logo button ---*/ /*.footer { width: 188px; @@ -1561,7 +1654,7 @@ background-size: 22px 20px; height:124px; z-index:12; width:151px; - color: #67AF9F; + color: white; white-space: nowrap; text-align: center; font-size: 16px; diff --git a/app/controllers/main_controller.rb b/app/controllers/main_controller.rb index dbaaf047..e4e1c834 100644 --- a/app/controllers/main_controller.rb +++ b/app/controllers/main_controller.rb @@ -137,7 +137,7 @@ class MainController < ApplicationController desc = true end - search = term.downcase + '%' + search = desc ? '%' + term.downcase + '%' : term.downcase + '%' query = desc ? 'LOWER("desc") like ?' : 'LOWER("name") like ?' if !user @maps = Map.where(query, search).limit(5).order('"name"') diff --git a/app/views/layouts/_lightboxes.html.erb b/app/views/layouts/_lightboxes.html.erb new file mode 100644 index 00000000..7d829a64 --- /dev/null +++ b/app/views/layouts/_lightboxes.html.erb @@ -0,0 +1,63 @@ +<%# + # @file + # The inner HTML of the account box that comes up in the bottom left + #%> + + + + diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 70b5187c..b9ec78ce 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -69,10 +69,8 @@
beta
-
  • - about -
    • -
  • tutorial
    • +
  • about
    • +
  • tutorial
  • <%= link_to "explore maps", maps_url %>
    • <%= link_to "metamaps", root_url %>
    @@ -89,12 +87,12 @@ <%= render :partial => 'maps/new' %> <% end %> - <%= render :partial => 'layouts/ga' if Rails.env.production? %> - + <%= render :partial => 'layouts/lightboxes' %> + <%= render :partial => 'layouts/ga' if Rails.env.production? %> diff --git a/app/views/maps/show.html.erb b/app/views/maps/show.html.erb index b4b0534f..cdb4dec4 100644 --- a/app/views/maps/show.html.erb +++ b/app/views/maps/show.html.erb @@ -34,7 +34,7 @@
    -
    +
    <%= @map.name %> @@ -187,7 +187,7 @@ var openInfo = function(event) { clearTimeout(lT); - if (! sliding1 && event.srcElement.className != "openCheatsheet") { + if (! sliding1 && event.srcElement.className != "openCheatsheet openLightbox") { sliding1 = true; $('.mapInfoBox').fadeIn(200, function() {