Updated Resources design on Dashboard

ghost/admin/app/components/dashboard/dashboard-v5.hbs

@@ -15,9 +15,11 @@
 
         <Dashboard::V5::Charts::Recents />
 
-        <div class="gh-dashboard5-split">
+        <div class="gh-dashboard5-split gh-dashboard5-box is-secondary">
             <Dashboard::V5::Resources::Resources />
             <Dashboard::V5::Resources::Newsletter />
+        </div>
+        <div class="gh-dashboard5-split">
             <Dashboard::V5::Resources::StaffPicks />
             <Dashboard::V5::Resources::WhatsNew />
             <Dashboard::V5::Resources::Community />

ghost/admin/app/components/dashboard/v5/resources/staff-picks.hbs

@@ -1,5 +1,5 @@
 <section class="gh-dashboard5-resource gh-dashboard5-staff-picks" {{did-insert this.load}}>
-    <article class="gh-dashboard5-resource-box is-secondary">
+    <article class="gh-dashboard5-resource-box">
         <div class="gh-dashboard5-resource-title">
             <h4>Staff Picks</h4>
             <p>Hand picked stories from around the web, published with Ghost.</p>
@@ -28,7 +28,7 @@
             </div>
         </div>
         <div class="gh-dashboard5-resource-footer">
-            <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">{{svg-jar "twitter"}} <span>Follow on Twitter</span></a>
+            <a href="https://twitter.com/ghoststaffpicks" target="_blank" rel="noopener noreferrer">{{svg-jar "twitter-logo"}} <span>Follow on Twitter</span></a>
         </div>
     </article>
 </section>

ghost/admin/app/styles/layouts/dashboard-v5.css

@@ -168,9 +168,24 @@ Dashboard v5 Layout */
     align-items: stretch;
 }
 
+.gh-dashboard5-box.gh-dashboard5-split {
+    display: grid;
+    padding: 24px 0;
+    margin-bottom: 24px;
+}
+
+.gh-dashboard5-box.gh-dashboard5-split section:nth-child(odd) {
+    margin-left: 24px;
+}
+
+.gh-dashboard5-box.gh-dashboard5-split section:nth-child(even) {
+    margin-left: 0;
+    margin-right: 24px;
+}
+
 .gh-dashboard5-box.is-secondary {
     background: var(--main-color-content-greybg);
-    border: transparent;
+    border-color: var(--main-color-content-greybg);
 }
 
 .gh-dashboard5-box.is-faded {
@@ -1264,7 +1279,6 @@ Dashboard v5 Staff Picks */
 }
 
 .gh-dashboard5-staff-picks .gh-dashboard5-resource-body {
-    border-top: 1px solid var(--whitegrey);
     padding-top: 12px;
 }
 
@@ -1300,10 +1314,6 @@ Dashboard v5 Staff Picks */
 }
 
 .gh-dashboard5-staff-picks .gh-dashboard5-list-body {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: space-between;
     color: #7c8b9a;
     font-size: 1.4rem;
     padding: 0 32px 0 0;
@@ -1318,17 +1328,8 @@ Dashboard v5 Staff Picks */
 .gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a {
     display: flex;
     align-items: center;
-    color: var(--middarkgrey);
+    color: #1DA1F2;
-    font-weight: 400;
+    font-weight: 500;
-}
-
-.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a span {
-    opacity: 0;
-    transition: 0.15s all ease-in-out;
-}
-
-.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer a:hover span {
-    opacity: 1;
 }
 
 .gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg {
@@ -1337,9 +1338,6 @@ Dashboard v5 Staff Picks */
     margin-right: 5px;
 }
 
-.gh-dashboard5-staff-picks .gh-dashboard5-resource-footer svg path {
-    fill: var(--middarkgrey);
-}
 
 
 /* --------------------------------- 
@@ -1488,7 +1486,6 @@ Dashboard v5 Resources */
 }
 
 .gh-dashboard5-resource-box.is-secondary {
-    background: linear-gradient(45deg, color-mod(var(--main-color-content-greybg) l(+2%)), var(--main-color-content-greybg));
     border: none;
     box-shadow: none;
 }
@@ -1499,7 +1496,7 @@ Dashboard v5 Resources */
     text-transform: uppercase;
     letter-spacing: 0.3px;
     color: var(--darkgrey);
-    margin: 0 0 16px;
+    margin: 0 0 8px;
     padding: 0;
     transition: color .3s;
 }
@@ -1558,6 +1555,11 @@ Dashboard v5 Resources */
 .gh-dashboard5-resource-bigarticle p {
     font-size: 1.5rem;
     color: var(--middarkgrey);
+    display: -webkit-box;
+    line-clamp: 3;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
 }
 
 .gh-dashboard5-resource-smallarticles {

ghost/admin/public/assets/icons/twitter-logo.svg

@@ -0,0 +1,3 @@
+<svg width="384" height="312" viewBox="0 0 384 312" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M120.764 312C265.676 312 344.924 191.977 344.924 87.8966C344.924 84.488 344.855 81.095 344.701 77.7161C360.121 66.5614 373.428 52.7502 384 36.9299C369.883 43.2042 354.693 47.4271 338.757 49.3311C355.023 39.5803 367.51 24.1543 373.402 5.76654C357.936 14.9385 341.017 21.4043 323.374 24.8851C308.997 9.57528 288.53 0 265.866 0C222.359 0 187.077 35.2732 187.077 78.7527C187.077 84.9342 187.77 90.9449 189.122 96.7122C123.643 93.4183 65.5805 62.0763 26.7223 14.4191C19.7236 26.4392 16.0424 40.1002 16.0546 54.0072C16.0546 81.3337 29.9629 105.457 51.1141 119.57C38.6029 119.188 26.3664 115.81 15.4334 109.719C15.4217 110.049 15.4217 110.372 15.4217 110.725C15.4217 148.869 42.5779 180.717 78.6271 187.934C71.8566 189.777 64.8702 190.709 57.8529 190.705C52.7852 190.705 47.8462 190.207 43.0462 189.286C53.0763 220.581 82.1604 243.355 116.643 243.991C89.678 265.12 55.7104 277.706 18.7926 277.706C12.5124 277.711 6.23732 277.347 0 276.615C34.8675 298.958 76.2693 311.995 120.768 311.995" fill="#1DA1F2"/>
+</svg>