Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated design settings navigation

Browse source
This commit is contained in:
Sanne de Vries 2021-10-15 17:59:47 +02:00
parent 94c3163834
commit 9120f0d820
3 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ghost/admin/app/components/gh-nav-menu/design.hbs
View file

@ -1,9 +1,10 @@
<header class="gh-nav-menu">
<LinkTo @route="settings" class="gh-nav-menu-title">{{svg-jar "arrow-left-tail"}}Site design</LinkTo>
<header class="gh-nav-header">
<LinkTo @route="settings" class="gh-nav-menu-back-button">{{svg-jar "arrow-left-small"}} Settings</LinkTo>
</header>
<section class="gh-nav-body gh-nav-design">
<div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
<div class="gh-nav-list gh-nav-main">
<LinkTo @route="settings.design" class="gh-nav-menu-title">Site design</LinkTo>
{{#let (eq this.openSection "brand") as |isOpen|}}
<button class="gh-nav-design-tab {{if isOpen "active"}}" type="button" {{on "click" (fn this.toggleSection "brand")}}>
<span class="gh-nav-button-expand">{{svg-jar (if isOpen "arrow-down-stroke" "arrow-right-stroke")}}</span>
@ -40,7 +41,7 @@
<div class="gh-nav-bottom">
<LinkTo class="gh-nav-design-tab" style="align-items: self-start" @route="settings.design.change-theme" {{on "click" (fn this.toggleSection null)}}>
<span>{{svg-jar "settings"}}Change theme</span>
<span>Themes</span>
<span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - V {{this.activeTheme.package.version}}{{/if}}</span>
</LinkTo>
</div>

46
ghost/admin/app/styles/layouts/settings.css
View file

@ -1371,24 +1371,45 @@ p.theme-validation-details {
/* Design (Labs)
/* ---------------------------------------------------- */
.gh-nav-menu-title {
.gh-nav-header {
height: 100px;
padding: 32px 32px 16px;
}
.gh-nav-menu-back-button {
display: flex;
align-items: center;
margin-bottom: 40px;
padding: 6px 0;
color: var(--darkgrey);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: .2px;
background: none;
}
.gh-nav-menu-back-button svg {
display: block;
width: 9px;
height: 9px;
margin-right: 8px;
}
.gh-nav-menu-back-button:hover {
color: var(--black);
}
.gh-nav-design .gh-nav-menu-title {
display: flex;
align-items: center;
padding-left: 7px;
overflow: hidden;
margin-bottom: 8px;
color: var(--black);
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3em;
}
.gh-nav-menu-title svg {
width: 16px;
height: 16px;
margin-right: 17px;
fill: var(--black);
}
.gh-nav-design-tab {
display: flex;
position: relative;
@ -1420,10 +1441,12 @@ p.theme-validation-details {
.gh-nav-bottom .gh-nav-design-tab span {
display: flex;
align-items: center;
color: var(--black);
font-size: 1.5rem;
font-weight: 700;
}
.gh-nav-design-tab .active-theme {
margin-left: 33px;
.gh-nav-bottom .gh-nav-design-tab .active-theme {
color: var(--midgrey);
font-size: 1.3rem;
font-weight: 400;
@ -1453,6 +1476,7 @@ p.theme-validation-details {
}
.gh-nav-design-settings {
margin: 16px 0;
padding: 24px var(--mainmenu-padding) 32px calc(var(--mainmenu-padding) + 7px);
}

2
ghost/admin/app/templates/settings/design/index.hbs
View file

@ -1,6 +1,6 @@
<section class="gh-canvas flex flex-column h-100">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title">{{this.config.blogTitle}}</h2>
<h2 class="gh-canvas-title">Site design</h2>
<section class="view-actions">
<div class="gh-select gh-design-page-preview-mode">
<OneWaySelect