Improved the design of Visitor Profile for more clarity (#11218)

* Update main.less

* Update visitor_profile.less

* Update visitorProfile.js

* Update getVisitorProfilePopup.twig

* Update getSingleVisitSummary.twig

* UI tests update tag cloud + new icon

* And one more

* Making Visitor log look better + Fix alignment profile

* More tweaks

* UI tests

plugins/Live/javascripts/visitorProfile.js

@@ -127,16 +127,6 @@
                 }
             });
 
-            // on hover, show export link (chrome won't let me do this via css :( )
-            $element.on('mouseenter mouseleave', '.visitor-profile-id', function (e) {
-                var $exportLink = $(this).find('.visitor-profile-export');
-                if ($exportLink.css('visibility') == 'hidden') {
-                    $exportLink.css('visibility', 'visible');
-                } else {
-                    $exportLink.css('visibility', 'hidden');
-                }
-            });
-
             var tooltipIsOpened = false;
 
             $('a', $element).on('focus', function () {
@@ -309,4 +299,4 @@
     // add the popup handler that creates a visitor profile
     broadcast.addPopoverHandler('visitorProfile', VisitorProfileControl.showPopover);
 
-})(jQuery, require);
+})(jQuery, require);
\ No newline at end of file

plugins/Live/stylesheets/live.less

@@ -107,7 +107,7 @@ ol.visitorLog {
 }
 
 ol.visitorLog li {
-    margin-bottom: 4px;
+    margin-bottom: 7px;
 }
 
 #visitsLive img {
@@ -152,7 +152,7 @@ ol.visitorLog li {
     border-radius: 3px;
     padding: 2px;
     display: block;
-    margin: 5px;
+    margin: 0px 5px 0px 5px;
     float: left;
 }
 
@@ -229,7 +229,8 @@ ol.visitorLog p {
 }
 
 .visitor-log-page-list {
-    position:relative;
+  position:relative;
+  margin-top: 7px;
 }
 
 a.visitor-log-visitor-profile-link {

plugins/Live/stylesheets/visitor_profile.less

@@ -8,11 +8,12 @@
     text-align:left;
 
     h1 {
-        font-size:18px;
-        color:#7e7363;
+        font-size:23px;
         text-shadow:0 1px 0 rgba(255,255,255,1);
         margin:9px 0 0 0;
         padding:0;
+        font-weight: normal;
+        color: @theme-color-text;
 
         a {
             font-size:12px;
@@ -20,22 +21,38 @@
         }
     }
 
-    p {
-        font-size:14px;
-        color:#5e5e5c;
-        line-height:20px;
-    }
-
     h2 {
         display:inline-block;
-        font-size:14px;
+        font-size:23px;
         margin:0 0 0 5px;
-        padding:0;
-        font-weight:bold;
+        padding:15px 17px 15px 22px;
         color:black;
         border: none;
+        color: @theme-color-text;
+    }
+
+    p {
+        margin-left: 0;
+        margin-right: 0;
+        .font-default(13px, 18px);
+        color: @color-silver-l60;
+        strong {
+            .font-default(13px, 18px);
+            color: @theme-color-text;
+            font-weight: normal !important;
+        }
+        span {
+            .font-default(13px, 18px);
+        }
     }
 
+    p {
+        font-size:13px;
+        color:#5e5e5c;
+        line-height:20px;
+    }
+
+
     span.truncated-text-line {
         display:inline-block;
         &.event {
@@ -48,7 +65,7 @@
     span, strong {
         display:inline;
         font-size:14px;
-        color:#5e5e5c;
+        color:#413838;
         line-height:19px;
         padding-left:4px;
     }
@@ -58,12 +75,8 @@
     color:#5e5e5c;
 }
 
-.visitor-profile-widget-link:hover {
-    text-decoration:underline;
-}
-
 .visitor-profile-export {
-    float:right;
+    vertical-align: middle;
     margin-top:3px;
 }
 
@@ -78,7 +91,6 @@
 }
 
 .visitor-profile a {
-    text-decoration:none;
     color:#255792;
 }
 
@@ -117,22 +129,18 @@
     }
 }
 
