Fixed breadcrumbs responsive issues

Refs https://www.notion.so/ghost/Switch-breadcrumb-style-513a624c0e0d490ca39a2fdb97a6971a

- New breadcrumb style broke posts list on smaller screens
- Updated copy to reflect the action taken on the page (e.g. Edit tag)

ghost/admin/app/controllers/pages.js

@@ -20,10 +20,10 @@ const TYPES = [{
 }];
 
 const ORDERS = [{
-    name: 'Newest',
+    name: 'Newest first',
     value: null
 }, {
-    name: 'Oldest',
+    name: 'Oldest first',
     value: 'published_at asc'
 }, {
     name: 'Recently updated',

ghost/admin/app/controllers/posts.js

@@ -37,10 +37,10 @@ const VISIBILITIES = [{
 }];
 
 const ORDERS = [{
-    name: 'Newest',
+    name: 'Newest first',
     value: null
 }, {
-    name: 'Oldest',
+    name: 'Oldest first',
     value: 'published_at asc'
 }, {
     name: 'Recently updated',

ghost/admin/app/styles/components/lists.css

@@ -422,7 +422,7 @@ ul.nostyle li {
 .gh-list-scrolling thead tr {
     position: sticky;
     background: var(--main-bg-color);
-    z-index: 2;
+    z-index: 999;
     top: 0;
 }
 

ghost/admin/app/styles/layouts/content.css

@@ -7,7 +7,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin: 0 24px;
+    margin: 0 16px;
     padding: 0;
     list-style: none;
 }
@@ -54,7 +54,7 @@
     letter-spacing: 0.2px;
     height: 34px;
     padding: 6px 12px 6px;
-    margin-right: 8px;
+    margin-right: 6px;
     outline: none;
     border: none;
     border-radius: 2px !important;
@@ -122,8 +122,8 @@
     white-space: nowrap;
 }
 
-.gh-contentfilter-sort .gh-contentfilter-menu-trigger .ember-power-select-selected-item::before {
-    content: "Sort by: ";
+.gh-contentfilter-sort .gh-contentfilter-menu-trigger {
+    margin: 0;
 }
 
 .gh-contentfilter-actions svg {
@@ -140,6 +140,7 @@
 .gh-contentfilter-button {
     display: flex;
     height: 33px;
+    margin: 0 0 0 6px;
     line-height: 33px;
     background: color-mod(var(--whitegrey-l1) l(-3%));
 }
@@ -751,11 +752,29 @@ a.gh-post-list-signups.active:hover > span, a.gh-post-list-conversions.active:ho
 .gh-canvas-title.gh-post-title {
     max-width: 880px;
     padding: 12px 0 8px;
-    font-size: 3.1rem;
+    font-size: 3.2rem;
     overflow: inherit;
     white-space: inherit;
 }
 
+.post-header .gh-canvas-title.gh-post-title {
+    display: block;
+    padding: 6px 0 8px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: initial;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+}
+
+@media (max-width: 1280px) {
+    .post-header .gh-canvas-title.gh-post-title {
+        white-space: nowrap;
+        padding: 0;
+    }
+}
+
 .gh-post-analytics-meta {
     width: 100%;
     margin: 0;

ghost/admin/app/styles/layouts/main.css

@@ -1097,7 +1097,7 @@
 }
 
 .gh-canvas-header {
-    min-height: calc(var(--main-layout-vpanel-height) - 1px);;
+    min-height: calc(var(--main-layout-vpanel-height) - 1px);
     margin: 0 calc(-1 * var(--main-layout-content-sidepadding));
     padding: 32px var(--main-layout-content-sidepadding);
     top: 0;
@@ -1124,13 +1124,15 @@
 .gh-canvas-header .gh-canvas-breadcrumb {
     display: flex;
     align-items: center;
+    flex-shrink: 0;
     height: 34px;
     color: var(--midgrey-l2);
     font-size: 1.35rem;
-    font-weight: 400;
+    font-weight: 500;
     line-height: 34px;
     letter-spacing: .2px;
     background: none;
+    white-space: nowrap;
 }
 
 .gh-canvas-header.sticky .gh-canvas-breadcrumb {
@@ -1506,7 +1508,7 @@
 }
 
 .gh-canvas-breadcrumb + .gh-canvas-title {
-    padding: 12px 0 0;
+    padding: 6px 0 0;
 }
 
 .gh-btn-edit-view {
@@ -1723,23 +1725,23 @@
     align-items: center;
 }
 
-@media (max-width: 1450px) {
+@media (max-width: 1440px) {
+    .gh-canvas-header.break.tablet {
+        padding: 32px var(--main-layout-content-sidepadding) 12px;
+    }
+
     .gh-canvas-header.break.tablet .gh-canvas-header-content {
-        height: 128px;
+        min-height: calc(var(--main-layout-vpanel-height) - 1px);
         align-items: flex-start;
     }
 
-    .gh-canvas-header.break.tablet .gh-canvas-title {
-        margin-top: 26px;
+    .gh-canvas-title.gh-post-title {
+        padding: 0;
     }
 
     .gh-canvas-header.break.tablet .view-actions {
-        position: absolute;
-        top: 30px;
-        right: 0;
         flex-direction: column;
         align-items: flex-end;
-        width: 100%;
         max-height: 100px;
     }
 
@@ -1747,13 +1749,13 @@
         position: relative;
         order: 2;
         margin: 0;
-        padding: 6px 0 0;
+        padding: 0;
         max-width: calc(100vw - 390px);
         justify-content: space-between;
     }
 
     .view-actions-top-row {
-        margin-bottom: 16px;
+        margin-bottom: 8px;
     }
 
     .view-actions-bottom-row {
@@ -1767,11 +1769,22 @@
     }
 }
 
-@media (max-width: 1000px) {
-    .gh-canvas-title svg {
-        margin: 0 5px;
+@media (max-width: 1280px) {
+    .gh-canvas-header.break.tablet .gh-canvas-breadcrumb {
+        display: none;
     }
 
+    .gh-canvas-header.break.tablet .view-actions {
+        position: absolute;
+        right: 0;
+    }
+
+    .gh-canvas-header.break.post-header .view-actions-bottom-row {
+        padding-top: 20px;
+    }
+}
+
+@media (max-width: 1000px) {
     .gh-canvas-header.break.mobile .gh-canvas-header-content {
         border-bottom: 1px solid var(--main-color-area-divider);
     }

ghost/admin/app/styles/layouts/members.css

@@ -478,7 +478,7 @@ p.gh-members-list-email {
     }
 
     .members-header .view-actions {
-        margin-top: 30px;
+        margin-top: 2px;
         width: 100%;
     }
 
@@ -983,6 +983,10 @@ textarea.gh-member-details-textarea {
         top: unset;
         left: unset;
     }
+
+    .gh-member-header.sticky {
+        position: relative;
+    }
 }
 
 @media (min-width: 960px) and (max-width: 1160px),

ghost/admin/app/styles/layouts/offers.css

@@ -434,11 +434,6 @@
         display: none;
     }
 
-    .gh-offer.circle-bg .gh-canvas-header {
-        background: var(--main-bg-color);
-        position: sticky;
-    }
-
     .gh-offer .gh-main-layout.content-preview {
         display: flex;
         flex-direction: column;

ghost/admin/app/templates/member.hbs

@@ -1,11 +1,11 @@
 <section class="gh-canvas">
-    <GhCanvasHeader class="gh-canvas-header sticky">
+    <GhCanvasHeader class="gh-canvas-header sticky gh-member-header">
         <div class="flex flex-column">
             <div class="gh-canvas-breadcrumb">
                 <LinkTo @route="members" data-test-link="members-back">
                     Members
                 </LinkTo>
-                {{svg-jar "arrow-right-small"}} Member
+                {{svg-jar "arrow-right-small"}} {{if this.member.isNew "New member" "Edit member"}}
             </div>
             <h2 class="gh-canvas-title" data-test-screen-title>
                 {{#if this.member.isNew}}

ghost/admin/app/templates/offer.hbs

@@ -5,7 +5,7 @@
                 <LinkTo @route="offers" data-test-link="offers-back">
                     Offers
                 </LinkTo>
-                {{svg-jar "arrow-right-small"}} Offer
+                {{svg-jar "arrow-right-small"}} {{if this.offer.isNew "New offer" "Edit offer"}}
             </div>
             <h2 class="gh-canvas-title" data-test-screen-title>
                 {{#if this.offer.isNew}}

ghost/admin/app/templates/settings/integration.hbs

@@ -10,7 +10,7 @@
                     <LinkTo @route="settings.integrations" data-test-link="integrations-back">
                         Integrations
                     </LinkTo>
-                    {{svg-jar "arrow-right-small"}} Custom integration
+                    {{svg-jar "arrow-right-small"}} Edit integration
                 </div>
                 <h2 class="gh-canvas-title" data-test-screen-title>
                     {{this.integration.name}}

ghost/admin/app/templates/tag.hbs

@@ -6,7 +6,7 @@
                     <LinkTo @route="tags" data-test-link="tags-back">
                         Tags
                     </LinkTo>
-                    {{svg-jar "arrow-right-small"}} {{if this.tag.isNew "New tag" "Tag"}}
+                    {{svg-jar "arrow-right-small"}} {{if this.tag.isNew "New tag" "Edit tag"}}
                 </div>
                 <h2 class="gh-canvas-title" data-test-screen-title>
                     {{if this.tag.isNew "New tag" this.tag.name}}