topic card description overflow improvement, handle invalid links in topic card

app/assets/javascripts/src/Metamaps.js

@@ -832,7 +832,14 @@ Metamaps.TopicCard = {
         var self = Metamaps.TopicCard;
 
         $('#embedlyLinkLoader').hide();
-        $('#embedlyLink').fadeIn('fast');
+
+        // means that the embedly call returned 404 not found
+        if ($('#embedlyLink')[0]) {
+            $('#embedlyLink').css('display', 'block').fadeIn('fast');
+            $('.embeds').addClass('nonEmbedlyLink');
+        }
+
+        $('.CardOnGraph').addClass('hasAttachment');
         if (self.authorizedToEdit) {
             $('.embeds').append('<div id="linkremove"></div>');
             $('#linkremove').click(self.removeLink);
@@ -843,7 +850,7 @@ Metamaps.TopicCard = {
         self.openTopicCard.save({
             link: null
         });
-        $('.embeds').empty();
+        $('.embeds').empty().removeClass('nonEmbedlyLink');
         $('#addLinkInput input').val("");
         $('.attachments').removeClass('hidden');
         $('.CardOnGraph').removeClass('hasAttachment');
@@ -892,8 +899,10 @@ Metamaps.TopicCard = {
                     loader.setDensity(41); // default is 40
                     loader.setRange(0.9); // default is 1.3
                     loader.show(); // Hidden by default
-                    embedly('card', document.getElementById('embedlyLink'));
+                    var e = embedly('card', document.getElementById('embedlyLink'));
-                    $('.CardOnGraph').addClass('hasAttachment');
+                    if (!e) {
+                        self.handleInvalidLink();
+                    }
                 }
             }, 100);
         };
@@ -908,7 +917,10 @@ Metamaps.TopicCard = {
             loader.setDensity(41); // default is 40
             loader.setRange(0.9); // default is 1.3
             loader.show(); // Hidden by default
-            embedly('card', document.getElementById('embedlyLink'));
+            var e = embedly('card', document.getElementById('embedlyLink'));
+            if (!e) {
+                self.handleInvalidLink();
+            }
         }
 
 
@@ -1075,6 +1087,12 @@ Metamaps.TopicCard = {
             $('.showcard').click(hidePermissionSelect);
         }
     },
+    handleInvalidLink: function() {
+        var self = Metamaps.TopicCard;
+
+        self.removeLink();
+        Metamaps.GlobalUI.notifyUser("Invalid link");
+    },
     populateShowCard: function (topic) {
         var self = Metamaps.TopicCard;
 

app/assets/stylesheets/base.css

@@ -113,7 +113,7 @@
    font-size: 12px;
    line-height:15px;
    font-family: helvetica, sans-serif;
-   overflow-y: scroll;
+   overflow-y: auto;
 }
 .CardOnGraph.hasAttachment .scroll {
   height: auto;
@@ -548,6 +548,28 @@ font-family: 'din-regular', helvetica, sans-serif;
   background-position: center center;
 }
 
+.embeds.nonEmbedlyLink {
+  padding-top: 24px;
+}
+
+#embedlyLink {
+  border-left: 8px solid #CCC;
+  overflow: hidden;
+  padding: 8px;
+  padding-left: 12px;
+  -moz-box-shadow: 1px 1px 5px 0 #ccc;
+  -webkit-box-shadow: 1px 1px 5px 0 #ccc;
+  box-shadow: 1px 1px 5px 0 #ccc;
+  -moz-border-radius-topright: 5px;
+  -webkit-border-top-right-radius: 5px;
+  border-top-right-radius: 5px;
+  -moz-border-radius-bottomright: 8px;
+  -webkit-border-bottom-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  display: none;
+  margin: 8px;
+}
+
 .linkActions {
   position: relative;
 }