-.visitor-profile-summary,.visitor-profile-important-visits,.visitor-profile-avatar,.visitor-profile-location {
-    border-bottom:1px solid #d1cec8;
-}
-
 .visitor-profile-avatar > div {
     position:relative;
     float:left;
     min-height:145px;
-    margin:12px 15px 0 0;
+    margin:6px 15px 0 0;
     padding-bottom:4px;
 }
 
 .visitor-profile-avatar > div:first-child {
     width:166px;
     margin-right:0;
-    padding-left:16px;
+    padding-left:7px;
 
     > .visitor-profile-image-frame {
         width:149px;
@@ -226,10 +234,6 @@
     border-bottom:none;
 }
 
-.visitor-profile-avatar ul li:first-child {
-    border-bottom:1px solid #d1cec8; // make sure there is a border if only one item is shown in the list
-}
-
 .visitor-profile-map {
     padding:0 21px 13px 21px;
 
@@ -295,7 +299,7 @@
 
     p {
         margin:13px 0;
-        font-size:14px;
+        font-size:13px;
     }
 }
 
@@ -311,7 +315,7 @@
     padding: 8px 18px 10px 13px;
 
     h1 {
-        margin-left:6px;
+        margin-left:3px;
     }
 }
 
@@ -331,14 +335,15 @@
         > li {
             display:block;
             font-size:12px;
-            font-weight:700;
-            line-height:25px;
+            font-weight: normal;
+            line-height:10px;
             padding:0 0 10px 13px;
+            margin-right: 20px;
+            color: @theme-color-text-lighter;
 
             span {
                 font-size:13px;
                 font-weight:700;
-                line-height:25px;
                 padding-left:0;
             }
         }
