Updated design settings sidemenu
This commit is contained in:
Sanne de Vries
parent
aefc762a20
commit
c721bb3b1f
@ -1,45 +1,42 @@
|
||||
<header class="gh-nav-menu">
|
||||
<LinkTo @route="settings" class="gh-nav-menu-title">{{svg-jar "arrow-left-tail"}} Site design</LinkTo>
|
||||
<LinkTo @route="settings" class="gh-nav-menu-title">{{svg-jar "arrow-left-tail"}}Site design</LinkTo>
|
||||
</header>
|
||||
<section class="gh-nav-body">
|
||||
<section class="gh-nav-body gh-nav-design">
|
||||
<div class="gh-nav-top" {{on "click" this.transitionBackToIndex}}>
|
||||
|
||||
<div class="pl6 pt4 pr6">
|
||||
<button type="button" {{on "click" (fn this.toggleSection "brand")}} class="flex flex-row w-100">
|
||||
<span class="db tl flex-grow-1">{{svg-jar "house" class="w4"}} Brand</span>
|
||||
<span class="db">{{svg-jar (if (set-has this.openSections "brand") "arrow-up-small" "arrow-down-small") class="w4"}}</span>
|
||||
<div class="gh-nav-list gh-nav-main">
|
||||
<button type="button" {{on "click" (fn this.toggleSection "brand")}}>
|
||||
{{svg-jar "paintbrush" class="w4"}}Brand
|
||||
{{!-- <span class="db">{{svg-jar (if (set-has this.openSections "brand") "arrow-up-small" "arrow-down-small") class="w4"}}</span> --}}
|
||||
</button>
|
||||
{{#if (set-has this.openSections "brand")}}
|
||||
<div class="pt4">
|
||||
<div class="gh-nav-design-settings">
|
||||
<Settings::Design::GeneralSettingsForm
|
||||
@updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if this.themeSettings}}
|
||||
{{#each this.settingGroups as |group|}}
|
||||
<div class="mt4 pl6 pt4 pr6">
|
||||
<button type="button" {{on "click" (fn this.toggleSection group.key)}} class="flex flex-row w-100">
|
||||
<span class="db tl flex-grow-1">{{svg-jar group.icon class="w4"}} {{group.name}}</span>
|
||||
<span class="db">{{svg-jar (if (set-has this.openSections group.key) "arrow-up-small" "arrow-down-small") class="w4"}}</span>
|
||||
{{#if this.themeSettings}}
|
||||
{{#each this.settingGroups as |group|}}
|
||||
<button type="button" {{on "click" (fn this.toggleSection group.key)}}>
|
||||
{{svg-jar group.icon class="w4"}} {{group.name}}
|
||||
{{!-- <span class="db">{{svg-jar (if (set-has this.openSections group.key) "arrow-up-small" "arrow-down-small") class="w4"}}</span> --}}
|
||||
</button>
|
||||
|
||||
{{#if (set-has this.openSections group.key)}}
|
||||
<div class="pt4">
|
||||
<div class="gh-nav-design-settings">
|
||||
<Settings::Design::ThemeSettingsForm
|
||||
@themeSettings={{group.settings}}
|
||||
@updatePreview={{perform this.themeManagement.updatePreviewHtmlTask}}
|
||||
/>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-nav-bottom">
|
||||
<LinkTo @route="settings.design.change-theme" class="gh-btn gh-btn-icon gh-btn-text"><span>{{svg-jar "settings"}} Change theme</span></LinkTo>
|
||||
<LinkTo @route="settings.design.change-theme">{{svg-jar "settings"}}Change theme</LinkTo>
|
||||
</div>
|
||||
</section>
|
||||
@ -21,7 +21,7 @@ export default class DesignMenuComponent extends Component {
|
||||
}, {
|
||||
key: 'post',
|
||||
name: 'Post',
|
||||
icon: 'house'
|
||||
icon: 'post'
|
||||
}];
|
||||
|
||||
constructor() {
|
||||
@ -43,7 +43,7 @@ export default class DesignMenuComponent extends Component {
|
||||
groups.push({
|
||||
key: 'site-wide',
|
||||
name: 'Site-wide',
|
||||
icon: 'house',
|
||||
icon: 'view-site',
|
||||
settings: siteWideSettings
|
||||
});
|
||||
}
|
||||
|
||||
@ -373,7 +373,7 @@
|
||||
.gh-nav-list button.main-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: color-mod(var(--middarkgrey) l(-10%));
|
||||
color: var(--darkgrey-l1);
|
||||
transition: none;
|
||||
font-weight: 400;
|
||||
padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
|
||||
|
||||
@ -1395,6 +1395,7 @@ p.theme-validation-details {
|
||||
.gh-nav-menu-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 7px;
|
||||
overflow: hidden;
|
||||
color: var(--black);
|
||||
font-size: 1.5rem;
|
||||
@ -1409,6 +1410,38 @@ p.theme-validation-details {
|
||||
fill: var(--black);
|
||||
}
|
||||
|
||||
.gh-nav-design .gh-nav-list button,
|
||||
.gh-nav-design .gh-nav-bottom a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: var(--darkgrey-l1);
|
||||
font-weight: 400;
|
||||
font-size: 1.45rem;
|
||||
border-radius: 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.gh-nav-design .gh-nav-list button {
|
||||
padding: 7px var(--mainmenu-padding) 7px calc(var(--mainmenu-padding) + 7px);
|
||||
}
|
||||
|
||||
.gh-nav-design .gh-nav-bottom svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 17px;
|
||||
}
|
||||
|
||||
.gh-nav-design .gh-nav-bottom svg path {
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
.gh-nav-design-settings {
|
||||
padding: 24px var(--mainmenu-padding) 32px calc(var(--mainmenu-padding) + 7px);
|
||||
}
|
||||
|
||||
.gh-theme-setting-title {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -1 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2.509 23.827c-.551 0-1.106-.048-1.65-.143-.275-.047-.499-.242-.585-.507-.086-.262-.02-.55.172-.75.008-.009 1.221-1.379 1.354-4.723-.025-1.18.45-2.369 1.303-3.239.853-.796 1.948-1.227 3.094-1.227.398 0 .793.052 1.175.155L17.561 1.409c.061-.071.123-.138.187-.203C18.414.54 19.299.174 20.241.174c.941 0 1.825.365 2.489 1.029.067.068.132.138.194.21.609.715.903 1.625.828 2.563-.075.938-.511 1.79-1.227 2.399L10.548 16.621c.376 1.482-.02 3.064-1.06 4.181-1.808 1.923-4.351 3.025-6.979 3.025zm-.24-1.504c.079.002.159.003.238.003 2.217 0 4.362-.929 5.885-2.55 1.067-1.145 1.066-2.941-.002-4.088-.564-.606-1.365-.953-2.196-.953-.762 0-1.488.285-2.044.804-.552.564-.867 1.363-.851 2.18-.088 2.236-.6 3.728-1.03 4.604zm6.597-8.37c.448.313.834.704 1.142 1.156l2.347-2.008-1.495-1.495-1.994 2.347zm4.633-1.831l8.052-6.888c.412-.351.662-.84.705-1.378.043-.538-.126-1.061-.476-1.472-.035-.042-.072-.082-.111-.12-.381-.381-.889-.591-1.429-.591-.541 0-1.048.21-1.429.591-.037.037-.073.076-.108.117l-6.868 8.078 1.664 1.663z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="a" d="M10.644 17.865c1.589-1.9.1-4.338 1.513-5.981a2.759 2.759 0 1 1 4.18 3.6 6.506 6.506 0 0 1-5.693 2.381Z"/>
|
||||
<path class="a" d="m16.62 12.277 6.232-8.253A2.038 2.038 0 1 0 19.4 1.88L14.871 11"/>
|
||||
<path class="a" d="M13.5 5.224H3.75a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3v-1.5"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 522 B |
@ -1 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>post</title><g fill="#000" fill-rule="nonzero"><path d="M14.5-.002h-12C1.086-.002.25.834.25 2.248v19.5c0 1.414.836 2.25 2.25 2.25h15c1.414 0 2.25-.836 2.25-2.25V5.131c0-.624-.233-1.175-.68-1.611L16.068.634c-.427-.417-.964-.636-1.567-.636zm-12 1.5h12c.21 0 .372.066.523.213l3.004 2.887c.154.15.223.314.223.533v16.617c0 .586-.164.75-.75.75h-15c-.586 0-.75-.164-.75-.75v-19.5c0-.586.164-.75.75-.75z"/><path d="M15 17.55c.414 0 .75.336.75.75 0 .38-.282.693-.648.743L15 19.05H4.75c-.414 0-.75-.336-.75-.75 0-.38.282-.693.648-.743l.102-.007H15zM15 13.55c.414 0 .75.336.75.75 0 .38-.282.693-.648.743L15 15.05H4.75c-.414 0-.75-.336-.75-.75 0-.38.282-.693.648-.743l.102-.007H15zM15 9.55c.414 0 .75.336.75.75 0 .38-.282.693-.648.743L15 11.05H4.75c-.414 0-.75-.336-.75-.75 0-.38.282-.693.648-.743l.102-.007H15zM15 5.55c.414 0 .75.336.75.75 0 .38-.282.693-.648.743L15 7.05H4.75c-.414 0-.75-.336-.75-.75 0-.38.282-.693.648-.743l.102-.007H15z"/></g></svg>
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22.5 21.75a1.5 1.5 0 0 1-1.5 1.5H3a1.5 1.5 0 0 1-1.5-1.5V2.25A1.5 1.5 0 0 1 3 .75h15.045a1.5 1.5 0 0 1 1.048.426l2.954 2.883a1.5 1.5 0 0 1 .453 1.074V21.75ZM6.047 8.25h12M6.047 12.75h12M6.047 17.25h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 385 B |
Loading…
Reference in New Issue
Block a user