TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-28 22:43:30 +03:00
Code Issues Projects Releases Wiki Activity

Improved all done onboarding page to work better at smaller viewports

Browse Source 
refs: https://github.com/TryGhost/Team/issues/1376
This commit is contained in:
James Morris 2022-03-08 12:09:42 +00:00
parent c4c48d4104
commit 9bfc542400
2 changed files with 62 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
ghost/admin/app/styles/layouts/main.css
View File

@ -1969,7 +1969,15 @@ section.gh-ds h2 {
line-height: 1.45em;
}
.gh-done .gh-done-panel {
.gh-done .gh-setting-desc {
padding-right: 2rem;
}
.gh-done .gh-nav-design .gh-setting-action {
margin-bottom: 12px;
}
.gh-done-panel {
margin: 8px 0 24px;
padding: 52px var(--main-layout-area-padding) 16px;
border-radius: 0 0 var(--border-radius) var(--border-radius);
@ -1979,16 +1987,16 @@ section.gh-ds h2 {
align-items: flex-start;
}
.gh-done .gh-done-panel .gh-stack {
padding-bottom: 96px;
.gh-done-panel .gh-stack {
padding-bottom: 64px;
}
.gh-done .gh-setting-desc {
padding-right: 2rem;
}
.gh-done .gh-nav-design .gh-setting-action {
margin-bottom: 12px;
.gh-done-sidebar {
display: flex;
flex-direction: column;
flex: 0 0 420px;
overflow-x: hidden;
border-right: 1px solid #e6e9eb;
}
.gh-done-preview {
@ -1996,12 +2004,12 @@ section.gh-ds h2 {
padding: 48px;
}
.gh-done .gh-browserpreview-previewcontainer {
border-radius: 5px !important;
.gh-done-preview .gh-browserpreview-previewcontainer {
border-radius: 5px;
overflow: hidden;
}
.gh-done .gh-browserpreview-browser .tabs div {
.gh-done-preview .gh-browserpreview-browser .tabs div {
display: none;
}
@ -2024,6 +2032,47 @@ section.gh-ds h2 {
flex: 0 0 420px !important;
}
@media (max-width: 1000px) {
.gh-done-sidebar {
flex: 0 0 360px;
}
.gh-done-preview {
padding: 0;
}
.gh-done-preview .gh-browserpreview-previewcontainer {
box-shadow: none;
border-radius: 0 !important;
}
.gh-done-preview .tabs {
display: none;
}
}
@media (max-width: 800px) {
.gh-done-sidebar {
flex: 1;
}
.gh-done {
position: fixed;
top: 0;
left: 0;
z-index: 99999;
width: 100%;
height: 100%;
}
.gh-done .gh-done-preview {
display: none;
}
.gh-done .gh-done-panel {
justify-content: center;
}
}
/* Get started modal */
/* ---------------------------------------------------- */

2
ghost/admin/app/templates/setup/done.hbs
View File

@ -1,6 +1,6 @@
<div class="gh-flow gh-done">
<main class="flex flex-row h-100">
<div class="gh-nav gh-nav-contextual gh-nav-design">
<div class="gh-done-sidebar">
<div class="flex flex-column h-100">
<div class="gh-nav-body">
<div class="gh-done-panel">