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

Changed design for first step of the launch wizard

Browse Source
This commit is contained in:
Sanne de Vries 2021-01-26 16:40:14 +01:00 committed by Daniel Lockyer
parent f5372376f3
commit 76419917bf
6 changed files with 58 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
ghost/admin/app/components/gh-launch-wizard/customise-design.hbs
View File

@ -1,15 +1,15 @@
<div class="flex mb4 br3 bg-white">
<div class="w-30 pa4">
<h2>Customise</h2>
<div class="w-30 vh-75 mt12 ml20 pr6">
<h2>Customise your site</h2>
<div class="mb6" data-test-setting="icon">
<div class="mt10 mb10" data-test-setting="icon">
<GhUploader
@extensions={{this.iconExtensions}}
@paramsHash={{hash purpose="icon"}}
@onComplete={{action "imageUploaded" "icon"}}
as |uploader|
>
<div class="gh-setting-content pb2">
<div class="gh-setting-content pb4">
<div class="gh-setting-title">Publication icon</div>
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
{{#each uploader.errors as |error|}}
@ -21,10 +21,12 @@
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.icon}}
<img class="blog-icon" src="{{this.settings.icon}}" {{on "click" this.triggerFileDialog}} alt="icon" data-test-icon-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "icon")}} data-test-delete-image="icon">
<span>delete</span>
</button>
<div class="flex items-end">
<img class="blog-icon" src="{{this.settings.icon}}" {{on "click" this.triggerFileDialog}} alt="icon" data-test-icon-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "icon")}} data-test-delete-image="icon">
<span class="ml2">delete</span>
</button>
</div>
{{else}}
<button type="button" class="gh-btn" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
<span>Upload Image</span>
@ -37,13 +39,13 @@
</GhUploader>
</div>
<div class="mb6" data-test-setting="logo">
<div class="mb10" data-test-setting="logo">
<GhUploader
@extensions={{this.imageExtensions}}
@onComplete={{action "imageUploaded" "logo"}}
as |uploader|
>
<div class="gh-setting-content pb2">
<div class="gh-setting-content pb4">
<div class="gh-setting-title">Publication logo</div>
<div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
{{#each uploader.errors as |error|}}
@ -54,10 +56,12 @@
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.logo}}
<img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "logo")}} data-test-delete-image="logo">
<span>delete</span>
</button>
<div class="flex items-end">
<img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "logo")}} data-test-delete-image="logo">
<span class="ml2">delete</span>
</button>
</div>
{{else}}
<button type="button" class="gh-btn" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
<span>Upload Image</span>
@ -70,13 +74,13 @@
</GhUploader>
</div>
<div class="mb6" data-test-setting="coverImage">
<div class="mb12" data-test-setting="coverImage">
<GhUploader
@extensions={{this.imageExtensions}}
@onComplete={{action "imageUploaded" "coverImage"}}
as |uploader|
>
<div class="gh-setting-content pb2">
<div class="gh-setting-content pb4">
<div class="gh-setting-title">Publication cover</div>
<div class="gh-setting-desc">An optional large background image for your site</div>
{{#each uploader.errors as |error|}}
@ -102,11 +106,12 @@
</div>
</GhUploader>
</div>
<button type="button" class="gh-btn gh-btn-blue" {{on "click" @afterComplete}} data-test-button="wizard-next"><span>Next step</span></button>
</div>
<div class="relative flex-grow-1">
<GhSiteIframe class="br3 br--right" @guid={{this.previewGuid}}></GhSiteIframe>
<div class="relative flex-grow-1 mt12 ml12 mr20">
<GhSiteIframe class="gh-launch-wizard-preview" @guid={{this.previewGuid}}></GhSiteIframe>
</div>
</div>
<button type="button" class="right gh-btn gh-btn-blue" {{on "click" @afterComplete}} data-test-button="wizard-next"><span>Next</span></button>
</div>

23
ghost/admin/app/styles/layouts/fullscreen-wizard.css
View File

@ -6,6 +6,27 @@
left: 0;
z-index: 1000;
height: 100vh;
background: var(--whitegrey);
background: var(--white);
overflow: auto;
}
.gh-launch-wizard-step-indicator {
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0.1px;
color: var(--midgrey);
text-transform: uppercase;
}
.gh-launch-wizard-preview {
border-radius: 6px;
box-shadow:
0 0 0 1px rgba(0,0,0,0.02),
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
0 6.7px 5.3px rgba(0, 0, 0, 0.028),
0 12.5px 10px rgba(0, 0, 0, 0.035),
0 22.3px 17.9px rgba(0, 0, 0, 0.042),
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
0 100px 80px rgba(0, 0, 0, 0.07);
;
}

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

@ -227,8 +227,8 @@
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
color: var(--midgrey);
margin-top: 8px;
text-decoration: none;
font-size: 13px;
line-height: 10px;

10
ghost/admin/app/templates/launch.hbs
View File

@ -1,8 +1,10 @@
<div class="fullscreen-wizard-container">
<button type="button" class="close absolute top-6 right-6 w6" title="Close" {{on "click" this.close}} data-test-button="close-wizard">
{{svg-jar "close"}}
<span class="hidden">Close</span>
</button>
<div class="mt8 ml20 mr20 flex justify-between-l items-center">
<div class="ttu gh-launch-wizard-step-indicator">Step 1</div>
<button type="button" class="close gh-btn" title="Close" {{on "click" this.close}} data-test-button="close-wizard">
<span>Save and exit</span>
</button>
</div>
{{outlet}}
</div>

2
ghost/admin/app/templates/launch/customise-design.hbs
View File

@ -1,4 +1,4 @@
<section class="ma19">
<section class="mt8 bt b--whitegrey">
<GhLaunchWizard::CustomiseDesign
@afterComplete={{this.goToNext}}
/>

4
ghost/admin/app/templates/settings/design.hbs
View File

@ -34,7 +34,7 @@
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
{{/each}}
</div>
<div class="gh-setting-action gh-setting-action-smallimg">
<div class="gh-setting-action gh-setting-action-smallimg flex flex-column">
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.icon}}
@ -66,7 +66,7 @@
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
{{/each}}
</div>
<div class="gh-setting-action gh-setting-action-smallimg">
<div class="gh-setting-action gh-setting-action-smallimg flex flex-column">
{{#if uploader.isUploading}}
{{uploader.progressBar}}
{{else if this.settings.logo}}