cheatsheet and menu and upper right menu
This commit is contained in:
Connor Turland
parent
1c49a805bd
commit
bfdf706f15
8 changed files with 150 additions and 135 deletions
BIN
app/assets/images/MMCCicon_filter2.png
Normal file
BIN
app/assets/images/MMCCicon_filter2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
|
|
@ -453,11 +453,10 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
|
|||
|
||||
// initialize scroll bar for filter by metacode, then hide it and position it correctly again
|
||||
$("#filter_by_metacode").mCustomScrollbar();
|
||||
var filterPosition = userid ? '-72px' : '-36px';
|
||||
$('.sidebarFilterBox').hide().css({
|
||||
position:'absolute',
|
||||
top: '35px',
|
||||
right: filterPosition
|
||||
right: '-36px'
|
||||
});
|
||||
|
||||
// initialize metacode spinner and then hide it
|
||||
|
|
|
|||
|
|
@ -512,7 +512,7 @@ position:absolute;
|
|||
width: 35px;
|
||||
height: 35px;
|
||||
background: #0F1519 url('MMCCicon_mapper.png') no-repeat center center;
|
||||
background-size: 28px 28px;
|
||||
background-size: 24px 24px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.sidebarAccountBox {
|
||||
|
|
@ -622,27 +622,27 @@ text-align: start;
|
|||
margin-top:5px;
|
||||
}
|
||||
|
||||
/* wand */
|
||||
/* Save To New Map */
|
||||
|
||||
.sidebarWand {
|
||||
.sidebarFork {
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:35px;
|
||||
right:71px;
|
||||
z-index:200;
|
||||
width: 35px;
|
||||
height:35px;
|
||||
border-right:1px solid black;
|
||||
}
|
||||
|
||||
.sidebarWandIcon {
|
||||
.sidebarForkIcon {
|
||||
position:absolute;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #0F1519 url('MMCCicon_wand.png') no-repeat center center;
|
||||
background: #0F1519 url('MMCCicon_save_new_map.png') no-repeat center center;
|
||||
background-size: 28px 28px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.sidebarWandBox {
|
||||
.sidebarForkBox {
|
||||
position:absolute;
|
||||
display:none;
|
||||
height:auto;
|
||||
|
|
@ -654,40 +654,48 @@ cursor:pointer;
|
|||
border: 1px solid black;
|
||||
font-family: 'LatoLight', helvetica, sans-serif;
|
||||
}
|
||||
.sidebarWandBox ul {
|
||||
list-style:none;
|
||||
|
||||
/* end Save To New Map */
|
||||
|
||||
/* Save Layout */
|
||||
|
||||
.sidebarSave{
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:107px;
|
||||
z-index:200;
|
||||
width: 35px;
|
||||
height:35px;
|
||||
border-right:1px solid black;
|
||||
}
|
||||
.sidebarWandBox li.wandIcon {
|
||||
padding: 6px 0 6px 25px;
|
||||
background-size: 18px 18px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 6px;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
color:white;
|
||||
|
||||
.sidebarSaveIcon {
|
||||
position:absolute;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #0F1519 url('MMCCicon_save_layout.png') no-repeat center center;
|
||||
background-size: 22px 22px;
|
||||
cursor:pointer;
|
||||
}
|
||||
li.wandIcon:hover {
|
||||
background-position: 4px 6px;
|
||||
}
|
||||
li.wandSaveLayout {
|
||||
background-image: url('MMCCicon_save_layout.png');
|
||||
}
|
||||
li.wandForkMap {
|
||||
background-image: url('MMCCicon_save_new_map.png');
|
||||
}
|
||||
li.wandChangeMetacodes {
|
||||
background-image: url('MMCCicon_metacode_set.png');
|
||||
.sidebarSaveBox {
|
||||
position:absolute;
|
||||
display:none;
|
||||
height:auto;
|
||||
width:182px;
|
||||
background: #000;
|
||||
top: 35px;
|
||||
right:-36px;
|
||||
padding: 10px;
|
||||
border: 1px solid black;
|
||||
font-family: 'LatoLight', helvetica, sans-serif;
|
||||
}
|
||||
|
||||
/* end wand */
|
||||
|
||||
/* wand */
|
||||
/* Filter */
|
||||
|
||||
.sidebarFilter {
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:71px;
|
||||
right:35px;
|
||||
z-index:200;
|
||||
width: 35px;
|
||||
height:35px;
|
||||
|
|
@ -701,7 +709,7 @@ border-right:1px solid black;
|
|||
position:absolute;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #0F1519 url('MMCCicon_filter.png') no-repeat center center;
|
||||
background: #0F1519 url('MMCCicon_filter2.png') no-repeat center center;
|
||||
background-size: 28px 28px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
|
@ -780,7 +788,7 @@ background-color: rgba(255,255,255,0.1);
|
|||
.sidebarCollaborate {
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:107px;
|
||||
right:143px;
|
||||
z-index:200;
|
||||
width: 35px;
|
||||
height:35px;
|
||||
|
|
@ -791,13 +799,13 @@ border-right:1px solid black;
|
|||
position:absolute;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat -3px -1px;
|
||||
background-size: 40px 40px;
|
||||
background: #0F1519 url('MMCCicon_realtime_junto.png') no-repeat 0px 1px;
|
||||
background-size: 36px 36px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.sidebarCollaborateIcon.blue {
|
||||
background: #0F1519 url('MMCCicon_realtime_blue.png') no-repeat center center;
|
||||
background-size: 29px 29px;
|
||||
background-size: 26px 25px;
|
||||
}
|
||||
.sidebarCollaborateBox {
|
||||
position:absolute;
|
||||
|
|
@ -1762,6 +1770,38 @@ font-family:arial;
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Cheatsheet */
|
||||
|
||||
.cheatsheetColumn {
|
||||
float:left;
|
||||
width:245px;
|
||||
line-height: 17px;
|
||||
font-size: 12px;
|
||||
font-family: arial;
|
||||
}
|
||||
.cheatsheetColumn.cOne {
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
#cheatsheet h4 {
|
||||
text-decoration: underline;
|
||||
font-size: 20px;
|
||||
font-family: 'vinyl';
|
||||
margin-top: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#cheatsheet .csItem {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
#cheatsheet .csTitle {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* FAQ */
|
||||
|
||||
#wrapper > div.FAQ {
|
||||
|
|
@ -1917,20 +1957,14 @@ background-size: 22px 20px;
|
|||
left:-1px;
|
||||
height:124px;
|
||||
z-index:12;
|
||||
width:151px;
|
||||
width:121px;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
padding: 0 0 0 30px;
|
||||
margin: 0;
|
||||
/*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: #0F1519;/*url('black_bg.png'); */
|
||||
border-left:1px solid #000;
|
||||
border-right:1px solid #000;
|
||||
|
|
@ -1944,53 +1978,22 @@ background-size: 22px 20px;
|
|||
display:block;
|
||||
padding:0;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
li.beta {
|
||||
border-top: 1px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
}
|
||||
.inBeta {
|
||||
background: rgba(0,0,0,0.6);
|
||||
display: inline-block;
|
||||
color: white;
|
||||
height: 30px;
|
||||
padding: 0 5px;
|
||||
font-family: 'LatoLight';
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
li.beta button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 84px;
|
||||
border-radius: 0;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
cursor:pointer;
|
||||
}
|
||||
li.beta button:hover {
|
||||
background: #6FA9AA;
|
||||
}
|
||||
|
||||
li.meta, li.tutorial, li.exploreMaps {
|
||||
font-family:'vinyl';
|
||||
font-style:italic;
|
||||
height:30px;
|
||||
line-height:30px;
|
||||
font-size:20px;
|
||||
line-height:34px;
|
||||
font-size:17px;
|
||||
cursor:pointer;
|
||||
}
|
||||
.footer ul li:hover {
|
||||
background:black;
|
||||
}
|
||||
|
||||
li.meta a, li.tutorial a, li.exploreMaps a {
|
||||
display:block;
|
||||
}
|
||||
|
||||
li.tutorial, li.exploreMaps {
|
||||
li.meta, li.tutorial, li.exploreMaps {
|
||||
border-top:1px solid white;
|
||||
}
|
||||
|
||||
|
|
|
|||
40
app/views/layouts/_cheatsheet.html.erb
Normal file
40
app/views/layouts/_cheatsheet.html.erb
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<%#
|
||||
# @file
|
||||
# The inner HTML of the cheatsheet
|
||||
#%>
|
||||
|
||||
<h3>Quick Reference Guide</h3>
|
||||
|
||||
<div class="cheatsheetColumn cOne">
|
||||
<h4>Topics</h4>
|
||||
<div class="csItem"><span class="csTitle">Add New Topic:</span> Double-click on canvas</div>
|
||||
<div class="csItem"><span class="csTitle">Select Metacode:</span> Scroll on spinner, or Tab / Shift+Tab</div>
|
||||
<div class="csItem"><span class="csTitle">Creating New Topic:</span> Hit Enter after typing topic name</div>
|
||||
<div class="csItem"><span class="csTitle">Get Existing Topic:</span> Click on (or use Up/Down->Enter) to pick from auto-suggestions</div>
|
||||
<div class="csItem"><span class="csTitle">Open Topic Card:</span> Double-click on topic icon</div>
|
||||
<div class="csItem"><span class="csTitle">Edit Topic Type:</span> Click on metacode in open topic card</div>
|
||||
<div class="csItem"><span class="csTitle">Open Topic View:</span> Click on 'leave page' icon in topic card (opens in new tab)</div>
|
||||
<h4>Navigation</h4>
|
||||
<div class="csItem"><span class="csTitle">Move (Pan) Across Canvas:</span> Click on canvas and drag</div>
|
||||
<div class="csItem"><span class="csTitle">Zoom In/Out</span> Scroll mouse on canvas</div>
|
||||
<div class="csItem"><span class="csTitle">Back to Center:</span> Refresh page</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="cheatsheetColumn cTwo">
|
||||
<h4>Synapses</h4>
|
||||
<div class="csItem"><span class="csTitle">Create Synapse:</span> Right-click/Alt+Click on topic and drag to other topic, enter synapse name or choose suggested</div>
|
||||
<div class="csItem"><span class="csTitle">Create Topic with Synapse:</span> Right-click/Alt+Click on topic and drag to empty part of canvas</div>
|
||||
<div class="csItem"><span class="csTitle">View Synapse Description:</span> Hover over synapse</div>
|
||||
<div class="csItem"><span class="csTitle">Open Synapse Card:</span> Double-click synapse</div>
|
||||
<div class="csItem"><span class="csTitle">Edit Synapse Description:</span> Click synapse description in synapse card</div>
|
||||
<div class="csItem"><span class="csTitle">Change Synapse Direction:</span> Check/Uncheck directional arrow boxes</div>
|
||||
<h4>Selection</h4>
|
||||
<div class="csItem"><span class="csTitle">Select Topic or Synapse:</span> Click on one</div>
|
||||
<div class="csItem"><span class="csTitle">Select Multiple:</span> Shift+Click on canvas and drag around topics, or use Shift+Click to add/remove individually</div>
|
||||
<div class="csItem"><span class="csTitle">Move Multiple:</span> Select desired, Click and drag on a selected topic</div>
|
||||
<div class="csItem"><span class="csTitle">Hide/Remove/Delete:</span> Right-click/Alt+Click on selection</div>
|
||||
<div class="csItem"><span class="csTitle">Deselect All:</span> Hit Esc, or click any topic</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfloat"></div>
|
||||
|
|
@ -43,32 +43,13 @@
|
|||
</div>
|
||||
|
||||
<div class="lightboxContent" id="cheatsheet">
|
||||
<h3>Quick Reference Guide</h3>
|
||||
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<div class="cheatsheetBox">
|
||||
|
||||
</div>
|
||||
<%= render :partial => 'layouts/cheatsheet' %>
|
||||
</div>
|
||||
|
||||
<% if authenticated? %>
|
||||
<div class="lightboxContent" id="invite">
|
||||
<h3>Send Invites</h3>
|
||||
<p>You can invite others to the Metamaps platform.<br> Just send them the link to</p>
|
||||
<p>You can invite others to the Metamaps platform. Send them this link</p>
|
||||
<p class="green">http://metamaps.cc/users/sign_up</p>
|
||||
<p>and give them the access code shown below.</p>
|
||||
<% mapper = current_user %>
|
||||
|
|
|
|||
|
|
@ -65,13 +65,12 @@
|
|||
<div class="footer">
|
||||
<div class="logo">
|
||||
<ul class="menu">
|
||||
<li class="beta">
|
||||
<div class="inBeta">beta</div>
|
||||
<button class="button" onclick="BAROMETER.show();">feedback!</button>
|
||||
<li class="beta" onclick="BAROMETER.show();">
|
||||
FEEDBACK!
|
||||
</li>
|
||||
<li class="meta openLightbox" data-open="about">about</li>
|
||||
<li class="tutorial openLightbox" data-open="tutorial">tutorial</li>
|
||||
<li class="exploreMaps"><%= link_to "explore maps", maps_url %></li>
|
||||
<li class="meta openLightbox" data-open="about">ABOUT</li>
|
||||
<li class="tutorial openLightbox" data-open="tutorial">TUTORIAL</li>
|
||||
<li class="exploreMaps"><%= link_to "EXPLORE MAPS", maps_url %></li>
|
||||
</ul>
|
||||
<div id="mainTitle"><%= link_to "metamaps", root_url %></div><!--<div id="beta">beta</div>-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,17 +7,15 @@
|
|||
<% content_for :title, @map.name + " | Metamaps" %>
|
||||
|
||||
<% if authenticated? %>
|
||||
<div class="sidebarWand">
|
||||
<div class="sidebarWandIcon"></div>
|
||||
<div class="sidebarWandBox">
|
||||
<ul>
|
||||
<% if @map.permission == "commons" || @map.user == user %>
|
||||
<li class="wandIcon wandSaveLayout">Save Layout</li>
|
||||
<% end %>
|
||||
<li class="wandIcon wandForkMap">Save To New Map</li>
|
||||
<!--<li class="wandIcon wandChangeMetacodes">Switch Metacode Set</li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<% if @map.permission == "commons" || @map.user == user %>
|
||||
<div class="sidebarSave">
|
||||
<div class="sidebarSaveIcon"></div>
|
||||
<div class="sidebarSaveBox"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="sidebarFork">
|
||||
<div class="sidebarForkIcon"></div>
|
||||
<div class="sidebarForkBox"></div>
|
||||
</div>
|
||||
<div class="sidebarCollaborate">
|
||||
<div class="sidebarCollaborateIcon"></div>
|
||||
|
|
@ -251,11 +249,11 @@
|
|||
initialize("chaotic", true);
|
||||
});
|
||||
}
|
||||
window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
|
||||
/*window.realtime.socket = io.connect('http://gentle-savannah-1303.herokuapp.com');
|
||||
window.realtime.socket.on('connect', function() {
|
||||
subscribeToRooms();
|
||||
console.log('socket connected');
|
||||
});
|
||||
});*/
|
||||
function subscribeToRooms() {
|
||||
window.realtime.socket.on('maps-' + mapid, function(data) {
|
||||
//as long as you weren't the origin of the changes, update your map
|
||||
|
|
|
|||
|
|
@ -17,14 +17,9 @@
|
|||
<% content_for :title, @topic.name + " | Metamaps" %>
|
||||
|
||||
<% if authenticated? %>
|
||||
<div class="sidebarWand topicView">
|
||||
<div class="sidebarWandIcon"></div>
|
||||
<div class="sidebarWandBox">
|
||||
<ul>
|
||||
<li class="wandIcon wandForkMap">Save As Map</li>
|
||||
<!--<li class="wandIcon wandChangeMetacodes">Switch Metacode Set</li>-->
|
||||
</ul>
|
||||
</div>
|
||||
<div class="sidebarFork">
|
||||
<div class="sidebarForkIcon"></div>
|
||||
<div class="sidebarForkBox"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="sidebarFilter <%= authenticated? ? 'loggedin' : 'loggedout' %>">
|
||||
|
|
|
|||
Loading…
Reference in a new issue