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:
parent
7308bb9122
commit
08da18e324
11 changed files with 68 additions and 37 deletions
|
@ -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',
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
Loading…
Add table
Reference in a new issue