TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 20:34:02 +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>
<div class="gh-nav-bottom"> <div class="gh-nav-bottom">
<LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" this.closeAllSections}}> <div class="gh-change-theme">
<div> <LinkTo class="gh-nav-design-tab" @route="settings.design.change-theme" {{on "click" this.closeAllSections}}>
<span>Change theme</span> <div>
<span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span> <span>Change theme</span>
</div> <span class="active-theme">Current: {{this.activeTheme.name}}{{#if this.activeTheme.package.version}} - v{{this.activeTheme.package.version}}{{/if}}</span>
<div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div> </div>
</LinkTo> <div class="gh-nav-design-tabicon">{{svg-jar "sync"}}</div>
</LinkTo>
</div>
</div> </div>
</section> </section>
</div> </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 { .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 { .gh-nav-design-tabicon {