Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added input groups with append value

Browse source 
no issue
- members price and email settings share the same pattern now: the uneditable parts of the input value is inside the input
This commit is contained in:
Peter Zimon 2019-10-16 21:35:06 +02:00
parent 4d60592cb7
commit e8b423b48d
3 changed files with 62 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ghost/admin/app/styles/layouts/labs.css
View file

@ -1,7 +1,3 @@
.gh-labs-price-label input {
padding-right: 96px;
}
.gh-labs-price-label input::-webkit-outer-spin-button, .gh-labs-price-label input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
@ -13,21 +9,6 @@
/* Firefox */
}
.gh-labs-price-label::after {
position: absolute;
top: 8px;
right: 12px;
color: var(--midlightgrey);
}
.gh-labs-monthly-price::after {
content: "USD/month";
}
.gh-labs-yearly-price::after {
content: "USD/year";
}
.gh-labs-toggle-wrapper {
padding-top: 6px;
padding-bottom: 6px;

51
ghost/admin/app/styles/patterns/forms.css
View file

@ -489,6 +489,57 @@ textarea {
margin-left: 10px;
}
/* Input appends
/* ---------------------------------------------------------- */
.gh-input-group {
display: flex;
align-items: center;
}
.gh-input-group .gh-input {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-right: 0;
}
.gh-input-group .gh-input:focus + .gh-input-append {
border-color: color-mod(var(--blue));
box-shadow: inset 0 0 0 1px var(--blue);
}
.gh-input-append {
display: block;
position: relative;
width: 100%;
height: 38px;
padding: 6px 12px;
border: var(--input-border);
background: var(--input-bg-color);
color: var(--darkgrey);
font-size: 1.5rem;
font-weight: 400;
user-select: text;
border-radius: var(--border-radius);
word-wrap: none;
border-left: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
flex: 1;
color: var(--midlightgrey);
}
.gh-input-append:before {
position: absolute;
content: "";
top: 1px;
left: -2px;
bottom: 1px;
width: 4px;
background: var(--input-bg-color);
}
/* FFF: Fucking Firefox Fixes
/* ---------------------------------------------------------- */

19
ghost/admin/app/templates/components/gh-members-lab-setting.hbs
View file

@ -68,24 +68,27 @@
<div class="w-50 mr3">
{{#gh-form-group}}
<label class="fw6 f8">Monthly price</label>
<div class="mt1 relative gh-labs-price-label gh-labs-monthly-price">
<div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
{{gh-text-input
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
type="number"
input=(action "setSubscriptionSettings" "month")
}}
value=(readonly subscriptionSettings.stripeConfig.plans.monthly.dollarAmount)
type="number"
input=(action "setSubscriptionSettings" "month")
}}
<span class="gh-input-append">USD/month</span>
</div>
{{/gh-form-group}}
</div>
<div class="w-50 ml2">
{{#gh-form-group class="description-container"}}
<label class="fw6 f8">Yearly price</label>
<div class="mt1 relative gh-labs-price-label gh-labs-yearly-price">
<div class="flex items-center justify-center mt1 gh-input-group gh-labs-price-label">
{{gh-text-input
value=(readonly subscriptionSettings.stripeConfig.plans.yearly.dollarAmount)
type="number"
input=(action "setSubscriptionSettings" "year")
}}
<span class="gh-input-append">USD/month</span>
</div>
{{/gh-form-group}}
</div>
@ -172,13 +175,13 @@
<div class="flex flex-column w-40 flex mt8">
{{#gh-form-group}}
<label class="fw6 f8">From Address</label>
<div class="flex items-center justify-center mt1">
<div class="flex items-center justify-center mt1 gh-input-group">
{{gh-text-input
value=(readonly subscriptionSettings.fromAddress)
input=(action "setSubscriptionSettings" "fromAddress")
class="w20"
}}
<span class="ml3"> @{{config.blogDomain}}</span>
<span class="gh-input-append"> @{{config.blogDomain}}</span>
</div>
<div class="f8 fw4 midgrey mt1">Your members will receive system emails from this address</div>
{{/gh-form-group}}