got sidebar find/filters working for -findbyname and -findbymetacode
This commit is contained in:
Connor Turland
parent
fe97eb0f4e
commit
c0d05942f7
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
@ -12,21 +12,9 @@
|
|||
<%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>
|
||||
|
||||
<div class="headertop">
|
||||
<h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div>
|
||||
<%= 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? %>
|
||||
<ul id="menus">
|
||||
<li><%= link_to "Login", new_session_path, id: "Login" %></li>
|
||||
<li>|</li>
|
||||
<li class="exploreWrap">
|
||||
<p id="explore">Explore</p>
|
||||
<ul class="explore">
|
||||
<li class="first"><%= link_to "Maps", allmaps_path %></li>
|
||||
<li class="last"><%= link_to "Metamap", metamap_path %></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<% end %>
|
||||
<% if authenticated? %>
|
||||
|
|
@ -39,6 +27,9 @@
|
|||
<li><%= link_to "My Maps", user_maps_url(user) %></li>
|
||||
<li><%= link_to "Invite", invite_path %></li>
|
||||
<li><%= link_to "Settings", edit_user_url(user) %></li>
|
||||
<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
|
||||
<li><%= link_to "Feedback", user_map_path(User.find(555629996), Map.find(7)) %></li>
|
||||
<% end %>
|
||||
<li class="last"><%= link_to "Logout", session_path, method: 'delete', id: "Login" %></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -46,18 +37,8 @@
|
|||
<li class="createWrap">
|
||||
<p id="create">CREATE</p>
|
||||
<ul class="create">
|
||||
<li class="first"><%= link_to "Add Topic", new_user_item_path(user), id: "newtopic" %></li>
|
||||
<li><%= link_to "Add Synapse", new_user_synapse_path(user), id: "newsynapse" %></li>
|
||||
<li class="last"><%= link_to "Add Map", new_user_map_path(user), id: "newmap" %></li>
|
||||
<li class="first"><%= link_to "Add Map", new_user_map_path(user), id: "newmap" %></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>|</li>
|
||||
<li class="exploreWrap">
|
||||
<p id="explore">EXPLORE</p>
|
||||
<ul class="explore">
|
||||
<li class="first"><%= link_to "Maps", allmaps_path %></li>
|
||||
<li class="last"><%= link_to "Metamap", metamap_path %></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<% end %>
|
||||
|
|
@ -67,52 +48,67 @@
|
|||
<div class="wrapper" id="wrapper">
|
||||
<%= yield %>
|
||||
</div>
|
||||
|
||||
<div class="sideOption" id="sideOptionFind">
|
||||
<span class="find_key">Find...</span>
|
||||
<select class="select_content">
|
||||
<option value="topics">Topics</option>
|
||||
<!-- <option value="synapses">Synapses</option>
|
||||
<option value="maps">Maps</option>
|
||||
<option value="mappers">Mappers</option> -->
|
||||
</select>
|
||||
<span class="spacer">by</span>
|
||||
<select class="select_type">
|
||||
<option value="name">Name</option>
|
||||
<option value="metacode">Metacode</option>
|
||||
</select>
|
||||
<div class="clearfloat"></div>
|
||||
<%= 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 %>
|
||||
<div class="find_topic_by_metacode" id="find_topic_by_metacode">
|
||||
<ul id="filters-one">
|
||||
<li id="showAll">Show All</li>
|
||||
<li><img src="/assets/action.png" alt="Action" /><p>action</p></li>
|
||||
<li><img src="/assets/activity.png" alt="Activity" /><p>activity</p></li>
|
||||
<li><img src="/assets/bizarre.png" alt="Bizarre" /><p>bizarre</p></li>
|
||||
<li><img src="/assets/catalyst.png" alt="Catalyst" /><p>catalyst</p></li>
|
||||
<li><img src="/assets/closed.png" alt="Closed" /><p>closed</p></li>
|
||||
<li><img src="/assets/experience.png" alt="Experience" /><p>experience</p></li>
|
||||
<li><img src="/assets/futuredev.png" alt="Future Dev" /><p>future dev</p></li>
|
||||
<li><img src="/assets/group.png" alt="Group" /><p>group</p></li>
|
||||
<li><img src="/assets/idea.png" alt="Idea" /><p>idea</p></li>
|
||||
</ul>
|
||||
<ul id="filters-two">
|
||||
<li id="hideAll">Hide All</li>
|
||||
<li><img src="/assets/implication.png" alt="Implication" /><p>implication</p></li>
|
||||
<li><img src="/assets/insight.png" alt="Insight" /><p>insight</p></li>
|
||||
<li><img src="/assets/intention.png" alt="Intention" /><p>intention</p></li>
|
||||
<li><img src="/assets/knowledge.png" alt="Knowledge" /><p>knowledge</p></li>
|
||||
<li><img src="/assets/location.png" alt="Location" /><p>location</p></li>
|
||||
<li><img src="/assets/openissue.png" alt="Open Issue" /><p>open issue</p></li>
|
||||
<li><img src="/assets/opinion.png" alt="Opinion" /><p>opinion</p></li>
|
||||
<li><img src="/assets/opportunity.png" alt="Opportunity" /><p>opportunity</p></li>
|
||||
<li><img src="/assets/person.png" alt="Person" /><p>person</p></li>
|
||||
</ul>
|
||||
<ul id="filters-three">
|
||||
<li><img src="/assets/platform.png" alt="Platform" /><p>platform</p></li>
|
||||
<li><img src="/assets/problem.png" alt="Problem" /><p>problem</p></li>
|
||||
<li><img src="/assets/question.png" alt="Question" /><p>question</p></li>
|
||||
<li><img src="/assets/reference.png" alt="Reference" /><p>reference</p></li>
|
||||
<li><img src="/assets/requirement.png" alt="Requirement" /><p>requirement</p></li>
|
||||
<li><img src="/assets/resource.png" alt="Resource" /><p>resource</p></li>
|
||||
<li><img src="/assets/role.png" alt="Role" /><p>role</p></li>
|
||||
<li><img src="/assets/task.png" alt="Task" /><p>task</p></li>
|
||||
<li><img src="/assets/tool.png" alt="Tool" /><p>tool</p></li>
|
||||
<li><img src="/assets/trajectory.png" alt="Trajectory" /><p>trajectory</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="footer">
|
||||
<% unless Map.first(:conditions => [ "id = ?", 7]).nil? %>
|
||||
<div class="feedback"><%= link_to "Feedback", user_map_path(User.find(555629996), Map.find(7)) %></div>
|
||||
<% end %>
|
||||
<div class="legend">
|
||||
<div id="iconLegend">
|
||||
<h3>FILTERS</h3>
|
||||
<ul id="filters-one">
|
||||
<li id="showAll">Show All</li>
|
||||
<li><img src="/assets/action.png" alt="Action" /><p>action</p></li>
|
||||
<li><img src="/assets/activity.png" alt="Activity" /><p>activity</p></li>
|
||||
<li><img src="/assets/bizarre.png" alt="Bizarre" /><p>bizarre</p></li>
|
||||
<li><img src="/assets/catalyst.png" alt="Catalyst" /><p>catalyst</p></li>
|
||||
<li><img src="/assets/closed.png" alt="Closed" /><p>closed</p></li>
|
||||
<li><img src="/assets/experience.png" alt="Experience" /><p>experience</p></li>
|
||||
<li><img src="/assets/futuredev.png" alt="Future Dev" /><p>future dev</p></li>
|
||||
<li><img src="/assets/group.png" alt="Group" /><p>group</p></li>
|
||||
<li><img src="/assets/idea.png" alt="Idea" /><p>idea</p></li>
|
||||
</ul>
|
||||
<ul id="filters-two">
|
||||
<li id="hideAll">Hide All</li>
|
||||
<li><img src="/assets/implication.png" alt="Implication" /><p>implication</p></li>
|
||||
<li><img src="/assets/insight.png" alt="Insight" /><p>insight</p></li>
|
||||
<li><img src="/assets/intention.png" alt="Intention" /><p>intention</p></li>
|
||||
<li><img src="/assets/knowledge.png" alt="Knowledge" /><p>knowledge</p></li>
|
||||
<li><img src="/assets/location.png" alt="Location" /><p>location</p></li>
|
||||
<li><img src="/assets/openissue.png" alt="Open Issue" /><p>open issue</p></li>
|
||||
<li><img src="/assets/opinion.png" alt="Opinion" /><p>opinion</p></li>
|
||||
<li><img src="/assets/opportunity.png" alt="Opportunity" /><p>opportunity</p></li>
|
||||
<li><img src="/assets/person.png" alt="Person" /><p>person</p></li>
|
||||
</ul>
|
||||
<ul id="filters-three">
|
||||
<li><img src="/assets/platform.png" alt="Platform" /><p>platform</p></li>
|
||||
<li><img src="/assets/problem.png" alt="Problem" /><p>problem</p></li>
|
||||
<li><img src="/assets/question.png" alt="Question" /><p>question</p></li>
|
||||
<li><img src="/assets/reference.png" alt="Reference" /><p>reference</p></li>
|
||||
<li><img src="/assets/requirement.png" alt="Requirement" /><p>requirement</p></li>
|
||||
<li><img src="/assets/resource.png" alt="Resource" /><p>resource</p></li>
|
||||
<li><img src="/assets/role.png" alt="Role" /><p>role</p></li>
|
||||
<li><img src="/assets/task.png" alt="Task" /><p>task</p></li>
|
||||
<li><img src="/assets/tool.png" alt="Tool" /><p>tool</p></li>
|
||||
<li><img src="/assets/trajectory.png" alt="Trajectory" /><p>trajectory</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logo"><h1 id="mainTitle"><%= link_to "metamaps", root_url %></h1><div id="beta">beta</div></div>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue