sublanding tweaks based on feedback (#17445)

* tweaks based on feedback

* "marginalize" the columns with GUTTER

* layout changes to align the learning track heading heights

* star icon

* update ui language

Co-authored-by: Jason Etcovitch <jasonetco@github.com>
Co-authored-by: Sarah Schneider <sarahs@users.noreply.github.com>
Co-authored-by: Emily Gould <4822039+emilyistoofunky@users.noreply.github.com>

Author: 4 people

data/ui.yml

@@ -161,5 +161,5 @@ product_sublanding:
     how_to: How-to guide
     reference: Reference
 learning_track_nav:
-  prevGuide: Previous Guide
-  nextGuide: Next Guide
+  prevGuide: Previous guide
+  nextGuide: Next guide

layouts/product-sublanding.html

@@ -26,8 +26,8 @@ <h1 class="my-3 font-mktg">{{ page.shortTitle }}</h1>
             <ul class="list-style-none d-flex flex-nowrap overflow-x-scroll px-2 feature-track">
               <li class="px-2 d-flex flex-shrink-0">
                 <div class="d-inline-block Box p-5 bg-gradient--blue-purple text-white">
-                  <div class="circle bg-white text-blue border border-white d-inline-flex">{% octicon "star-fill" height="24" class="v-align-middle m-2"%}</div>
-                  <h3 class="font-mktg h2-mktg my-4">{{ featuredTrack.title }}</h3>
+                  <div class="circle text-white d-inline-flex" style="border: 2px white solid;">{% octicon "star-fill" height="24" class="v-align-middle m-2"%}</div>
+                  <h3 class="font-mktg h3-mktg my-4">{{ featuredTrack.title }}</h3>
                   <div class="lead-mktg text-white f5 my-4">{{ featuredTrack.description }}</div>
                   <a class="d-inline-block border border-white text-white px-4 py-2 f5 no-underline text-bold" role="button" href="{{ featuredTrack.guides[0].href }}?learn={{ featuredTrack.trackName }}">
                     <span class="mr-2">{% octicon "arrow-right" height="20" %}</span>
@@ -44,8 +44,8 @@ <h3 class="font-mktg h2-mktg my-4">{{ featuredTrack.title }}</h3>
                       </div>
                       <div class="text-gray-light h6 text-uppercase">{{ guideTypes[guide.page.type] }}</div>
                     </div>
-                    <h3 class="font-mktg h2-mktg my-4 text-gray-dark">{{ guide.title }}</h3>
-                    <div class="lead-mktg text-gray f5 my-4">{{ guide.intro }}</div>
+                    <h3 class="font-mktg h3-mktg my-4 text-gray-dark">{{ guide.title }}</h3>
+                    <div class="lead-mktg text-gray f5 my-4 truncate-overflow-8">{{ guide.intro }}</div>
                   </a>
                 </li>
               {% endfor %}
@@ -59,23 +59,20 @@ <h2 class="mb-3 font-mktg">{% data ui.product_sublanding.learning_paths %}</h2>
             <div class="lead-mktg text-gray f4">{% data ui.product_sublanding.learning_paths_desc %}</div>
 
             <!-- Learning tracks -->
-            <div class="d-flex flex-wrap flex-items-start my-5">
+            <div class="d-flex flex-wrap flex-items-start my-5 gutter">
               {% for track in page.learningTracks offset:1 %}
-                <div class="my-3 px-0 px-4 col-12 col-md-6 learning-track">
-                  <div class="Box js-show-more-container">
-                    <div class="Box-header bg-gradient--purple-pink py-4 d-flex flex-auto flex-items-start flex-wrap">
+                <div class="my-3 px-4 col-12 col-md-6 learning-track">
+                  <div class="Box js-show-more-container d-flex flex-column">
+                    <div class="Box-header bg-gradient--purple-pink p-4 d-flex flex-1 flex-items-start flex-wrap">
                       <div class="d-flex flex-auto flex-items-start col-8 col-md-12 col-xl-8">
-                        <div class="circle bg-white text-purple border border-white d-inline-flex mr-4">
-                          {% octicon "star-fill" height="20" class="v-align-middle m-2"%}
-                        </div>
                         <div class="my-xl-0 mr-xl-3">
-                          <h4 class="mb-3 text-white font-mktg h3-mktg ">
+                          <h5 class="mb-3 text-white font-mktg h3-mktg ">
                             {{ track.title }}
-                          </h4>
-                          <p class="text-white">{{ track.description }}</p>
+                          </h5>
+                          <p class="text-white truncate-overflow-3 learning-track--description">{{ track.description }}</p>
                         </div>
                       </div>
-                      <a class="d-inline-block border border-white text-white px-3 py-2 f5 no-underline text-bold no-wrap" role="button" href="{{ track.guides[0].href }}?learn={{ track.trackName }}">
+                      <a class="d-inline-block border border-white text-white px-3 py-2 f5 no-underline text-bold no-wrap mt-3 mt-md-0" role="button" href="{{ track.guides[0].href }}?learn={{ track.trackName }}">
                         {% data ui.product_sublanding.start %}
                         <span class="ml-2">{% octicon "arrow-right" height="20" %}</span>
                       </a>
@@ -86,7 +83,7 @@ <h4 class="mb-3 text-white font-mktg h3-mktg ">
                           <div class="circle bg-gray d-inline-flex mr-4">
                             <span class="m-2 f3 lh-condensed-ultra text-center text-bold text-gradient--purple-pink" style="min-width: 20px; height: 20px;">{{ forloop.index }}</span>
                           </div>
-                          <h4 class="flex-auto">{{ guide.title }}</h4>
+                          <h5 class="flex-auto pr-2">{{ guide.title }}</h5>
                           <div class="text-gray-light h6 text-uppercase">{{ guideTypes[guide.page.type] }}</div>
                         </a>
                       {% endfor %}

stylesheets/product-sublanding.scss

@@ -2,4 +2,23 @@
   li {
     width: 280px;
   }
-}
+}
+
+.learning-track {
+  &--description {
+    min-height: 1em * $body-line-height * 3
+  }
+}
+
+@mixin truncate($maxLine) {
+  .truncate-overflow-#{$maxLine} {
+    display: -webkit-box;
+    -webkit-line-clamp: $maxLine;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+@include truncate(3);
+@include truncate(8);