Merge pull request #532 from fabrixxm/quattrofixs

template: new $item.shiny; some fix to quattro

mod/content.php

@@ -784,8 +784,9 @@ function render_content(&$a, $items, $mode, $update, $preview = false) {
 
 				$indent = (($toplevelpost) ? '' : ' comment');
 
+				$shiny = "";
 				if(strcmp(datetime_convert('UTC','UTC',$item['created']),datetime_convert('UTC','UTC','now - 12 hours')) > 0)
-					$indent .= ' shiny'; 
+					$shiny = 'shiny'; 
 
 				// 
 				localize_item($item);
@@ -829,6 +830,7 @@ function render_content(&$a, $items, $mode, $update, $preview = false) {
 					'lock' => $lock,
 					'location' => template_escape($location),
 					'indent' => $indent,
+					'shiny' => $shiny,
 					'owner_url' => $owner_url,
 					'owner_photo' => $owner_photo,
 					'owner_name' => template_escape($owner_name),

object/Item.php

@@ -93,6 +93,7 @@ class Item extends BaseObject {
 		$star = false;
 		$isstarred = "unstarred";
 		$indent = '';
+		$shiny = '';
 		$osparkle = '';
 		$total_children = $this->count_descendants();
 
@@ -199,8 +200,9 @@ class Item extends BaseObject {
 			if ($shareable) $buttons['share'] = array( t('Share this'), t('share'));
 		}
 
-		if(strcmp(datetime_convert('UTC','UTC',$item['created']),datetime_convert('UTC','UTC','now - 12 hours')) > 0)
+		if(strcmp(datetime_convert('UTC','UTC',$item['created']),datetime_convert('UTC','UTC','now - 12 hours')) > 0){
-			$indent .= ' shiny';
+			$shiny = 'shiny';
+		}
 
 		localize_item($item);
 
@@ -241,6 +243,7 @@ class Item extends BaseObject {
 			'lock' => $lock,
 			'location' => template_escape($location),
 			'indent' => $indent,
+			'shiny' => $shiny,
 			'owner_url' => $this->get_owner_url(),
 			'owner_photo' => $this->get_owner_photo(),
 			'owner_name' => template_escape($this->get_owner_name()),

view/head.tpl

@@ -8,6 +8,11 @@
 <link rel="stylesheet" type="text/css" href="$stylesheet" media="all" />
 
 <link rel="shortcut icon" href="$baseurl/images/friendica-32.png" />
+
+<link rel="apple-touch-icon" href="$baseurl/images/friendica-128.png"/>
+<meta name="apple-mobile-web-app-capable" content="yes" /> 
+
+
 <link rel="search"
          href="$baseurl/opensearch" 
          type="application/opensearchdescription+xml" 

view/theme/quattro/dark/style.css

@@ -1050,6 +1050,34 @@ section {
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
+.wall-item-container.comment .commentbox {
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment .commentbox .wall-item-comment-wrapper {
+  border-top: 1px solid #999999;
+  height: 0px;
+  overflow: hidden;
+}
+.wall-item-container.comment:hover .commentbox {
+  height: auto;
+  overflow: visible;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
+  border-top: 0px;
+  height: auto;
+  overflow: visible;
+}
 /* 'tag' item type */
 .wall-item-container.item-tag .wall-item-content {
   opacity: 0.5;

view/theme/quattro/green/style.css

@@ -1050,6 +1050,34 @@ section {
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
+.wall-item-container.comment .commentbox {
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment .commentbox .wall-item-comment-wrapper {
+  border-top: 1px solid #999999;
+  height: 0px;
+  overflow: hidden;
+}
+.wall-item-container.comment:hover .commentbox {
+  height: auto;
+  overflow: visible;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
+  border-top: 0px;
+  height: auto;
+  overflow: visible;
+}
 /* 'tag' item type */
 .wall-item-container.item-tag .wall-item-content {
   opacity: 0.5;

view/theme/quattro/lilac/style.css

@@ -1050,6 +1050,34 @@ section {
 .wall-item-container.comment .wall-item-links {
   padding-left: 12px;
 }
+.wall-item-container.comment .commentbox {
+  height: 0px;
+  overflow: hidden;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment .commentbox .wall-item-comment-wrapper {
+  border-top: 1px solid #999999;
+  height: 0px;
+  overflow: hidden;
+}
+.wall-item-container.comment:hover .commentbox {
+  height: auto;
+  overflow: visible;
+  -webkit-transition: all 0.2s ease-in-out;
+  -moz-transition: all 0.2s ease-in-out;
+  -o-transition: all 0.2s ease-in-out;
+  -ms-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+.wall-item-container.comment:hover .commentbox .wall-item-comment-wrapper {
+  border-top: 0px;
+  height: auto;
+  overflow: visible;
+}
 /* 'tag' item type */
 .wall-item-container.item-tag .wall-item-content {
   opacity: 0.5;

view/theme/quattro/quattro.less

@@ -523,6 +523,25 @@ section {
 		left: 0px !important;
 	}
 	.wall-item-links { padding-left: 12px; }
+	
+	.commentbox {
+		height: 0px;
+		overflow: hidden;
+		.wall-item-comment-wrapper {
+			border-top: 1px solid @CommentBoxEmptyBorderColor;
+			height: 0px; overflow: hidden;
+		}
+		.transition();
+	}
+	
+	&:hover .commentbox {
+		height:auto; overflow: visible;
+		.wall-item-comment-wrapper {
+			border-top: 0px;
+			height:auto;overflow: visible;
+		}
+		.transition();
+	}
 }
 
 /* 'tag' item type */
@@ -544,6 +563,7 @@ section {
 .wall-item-comment-wrapper {
 	margin: 1em 2em 1em 60px;
 	.comment-edit-photo { display: none; }
+	
 	textarea {	
 		height: 1em; width: 100%; font-size: 10px;
 		color: @CommentBoxEmptyColor;
@@ -555,7 +575,6 @@ section {
 		color: @CommentBoxFullColor;
 		border: 1px solid @CommentBoxFullBorderColor;
 	}
-	
 }
 
 .threaded .wall-item-comment-wrapper { margin-left: 0px; }

view/theme/quattro/wall_item_tag.tpl

@@ -1,6 +1,28 @@
+{{if $mode == display}}
+{{ else }}
+{{if $item.comment_firstcollapsed}}
+	<div class="hide-comments-outer">
+		<span id="hide-comments-total-$item.id" 
+			class="hide-comments-total">$item.num_comments</span>
+			<span id="hide-comments-$item.id" 
+				class="hide-comments fakelink" 
+				onclick="showHideComments($item.id);">$item.hide_text</span>
+			{{ if $item.thread_level==3 }} - 
+			<span id="hide-thread-$item-id"
+				class="fakelink"
+				onclick="showThread($item.id);">expand</span> /
+			<span id="hide-thread-$item-id"
+				class="fakelink"
+				onclick="hideThread($item.id);">collapse</span> thread{{ endif }}
+	</div>
+	<div id="collapsed-comments-$item.id" class="collapsed-comments" style="display: none;">
+{{endif}}
+{{ endif }}
+
 {{ if $item.thread_level!=1 }}<div class="children">{{ endif }}
 
-<div class="wall-item-container item-tag $item.indent">
+
+<div class="wall-item-container item-tag $item.indent $item.shiny">
 	<div class="wall-item-item">
 		<div class="wall-item-info">
 			<div class="contact-photo-wrapper">
@@ -17,11 +39,29 @@
 		<div class="wall-item-content">
 			$item.ago $item.body 
 		</div>
+			<div class="wall-item-tools">
+				{{ if $item.drop.pagedrop }}
+					<input type="checkbox" title="$item.drop.select" name="itemselected[]" class="item-select" value="$item.id" />
+				{{ endif }}
+				{{ if $item.drop.dropping }}
+					<a href="item/drop/$item.id" onclick="return confirmDelete();" class="icon delete s16" title="$item.drop.delete">$item.drop.delete</a>
+				{{ endif }}
+			</div>
 	</div>
 </div>
 
 {{ if $item.thread_level!=1 }}</div>{{ endif }}
 
+{{if $mode == display}}
+{{ else }}
+{{if $item.comment_lastcollapsed}}</div>{{endif}}
+{{ endif }}
+
+{# top thread comment box #}
+{{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
+<div class="wall-item-comment-wrapper" >$item.comment</div>
+{{ endif }}{{ endif }}{{ endif }}
+
 {{ if $item.flatten }}
 <div class="wall-item-comment-wrapper" >$item.comment</div>
 {{ endif }}

view/theme/quattro/wall_thread.tpl

@@ -27,7 +27,7 @@
 	<img id="like-rotator-$item.id" class="like-rotator" src="images/rotator.gif" alt="$item.wait" title="$item.wait" style="display: none;" />
 </div>
 
-<div class="wall-item-container $item.indent" id="item-$item.id">
+<div class="wall-item-container $item.indent $item.shiny" id="item-$item.id">
 	<div class="wall-item-item">
 		<div class="wall-item-info">
 			<div class="contact-photo-wrapper mframe{{ if $item.owner_url }} wwfrom{{ endif }}"
@@ -132,7 +132,7 @@
 	</div>
 	
 	{{ if $item.threaded }}{{ if $item.comment }}{{ if $item.indent==comment }}
-	<div class="wall-item-bottom">
+	<div class="wall-item-bottom commentbox">
 		<div class="wall-item-links"></div>
 		<div class="wall-item-comment-wrapper">
 					$item.comment
@@ -143,7 +143,7 @@
 
 
 {{ for $item.children as $child }}
-	{{ if $item.type == tag }}
+	{{ if $child.type == tag }}
 		{{ inc wall_item_tag.tpl with $item=$child }}{{ endinc }}
 	{{ else }}
 		{{ inc $item.template with $item=$child }}{{ endinc }}
@@ -158,6 +158,7 @@
 {{if $item.comment_lastcollapsed}}</div>{{endif}}
 {{ endif }}
 
+{# top thread comment box #}
 {{if $item.threaded}}{{if $item.comment}}{{if $item.thread_level==1}}
 <div class="wall-item-comment-wrapper" >$item.comment</div>
 {{ endif }}{{ endif }}{{ endif }}

view/wall_thread.tpl

@@ -7,7 +7,7 @@
 <div id="tread-wrapper-$item.id" class="tread-wrapper $item.toplevel">
 <a name="$item.id" ></a>
 <div class="wall-item-outside-wrapper $item.indent$item.previewing{{ if $item.owner_url }} wallwall{{ endif }}" id="wall-item-outside-wrapper-$item.id" >
-	<div class="wall-item-content-wrapper $item.indent" id="wall-item-content-wrapper-$item.id" >
+	<div class="wall-item-content-wrapper $item.indent $item.shiny" id="wall-item-content-wrapper-$item.id" >
 		<div class="wall-item-info{{ if $item.owner_url }} wallwall{{ endif }}" id="wall-item-info-$item.id">
 			{{ if $item.owner_url }}
 			<div class="wall-item-photo-wrapper wwto" id="wall-item-ownerphoto-wrapper-$item.id" >