mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-20 22:42:53 -05:00
Added responsive styles for Explore screen
no issue The submit button was not reachable on mobile devices. This commit adds responsive styles for the majority of mobile devices.
This commit is contained in:
Aileen Nowak
Aileen Booker
parent
342ced452e
commit
036cf865d0
2 changed files with 87 additions and 37 deletions
|
|
@ -4,38 +4,43 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
z-index: 10000;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, var(--white) 0%, #E1E1E1 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.explore-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.explore-close svg {
|
||||
.explore-close a {
|
||||
color: var(--middarkgrey);
|
||||
}
|
||||
|
||||
.explore-close a svg {
|
||||
stroke: var(--middarkgrey);
|
||||
width: 18px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.explore-close svg path {
|
||||
.explore-close a svg path {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.explore-close:hover svg {
|
||||
.explore-close a:hover svg {
|
||||
stroke: var(--darkgrey);
|
||||
}
|
||||
|
||||
.explore-container {
|
||||
.explore-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 14rem 2vmin 4vmin;
|
||||
min-height: 100%;
|
||||
padding: 8vmin 2vmin 4vmin;
|
||||
}
|
||||
|
||||
.explore-header {
|
||||
|
|
@ -119,3 +124,46 @@
|
|||
margin-left: 0.1em;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.explore-content {
|
||||
padding: 2vmin;
|
||||
}
|
||||
.explore-header {
|
||||
margin-top: 10vmin;
|
||||
}
|
||||
.explore-header svg {
|
||||
width: 7rem;
|
||||
}
|
||||
.explore-header h1 {
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
.explore-api {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.explore-permissions {
|
||||
padding: 2rem 2.5rem;
|
||||
}
|
||||
.explore-permissions p {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.explore-header h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
.explore-api {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.explore-permissions div:not(:last-of-type) {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.explore-permissions > div span {
|
||||
padding-right: 12px;
|
||||
}
|
||||
.explore-permissions > div span svg {
|
||||
width: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,34 @@
|
|||
<div class="explore fullscreen-explore-container">
|
||||
<div class="relative">
|
||||
<LinkTo class="explore-close" data-test-button="close-explore" @route="dashboard">
|
||||
<div class="explore-close">
|
||||
<LinkTo data-test-button="close-explore" @route="dashboard">
|
||||
{{svg-jar "close"}}<span class="hidden">Close</span>
|
||||
</LinkTo>
|
||||
<div class="explore-container">
|
||||
<div class="explore-header">
|
||||
{{svg-jar "ghost-orb" alt="Ghost" class="w25 v-mid"}}
|
||||
<h1>Connect to Ghost Explore.</h1>
|
||||
<p class="explore-api">{{this.apiUrl}}</p>
|
||||
</div>
|
||||
<div class="explore-permissions">
|
||||
<div>
|
||||
<span>{{svg-jar "check-circle" class="w6 v-mid" alt="checkmark"}}</span>
|
||||
<p>Give read-only access to your site to create the Explore directory posting.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{svg-jar "check-circle" class="w6 v-mid" alt="checkmark"}}</span>
|
||||
<p>You will be able to choose what data is publicly visible, or hidden.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{svg-jar "check-circle" class="w6 v-mid" alt="checkmark"}}</span>
|
||||
<p>Your site will be ranked and promoted to across the entire Ghost ecosystem.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-content">
|
||||
|
||||
<button type="button" class="gh-btn gh-btn-black gh-btn-large gh-btn-icon-right" {{on "click" this.submitExploreSite}} data-test-button="submit-explore">
|
||||
<span>Connect data & edit listing {{svg-jar "arrow-right-tail"}}</span>
|
||||
</button>
|
||||
<div class="explore-header">
|
||||
{{svg-jar "ghost-orb" alt="Ghost" class="w25 v-mid"}}
|
||||
<h1>Connect to Ghost Explore.</h1>
|
||||
<p class="explore-api">{{this.apiUrl}}</p>
|
||||
</div>
|
||||
|
||||
<div class="explore-permissions">
|
||||
<div>
|
||||
<span>{{svg-jar "check-circle" class="w6 v-mid" alt="checkmark"}}</span>
|
||||
<p>Give read-only access to your site to create the Explore directory posting.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{svg-jar "check-circle" class="w6 v-mid" alt="checkmark"}}</span>
|
||||
<p>You will be able to choose what data is publicly visible, or hidden.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>{{svg-jar "check-circle" class="w6 v-mid" alt="checkmark"}}</span>
|
||||
<p>Your site will be ranked and promoted to across the entire Ghost ecosystem.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="gh-btn gh-btn-black gh-btn-large gh-btn-icon-right" {{on "click" this.submitExploreSite}} data-test-button="submit-explore">
|
||||
<span>Connect data & edit listing {{svg-jar "arrow-right-tail"}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue