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

Made design settings sidenav footer sticky

Browse Source
This commit is contained in:
Sanne de Vries 2021-10-27 16:16:21 +02:00
parent 875f3156c7
commit 829fc138a2
2 changed files with 48 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ghost/admin/app/components/gh-nav-menu/design.hbs
View File

@ -42,13 +42,15 @@
</div>
<div class="gh-nav-bottom">
<LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" this.closeAllSections}}>
<div>
<span>Change theme</span>
<span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>
</div>
<div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
</LinkTo>
<div class="gh-change-theme">
<LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" this.closeAllSections}}>
<div>
<span>Change theme</span>
<span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>
</div>
<div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
</LinkTo>
</div>
</div>
</section>
</div>

40
ghost/admin/app/styles/layouts/settings.css
View File

@ -1512,7 +1512,45 @@ p.theme-validation-details {
}
.gh-nav-design .gh-nav-bottom {
padding: 40px 0;
position: sticky;
-webkit-position: sticky;
bottom: -24px;
z-index: 997;
height: 120px;
padding: 0;
-webkit-backface-visibility: hidden;
}
.gh-nav-design .gh-nav-bottom::before,
.gh-nav-design .gh-nav-bottom::after {
content: "";
position: sticky;
-webkit-position: sticky;
display: block;
height: 24px;
}
.gh-nav-design .gh-nav-bottom::before {
z-index: 998;
bottom: 0;
background: var(--white);
}
.gh-nav-design .gh-nav-bottom::after {
bottom: 72px;
box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 -8px 16px -3px rgba(0,0,0,.15);
}
.gh-change-theme {
position: sticky;
-webkit-position: sticky;
bottom: 0;
z-index: 999;
display: flex;
align-items: center;
height: 96px;
margin-bottom: -24px;
background: var(--white);
}
.gh-nav-design-tabicon {