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

Fixed Stripe info box responsive behavior

Browse Source 
no issue
This commit is contained in:
Peter Zimon 2019-10-18 11:44:45 +02:00
parent 78351fe168
commit aee7430263
2 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
ghost/admin/app/styles/layouts/labs.css
View File

@ -52,6 +52,26 @@
opacity: 0.25; opacity: 0.25;
} }
.gh-members-stripe-info-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.gh-members-stripe-info-header h4 {
font-weight: 600;
margin: 0;
padding: 0;
}
.gh-members-stripe-info {
border-radius: 0.9rem;
border: 1px solid var(--whitegrey);
background: var(--whitegrey-l2);
padding: 12px;
width: 380px;
}
.gh-members-stripe-badge { .gh-members-stripe-badge {
width: 180px; width: 180px;
} }
@ -60,6 +80,29 @@
color: #555ABF; color: #555ABF;
} }
@media (max-width: 500px) {
.gh-members-stripe-info-header {
flex-direction: column;
align-items: stretch;
}
.gh-members-stripe-info-header h4 {
order: 2;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--whitegrey);
}
.gh-members-stripe-badge {
order: 1;
/* margin: -10px 0 0 -10px; */
}
.gh-members-stripe-info {
width: 100%;
}
}
.gh-labs-disabled .for-checkbox label, .gh-labs-disabled .for-checkbox label,
.gh-labs-disabled .for-checkbox .input-toggle-component, .gh-labs-disabled .for-checkbox .input-toggle-component,
.gh-labs-disabled .for-switch label, .gh-labs-disabled .for-switch label,

14
ghost/admin/app/templates/components/gh-members-lab-setting.hbs
View File

@ -12,8 +12,8 @@
</div> </div>
{{#liquid-if membersStripeOpen}} {{#liquid-if membersStripeOpen}}
<div class="flex flex-column flex-row-ns items-start justify-between mb4 mt6"> <div class="flex flex-column flex-row-l items-start justify-between mb4 mt6">
<div class="w-100 w-50-ns"> <div class="w-100 w-50-l">
<div class="mb4"> <div class="mb4">
<label class="fw6 f8">Stripe Publishable key</label> <label class="fw6 f8">Stripe Publishable key</label>
{{gh-text-input {{gh-text-input
@ -23,7 +23,7 @@
class="mt1 password" class="mt1 password"
}} }}
</div> </div>
<div> <div class="nudge-top--3">
<label class="fw6 f8 mt4">Stripe Secret key</label> <label class="fw6 f8 mt4">Stripe Secret key</label>
{{gh-text-input {{gh-text-input
type="password" type="password"
@ -36,10 +36,10 @@
</a> </a>
</div> </div>
</div> </div>
<div class="w-100 w-50-m w-third-l ml5 mt6"> <div class="ml0 ml5-l mt6">
<div class="br4 ba b--whitegrey bg-whitegrey-l2 pa4"> <div class="gh-members-stripe-info">
<div class="flex items-center justify-between"> <div class="gh-members-stripe-info-header">
<h4 class="f6 ma0 pa0">How you get paid</h4> <h4>How you get paid</h4>
{{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}} {{svg-jar "stripe-verified-partner-badge" class="gh-members-stripe-badge"}}
</div> </div>
<p class="f8 mt2 mb0"> <p class="f8 mt2 mb0">