0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-18 02:21:47 -05:00

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)
This commit is contained in:
Sanne de Vries 2022-10-06 16:23:49 +07:00
parent 7308bb9122
commit 08da18e324
11 changed files with 68 additions and 37 deletions

View file

@ -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',

View file

@ -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',

View file

@ -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;
}

View file

@ -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;

View file

@ -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);
}

View file

@ -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),

View file

@ -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;

View file

@ -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}}

View file

@ -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}}

View file

@ -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}}

View file

@ -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}}