finished synapse autocomplete styling
This commit is contained in:
parent
7182996134
commit
fe5d682fc2
4 changed files with 62 additions and 31 deletions
|
@ -741,7 +741,7 @@ Metamaps.Create = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
engine: Hogan,
|
engine: Hogan,
|
||||||
header: "<h3>Existing Synapses</h3>"
|
header: "<h3>Existing synapses</h3>"
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|
|
@ -581,7 +581,7 @@ input[type="submit"]:active {
|
||||||
}
|
}
|
||||||
.new_synapse #synapse_desc,
|
.new_synapse #synapse_desc,
|
||||||
.new_synapse .tt-hint {
|
.new_synapse .tt-hint {
|
||||||
width: 244px;
|
width: 258px;
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -1359,7 +1359,7 @@ float: left;
|
||||||
#new_topic .tt-suggestion,
|
#new_topic .tt-suggestion,
|
||||||
#new_synapse .tt-suggestion {
|
#new_synapse .tt-suggestion {
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
width: 256px;
|
width: 270px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
#new_topic .autocompleteSection {
|
#new_topic .autocompleteSection {
|
||||||
|
@ -1380,9 +1380,9 @@ float: left;
|
||||||
line-height: 14px;
|
line-height: 14px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 9px 0 9px 8px;
|
padding: 9px 0 9px 8px;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
#new_topic .expandTopicMetadata,
|
#new_topic .expandTopicMetadata {
|
||||||
#new_synapse .expandSynapseMetadata {
|
|
||||||
display:none;
|
display:none;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
|
@ -1394,19 +1394,14 @@ float: left;
|
||||||
background-position: 0 -32px;
|
background-position: 0 -32px;
|
||||||
}
|
}
|
||||||
#new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
|
#new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
|
||||||
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata,
|
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata {
|
||||||
#new_synapse .tt-suggestion.tt-is-under-cursor .expandSynapseMetadata,
|
|
||||||
#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .expandSynapseMetadata {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
|
#new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
|
||||||
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata,
|
#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata {
|
||||||
#new_synapse .tt-suggestion.tt-is-under-cursor .synapseMetadata,
|
|
||||||
#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .synapseMetadata {
|
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
#new_topic .topicMetadata,
|
#new_topic .topicMetadata {
|
||||||
#new_synapse .synapseMetadata {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: none;
|
display: none;
|
||||||
top: -18px;
|
top: -18px;
|
||||||
|
@ -1417,8 +1412,7 @@ float: left;
|
||||||
font-family: 'din-regular', helvetica, sans-serif;
|
font-family: 'din-regular', helvetica, sans-serif;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
#new_topic .topicPermission,
|
#new_topic .topicPermission {
|
||||||
#new_synapse .synapsePermission {
|
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
@ -1439,8 +1433,7 @@ float: left;
|
||||||
#new_synapse .synapsePermission.private {
|
#new_synapse .synapsePermission.private {
|
||||||
background-position: -32px 0;
|
background-position: -32px 0;
|
||||||
}
|
}
|
||||||
#new_topic .topicNumMaps,
|
#new_topic .topicNumMaps {
|
||||||
#new_synapse .synapseNumMaps {
|
|
||||||
height: 14px;
|
height: 14px;
|
||||||
padding: 1px 0 1px 32px;
|
padding: 1px 0 1px 32px;
|
||||||
background-image: url(metamap16.png);
|
background-image: url(metamap16.png);
|
||||||
|
@ -1458,14 +1451,12 @@ float: left;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
#new_topic .topicOriginatorIcon,
|
#new_topic .topicOriginatorIcon {
|
||||||
#new_synapse .synapseOriginatorIcon {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 8px;
|
right: 8px;
|
||||||
}
|
}
|
||||||
#new_topic .topicOriginatorIcon img,
|
#new_topic .topicOriginatorIcon img {
|
||||||
#new_synapse .synapseOriginatorIcon img {
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
#new_topic .topicOriginatorIcon:hover .tip,
|
#new_topic .topicOriginatorIcon:hover .tip,
|
||||||
|
@ -1493,17 +1484,59 @@ float: left;
|
||||||
background: #F5F5F5;
|
background: #F5F5F5;
|
||||||
}
|
}
|
||||||
#new_synapse .tt-dropdown-menu h3 {
|
#new_synapse .tt-dropdown-menu h3 {
|
||||||
font-family: 'vinyl', helvetica, sans-serif;
|
font-size: 14px;
|
||||||
text-transform: uppercase;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 14pxpx;
|
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
margin: 3px;
|
padding: 8px;
|
||||||
|
border-top: 1px solid #BFBFBF;
|
||||||
|
color: #808080;
|
||||||
}
|
}
|
||||||
#new_synapse .tt-suggestion .resultnoresult .synapsePermission,
|
#new_synapse .tt-suggestion .resultnoresult .synapsePermission,
|
||||||
#new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
|
#new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#new_synapse .synapseMetadata {
|
||||||
|
width: 64px;
|
||||||
|
padding-left: 4px;
|
||||||
|
height: 32px;
|
||||||
|
position: absolute;
|
||||||
|
left: 202px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
#new_synapse .synapseOriginatorIcon {
|
||||||
|
position: absolute;
|
||||||
|
top: 4px;
|
||||||
|
}
|
||||||
|
#new_synapse .synapseOriginatorIcon .tooltips {
|
||||||
|
right: 36px;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
#new_synapse .synapseOriginatorIcon .tooltips:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 57%;
|
||||||
|
left: 100%;
|
||||||
|
margin-top: -6px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 4px solid #000000;
|
||||||
|
border-top: 5px solid transparent;
|
||||||
|
border-bottom: 5px solid transparent;
|
||||||
|
}
|
||||||
|
#new_synapse .synapseOriginatorIcon:hover .tooltips {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
#new_synapse .synapseOriginatorIcon img {
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
#new_synapse .synapsePermission {
|
||||||
|
position: absolute;
|
||||||
|
left: 32px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url(permissions32_sprite.png);
|
||||||
|
}
|
||||||
/* map info box */
|
/* map info box */
|
||||||
/* map info box */
|
/* map info box */
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@ module SynapsesHelper
|
||||||
synapses.each do |s|
|
synapses.each do |s|
|
||||||
synapse = {}
|
synapse = {}
|
||||||
synapse['id'] = s.id
|
synapse['id'] = s.id
|
||||||
synapse['label'] = s.desc
|
synapse['label'] = s.desc == nil || s.desc == "" ? "(no description)" : s.desc
|
||||||
synapse['value'] = s.desc
|
synapse['value'] = s.desc
|
||||||
synapse['permission'] = s.permission
|
synapse['permission'] = s.permission
|
||||||
synapse['mapCount'] = s.maps.count
|
synapse['mapCount'] = s.maps.count
|
||||||
|
|
|
@ -156,13 +156,11 @@
|
||||||
|
|
||||||
<script type="text/template" id="synapseAutocompleteTemplate">
|
<script type="text/template" id="synapseAutocompleteTemplate">
|
||||||
<div class="result{{rtype}}">
|
<div class="result{{rtype}}">
|
||||||
<p class="autocompleteSection synapseDesc">{{label}}</p>
|
<p class="autocompleteSection synapseDesc">{{label}}</p>
|
||||||
<div class="expandSynapseMetadata"></div>
|
|
||||||
<div class="synapseMetadata">
|
<div class="synapseMetadata">
|
||||||
<div class="synapseNumMaps">{{mapCount}}</div>
|
|
||||||
<div class="synapseOriginatorIcon hoverForTip">
|
<div class="synapseOriginatorIcon hoverForTip">
|
||||||
<img width="24" height="24" src="{{originatorImage}}" />
|
<img width="24" height="24" src="{{originatorImage}}" />
|
||||||
<span class="tip synapseOriginator">{{originator}}</span>
|
<span class="tooltips synapseOriginator">{{originator}}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="synapsePermission {{permission}}"></div>
|
<div class="synapsePermission {{permission}}"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue