Now a little circle 'below' the event circle when same user

build/generic/view/history/details/main.php

@@ -143,15 +143,18 @@
 					$RAW .= "<circle cx='$x_offset' cy='$y' r='15' class='timeline around $action_class' $data_tags />";
 					$RAW .= "<circle cx='$x_offset' cy='$y' r='12' class='timeline center $action_class' />";
 
-					/* (5) Draw circle around if not current user */
+					/* (5) Draw entry icon (action) */
-					if( $this->entry['id_user'] != $entry['id_user'] )
-						$RAW .= "<circle cx='$x_offset' cy='$y' r='18' class='timeline user' />";
-
-
-					/* (6) Draw entry icon (action) */
 					$y_decal = $y - 5.5;
 					$RAW .= "\t<image x='$x_img_offset' y='$y_decal' width='12' height='12' xlink:href='$icon_uri' class='icon' />";
 
+					/* (6) Draw circle below if current user */
+					if( $this->entry['id_user'] == $entry['id_user'] ){
+						$y_decal = $y + 21;
+						$RAW .= "<circle cx='$x_offset' cy='$y_decal' r='2' class='timeline below $action_class' />";
+					}
+
+
+
 				}
 
 			}

public_html/css/container.scss

@@ -562,10 +562,10 @@ svg.timeline{
 
 			}
 
-			&:hover + .center + .user{ // user node
+			&:hover + .center + image + .below{ // below node
 
-				-webkit-transform: scale(.8);
+				-webkit-transform: translateY(100%);
-				transform: scale(.8);
+				transform: translateY(100%);
 
 			}
 
@@ -580,7 +580,7 @@ svg.timeline{
 		}
 
 		/* (5) Set colors according to action type */
-		&.around, &.center{
+		&.around, &.center, &.below{
 
 			&.start{    fill: #2cde8b; }
 			&.stop{     fill: #3a3a3a; }
@@ -594,25 +594,9 @@ svg.timeline{
 		/* (6) Make around circles a bit transparent */
 		&.around{ opacity: .6; }
 
-		/* (7) User circles */
-		&.user{
-			fill: none;
-			stroke-width: 1.5px;
-			stroke: #777;
-			stroke-opacity: .3;
-		}
-
-		/* (8) Set user colors according to action type */
-		&.center.start    + .user{ stroke: #2cde8b; }
-		&.center.stop     + .user{ stroke: #3a3a3a; }
-		&.center.lock     + .user{ stroke: #e04343; }
-		&.center.unlock   + .user{ stroke: #af1c1c; }
-		&.center.signal   + .user{ stroke: #3258d8; }
-		&.center.unsignal + .user{ stroke: #2041ab; }
-
 	}
 
-	/* (9) Avoid icons inside center circles to block :hover */
+	/* (7) Avoid icons inside center circles to block :hover */
 	image{
 
 		-webkit-pointer-events: none;

public_html/css/min/container.css

@@ -700,7 +700,7 @@ article.check-table > div > span input[type='checkbox']:checked + label[for] {
 =========================================================*/
 svg.timeline {
   /* (1) svg circles -> set right transform-origin */
-  /* (9) Avoid icons inside center circles to block :hover */
+  /* (7) Avoid icons inside center circles to block :hover */
 }
 
 svg.timeline circle.timeline {
@@ -711,8 +711,6 @@ svg.timeline circle.timeline {
   /* (4) Remove center circle event */
   /* (5) Set colors according to action type */
   /* (6) Make around circles a bit transparent */
-  /* (7) User circles */
-  /* (8) Set user colors according to action type */
 }
 
 svg.timeline circle.timeline.around {
@@ -725,9 +723,9 @@ svg.timeline circle.timeline.around:hover + .center {
   transform: scale(1.2);
 }
 
-svg.timeline circle.timeline.around:hover + .center + .user {
+svg.timeline circle.timeline.around:hover + .center + image + .below {
-  -webkit-transform: scale(0.8);
+  -webkit-transform: translateY(100%);
-  transform: scale(0.8);
+  transform: translateY(100%);
 }
 
 svg.timeline circle.timeline.center {
@@ -735,27 +733,27 @@ svg.timeline circle.timeline.center {
   pointer-events: none;
 }
 
-svg.timeline circle.timeline.around.start, svg.timeline circle.timeline.center.start {
+svg.timeline circle.timeline.around.start, svg.timeline circle.timeline.center.start, svg.timeline circle.timeline.below.start {
   fill: #2cde8b;
 }
 
-svg.timeline circle.timeline.around.stop, svg.timeline circle.timeline.center.stop {
+svg.timeline circle.timeline.around.stop, svg.timeline circle.timeline.center.stop, svg.timeline circle.timeline.below.stop {
   fill: #3a3a3a;
 }
 
-svg.timeline circle.timeline.around.lock, svg.timeline circle.timeline.center.lock {
+svg.timeline circle.timeline.around.lock, svg.timeline circle.timeline.center.lock, svg.timeline circle.timeline.below.lock {
   fill: #e04343;
 }
 
-svg.timeline circle.timeline.around.unlock, svg.timeline circle.timeline.center.unlock {
+svg.timeline circle.timeline.around.unlock, svg.timeline circle.timeline.center.unlock, svg.timeline circle.timeline.below.unlock {
   fill: #af1c1c;
 }
 
-svg.timeline circle.timeline.around.signal, svg.timeline circle.timeline.center.signal {
+svg.timeline circle.timeline.around.signal, svg.timeline circle.timeline.center.signal, svg.timeline circle.timeline.below.signal {
   fill: #3258d8;
 }
 
-svg.timeline circle.timeline.around.unsignal, svg.timeline circle.timeline.center.unsignal {
+svg.timeline circle.timeline.around.unsignal, svg.timeline circle.timeline.center.unsignal, svg.timeline circle.timeline.below.unsignal {
   fill: #2041ab;
 }
 
@@ -763,37 +761,6 @@ svg.timeline circle.timeline.around {
   opacity: .6;
 }
 
-svg.timeline circle.timeline.user {
-  fill: none;
-  stroke-width: 1.5px;
-  stroke: #777;
-  stroke-opacity: .3;
-}
-
-svg.timeline circle.timeline.center.start + .user {
-  stroke: #2cde8b;
-}
-
-svg.timeline circle.timeline.center.stop + .user {
-  stroke: #3a3a3a;
-}
-
-svg.timeline circle.timeline.center.lock + .user {
-  stroke: #e04343;
-}
-
-svg.timeline circle.timeline.center.unlock + .user {
-  stroke: #af1c1c;
-}
-
-svg.timeline circle.timeline.center.signal + .user {
-  stroke: #3258d8;
-}
-
-svg.timeline circle.timeline.center.unsignal + .user {
-  stroke: #2041ab;
-}
-
 svg.timeline image {
   -webkit-pointer-events: none;
   pointer-events: none;