Fixes issue: U4-11416 - Better formatting for the video tiles in the developer section. (#2673)

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -176,6 +176,7 @@
 @import "hacks.less";
 
 @import "healthcheck.less";
+@import "getstarted.less";
 
 // cleanup properties.less when it is done
 @import "properties.less";

src/Umbraco.Web.UI.Client/src/less/getstarted.less

@@ -0,0 +1,88 @@
+.umb-getstarted {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -10px;
+    margin-right: -10px;
+}
+
+.umb-getstartedcards {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    max-width: 100%;
+
+    @media (min-width: 500px) {
+        margin: 0 -10px;
+    }
+}
+
+.umb-getstartedcard {
+    width: 100%;
+    padding: 0.5em;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    border: 1px solid #d8d7d9;
+    background-color: #fff;
+    margin: 0 0 0.5em;
+
+    @media (min-width: 500px) {
+        display: block;
+        align-items: unset;
+        padding: 1em 1em 0 1em;
+        margin: 0 10px 20px;
+        width: auto;
+        flex-basis: 35%;
+        max-width: 35%;
+    }
+
+    @media (min-width: 768px) {
+        width: auto;
+        flex-basis: 14%;
+        max-width: 14%;
+    }
+
+    @media (min-width: 1930px) {
+        width: auto;
+        flex-basis: 7%;
+        max-width: 7%;
+    }
+}
+
+
+.umb-getstartedcard img {
+    height: 3em;
+    max-width: 100%;
+
+    @media (min-width: 500px) {
+        height: auto;
+    }
+}
+
+.umb-getstartedcards {
+    margin: 0 auto;
+    max-width: 100%;
+}
+
+.umb-getstartedbody {
+    font-weight: bold;
+    margin: 0.5em;
+
+    @media (min-width: 500px) {
+        padding: 10px;
+        margin: auto;
+    }
+}
+
+.umb-getstartedbody p {
+    margin: 0;
+
+    @media (min-width: 500px) {
+        margin: inherit;
+    }
+}
+
+.umb-getstartedcard:hover {
+    border: 1px solid @turquoise;
+    cursor: pointer;
+}

src/Umbraco.Web.UI.Client/src/views/dashboard/developer/developerdashboardvideos.html

@@ -1,18 +1,15 @@
-<h3>Hours of Umbraco training videos are only a click away</h3>
-<p>Want to master Umbraco? Spend a couple of minutes learning some best practices by watching one of these videos about using Umbraco, then visit <a class="btn-link -underline"  href="http://umbraco.tv" target="_blank">umbraco.tv</a> for even more Umbraco videos.</p>
-
-<div class="row-fluid"
-	ng-init="init('http://umbraco.tv/videos/developer/chapterrss?sort=no')"
-	ng-controller="Umbraco.Dashboard.StartupVideosController">
-
-	<ul class="thumbnails" >
-		<li class="span2" ng-repeat="video in videos">
-            <a class="btn-link" target="_blank" href="{{video.link}}" title="{{video.title}}">
-                <div class="thumbnail" style="margin-right: 20px; padding: 20px;">
-                    <img ng-src="{{video.thumbnail}}" alt="{{video.title}}">
-                    <div style="font-weight: bold; text-align: center; margin: 20px 0 0;">{{video.title}}</div>
-                </div>
-            </a>
-	    </li>
-	</ul>
-</div>
+<h3>Hours of Umbraco training videos are only a click away</h3>
+<p>Want to master Umbraco? Spend a couple of minutes learning some best practices by watching one of these videos about using Umbraco, then visit <a class="btn-link -underline" href="http://umbraco.tv" target="_blank">umbraco.tv</a> for even more Umbraco videos.</p>
+
+<div ng-init="init('http://umbraco.tv/videos/developer/chapterrss?sort=no')"
+     ng-controller="Umbraco.Dashboard.StartupVideosController">
+
+    <div class="umb-getstartedcards">
+        <a class="umb-getstartedcard" ng-repeat="video in videos" href="{{video.link}}" title="{{video.title}}" target="_blank" rel="noopener">
+            <img ng-src="{{video.thumbnail}}" alt="{{video.title}}">
+            <div class="umb-getstartedbody">
+                <p>{{video.title}}</p>
+            </div>
+        </a>
+    </div>
+</div>