TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 20:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Responsive UI fixes

Browse Source
This commit is contained in:
Peter Zimon 2021-02-12 14:29:44 +01:00
parent 595a74885c
commit f7cb949a6e
9 changed files with 249 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-contentfilter.hbs
View File

@ -1,4 +1,4 @@
<div class="gh-contentfilter" ...attributes>
<div class="gh-contentfilter view-actions-bottom-row" ...attributes>
{{#unless @currentUser.isContributor}}
<div class="gh-contentfilter-menu gh-contentfilter-type {{if @selectedType.value "gh-contentfilter-selected"}}" data-test-type-select="true">
<PowerSelect

6
ghost/admin/app/components/gh-mobile-nav-bar.hbs
View File

@ -1,9 +1,9 @@
<LinkTo @route="editor.new" @model="post" data-test-mobile-nav="new-post">{{svg-jar "pen"}}New post</LinkTo>
<LinkTo @route="dashboard" data-test-mobile-nav="dashboard">{{svg-jar "house"}}Dashboard</LinkTo>
{{#if (eq this.router.currentRouteName "posts")}}
<LinkTo @route="posts" @query={{hash type=null}} @classNames="active" data-test-mobile-nav="posts">{{svg-jar "content"}}Posts</LinkTo>
<LinkTo @route="posts" @query={{hash type=null}} @classNames="active" data-test-mobile-nav="posts">{{svg-jar "posts"}}Posts</LinkTo>
{{else}}
<LinkTo @route="posts">{{svg-jar "content" data-test-mobile-nav="posts"}}Posts</LinkTo>
{{/if}}
<LinkTo @route="staff" @classNames="gh-nav-main-users" data-test-mobile-nav="staff">{{svg-jar "account-group"}}Staff</LinkTo>
<LinkTo @route="members" @classNames="gh-nav-main-users" data-test-mobile-nav="members">{{svg-jar "members"}}Members</LinkTo>
<div role="button" class="gh-mobile-nav-bar-more" {{action "openMobileMenu" target=this.ui data-test-mobile-nav="more"}}>{{svg-jar "icon" class="icon-gh"}}More</div>
{{yield}}

4
ghost/admin/app/styles/components/lists.css
View File

@ -156,6 +156,10 @@ ul.nostyle li {
/* --------------------------------------------------- */
@media (max-width: 1000px) {
.gh-list {
border-bottom: none;
}
.gh-list-header {
display: none;
}

35
ghost/admin/app/styles/layouts/content.css
View File

@ -51,14 +51,15 @@
font-weight: 400;
color: var(--darkgrey);
letter-spacing: 0.2px;
height: 33px;
padding: 5px 12px 6px;
height: 34px;
padding: 6px 12px 6px;
margin-right: 8px;
outline: none;
border: none;
border-radius: 2px !important;
white-space: nowrap;
transition: all 0.25s ease;
overflow: hidden;
}
.gh-contentfilter-menu-trigger:hover {
@ -314,7 +315,7 @@
.gh-posts-list-item {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid var(--lightgrey);
border-bottom: 1px solid var(--whitegrey);
margin: 0;
}
@ -354,7 +355,7 @@
.gh-post-list-opens {
display: inline-block;
border: none;
padding: 0 4px 20px 28px;
padding: 0 4px 20px 0;
font-size: 1.3rem;
max-width: 140px;
white-space: nowrap;
@ -414,32 +415,6 @@
.gh-content-email-stats-mobile {
display: inherit;
}
.post-header {
justify-content: flex-end;
min-height: 120px;
}
.post-header .gh-canvas-title {
position: absolute;
top: 29px;
left: 21px;
}
.post-header .view-actions {
flex-direction: column;
align-items: flex-end;
margin-top: 18px;
overflow-y: hidden;
}
.post-header .view-actions .gh-contentfilter {
order: 2;
margin: 10px 0 -20px;
padding: 6px 2px 26px 22px;
max-width: calc(100vw - 10px);
overflow-x: auto;
}
}
@media (max-width: 800px) {

170
ghost/admin/app/styles/layouts/main.css
View File

@ -740,6 +740,15 @@
stroke-width: 2.0px;
}
/* Tablet/mid sizes
/* ---------------------------------------------------------- */
@media (max-width: 1240px) {
.gh-nav {
flex-basis: 280px;
}
}
/* Mobile Nav Menu (Slides out)
/* ---------------------------------------------------------- */
@ -773,18 +782,25 @@
position: absolute;
top: 0;
left: 0;
width: 205px;
width: 260px;
height: 100%;
background: var(--white);
transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
transform: translate3d(-205px, 0px, 0px);
transform: translate3d(-260px, 0px, 0px);
}
.mobile-menu-expanded .gh-nav {
transform: translate3d(0,0,0);
}
.mobile-menu-expanded .content-cover {
width: calc(100vw - 260px);
cursor: pointer;
transform: translate3d(260px, 0, 0);
}
.gh-nav-list .active {
background: color-mod(var(--lightgrey) l(+2%) s(-10%));
background: var(--black);
color: var(--white);
}
}
@ -883,7 +899,7 @@
}
.gh-mobile-nav-bar a.active {
background: var(--blue);
background: var(--black);
color: #fff;
}
@ -1432,6 +1448,136 @@
stroke: var(--whitegrey);
}
/* View action mobile sizes */
/* -------------------------------------------------------------------------------- */
.view-actions-top-row {
display: flex;
align-items: center;
}
.view-actions-bottom-row {
display: flex;
align-items: center;
}
@media (max-width: 1200px) {
.gh-canvas-header.break.tablet .gh-canvas-header-content {
border-bottom: 1px solid var(--main-color-area-divider);
}
.gh-canvas-header.break.tablet .gh-canvas-header-content {
height: 128px;
border-bottom: 1px solid var(--main-color-area-divider);
align-items: flex-start;
}
.gh-canvas-header.break.tablet .gh-canvas-title {
margin-top: 28px;
}
.gh-canvas-header.break.tablet .view-actions {
position: absolute;
top: 30px;
right: 0;
flex-direction: column;
align-items: flex-end;
overflow: hidden;
width: 100%;
max-height: 100px;
}
.gh-canvas-header.break.tablet .view-actions-bottom-row {
position: relative;
order: 2;
margin: 0;
padding: 24px 0 40px;
max-width: calc(100vw - 390px);
overflow-x: scroll;
overflow-y: hidden;
justify-content: space-between;
}
.gh-canvas-header.break.tablet .view-actions:before {
position: absolute;
content: "";
display: block;
top: 50px;
right: 0;
width: 1px;
height: 34px;
background: var(--whitegrey);
z-index: 999;
}
.view-actions-top-row {
margin-bottom: 16px;
}
.view-actions-bottom-row {
justify-content: flex-end;
order: 2;
}
.view-actions-top-row > *:last-child,
.view-actions-bottom-row > *:last-child {
margin-right: 0 !important;
}
}
@media (max-width: 1000px) {
.gh-canvas-title svg {
margin: 0 5px;
}
.gh-canvas-header.break.mobile .gh-canvas-header-content {
border-bottom: 1px solid var(--main-color-area-divider);
}
.gh-canvas-header.break.mobile .gh-canvas-header-content {
height: 128px;
border-bottom: 1px solid var(--main-color-area-divider);
align-items: flex-start;
}
.gh-canvas-header.break.mobile .gh-canvas-title {
margin-top: 28px;
}
.gh-canvas-header.break.mobile .view-actions {
position: absolute;
top: 30px;
right: 0;
flex-direction: column;
align-items: flex-end;
overflow: hidden;
width: 100%;
max-height: 100px;
}
.gh-canvas-header.break.mobile .view-actions-bottom-row {
position: relative;
order: 2;
margin: 0;
padding: 24px 0 40px;
max-width: calc(100vw - 390px);
overflow-x: scroll;
overflow-y: hidden;
justify-content: space-between;
}
.gh-canvas-header.break.mobile .view-actions:before {
position: absolute;
content: "";
display: block;
top: 50px;
right: 0;
width: 1px;
height: 34px;
background: var(--whitegrey);
z-index: 999;
}
}
@media (max-width: 400px) {
.view-header {
padding: 0 7px;
@ -1453,6 +1599,22 @@
.gh-canvas {
padding: 0 4vw 4vw;
}
.gh-canvas-header.break .view-actions-bottom-row {
max-width: calc(100vw - 56px) !important;
}
.gh-canvas-header.break .view-actions:before {
position: absolute;
content: "";
display: block;
top: 50px;
right: 0;
bottom: 5px;
width: 1px;
background: var(--whitegrey);
z-index: 999;
}
}
section.gh-ds ul {

7
ghost/admin/app/styles/layouts/members.css
View File

@ -303,6 +303,13 @@ p.gh-members-list-email {
margin-top: var(--main-layout-section-vpadding);
}
@media (min-width: 1200px) and (max-width: 1370px) {
.members-header .view-actions input.gh-members-list-searchfield {
max-width: 130px;
min-width: unset;
}
}
@media (max-width: 1100px) {
.gh-members-chart-summary-data {
font-size: 2.8rem;

114
ghost/admin/app/templates/members.hbs
View File

@ -1,63 +1,67 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header members-header">
<GhCanvasHeader class="gh-canvas-header break tablet members-header">
<h2 class="gh-canvas-title" data-test-screen-title>Members</h2>
<section class="view-actions">
<GhMembersFilter
@selectedLabel={{this.selectedLabel}}
@availableLabels={{this.availableLabels}}
@onLabelChange={{this.changeLabel}}
@onLabelAdd={{this.addLabel}}
@onLabelEdit={{this.editLabel}}
@selectedPaidParam={{this.selectedPaidParam}}
@availablePaidParams={{this.paidParams}}
@onPaidParamChange={{this.changePaidParam}}
@availableOrders={{this.availableOrders}}
@selectedOrder={{this.selectedOrder}}
@onOrderChange={{this.changeOrder}}
/>
<div class="relative gh-members-header-search">
{{svg-jar "search" class="gh-input-search-icon"}}
<GhTextInput
placeholder="Search members..."
@value={{this.searchText}}
@input={{this.search}}
class="gh-members-list-searchfield {{if this.searchText "active"}}" />
<div class="view-actions-bottom-row">
<GhMembersFilter
@selectedLabel={{this.selectedLabel}}
@availableLabels={{this.availableLabels}}
@onLabelChange={{this.changeLabel}}
@onLabelAdd={{this.addLabel}}
@onLabelEdit={{this.editLabel}}
@selectedPaidParam={{this.selectedPaidParam}}
@availablePaidParams={{this.paidParams}}
@onPaidParamChange={{this.changePaidParam}}
@availableOrders={{this.availableOrders}}
@selectedOrder={{this.selectedOrder}}
@onOrderChange={{this.changeOrder}}
/>
<div class="relative gh-members-header-search">
{{svg-jar "search" class="gh-input-search-icon"}}
<GhTextInput
placeholder="Search members..."
@value={{this.searchText}}
@input={{this.search}}
class="gh-members-list-searchfield {{if this.searchText "active"}}" />
</div>
</div>
<span class="dropdown">
<GhDropdownButton @dropdownName="members-actions-menu"
@classNames="gh-btn gh-btn-icon only-has-icon gh-actions-cog" @title="Members Actions"
@data-test-user-actions="true">
<span>
{{svg-jar "settings"}}
<span class="hidden">Actions</span>
</span>
</GhDropdownButton>
<GhDropdown @name="members-actions-menu" @tagName="ul"
@classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right">
<li>
<LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
<span>Import members</span>
</LinkTo>
</li>
<li class="{{if this.members.length "" "disabled"}}">
{{#if this.members.length}}
<button class="mr2" {{on "click" this.exportData}}>
{{#if this.showingAll}}
<span>Export all members</span>
{{else}}
<span>Export selected members ({{this.members.length}})</span>
{{/if}}
</button>
{{else}}
<button class="mr2" disabled="true">
<span>Export selected members (0)</span>
</button>
{{/if}}
</li>
</GhDropdown>
</span>
<LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
<div class="view-actions-top-row">
<span class="dropdown">
<GhDropdownButton @dropdownName="members-actions-menu"
@classNames="gh-btn gh-btn-icon only-has-icon gh-actions-cog" @title="Members Actions"
@data-test-user-actions="true">
<span>
{{svg-jar "settings"}}
<span class="hidden">Actions</span>
</span>
</GhDropdownButton>
<GhDropdown @name="members-actions-menu" @tagName="ul"
@classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right">
<li>
<LinkTo @route="members.import" class="mr2" data-test-link="import-csv">
<span>Import members</span>
</LinkTo>
</li>
<li class="{{if this.members.length "" "disabled"}}">
{{#if this.members.length}}
<button class="mr2" {{on "click" this.exportData}}>
{{#if this.showingAll}}
<span>Export all members</span>
{{else}}
<span>Export selected members ({{this.members.length}})</span>
{{/if}}
</button>
{{else}}
<button class="mr2" disabled="true">
<span>Export selected members (0)</span>
</button>
{{/if}}
</li>
</GhDropdown>
</span>
<LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
</div>
</section>
</GhCanvasHeader>

4
ghost/admin/app/templates/pages.hbs
View File

@ -1,5 +1,5 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header post-header">
<GhCanvasHeader class="gh-canvas-header break tablet post-header">
<GhCustomViewTitle @title="Pages" @query={{reset-query-params "posts"}} />
<section class="view-actions">
@ -22,7 +22,7 @@
@onOrderChange={{action "changeOrder"}}
/>
<LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-primary" data-test-new-page-button={{true}}><span>New page</span></LinkTo>
<LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-primary view-actions-top-row" data-test-new-page-button={{true}}><span>New page</span></LinkTo>
</section>
</GhCanvasHeader>

4
ghost/admin/app/templates/posts.hbs
View File

@ -1,5 +1,5 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header post-header">
<GhCanvasHeader class="gh-canvas-header break tablet post-header">
<GhCustomViewTitle @title="Posts" @query={{reset-query-params "posts"}} />
<section class="view-actions">
@ -22,7 +22,7 @@
@onOrderChange={{action "changeOrder"}}
/>
<LinkTo @route="editor.new" @model="post" class="gh-btn gh-btn-primary" data-test-new-post-button={{true}}><span>New post</span></LinkTo>
<LinkTo @route="editor.new" @model="post" class="gh-btn gh-btn-primary view-actions-top-row" data-test-new-post-button={{true}}><span>New post</span></LinkTo>
</section>
</GhCanvasHeader>