@@ -385,12 +390,12 @@
     }
 
     ol > li ol li span {
-        padding-left:4px;
+        padding-left:5px;
     }
 
     ol > li ol li {
       .action-list-url {
-        margin-left:4px;
+        margin-left:5px;
         line-height:15px;
         font-size:13px;
       }
@@ -417,8 +422,7 @@
 
 .visitor-profile-date {
     float:right;
-    font-size:13px;
-    line-height:26px;
+    margin-top:6px;
 }
 
 .visitor-profile-fog {
@@ -456,7 +460,6 @@ span.visitor-profile-goal-name {
     text-align:center;
 
     > a {
-        font-size:11px;
         display:inline-block;
         color:#5e5e5c;
     }
@@ -467,7 +470,7 @@ span.visitor-profile-goal-name {
 }
 
 .visitor-profile-visit-title-row:hover {
-    background-color:#FAFACF;
+    background-color:#bfbfbf;
 }
 
 .visitor-profile-avatar .loadingPiwik {

plugins/Live/templates/_dataTableViz_visitorLog.twig

@@ -194,17 +194,18 @@ GPS (lat/long): {{ visitor.getColumn('latitude') }},{{ visitor.getColumn('longit
 
             <div class="col s12 m{% if displayVisitorsInOwnColumn %}7{% else %}8{% endif %} column {% if visitor.getColumn('visitConverted') and not isWidget %}highlightField{% endif %}">
                 {{ postEvent('Live.visitorLogViewBeforeActionsInfo', visitor) }}
+
+                <strong>
+                    {{ visitor.getColumn('actionDetails')|length }}
+                    {% if visitor.getColumn('actionDetails')|length <= 1 %}
+                        {{ 'General_Action'|translate }}
+                    {% else %}
+                        {{ 'General_Actions'|translate }}
+                    {% endif %}
+                    {% if visitor.getColumn('visitDuration') > 0 %}- {{ visitor.getColumn('visitDurationPretty')|raw }}{% endif %}
+                </strong>
+
                 <div class="visitor-log-page-list">
-                    <strong>
-                        {{ visitor.getColumn('actionDetails')|length }}
-                        {% if visitor.getColumn('actionDetails')|length <= 1 %}
-                            {{ 'General_Action'|translate }}
-                        {% else %}
-                            {{ 'General_Actions'|translate }}
-                        {% endif %}
-                        {% if visitor.getColumn('visitDuration') > 0 %}- {{ visitor.getColumn('visitDurationPretty')|raw }}{% endif %}
-                    </strong>
-                    <br/>
                     <ol class='visitorLog'>
                         {% include "@Live/_actionsList.twig" with {'actionDetails': visitor.getColumn('actionDetails')} %}
                     </ol>

plugins/Live/templates/getSingleVisitSummary.twig

@@ -19,7 +19,7 @@
             {% if widgetizedLink is defined %}<a class="visitor-profile-widget-link" href="{{ widgetizedLink }}" target="_blank" title="{{ 'Widgetize_OpenInNewWindow'|translate }} - {{ 'Live_VisitorProfile'|translate }} {{ 'General_Id'|translate|upper }} {{ visitData.visitorId }}">{% endif %}
                 <strong>{{ visitData.visitorId }}</strong>
             {% if widgetizedLink is defined %}</a>{% endif %}
-            <a class="visitor-profile-export" href="{{ exportLink }}" target="_blank" title="{{ 'General_ExportThisReport'|translate }}" style="visibility:hidden">
+            <a class="visitor-profile-export" href="{{ exportLink }}" target="_blank" title="{{ 'General_ExportThisReport'|translate }}">
                 <img src="plugins/Morpheus/images/export.png"/>
             </a>
         </li>

plugins/Live/templates/getVisitList.twig

@@ -6,7 +6,7 @@
                 {{ 'General_Visit'|translate }} #{{ startCounter }}
 
                 {% if visitInfo.getColumn('visitDuration') != 0 %}
-                    <span>&nbsp;- ({{ visitInfo.getColumn('visitDurationPretty')|raw }})</span>
+                    <span>&nbsp; ({{ visitInfo.getColumn('visitDurationPretty')|raw }})</span>
                 {% endif %}
                 <span class="visitor-profile-date" title="{{ visitInfo.getColumn('serverDatePrettyFirstAction') }} {{ visitInfo.getColumn('serverTimePrettyFirstAction') }}">
                     {{ visitInfo.getColumn('serverDatePrettyFirstAction') }} {{ visitInfo.getColumn('serverTimePrettyFirstAction') }}

plugins/Live/templates/getVisitorProfilePopup.twig

@@ -144,9 +144,6 @@
                 </div>
             </div>
             <div class="visitor-profile-visits-info">
-                <div class="visitor-profile-pages-visited">
-                    <h1>{{ 'Live_VisitedPages'|translate }}</h1>
-                </div>
                 <div class="visitor-profile-visits-container">
                     <ol class="visitor-profile-visits">
                         {% include "@Live/getVisitList.twig" with {'visits': visitorData.lastVisits, 'startCounter': 1} %}

plugins/Morpheus/stylesheets/main.less

@@ -214,7 +214,6 @@ p {
       margin-right: 0;
       a {
         font-family: @theme-fontFamily-base;
-        font-size: 11px;
         line-height: 12px;
         display: inline-block;
         width: 100%;
@@ -507,9 +506,6 @@ div.sparkline {
     top: -19px;
 }
 
-.visitor-profile-date {
-    padding-top: 3px;
-}
 
 .visitor-profile-more-info > a {
     color: @theme-color-link;
@@ -526,43 +522,34 @@ div.sparkline {
     li {
         margin: 0 !important;
         background: @color-silver-l95;
-        padding: 5px 10px !important;
-        border-bottom: 1px solid @color-silver-l80;
+        padding: 7px 10px !important;
         > div {
             border: 0px !important;
             margin: 0 !important;
         }
-
-        &:first-child {
-            border-top: 1px solid @color-silver-l80;
-        }
     }
 
     ol.visitor-profile-visits {
         > li {
             padding: 0 0 0 !important;
             span {
-                color: @theme-color-text-lighter;
-                .font-default(13px, 18px);
                 font-weight: normal;
                 margin-right: 20px;
             }
 
-            h2 {
-                margin-left: 20px;
-                margin-bottom: 12px;
-            }
-
             ol {
                 background: @theme-color-background-contrast !important;
                 border-top: 0 !important;
                 li {
                     background: @theme-color-background-contrast !important;
-                    .font-default(11px, 19px);
                     font-weight: normal;
                     color: @theme-color-text-lighter;
                     &:last-child {
                         border-bottom: 0 !important;
+                        padding-bottom: 20px !important;
+                    }
+                    &:first-child {
+                        padding-top: 20px !important;
                     }
                 }
             }
@@ -570,14 +557,6 @@ div.sparkline {
     }
 }
 
-.visitor-profile-visit-title-row {
-  padding-top:10px;
-
-  &:hover {
-    background-color: @color-silver-l90;
-  }
-}
-
 .widget .visitor-profile .visitor-profile-info > div > div {
     min-width: 100% !important;
 }
@@ -604,31 +583,7 @@ div.sparkline {
         }
     }
 
-    h1 {
-        .font-default(15px, 20px);
-        font-weight: normal;
-        color: @theme-color-text;
-    }
-
-    h2 {
-        .font-default(13px, 18px);
-        color: @theme-color-text;
-    }
 
-    p {
-        margin-left: 0;
-        margin-right: 0;
-        .font-default(13px, 18px);
-        color: @color-silver-l60;
-        strong {
-            .font-default(13px, 18px);
-            color: @theme-color-text;
-            font-weight: normal !important;
-        }
-        span {
-            .font-default(13px, 18px);
-        }
-    }
 
     .visitor-profile-avatar {
        ul {