glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

changed home page card styling

Browse source
This commit is contained in:
Connor Turland 2014-06-11 10:25:33 -04:00
parent e5cc8b8078
commit 140a526226
3 changed files with 131 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

171
app/assets/stylesheets/application.css
View file

@ -321,7 +321,7 @@ input[type="submit"]:hover {
height: 20px; height: 20px;
width: 20px; width: 20px;
background-image: url('MMCCicon_metacode_set_change.png'); background-image: url('MMCCicon_metacode_set_change.png');
background-size:contain; background-size: contain;
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 20px; top: 20px;
@ -964,12 +964,12 @@ h3.filterByMetacode {
font-family: 'LatoRegular'; font-family: 'LatoRegular';
} }
.sidebarSearch .tt-dropdown-menu { .sidebarSearch .tt-dropdown-menu {
left:-35px !important; left: -35px !important;
background: #0F1519; background: #0F1519;
min-width: 440px; min-width: 440px;
width: 440px; width: 440px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
} }
.sidebarSearch .tt-dropdown-menu h3 { .sidebarSearch .tt-dropdown-menu h3 {
font-family: 'vinyl', helvetica, sans-serif; font-family: 'vinyl', helvetica, sans-serif;
@ -1014,7 +1014,8 @@ overflow-x: hidden;
.sidebarSearch .tt-suggestion { .sidebarSearch .tt-suggestion {
background: #2A343C; background: #2A343C;
} }
.sidebarSearch .tt-is-under-cursor, .sidebarSearch .tt-is-under-mouse-cursor { .sidebarSearch .tt-is-under-cursor,
.sidebarSearch .tt-is-under-mouse-cursor {
background: #0E161D; background: #0E161D;
} }
.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap, .sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap,
@ -1046,7 +1047,7 @@ overflow-x: hidden;
.sidebarSearch .tt-dataset-topics .metacodeTip { .sidebarSearch .tt-dataset-topics .metacodeTip {
display: none; display: none;
} }
.sidebarSearch .tt-dataset-topics .tt-is-under-cursor .metacodeTip, .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .metacodeTip,
.sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .metacodeTip { .sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .metacodeTip {
display: block; display: block;
font-family: 'vinyl'; font-family: 'vinyl';
@ -1166,32 +1167,34 @@ overflow-x: hidden;
left: 13px; left: 13px;
} }
.sidebarSearch .tip { .sidebarSearch .tip {
position: absolute; position: absolute;
background: white; background: white;
width: auto; width: auto;
bottom: 0; bottom: 0;
right: 25px; right: 25px;
color: black; color: black;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
font-size:15px !important; font-size: 15px !important;
font-family:'LatoRegular'; font-family: 'LatoRegular';
line-height:17px; line-height: 17px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
z-index:100; z-index: 100;
} }
.sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip { .sidebarSearch .mapCount .tip,
right:-3px; .sidebarSearch .synapseCount .tip,
bottom:24px; .sidebarSearch .topicCount .tip {
right: -3px;
bottom: 24px;
} }
.sidebarSearch .hoverForTip:hover .tip { .sidebarSearch .hoverForTip:hover .tip {
display: block; display: block;
} }
.sidebarSearch .mapContributorsIcon .mapContributors { .sidebarSearch .mapContributorsIcon .mapContributors {
right:0; right: 0;
bottom:21px; bottom: 21px;
white-space:normal; white-space: normal;
width:200px; width: 200px;
} }
.sidebarSearch div.mapContributorsIcon { .sidebarSearch div.mapContributorsIcon {
height: 20px; height: 20px;
@ -1334,13 +1337,15 @@ overflow-x: hidden;
/* topic autocomplete */ /* topic autocomplete */
#new_topic .tt-suggestion.tt-is-under-cursor, #new_topic .tt-suggestion.tt-is-under-mouse-cursor { #new_topic .tt-suggestion.tt-is-under-cursor,
#new_topic .tt-suggestion.tt-is-under-mouse-cursor {
background: #0E161D; background: #0E161D;
} }
#new_topic .tt-suggestion { #new_topic .tt-suggestion {
padding: 5px; padding: 5px;
font-family: 'LatoLight'; font-family: 'LatoLight';
background: rgba(42, 52, 60, 0.9);; background: rgba(42, 52, 60, 0.9);
;
} }
#new_topic .autocompleteSection { #new_topic .autocompleteSection {
float: left; float: left;
@ -1407,7 +1412,8 @@ overflow-x: hidden;
line-height: 16px; line-height: 16px;
margin: 3px; margin: 3px;
} }
#new_synapse .tt-suggestion.tt-is-under-cursor, #new_synapse .tt-suggestion.tt-is-under-mouse-cursor { #new_synapse .tt-suggestion.tt-is-under-cursor,
#new_synapse .tt-suggestion.tt-is-under-mouse-cursor {
background: #0E161D; background: #0E161D;
} }
#new_synapse .tt-suggestion { #new_synapse .tt-suggestion {
@ -1730,8 +1736,9 @@ div.mapInfoStat {
margin: 0 0 .2em 0 !important; margin: 0 0 .2em 0 !important;
white-space: normal !important; white-space: normal !important;
} }
.ui-tabs-vertical .ui-tabs-nav li.ui-state-active, .ui-tabs-vertical .ui-tabs-nav li.ui-state-hover { .ui-tabs-vertical .ui-tabs-nav li.ui-state-active,
border-right:1px solid #000; .ui-tabs-vertical .ui-tabs-nav li.ui-state-hover {
border-right: 1px solid #000;
} }
.ui-tabs-vertical .ui-tabs-nav li a { .ui-tabs-vertical .ui-tabs-nav li a {
display: block; display: block;
@ -1756,9 +1763,10 @@ div.mapInfoStat {
font-family: Lato, Arial, sans-serif; font-family: Lato, Arial, sans-serif;
} }
#metacodeSwitchTabs .setDesc { #metacodeSwitchTabs .setDesc {
margin-bottom:5px; margin-bottom: 5px;
} }
.customMetacodeList, .metacodeSetList { .customMetacodeList,
.metacodeSetList {
height: 301px; height: 301px;
overflow: hidden; overflow: hidden;
margin: 5px 0 15px 0; margin: 5px 0 15px 0;
@ -1767,7 +1775,8 @@ div.mapInfoStat {
.customMetacodeList ul li { .customMetacodeList ul li {
cursor: pointer; cursor: pointer;
} }
.customMetacodeList ul li, .metacodeSetList ul li { .customMetacodeList ul li,
.metacodeSetList ul li {
list-style-type: none; list-style-type: none;
display: block; display: block;
padding: 0px; padding: 0px;
@ -1779,12 +1788,14 @@ div.mapInfoStat {
.customMetacodeList li.toggledOff { .customMetacodeList li.toggledOff {
opacity: 0.4; opacity: 0.4;
} }
.customMetacodeList ul img, .metacodeSetList ul img { .customMetacodeList ul img,
.metacodeSetList ul img {
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: 0 auto; margin: 0 auto;
} }
.customMetacodeList ul p, .metacodeSetList ul p { .customMetacodeList ul p,
.metacodeSetList ul p {
display: block; display: block;
margin: 0; margin: 0;
background: none; background: none;
@ -1797,7 +1808,6 @@ div.mapInfoStat {
padding: 0 10px; padding: 0 10px;
font-weight: normal; font-weight: normal;
} }
/* about */ /* about */
#about > p { #about > p {
@ -2033,16 +2043,16 @@ div.mapInfoStat {
width: 314px; width: 314px;
} }
.blackBox td.metacodeSetDesc { .blackBox td.metacodeSetDesc {
width: 314px; width: 314px;
word-wrap: break-word; word-wrap: break-word;
} }
.blackBox .metacodeSetImage { .blackBox .metacodeSetImage {
width:36px; width: 36px;
height:36px; height: 36px;
float:left; float: left;
} }
.blackBox tr { .blackBox tr {
display:table-row; display: table-row;
} }
.blackBox tr:nth-child(odd) { .blackBox tr:nth-child(odd) {
background: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);
@ -2055,8 +2065,8 @@ div.mapInfoStat {
padding: 10px; padding: 10px;
} }
.blackBox td.iconURL { .blackBox td.iconURL {
max-width: 415px; max-width: 415px;
word-wrap: break-word; word-wrap: break-word;
} }
.blackBox .field { .blackBox .field {
margin: 15px 0 5px; margin: 15px 0 5px;
@ -2363,27 +2373,57 @@ span.blue {
#homeMap { #homeMap {
width: 738px; width: 738px;
margin: 0 auto; margin: 0 auto;
height: 265px; height: 340px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
#homeFigure { #homeFigure {
height: 265px; height: 335px;
width: 1290px; width: 738px;
margin: 0; margin: 0;
} }
#homeFigure figure { #homeFigure figure {
float: left; float: left;
margin: 10px !important; margin: 10px !important;
overflow: hidden; overflow: hidden;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
#homeMap .links {
font-size: 14px;
font-family: Lato;
flex: none;
}
#homeMap .title {
margin: 10px;
flex: none;
}
#homeMap .linkItem.contributor {
background-position: 5px center;
background-size: 20px 20px;
position: relative;
padding-left: 28px;
line-height: 40px;
margin-left: 0px;
padding-right: 2px;
} }
#homeMap .mapPerm { #homeMap .mapPerm {
height: 40px; height: 40px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 7px center; background-position: 5px center;
background-size: 27px 27px; background-size: 20px 20px;
position: relative; position: relative;
padding-left: 40px; padding-left: 28px;
line-height: 40px; line-height: 40px;
} }
#homeMap .mapPerm.co { #homeMap .mapPerm.co {
@ -2395,12 +2435,27 @@ span.blue {
#homeMap .mapPerm.pr { #homeMap .mapPerm.pr {
background-image: url(MMCCicon_private.png); background-image: url(MMCCicon_private.png);
} }
#homeMap .desc {
color: #555555;
padding: 15px 5px 0 15px;
overflow: hidden;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.mapContains { .mapContains {
position: absolute; max-height: 40px;
height: 40px;
line-height: 40px; line-height: 40px;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
border-top: 1px solid #AAAAAA;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
} }
.mapContains span { .mapContains span {
display: inline-block; display: inline-block;
@ -2439,7 +2494,7 @@ span.blue {
} }
#homeMap .map, #homeMap .map,
#homeMap .mapCard { #homeMap .mapCard {
height: 226px; height: 315px;
} }
.socialIcons { .socialIcons {
position: fixed; position: fixed;
@ -2481,4 +2536,4 @@ span.blue {
} }
.templates { .templates {
display: none; display: none;
} }

5
app/views/main/home.html.erb
View file

@ -98,6 +98,11 @@ $(document).ready(function() {
}, function() { }, function() {
$(this).attr('src','/assets/metamap128x128.png'); $(this).attr('src','/assets/metamap128x128.png');
}); });
var s = $('#homeMap .desc');
s.height(s.height()).mCustomScrollbar({
mouseWheelPixels: 200
});
}); });

