From 29576418ec3858c8ea71657f0e0e41e93ca2bba4 Mon Sep 17 00:00:00 2001
From: Laurie <lau@vdblondon.com>
Date: Tue, 2 Apr 2019 20:27:36 +0100
Subject: [PATCH 1/3] Update 'Look.css'

+ Tweaked .active state colour
+ Added focus for accessibility
+ Swap float:left for display: inline-block for easier styling
---
 .../Client/Look.css                           | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Look.css b/src/Our.Umbraco.Look.BackOffice/Client/Look.css
index 0e40c01..487b966 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Look.css
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Look.css
@@ -76,16 +76,17 @@
     margin: 0 0 10px 0;
     clear: both;
     background-color: #f3f3f5;
+    padding-right: 3px;
 }
 
-.look-match:hover {
-    cursor:pointer;
-    background-color:white;
+.look-match:hover, .look-match:focus, look-match:active {
+    cursor: pointer;
+    background-color: white;
 }
 
 .look-match.active {
-    cursor:default;
-    background-color:white;
+    cursor: default;
+    background-color: #eafffe;
 }
 
 .look-match.even {
@@ -102,11 +103,13 @@
     font-size: xx-small;
 }
 
-
+.look-match-type, .look-match-details, .look-match-checkboxes {
+    display: inline-block;
+    vertical-align: middle;
+}
 
 .look-match-type {
-    float: left;
-    position:relative;
+    position: relative;
     margin-right: -15px;
 }
 
@@ -126,17 +129,13 @@
     color: lightgray;
 }
 
-
 .look-match-checkboxes {
-    float: left;
+    margin-right: 18px;
 }
 
 .look-match-details {
-    margin-left:30px;
-    float: left;
-}
-
 
+}
 
 .look-banner {
     border:solid 2px green;

From b84df7e578111231a20ac956a4dfa0225d76c388 Mon Sep 17 00:00:00 2001
From: Laurie <lau@vdblondon.com>
Date: Tue, 2 Apr 2019 21:21:35 +0100
Subject: [PATCH 2/3] Updated 'Matches.html'

+ Styled existing .active class
+ Added helper method into controller
---
 .../Client/Controllers/MatchesController.js                 | 6 +++++-
 src/Our.Umbraco.Look.BackOffice/Client/Look.css             | 5 ++++-
 .../Client/Views/Partials/Matches.html                      | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js b/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js
index f5f8e57..7823cac 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Controllers/MatchesController.js
@@ -85,7 +85,11 @@
                 template: '/App_Plugins/Look/BackOffice/LookTree/Partials/Details.html',
                 show: true
             });
-        };
+      };
+
+      $scope.isActive = function (match) {
+        return match === matchService.selectedMatch;
+      };
 
 
         $scope.reload = function () {
diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Look.css b/src/Our.Umbraco.Look.BackOffice/Client/Look.css
index 487b966..631d391 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Look.css
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Look.css
@@ -76,7 +76,8 @@
     margin: 0 0 10px 0;
     clear: both;
     background-color: #f3f3f5;
-    padding-right: 3px;
+    border-left: #f3f3f5 4px solid;
+    padding: 0 3px 0 5px;
 }
 
 .look-match:hover, .look-match:focus, look-match:active {
@@ -87,6 +88,7 @@
 .look-match.active {
     cursor: default;
     background-color: #eafffe;
+    border-color: #00aea2;
 }
 
 .look-match.even {
@@ -111,6 +113,7 @@
 .look-match-type {
     position: relative;
     margin-right: -15px;
+    margin-left: -5px;
 }
 
 .look-match-detached-icon {
diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html
index 9e04d87..4b44df2 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Matches.html
@@ -7,8 +7,8 @@
                 <p>{{match.name.charAt(0)}}</p>
             </div>
 
-            <div class="look-match" ng-class-even="'even'" ng-class-odd="'odd'" ng-click="showDetails(match)">
-                
+            <div class="look-match" ng-class="{'active': isActive(match)}" ng-class-even="'even'" ng-class-odd="'odd'" ng-click="showDetails(match)">
+                 
                 <span class="look-match-score">{{match.score}}</span>
 
                 

From aec5c594961ccf13e84aa5c7f51b0f46c4309533 Mon Sep 17 00:00:00 2001
From: Laurie <lau@vdblondon.com>
Date: Tue, 2 Apr 2019 21:22:04 +0100
Subject: [PATCH 3/3] Update 'Details.html'

+ Remove auto-close
+ Add close button
---
 .../Client/Views/Partials/Details.html               | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html
index d4e2a45..5419699 100644
--- a/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html
+++ b/src/Our.Umbraco.Look.BackOffice/Client/Views/Partials/Details.html
@@ -1,4 +1,4 @@
-<div ng-controller="Look.BackOffice.DetailsController" ng-mouseleave="hideDetails()" class="look-details">
+<div ng-controller="Look.BackOffice.DetailsController" class="look-details">
 
     <h3>{{ viewData.match.name }}</h3>
 
@@ -11,12 +11,12 @@ <h3>{{ viewData.match.name }}</h3>
     <div ng-if="viewData.match.culture"><span>Culture: </span> {{ viewData.match.culture }}</div>
 
     <div ng-if="viewData.match.hasTags">
-        <hr/>
+        <hr />
         <div ng-repeat="tagGroup in viewData.match.tagGroups">
             <span class="icon icon-tags">&nbsp;</span>
             <a ng-if="tagGroup.link !== null" href="{{tagGroup.link}}">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</a>
             <span ng-if="tagGroup.link === null">{{ tagGroup.name ? tagGroup.name : '&lt;Default&gt;' }}</span>
-                                                
+
             <ul>
                 <li ng-repeat="tag in tagGroup.tags">
 
@@ -29,10 +29,14 @@ <h3>{{ viewData.match.name }}</h3>
     </div>
 
     <div ng-if="viewData.match.hasLocation">
-        <hr/>
+        <hr />
         <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q={{viewData.match.latitide}},{{viewData.match.longitude}}&amp;ie=UTF8&amp;&amp;output=embed"></iframe><br />
     </div>
 
+    <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
+        <input ng-click="hideDetails()" type="button" class="btn btn-primary" value="Close">
+    </div>
+
     <!--<pre>{{ viewData | json}}</pre>-->
 
 </div>
\ No newline at end of file