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

View File

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

View File

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