mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-24 03:14:03 +03:00
Fix a wholelotta setup-screen bullshit
Merging setup screen into the new app wrapper had some knock-on effects due to new flexbox parent elements. As a result things were vertically collapsing in unexpected ways on narrow viewports. This is cleaned up here, with some other minor visual bugfixes.
This commit is contained in:
parent
22bbc3bd75
commit
f86ff53a84
@ -5,10 +5,12 @@
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.gh-flow-head {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 4vh;
|
||||
@ -17,6 +19,7 @@
|
||||
|
||||
.gh-flow-content-wrap {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -103,8 +106,9 @@
|
||||
}
|
||||
|
||||
.gh-flow-nav .step i {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
font-size: 26px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.gh-flow-nav .active ~ li:not(divider) .step {
|
||||
@ -143,8 +147,9 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
.gh-flow-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
color: var(--midgrey);
|
||||
@ -187,20 +192,32 @@
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.gh-flow-content img {
|
||||
max-width: 100%;
|
||||
.gh-flow-content .gh-flow-screenshot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
height: 45vh;
|
||||
}
|
||||
|
||||
.gh-flow-content .gh-flow-screenshot {
|
||||
.gh-flow-content .gh-flow-screenshot img {
|
||||
position: relative;
|
||||
left: -38px;
|
||||
left: -3%;
|
||||
flex-shrink: 0;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.gh-flow-content .gh-flow-screenshot {
|
||||
.gh-flow-content .gh-flow-screenshot img {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.gh-flow-content .gh-flow-screenshot {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-flow-content .btn {
|
||||
display: block;
|
||||
@ -220,6 +237,7 @@
|
||||
margin: 70px auto 30px;
|
||||
padding: 50px 40px 25px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
border: #dae1e3 1px solid;
|
||||
background: #f8fbfd;
|
||||
border-radius: 5px;
|
||||
@ -353,6 +371,19 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.gh-flow-invite label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-flow-invite label i {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.gh-flow-content .gh-flow-invite label i {
|
||||
display: none;
|
||||
@ -360,23 +391,16 @@
|
||||
}
|
||||
|
||||
.gh-flow-content .gh-flow-faces {
|
||||
margin-bottom: 3vw;
|
||||
margin-bottom: 2vw;
|
||||
}
|
||||
|
||||
.gh-flow-content textarea {
|
||||
margin-bottom: 40px;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.gh-flow-content textarea {
|
||||
margin-bottom: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
.gh-flow-content .response {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
@ -4,9 +4,11 @@
|
||||
<p>So far there have been <em>{{model.count}}</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
|
||||
</header>
|
||||
|
||||
<img class="gh-flow-screenshot" src="{{gh-path 'admin' 'img/install-welcome.png'}}" alt="Ghost screenshot" />
|
||||
<figure class="gh-flow-screenshot">
|
||||
<img src="{{gh-path 'admin' 'img/install-welcome.png'}}" alt="Ghost screenshot" />
|
||||
</figure>
|
||||
|
||||
{{#link-to "setup.two" classNames="btn btn-green btn-lg"}}
|
||||
Create your account <i class="icon-chevron"></i>
|
||||
{{/link-to}}
|
||||
</section>
|
||||
</section>
|
||||
|
@ -8,7 +8,7 @@
|
||||
|
||||
<form class="gh-flow-invite">
|
||||
<label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
|
||||
{{textarea name="users" placeholder="john@example.com
|
||||
{{textarea class="gh-input" name="users" placeholder="john@example.com
|
||||
sally.sanders@example.com" value=users}}
|
||||
</form>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user