changed home page card styling

app/assets/stylesheets/application.css

@@ -1014,7 +1014,8 @@ overflow-x: hidden;
 .sidebarSearch .tt-suggestion {
     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;
 }
 .sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap,
@@ -1180,7 +1181,9 @@ overflow-x: hidden;
     padding: 3px 5px 2px;
     z-index: 100;
 }
-.sidebarSearch .mapCount .tip,.sidebarSearch .synapseCount .tip, .sidebarSearch .topicCount .tip  {
+.sidebarSearch .mapCount .tip,
+.sidebarSearch .synapseCount .tip,
+.sidebarSearch .topicCount .tip {
     right: -3px;
     bottom: 24px;
 }
@@ -1334,13 +1337,15 @@ overflow-x: hidden;
 
 /* 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;
 }
 #new_topic .tt-suggestion {
     padding: 5px;
     font-family: 'LatoLight';
-    background: rgba(42, 52, 60, 0.9);;
+    background: rgba(42, 52, 60, 0.9);
+    ;
 }
 #new_topic .autocompleteSection {
     float: left;
@@ -1407,7 +1412,8 @@ overflow-x: hidden;
     line-height: 16px;
     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;
 }
 #new_synapse .tt-suggestion {
@@ -1730,7 +1736,8 @@ div.mapInfoStat {
     margin: 0 0 .2em 0 !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,
+.ui-tabs-vertical .ui-tabs-nav li.ui-state-hover {
     border-right: 1px solid #000;
 }
 .ui-tabs-vertical .ui-tabs-nav li a {
@@ -1758,7 +1765,8 @@ div.mapInfoStat {
 #metacodeSwitchTabs .setDesc {
     margin-bottom: 5px;
 }
-.customMetacodeList, .metacodeSetList {
+.customMetacodeList,
+.metacodeSetList {
     height: 301px;
     overflow: hidden;
     margin: 5px 0 15px 0;
@@ -1767,7 +1775,8 @@ div.mapInfoStat {
 .customMetacodeList ul li {
     cursor: pointer;
 }
-.customMetacodeList ul li, .metacodeSetList ul li {
+.customMetacodeList ul li,
+.metacodeSetList ul li {
     list-style-type: none;
     display: block;
     padding: 0px;
@@ -1779,12 +1788,14 @@ div.mapInfoStat {
 .customMetacodeList li.toggledOff {
     opacity: 0.4;
 }
-.customMetacodeList ul img, .metacodeSetList ul img {
+.customMetacodeList ul img,
+.metacodeSetList ul img {
     width: 40px;
     height: 40px;
     margin: 0 auto;
 }
-.customMetacodeList ul p, .metacodeSetList ul p {
+.customMetacodeList ul p,
+.metacodeSetList ul p {
     display: block;
     margin: 0;
     background: none;
@@ -1797,7 +1808,6 @@ div.mapInfoStat {
     padding: 0 10px;
     font-weight: normal;
 }
-
 /* about */
 
 #about > p {
@@ -2363,27 +2373,57 @@ span.blue {
 #homeMap {
     width: 738px;
     margin: 0 auto;
-    height: 265px;
+    height: 340px;
     position: relative;
     overflow: hidden;
 }
 #homeFigure {
-    height: 265px;
+    height: 335px;
-    width: 1290px;
+    width: 738px;
     margin: 0;
 }
 #homeFigure figure {
     float: left;
     margin: 10px !important;
     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 {
     height: 40px;
     background-repeat: no-repeat;
-    background-position: 7px center;
+    background-position: 5px center;
-    background-size: 27px 27px;
+    background-size: 20px 20px;
     position: relative;
-    padding-left: 40px;
+    padding-left: 28px;
     line-height: 40px;
 }
 #homeMap .mapPerm.co {
@@ -2395,12 +2435,27 @@ span.blue {
 #homeMap .mapPerm.pr {
     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 {
-    position: absolute;
+    max-height: 40px;
-    height: 40px;
     line-height: 40px;
     bottom: 0;
     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 {
     display: inline-block;
@@ -2439,7 +2494,7 @@ span.blue {
 }
 #homeMap .map,
 #homeMap .mapCard {
-    height: 226px;
+    height: 315px;
 }
 .socialIcons {
     position: fixed;

app/views/main/home.html.erb

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

app/views/maps/_homemap.html.erb

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