Updated design settings page

This commit is contained in:
Sanne de Vries 2021-10-14 18:01:12 +02:00
parent 4684ee3cac
commit aeafe91ea1
3 changed files with 24 additions and 19 deletions

View File

@ -1532,8 +1532,14 @@ p.theme-validation-details {
margin-bottom: 1rem;
}
.gh-design-page-preview-mode,
.gh-design-page-preview-mode select {
height: 34px;
min-width: 128px;
}
.gh-design-page-preview-mode svg {
margin-top: -.1em;
}
.gh-design-preview-mode span {
@ -1616,7 +1622,7 @@ p.theme-validation-details {
margin: 0 0 24px;
}
.gh-theme-toolbar {
.gh-theme-browser {
position: relative;
width: 100%;
height: 28px;
@ -1625,7 +1631,7 @@ p.theme-validation-details {
border-radius: 3px 3px 0 0;
}
.gh-theme-toolbar-button {
.gh-theme-browser-button {
position: relative;
top: 11px;
display: block;
@ -1635,8 +1641,8 @@ p.theme-validation-details {
border-radius: 50%;
}
.gh-theme-toolbar-button::before,
.gh-theme-toolbar-button::after {
.gh-theme-browser-button::before,
.gh-theme-browser-button::after {
content: "";
position: absolute;
width: 6px;
@ -1645,11 +1651,11 @@ p.theme-validation-details {
border-radius: 50%;
}
.gh-theme-toolbar-button::before {
.gh-theme-browser-button::before {
left: 12px;
}
.gh-theme-toolbar-button::after {
.gh-theme-browser-button::after {
left: 24px;
}

View File

@ -18,8 +18,8 @@
<div class="theme-directory-labs">
{{#each this.marketplaceThemes as |theme|}}
<LinkTo @route="settings.design.change-theme.view" @model={{theme.name}} class="td-item">
<div class="gh-theme-toolbar">
<span class="gh-theme-toolbar-button"></span>
<div class="gh-theme-browser">
<span class="gh-theme-browser-button"></span>
</div>
<div class="td-item-screenshot-labs relative">
<img style="object-fit:contain;" src={{theme.image}} alt="{{theme.name}} Theme" />

View File

@ -2,17 +2,16 @@
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title">{{this.config.blogTitle}}</h2>
<section class="view-actions">
<div class="gh-contentfilter">
<span class="gh-select">
<OneWaySelect
@value={{this.themeManagement.previewType}}
@options={{this.themeManagement.availablePreviewTypes}}
@optionValuePath="name"
@optionLabelPath="label"
@optionTargetPath="name"
@update={{this.themeManagement.setPreviewType}}
/>
</span>
<div class="gh-select gh-design-page-preview-mode">
<OneWaySelect
@value={{this.themeManagement.previewType}}
@options={{this.themeManagement.availablePreviewTypes}}
@optionValuePath="name"
@optionLabelPath="label"
@optionTargetPath="name"
@update={{this.themeManagement.setPreviewType}}
/>
{{svg-jar "arrow-down-small"}}
</div>
<div class="gh-contentfilter gh-btn-group">