Fix #272: Added See More button in activity panel

website/static/css/activity.css

@@ -1,30 +1,74 @@
 .activity-strip-section >img{
-		width: auto;
-		height: 100px;
-	}
+	width: auto;
+	height: 100px;
+}
 
 .activity-screenshot img{
 	height:auto;
 }
 
+.activity-strip-section > div > .small{
+	position: relative;
+	top: 10px;
+}
 
+.more_info{
+	display: none;
+	cursor: pointer;
+}
+.text-trunc{
+	display: none;
+}
 
-@media only screen and (max-width: 450px){
 
 
+@media only screen and (max-width: 450px){
 	.activity-strip .activity-strip-section{
 		width: 95%;
-		height: auto;
-
-
+		height: auto;	
 	}
 
 	.activity-strip{
 		height:auto;
 		overflow: auto;
 	}
+
 	.activity-screenshot{
 		position: absolute;
 		top:100px;
 	}
-}
+
+	.bug-type{
+		right: 0;
+	}
+
+	.activity-strip-section > div{
+		overflow: auto;
+	}
+
+	.more_info{
+		display: block;
+		margin: 10px 0;
+		cursor: pointer;
+		color: #999;
+	}
+
+	.activity-strip-section > div > .small{
+		display: none;
+	}
+	.text-trunc{
+		display: block;
+		margin-top: 10px;
+	}
+	.text-trunc:first-letter{
+		text-transform: uppercase;
+	}
+}
+
+@media only screen and (min-width: 400px){
+	.bug-type{
+		position:relative;
+		right: 0
+	}
+}
+

website/static/js/activity.js

@@ -0,0 +1,50 @@
+$(document).ready(function(){
+
+	$('.text-trunc').each(function(index, ele){
+		console.log(ele)
+
+		var text = $(ele).siblings('.small').text().trim() //.substring(0, 30).split(" ").slice(0, -1).join(" ") + "...";
+		console.log(text)
+		var actor = /^[^\s]+/.exec(text)
+		console.log(actor[0])
+		var rest = text.slice(actor[0].length).trim().substring(0, 20).split(" ").slice(0, -1).join(" ") + "...";
+		$(ele).text(actor[0]+ ' '+rest);
+	})
+
+
+
+
+
+	$('.more_info').click(function(){
+		if($(this)[0]==$('.open')[0]){
+			close_panel()
+			return;
+		}
+		// console.log($(this))
+		// console.log($('.open'))
+
+		close_panel()
+
+
+		$(this).html("<a>See less</a>")
+		$(this).parent().animate({'height':'400px'})
+		$(this).parent().parent().animate({'height': '400px'})
+		$(this).parent().parent().parent().animate({'height': '400px'})
+		$(this).siblings('.text-trunc').hide()
+		$(this).siblings('.small').show()
+		$(this).addClass('open')
+	})
+
+	function close_panel(){
+		$('.open').html('<a>See more</a>')
+		$('.open').parent().animate({'height':'200px'})
+		$('.open').parent().parent().animate({'height': '200px'})
+		$('.open').parent().parent().parent().animate({'height': '200px'})
+		$('.open').siblings('.small').hide()
+		$('.open').siblings('.text-trunc').show()
+		$('.open').removeClass('open')
+
+	}
+
+
+})

website/templates/_activity.html

@@ -8,7 +8,7 @@
             <img src="{% gravatar_url activity.actor.email 100 %}" width="100" class="img-responsive img-rounded">
         {% endif %}
 
-        <div>
+        <div class="info">
             {% if activity.action_object %}
                 {% if activity.action_object.get_absolute_url %}
                     <a href="{{ activity.action_object.get_absolute_url }}">{{ activity.action_object }}</a>
@@ -34,7 +34,7 @@
                     <span class="label label-danger text-capitalize">{{activity.target.status}}</span>
                 {% endif %}                    
             {% endif %}
-
+            <div class="text-trunc"></div>
             <div class="small">
                 {% if activity.actor.get_absolute_url %}
                     <a href="{{ activity.actor.get_absolute_url }}" class="text-capitalize">
@@ -47,6 +47,7 @@
                 <a href="//{{ activity.target.domain_name }}">{{ activity.target.domain_name }}</a>
                 <span class="label label-info bug-type">{{activity.target.get_label_display}}</span>
             </div>
+            <div class="more_info"><a>See More </a></div>
         </div>
     </div>
 

website/templates/index.html

@@ -7,7 +7,7 @@
 
 {% block content %}
     <script src="{% static "js/jquery.validate.js" %}"></script>
-
+    <script src="{% static 'js/activity.js' %}"></script>
          <section class="hero">
             <div class="heading">
                 <h1 class="page-header">Find Bugs, Win Points and Prizes</h1>