From c0d05942f78c16ddb27c35747e57109c78806941 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sat, 15 Dec 2012 22:52:12 -0500 Subject: [PATCH] got sidebar find/filters working for -findbyname and -findbymetacode --- app/assets/javascripts/application.js | 32 ++++-- app/assets/stylesheets/application.css | 96 +++++++----------- app/views/layouts/application.html.erb | 130 ++++++++++++------------- 3 files changed, 125 insertions(+), 133 deletions(-) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 4ac916f3..c5f5e953 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -21,17 +21,37 @@ var viewMode = "list"; $(document).ready(function() { - $('#find_item #item_name').bind('railsAutocomplete.select', function(event, data){ + $('.sideOption .select_type').change(function() { + firstVal = $(this).children("option[value='name']").attr('selected'); + secondVal = $(this).children("option[value='metacode']").attr('selected'); + if ( firstVal === 'selected') { + $('.find_topic_by_metacode').fadeOut('fast', function() { + showAll(); + $('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff'); + for (var catVis in categoryVisible) { + categoryVisible[catVis] = true; + } + $('.find_topic_by_name').fadeIn('fast'); + }); + } + else if ( secondVal === 'selected' ) { + $('.find_topic_by_name').fadeOut('fast', function() { + $('.find_topic_by_metacode').fadeIn('fast'); + }); + } + }); + + $('.find_topic_by_name #item_name').bind('railsAutocomplete.select', function(event, data){ /* Do something here */ if (data.item.user_id != undefined && data.item.id != undefined) { window.open("/users/" + data.item.user_id + "/items/" + data.item.id) } else if (data.item.value == "no existing match"){ - $('#find_item #item_name').val(''); + $('.find_topic_by_name #item_name').val(''); } }); - $('#find_item').bind('submit', function(event, data){ + $('.find_topic_by_name').bind('submit', function(event, data){ event.preventDefault(); }); @@ -148,7 +168,7 @@ var viewMode = "list"; ); // toggle visibility of item categories based on status in the filters list - $('.legend ul li').click(function(event) { + $('.find_topic_by_metacode ul li').click(function(event) { obj = document.getElementById('container'); var switchAll = $(this).attr('id'); @@ -163,7 +183,7 @@ var viewMode = "list"; else { $('.item').fadeIn('slow'); } - $('.legend ul li').not('#hideAll, #showAll').removeClass('toggledOff'); + $('.find_topic_by_metacode ul li').not('#hideAll, #showAll').removeClass('toggledOff'); for (var catVis in categoryVisible) { categoryVisible[catVis] = true; } @@ -177,7 +197,7 @@ var viewMode = "list"; else { $('.item').fadeOut('slow'); } - $('.legend ul li').not('#hideAll, #showAll').addClass('toggledOff'); + $('.find_topic_by_metacode ul li').not('#hideAll, #showAll').addClass('toggledOff'); for (var catVis in categoryVisible) { categoryVisible[catVis] = false; } diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 9d05327d..55aa31f1 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -53,20 +53,10 @@ input[type="submit"] { margin-top:5px; } .contentarea ul {margin:0 0 0 1em; } .contentarea ol {margin:0 0 0 1.3em; } -.main { overflow-x:hidden; } +.main { overflow:hidden; } -.headertop { display:block; position:fixed; top:0; left:0; z-index:10; height:38px; width:100%; min-width:622px; background: url(topbg2.png) repeat-x top left; } -#mainTitle { float: left; } -#mainTitle a { color:#FFF; font-family: "vinyl",sans-serif; font-style: italic; text-transform:uppercase; font-weight: 400;} -#beta { float:left; margin-left: 7px; } -#find_item { position:absolute; top:7px; left:50%; display: block; width: 300px; margin-left:-150px; } -#find_item input { - width: 280px; - border-radius: 10px; - height: 20px; - padding: 0 10px; - outline: none; - } +/* --- top options --*/ +.headertop { display:block; position:fixed; top:0; right:0; z-index:10; height:38px; width:auto; background: url(topbg2.png) repeat-x top left; border-radius:15px; margin:10px; } .headertop ul { display:block; float: right; } .headertop ul li {display:block; float:right; margin:10px 5px 0 5px; } .headertop ul li a { color:#FFF; } @@ -94,7 +84,7 @@ input[type="submit"] { margin-top:5px; } .divider { margin: 20px 50px 20px 50px; border-bottom:2px solid #FFF; } .empty { margin-left:50px; } -#menus { margin-right:15px; } +#menus { margin:0 7px; } .accountWrap, .createWrap, .exploreWrap { display:block; position:relative; cursor: pointer;} #menus .account, #menus .create, #menus .explore { display:none; position:absolute; right:0; z-index:12; width:auto; color: #67AF9F; @@ -123,60 +113,46 @@ border: 1px solid rgba(0, 0, 0, 0.2); #menus ul li a { color: #67AF9F; display:block; } -/* --- styling the filter ---*/ -.legend { position:fixed; bottom:10px; right:15px; z-index:12; display:block; width:auto; color: #67AF9F; -white-space: nowrap; -text-align: center; -font-size: 16px; -overflow: hidden; -padding: 3px 8px; -margin: -0.75em 0 0; -border: 2px solid #AAA; -background: white; -border-radius: 6px; --webkit-border-radius: 6px; --moz-border-radius: 6px; -box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset; --webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset; --moz-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset; -background: -moz-linear-gradient( center top, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.03) 0% ) repeat scroll 0 0 white; -background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(white), to(rgba(0, 0, 0, 0.03)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(0, 0, 0, 0.03)) ) repeat scroll 0 0 white; -border: 1px solid rgba(0, 0, 0, 0.2); -cursor: pointer; } + + +/* --- styling the FIND section ---*/ +.sideOption { position:fixed; top:20%; left:0px; display:block; width:auto; background: url('bg.png') repeat 0 0; padding:15px; border-bottom-right-radius:10px; border-top-right-radius:10px; color:#000; border:1px solid #000; overflow:visible;} +.sideOption select, .sideOption span { float:left; } +.sideOption .spacer { margin:0 8px; } +.sideOption .find_key { margin-right:8px; } +.find_topic_by_name { display: block; } +.find_topic_by_name input { + margin:10px 0 0 0; + width: 207px; + border-radius: 10px; + height: 20px; + padding: 0 10px; + outline: none; + } + +.find_topic_by_metacode { z-index:12; display:none; width:auto; color: #67AF9F; } #iconLegend { width:inherit; height:inherit; } -#iconLegend ul { display:none; } -#iconLegend ul li {clear:both; list-style-type:none; display:block; padding:3px; } -#iconLegend ul img { width:40px; height:40px; float:left; } -#iconLegend ul p {float:left; display: block; margin: 0; background: none; padding: 10px 4px 2px 4px;} -#iconLegend #filters-one { float:left; } -#iconLegend #filters-two { float:left; } -#iconLegend #filters-three { float:left; } +.find_topic_by_metacode ul { display:block; } +.find_topic_by_metacode ul li {clear:both; list-style-type:none; display:block; padding:3px; } +.find_topic_by_metacode ul img { width:40px; height:40px; float:left; } +.find_topic_by_metacode ul p {float:left; display: block; margin: 0; background: none; padding: 10px 4px 2px 4px;} +.find_topic_by_metacode #filters-one { float:left; } +.find_topic_by_metacode #filters-two { float:left; } +.find_topic_by_metacode #filters-three { float:left; } -#iconLegend li.toggledOff { +.find_topic_by_metacode li.toggledOff { opacity: 0.4; } -/* --- styling feedback button ---*/ -.feedback { position:fixed; bottom:10px; left:15px; z-index:12; display:block; width:auto; color: #67AF9F; -white-space: nowrap; -text-align: center; -font-size: 16px; +/* --- styling the logo button ---*/ +.logo { position:fixed; bottom:6px; left:10px; z-index:12; display:block; width:auto; overflow: hidden; padding: 3px 8px; margin: -0.75em 0 0; -border: 2px solid #AAA; -background: white; -border-radius: 6px; --webkit-border-radius: 6px; --moz-border-radius: 6px; -box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset; --webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset; --moz-box-shadow: 0 2px rgba(0, 0, 0, 0.05), 0 -2px rgba(0, 0, 0, 0.05) inset; -background: -moz-linear-gradient( center top, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.03) 0% ) repeat scroll 0 0 white; -background: -webkit-gradient( linear, 0% 0%, 0% 100%, from(white), to(rgba(0, 0, 0, 0.03)), color-stop(0.5, rgba(255, 255, 255, 0)), color-stop(0.5, rgba(0, 0, 0, 0.03)) ) repeat scroll 0 0 white; -border: 1px solid rgba(0, 0, 0, 0.2); -cursor: pointer; } -.feedback a { color: #67AF9F; } +} +#mainTitle { float: left; } +#mainTitle a { color:#FFF; font-family: "vinyl",sans-serif; font-style: italic; text-transform:uppercase; font-weight: 400; } +#beta { float:left; margin-left: 7px; } \ No newline at end of file diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 77b3bc68..08abb8c2 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -12,21 +12,9 @@ <%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
-

<%= link_to "metamaps", root_url %>

beta
- <%= form_for Item.new, :html => { :class => "find_item", :id => "find_item" } do |f| %> - <%= f.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "Search for topics..." %> - <% end %> <% unless authenticated? %> <% end %> <% if authenticated? %> @@ -39,6 +27,9 @@
  • <%= link_to "My Maps", user_maps_url(user) %>
  • <%= link_to "Invite", invite_path %>
  • <%= link_to "Settings", edit_user_url(user) %>
    • + <% unless Map.first(:conditions => [ "id = ?", 7]).nil? %> +
  • <%= link_to "Feedback", user_map_path(User.find(555629996), Map.find(7)) %>
    • + <% end %>
  • <%= link_to "Logout", session_path, method: 'delete', id: "Login" %>
    • @@ -46,18 +37,8 @@

  • CREATE

      -
    • <%= link_to "Add Topic", new_user_item_path(user), id: "newtopic" %>
      • -
    • <%= link_to "Add Synapse", new_user_synapse_path(user), id: "newsynapse" %>
      • -
    • <%= link_to "Add Map", new_user_map_path(user), id: "newmap" %>
      • +
    • <%= link_to "Add Map", new_user_map_path(user), id: "newmap" %>
    -
    • -
  • |
    • -
  • -

    EXPLORE

    -
      -
    • <%= link_to "Maps", allmaps_path %>
      • -
    • <%= link_to "Metamap", metamap_path %>
      • -
    • <% end %> @@ -67,52 +48,67 @@
    <%= yield %>
    + +
    + Find... + + by + +
    + <%= form_for Item.new, :html => { :class => "find_topic_by_name", :id => "find_topic_by_name" } do |f| %> + <%= f.autocomplete_field :name, autocomplete_item_name_items_path, :placeholder => "Search for topics..." %> + <% end %> +
    +
      +
    • Show All
      • +
    • Action

      action

      • +
    • Activity

      activity

      • +
    • Bizarre

      bizarre

      • +
    • Catalyst

      catalyst

      • +
    • Closed

      closed

      • +
    • Experience

      experience

      • +
    • Future Dev

      future dev

      • +
    • Group

      group

      • +
    • Idea

      idea

      • +
    +
      +
    • Hide All
      • +
    • Implication

      implication

      • +
    • Insight

      insight

      • +
    • Intention

      intention

      • +
    • Knowledge

      knowledge

      • +
    • Location

      location

      • +
    • Open Issue

      open issue

      • +
    • Opinion

      opinion

      • +
    • Opportunity

      opportunity

      • +
    • Person

      person

      • +
    +
      +
    • Platform

      platform

      • +
    • Problem

      problem

      • +
    • Question

      question

      • +
    • Reference

      reference

      • +
    • Requirement

      requirement

      • +
    • Resource

      resource

      • +
    • Role

      role

      • +
    • Task

      task

      • +
    • Tool

      tool

      • +
    • Trajectory

      trajectory

      • +
    +
    +
    +
    - <% unless Map.first(:conditions => [ "id = ?", 7]).nil? %> - - <% end %> -
    -
    -

    FILTERS

    -
      -
    • Show All
      • -
    • Action

      action

      • -
    • Activity

      activity

      • -
    • Bizarre

      bizarre

      • -
    • Catalyst

      catalyst

      • -
    • Closed

      closed

      • -
    • Experience

      experience

      • -
    • Future Dev

      future dev

      • -
    • Group

      group

      • -
    • Idea

      idea

      • -
    -
      -
    • Hide All
      • -
    • Implication

      implication

      • -
    • Insight

      insight

      • -
    • Intention

      intention

      • -
    • Knowledge

      knowledge

      • -
    • Location

      location

      • -
    • Open Issue

      open issue

      • -
    • Opinion

      opinion

      • -
    • Opportunity

      opportunity

      • -
    • Person

      person

      • -
    -
      -
    • Platform

      platform

      • -
    • Problem

      problem

      • -
    • Question

      question

      • -
    • Reference

      reference

      • -
    • Requirement

      requirement

      • -
    • Resource

      resource

      • -
    • Role

      role

      • -
    • Task

      task

      • -
    • Tool

      tool

      • -
    • Trajectory

      trajectory

      • -
    -
    -
    +
    <% end %>