tqt
/
Ghost-Admin
mirror of https://github.com/TryGhost/Ghost-Admin.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Member details screen refinements

This commit is contained in:
Peter Zimon 2021-02-10 19:55:31 +01:00
parent c26bd7c986
commit ca36f6af6b
4 changed files with 74 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/components/gh-member-settings-form.hbs
View File

@ -132,21 +132,19 @@
{{#if this.canShowStripeInfo}}
<div class="gh-main-section-block">
<h4 class="gh-main-section-header small bn">Stripe info</h4>
<div class="gh-main-section-content grey">
<div class="gh-main-section-content padding-top-s grey">
<div class="gh-member-stripe">
{{#if this.isLoading}}
<div class="pa12 bg-grouped-table gh-content-box grey mt2">
<div class="flex justify-center flex-auto">
<div class="gh-loading-spinner"> </div>
</div>
<div class="flex justify-center flex-auto">
<div class="gh-loading-spinner"> </div>
</div>
{{else}}
<div class="bg-grouped-table gh-content-box grey mt2">
<div>
{{#if this.subscriptions}}
<div class="gh-member-header-stripeinfo">
<div class="flex items-center justify-between gh-btn-group w-100 ma5 mb0">
<button type="button" class="gh-btn gh-member-btn-stripe-toggle w-100 {{if (eq this.stripeDetailsType "subscription") "gh-btn-group-selected"}}" {{on "click" (fn this.changeStripeDetailsType "subscription")}}><span>Subscription</span></button>
<button type="button" class="gh-btn gh-member-btn-stripe-toggle w-100 {{if (eq this.stripeDetailsType "customer") "gh-btn-group-selected"}}" {{on "click" (fn this.changeStripeDetailsType "customer")}}><span>Customer</span></button>
<div class="gh-btn-tabs">
<button type="button" class="gh-btn gh-member-btn-stripe-toggle {{if (eq this.stripeDetailsType "subscription") "gh-btn-tab-selected"}}" {{on "click" (fn this.changeStripeDetailsType "subscription")}}><span>Subscription</span></button>
<button type="button" class="gh-btn gh-member-btn-stripe-toggle {{if (eq this.stripeDetailsType "customer") "gh-btn-tab-selected"}}" {{on "click" (fn this.changeStripeDetailsType "customer")}}><span>Customer</span></button>
</div>
</div>
{{#if (eq this.stripeDetailsType "subscription")}}
@ -156,7 +154,7 @@
</div>
{{/if}}
{{#each this.subscriptions as |subscription|}}
<section class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between">
<section class="gh-member-stripe-info flex flex-column flex-row-ns items-start justify-between">
<div class="flex items-start w-100">
<div class="flex-auto">
<table class="gh-member-stripe-table">
@ -235,7 +233,7 @@
{{/each}}
{{else}}
<section class="gh-member-stripe-info pa5 pb0 pt4 flex flex-column flex-row-ns items-start justify-between">
<section class="gh-member-stripe-info flex flex-column flex-row-ns items-start justify-between">
<div class="flex items-start w-100">
<div class="flex-auto">
<table class="gh-member-stripe-table">
@ -287,7 +285,7 @@
<p class="ma0 pa0 tc midgrey">Member doesn't have an active Stripe subscription</p>
</div>
{{/if}}
<div class="pa5 pb0 pt4 flex flex-column justify-between bt b--whitegrey">
<div class="flex flex-column justify-between bt b--whitegrey-d1">
<GhFormGroup @classNames="gh-members-comped-checkbox">
<div class="flex justify-between items-center gh-members-comped">
<div class="mr5">

23
app/styles/layouts/main.css
View File

@ -1056,7 +1056,6 @@
.gh-main-section-content {
display: grid;
grid-template-columns: 1fr;
margin-bottom: 3vw;
}
.gh-main-section-content.grey {
@ -1067,7 +1066,7 @@
.gh-main-section-content.columns-2 {
grid-template-columns: 1fr 1fr;
grid-column-gap: 80px;
grid-column-gap: 40px;
}
.gh-main-section-content.columns-3 {
@ -1130,11 +1129,18 @@
padding: 0 24px;
}
.gh-expandable-content .gh-main-section-block {
margin: 0;
padding: 0;
}
/* Grey background modifiers */
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red),
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red) {
background: var(--whitegrey-d2);
}
.gh-main-section-content.grey .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover,
.gh-expandable-content .gh-btn:not(.gh-btn-white):not(.gh-btn-green):not(.gh-btn-blue):not(.gh-btn-red):hover {
background: color-mod(var(--whitegrey-d2) l(-4%));
}
@ -1147,15 +1153,22 @@
background: color-mod(var(--whitegrey-d2) l(-1%));
}
.gh-main-section-content.grey .gh-btn-group {
background: var(--whitegrey-d1);
}
.gh-expandable-content input:not(:focus),
.gh-expandable-content .gh-input:not(:focus),
.gh-expandable-content .ember-power-select-multiple-trigger {
border-color: var(--whitegrey-d1);
}
.gh-expandable-content .gh-main-section-block {
margin: 0;
padding: 0;
.gh-main-section-content.grey .gh-btn-tabs {
border-bottom: 1px solid var(--whitegrey-d1);
}
.gh-main-section-content.grey .gh-btn-tabs:first-child {
margin-top: -8px;
}
/* Canvas */

25
app/styles/layouts/members.css
View File

@ -532,7 +532,7 @@ textarea.gh-member-details-textarea {
.gh-member-header-stripeinfo {
display: flex;
align-items: center;
justify-content: space-between;
justify-content: flex-start;
min-height: 24px;
}
@ -544,15 +544,6 @@ textarea.gh-member-details-textarea {
border-bottom: none;
}
.gh-member-btn-stripe-toggle {
box-shadow: 0 2px 5px -3px rgba(0,0,0,.12), 0 0 1px rgba(0, 0, 0, .13);
}
.gh-member-btn-stripe-toggle:hover {
box-shadow: 0 3px 5px -3px rgba(0,0,0,.13), 0 0 1px rgba(0, 0, 0, .13);
}
.gh-member-stripe-table {
width: 100%;
margin: 6px 0 12px;
@ -579,6 +570,7 @@ textarea.gh-member-details-textarea {
color: var(--midgrey-d1);
white-space: nowrap;
padding: 5px 12px 5px 0;
width: 170px;
}
.gh-member-stripe-data {
@ -612,7 +604,8 @@ textarea.gh-member-details-textarea {
.gh-members-subscribed-checkbox,
.gh-members-comped-checkbox {
max-width: 100%;
margin-top: 32px;
margin-top: 24px;
margin-bottom: 0;
}
.gh-new-member-avatar {
@ -621,11 +614,11 @@ textarea.gh-member-details-textarea {
.gh-member-cancels-on-label {
display: inline-block;
background: var(--lightgrey-d1);
background: color-mod(var(--purple) a(10%));
border-radius: 4px;
padding: 0px 5px;
margin: -2px 0 -2px -5px;
color: var(--darkgrey);
color: var(--purple);
font-size: 1.3rem;
font-weight: 400;
}
@ -636,12 +629,6 @@ textarea.gh-member-details-textarea {
margin-right: 6px;
}
.gh-member-btn-cancelsub span,
.gh-member-btn-contsub span {
height: 25px;
line-height: 25px;
}
.gh-member-btn-contsub {
border-color: var(--blue);
box-shadow: none;

42
app/styles/patterns/buttons.css
View File

@ -382,7 +382,8 @@ Usage: CTA buttons grouped together horizontally.
*/
.gh-btn-group {
border-radius: 0;
display: flex;
align-items: center;
background: var(--whitegrey-l1);
border-radius: 3px;
line-height: 0;
@ -405,11 +406,11 @@ Usage: CTA buttons grouped together horizontally.
line-height: 30px;
border-radius: 2px;
background: transparent !important;
font-weight: 500 !important;
}
.gh-btn-group .gh-btn-group-selected span {
color: var(--black);
font-weight: 600;
padding-left: 12px;
padding-right: 12px;
background: var(--white) !important;
@ -439,6 +440,43 @@ Usage: CTA buttons grouped together horizontally.
color: var(--blue);
}
/* Tab buttons */
/* ---------------------------------------------------------- */
.gh-btn-tabs {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
border-bottom: 1px solid var(--whitegrey);
}
.gh-btn-tabs .gh-btn {
background: none !important;
border-radius: 0;
margin-right: 20px;
border-bottom: 1px solid transparent;
}
.gh-btn-tabs .gh-btn span {
background: none !important;
border-radius: 0;
padding: 0;
color: var(--midgrey);
font-weight: 500 !important;
}
.gh-btn-tabs .gh-btn span:hover {
color: var(--darkgrey);
}
.gh-btn-tabs .gh-btn-tab-selected {
border-bottom-color: var(--black);
}
.gh-btn-tabs .gh-btn-tab-selected span {
color: var(--black);
}
/* Spin Buttons!
/* ---------------------------------------------------------- */