25
app/views/maps/_homemap.html.erb
View file

@ -5,25 +5,26 @@
#%> #%>
<figure class="map <%= first ? "current" : "" %>"> <figure class="map <%= first ? "current" : "" %>">
<a href="/maps/<%= map.id %>"> <a href="/maps/<%= map.id %>">
<div class="permission <%= map.authorize_to_edit(user) ? "canEdit" : "cannotEdit" %>"> <div>
<div class="mapCard"> <div class="mapCard">
<div class="mapPerm <%= map.mk_permission %>"></div>
<span class="title"> <span class="title">
<%= map.name %> <%= map.name %>
</span> </span>
<div class="links">
<div class="linkItem contributor">
<%= pluralize(map.contributors.count, 'contributor') %>
</div>
<div class="linkItem mapPerm <%= map.mk_permission %>"><%= map.permission.capitalize %></div>
<div class="clearfloat"></div>
</div>
<div class="desc">
<%= map.desc %>
</div>
<div class="mapContains"> <div class="mapContains">
<span class="topicCount"><%= pluralize(map.topics.count, 'topic') %></span> <span class="topicCount"><%= pluralize(map.topics.count, 'topic') %></span>
<span class="synapseCount"><%= pluralize(map.synapses.count, 'synapse') %></span> <span class="synapseCount"><%= pluralize(map.synapses.count, 'synapse') %></span>
</div> </div>
<div class="littleOverlay">
<div class="scroll">
<div class="desc">
<%= map.desc %>
</div>
</div>
<span><%= pluralize(map.contributors.count, 'contributor') %></span><span>Last edit <%= time_ago_in_words( map.updated_at ) %> ago</span>
</div>
</div> </div>
</div> </div>