styled new map forms
This commit is contained in:
Connor Turland
parent
47710749a8
commit
86b60048c3
10 changed files with 312 additions and 33 deletions
BIN
app/assets/images/MMCCicon_commons_black.png
Normal file
BIN
app/assets/images/MMCCicon_commons_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
app/assets/images/MMCCicon_private_black.png
Normal file
BIN
app/assets/images/MMCCicon_private_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 3.8 KiB |
BIN
app/assets/images/MMCCicon_public_black.png
Normal file
BIN
app/assets/images/MMCCicon_public_black.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
|
|
@ -500,6 +500,13 @@ var labelType, useGradients, nativeTextSupport, animate, json, Mconsole = null,
|
|||
openLightbox($(this).attr('data-open'));
|
||||
});
|
||||
|
||||
// bind permission changer events
|
||||
$('.permIcon').click(function() {
|
||||
$(this).siblings('#map_permission').val( $(this).attr('data-permission') );
|
||||
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
|
||||
$(this).find('.mapPermIcon').addClass('selected');
|
||||
});
|
||||
|
||||
// bind keyboard handlers
|
||||
$('body').bind('keyup', function(e) {
|
||||
switch(e.which) {
|
||||
|
|
@ -702,3 +709,23 @@ function openLightbox(which) {
|
|||
$('#lightbox_overlay').show();
|
||||
$('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' );
|
||||
}
|
||||
|
||||
function cancelMapCreate(id) {
|
||||
|
||||
$('#lightbox_overlay').hide();
|
||||
|
||||
var form = $('#' + id);
|
||||
|
||||
form.find('#map_name').val('');
|
||||
form.find('#map_desc').val('');
|
||||
form.find('#map_permission').val('commons');
|
||||
|
||||
if (id == "fork_map") {
|
||||
form.find('#map_topicsToMap').val('0');
|
||||
form.find('#map_synapsesToMap').val('0');
|
||||
}
|
||||
form.find('.mapPermIcon').removeClass('selected');
|
||||
form.find('.mapCommonsIcon').addClass('selected');
|
||||
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -609,6 +609,14 @@ display: inline-block;
|
|||
text-align: start;
|
||||
}
|
||||
|
||||
.sidebarAccountBox input[type="email"]:hover, .sidebarAccountBox input[type="password"]:hover {
|
||||
border: 1px solid #b9b9b9;
|
||||
border-top: 1px solid #a0a0a0;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.sidebarAccountBox .links a {
|
||||
display:block;
|
||||
margin-top:5px;
|
||||
|
|
@ -1536,6 +1544,9 @@ border: solid 2px #000;
|
|||
line-height:35px;
|
||||
color:black;
|
||||
}
|
||||
.lightboxContent h3.forCreateMap {
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.lightboxContent {
|
||||
display:none;
|
||||
|
|
@ -1567,9 +1578,162 @@ border: solid 2px #000;
|
|||
.new_map {
|
||||
color:black;
|
||||
}
|
||||
.onConsole .new_map button, .onConsole .new_map input.add {
|
||||
|
||||
.new_map .inputGroup {
|
||||
margin: 15px 0 5px;
|
||||
}
|
||||
|
||||
.new_map label {
|
||||
float:left;
|
||||
margin-top:5px;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.new_map input[type="text"] {
|
||||
width: 336px;
|
||||
height: 32px;
|
||||
font-size: 15px;
|
||||
direction: ltr;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-top: 1px solid #c0c0c0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-border-radius: 1px;
|
||||
-moz-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
font: -webkit-small-control;
|
||||
color: initial;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
display: inline-block;
|
||||
text-align: start;
|
||||
font-family:arial;
|
||||
}
|
||||
.new_map input[type="text"]:hover, .new_map textarea:hover {
|
||||
border: 1px solid #b9b9b9;
|
||||
border-top: 1px solid #a0a0a0;
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.new_map textarea {
|
||||
padding:8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-top: 1px solid #c0c0c0;
|
||||
resize:none;
|
||||
font: -webkit-small-control;
|
||||
letter-spacing: normal;
|
||||
word-spacing: normal;
|
||||
text-transform: none;
|
||||
text-indent: 0px;
|
||||
text-shadow: none;
|
||||
text-align: start;
|
||||
font-family:arial;
|
||||
font-size:15px;
|
||||
line-height:17px;
|
||||
}
|
||||
|
||||
.new_map .permIcon {
|
||||
float:left;
|
||||
width:92px;
|
||||
height: 85px;
|
||||
position:relative;
|
||||
}
|
||||
.new_map .mapPermIcon {
|
||||
width:60px;
|
||||
height:60px;
|
||||
background-size: 48px 48px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
margin:0 auto;
|
||||
cursor:pointer;
|
||||
}
|
||||
.new_map .mapCommonsIcon {
|
||||
background-image: url(MMCCicon_commons.png);
|
||||
}
|
||||
.new_map .mapPublicIcon {
|
||||
background-image: url(MMCCicon_public.png);
|
||||
}
|
||||
.new_map .mapPrivateIcon {
|
||||
background-image: url(MMCCicon_private.png);
|
||||
}
|
||||
.new_map .mapCommonsIcon.selected, .new_map .mapCommonsIcon:hover {
|
||||
background-image: url(MMCCicon_commons_black.png);
|
||||
}
|
||||
.new_map .mapPublicIcon.selected, .new_map .mapPublicIcon:hover {
|
||||
background-image: url(MMCCicon_public_black.png);
|
||||
}
|
||||
.new_map .mapPrivateIcon.selected, .new_map .mapPrivateIcon:hover {
|
||||
background-image: url(MMCCicon_private_black.png);
|
||||
}
|
||||
|
||||
.new_map .permIcon h4 {
|
||||
font-style:italic;
|
||||
font-family: 'Vinyl';
|
||||
text-transform:uppercase;
|
||||
font-size:18px;
|
||||
line-height:20px;
|
||||
color:black;
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
.new_map .tip {
|
||||
display:none;
|
||||
position: absolute;
|
||||
background: white;
|
||||
width: 150px;
|
||||
top: 85px;
|
||||
left: -32px;
|
||||
color: black;
|
||||
border-radius: 4px;
|
||||
font-size:15px !important;
|
||||
font-family:'LatoLight';
|
||||
line-height:17px;
|
||||
padding: 3px 5px 2px;
|
||||
border: 1px solid black;
|
||||
z-index:100;
|
||||
}
|
||||
.new_map .hoverForTip:hover .tip {
|
||||
display:block;
|
||||
}
|
||||
|
||||
.permText {
|
||||
width: 360px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.buttonWrapper {
|
||||
margin: 10px auto 0;
|
||||
width: 252px;
|
||||
}
|
||||
|
||||
.onConsole .new_map button {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.onConsole .new_map button, .onConsole .new_map input.add {
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
background: #15bad4;
|
||||
height: 40px;
|
||||
font-family: 'LatoLight';
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
width: auto;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
/* --- styling the logo button ---*/
|
||||
|
|
|
|||
|
|
@ -6,20 +6,23 @@
|
|||
|
||||
<div id="lightbox_overlay">
|
||||
<div id="lightbox_main">
|
||||
<a id="lightbox_close" onclick="$('#lightbox_overlay').hide();return false" href="#"></a>
|
||||
<a id="lightbox_close" onclick="cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" href="#"></a>
|
||||
<div id="lightbox_content">
|
||||
|
||||
<div class="lightboxContent" id="about">
|
||||
<h3>About Metamaps.cc</h3>
|
||||
|
||||
<p>
|
||||
Metamaps is an online interface for communities to build and visualize their shared knowledge. It is a tool to connect people, resources, and ideas in 'big picture' views without losing context or detail.
|
||||
Metamaps is an online interface for communities to build and visualize their shared knowledge.
|
||||
It is a tool to connect people, resources, and ideas in 'big picture' views without losing context or detail.
|
||||
</p>
|
||||
<p>
|
||||
Metamaps provide a natural window into complex systems, sparking insights, creative opportunities, and social synergy. The platform is evolving to meet a growing range of application scenarios.
|
||||
Metamaps provide a natural window into complex systems, sparking insights, creative opportunities, and social synergy.
|
||||
The platform is evolving to meet a growing range of application scenarios.
|
||||
</p>
|
||||
<p>
|
||||
The Metamaps project is a collaborative venture powered by a passionate network of peers, dedicated to the wealth of knowledge we find in common.
|
||||
The Metamaps project is a collaborative venture powered by a passionate network of peers,
|
||||
dedicated to the wealth of knowledge we find in common.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
|
|
@ -76,6 +79,6 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox_screen" onclick="$('#lightbox_overlay').hide();return false" style="height: 100%;"></div>
|
||||
<div id="lightbox_screen" onclick="cancelMapCreate('fork_map');cancelMapCreate('new_map');return false;" style="height: 100%;"></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,23 +6,61 @@
|
|||
<%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "fork_map" } do |form|%>
|
||||
|
||||
<% if controller_name == "maps" %>
|
||||
<h3>Save To New Map</h3>
|
||||
<h3 class="forCreateMap">Save To New Map</h3>
|
||||
<% elsif controller_name == "topics" %>
|
||||
<h3>Save As New Map</h3>
|
||||
<h3 class="forCreateMap">Save As New Map</h3>
|
||||
<% end %>
|
||||
|
||||
<label for="map_name">Name</label>
|
||||
<%= form.text_field :name %>
|
||||
<label for="map_desc">Description</label>
|
||||
<%= form.text_area :desc, class: "description", :rows => 5 %>
|
||||
<label for="map_permission">Permission</label>
|
||||
<div class="inputGroup">
|
||||
<label for="map_name">Name: </label>
|
||||
<%= form.text_field :name %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<div class="inputGroup">
|
||||
<label for="map_desc">Description: </label>
|
||||
<%= form.text_area :desc, class: "description", :rows => 5, :cols => 43 %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<div class="inputGroup">
|
||||
<label for="map_permission">Permission: </label>
|
||||
|
||||
<div class="permIcon hoverForTip" data-permission="commons">
|
||||
<div class="mapCommonsIcon mapPermIcon selected"></div>
|
||||
<h4>COMMONS</h4>
|
||||
<div class="tip">
|
||||
Collaborate with other mappers on editing this map. Those without accounts can view this map.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="public">
|
||||
<div class="mapPublicIcon mapPermIcon"></div>
|
||||
<h4>PUBLIC</h4>
|
||||
<div class="tip">
|
||||
Anyone, with or without an account, can view this map but not edit anything.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="private">
|
||||
<div class="mapPrivateIcon mapPermIcon"></div>
|
||||
<h4>PRIVATE</h4>
|
||||
<div class="tip">
|
||||
Only you can view or edit this map.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= form.hidden_field :permission, :value => "commons" %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<p class="permText">*topics and synapses you create newly on this map will be set by default to the permissions of your map</p>
|
||||
|
||||
<div class="buttonWrapper">
|
||||
<button class="button" onclick="cancelMapCreate('fork_map'); return false;">Cancel</button>
|
||||
<%= form.submit "Create!", class: "add" %>
|
||||
</div>
|
||||
|
||||
<%= form.hidden_field :permission, :value => "commons" %>
|
||||
<p>Topics and synapses you create newly on this map will be set by default to the permissions of your map.</p>
|
||||
<%= form.hidden_field :topicsToMap, :value => 0 %>
|
||||
<%= form.hidden_field :synapsesToMap, :value => 0 %>
|
||||
<%= form.submit "Save", class: "add" %>
|
||||
<button class="button" onclick="$('#lightbox_overlay').hide();return false">Cancel</button>
|
||||
<div class="clearfloat"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,17 +4,56 @@
|
|||
#%>
|
||||
<div class="onConsole">
|
||||
<%= form_for Map.new, url: maps_url, remote: true, html: { class: "new_map", id: "new_map" } do |form|%>
|
||||
<h3>Create A New Map</h3>
|
||||
<label for="map_name">Name</label>
|
||||
<%= form.text_field :name %>
|
||||
<label for="map_desc">Description</label>
|
||||
<%= form.text_area :desc, class: "description", :rows => 5 %>
|
||||
<label for="map_permission">Permission</label>
|
||||
<h3 class="forCreateMap">Create A New Map</h3>
|
||||
|
||||
<div class="inputGroup">
|
||||
<label for="map_name">Name: </label>
|
||||
<%= form.text_field :name %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<div class="inputGroup">
|
||||
<label for="map_desc">Description: </label>
|
||||
<%= form.text_area :desc, class: "description", :rows => 5, :cols => 43 %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<div class="inputGroup">
|
||||
<label for="map_permission">Permission: </label>
|
||||
|
||||
<%= form.hidden_field :permission, :value => "commons" %>
|
||||
<p>Topics and synapses you create newly on this map will be set by default to the permissions of your map.</p>
|
||||
<%= form.submit "Save", class: "add" %>
|
||||
<button class="button" onclick="$('#lightbox_overlay').hide();return false">Cancel</button>
|
||||
<div class="permIcon hoverForTip" data-permission="commons">
|
||||
<div class="mapCommonsIcon mapPermIcon selected"></div>
|
||||
<h4>COMMONS</h4>
|
||||
<div class="tip">
|
||||
Collaborate with other mappers on editing this map. Those without accounts can view this map.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="public">
|
||||
<div class="mapPublicIcon mapPermIcon"></div>
|
||||
<h4>PUBLIC</h4>
|
||||
<div class="tip">
|
||||
Anyone, with or without an account, can view this map but not edit anything.
|
||||
</div>
|
||||
</div>
|
||||
<div class="permIcon hoverForTip" data-permission="private">
|
||||
<div class="mapPrivateIcon mapPermIcon"></div>
|
||||
<h4>PRIVATE</h4>
|
||||
<div class="tip">
|
||||
Only you can view or edit this map.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= form.hidden_field :permission, :value => "commons" %>
|
||||
<div class="clearfloat"></div>
|
||||
</div>
|
||||
|
||||
<p class="permText">*topics and synapses you create newly on this map will be set by default to the permissions of your map</p>
|
||||
|
||||
<div class="buttonWrapper">
|
||||
<button class="button" onclick="cancelMapCreate('new_map'); return false;">Cancel</button>
|
||||
<%= form.submit "Create!", class: "add" %>
|
||||
</div>
|
||||
|
||||
<div class="clearfloat"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,18 +16,26 @@ $('#map_permission').val('commons');
|
|||
<% else %>
|
||||
var form = $('#new_map');
|
||||
<% end %>
|
||||
form.find('.mapPermIcon').removeClass('selected');
|
||||
form.find('.mapCommonsIcon').addClass('selected');
|
||||
|
||||
|
||||
var tempForm = form.html();
|
||||
if (mapid == null) {
|
||||
form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); event.preventDefault();'>Stay on this page?</a>");
|
||||
form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); return false;'>Stay on this page?</a>");
|
||||
}
|
||||
else if (mapid != null) {
|
||||
form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); event.preventDefault();'>Stay on this map?</a>");
|
||||
form.html("Success! Do you want to <br> <a href='/maps/" + '<%= @map.id %>' + "'>Go to your new map?</a><br>or<br><a href='javascript:closeIt(); return false;'>Stay on this map?</a>");
|
||||
}
|
||||
$('#lightbox_main').css('margin-top', '-' + ($('#lightbox_main').height() / 2) + 'px' );
|
||||
|
||||
function closeIt() {
|
||||
form.fadeOut('fast', function(){
|
||||
form.html(tempForm);
|
||||
});
|
||||
$('#lightbox_overlay').hide();
|
||||
form.html(tempForm);
|
||||
// bind permission changer events
|
||||
form.find('.permIcon').click(function() {
|
||||
$(this).siblings('#map_permission').val( $(this).attr('data-permission') );
|
||||
$(this).siblings('.permIcon').find('.mapPermIcon').removeClass('selected');
|
||||
$(this).find('.mapPermIcon').addClass('selected');
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue