Added message box on Staff user page that indicates user is locked, and improved boxes naming and styling

This commit is contained in:
Sanne de Vries 2020-09-16 15:37:33 +02:00
parent fc3d83e869
commit 710d6178c1
9 changed files with 31 additions and 39 deletions

View File

@ -89,7 +89,7 @@
{{else}}
{{!-- Mail not sent yet --}}
{{#if this.mailgunError}}
<p class="gh-box gh-box-warning settings-menu-mailgun-warning">
<p class="gh-box gh-box-alert settings-menu-mailgun-alert">
{{svg-jar "info" class="w5 h5 fill-yellow nl1"}}
You need to configure Mailgun in <LinkTo @route="settings.labs" data-test-nav="labs">Labs → Members settings</LinkTo> to enable email newsletters.
</p>

View File

@ -318,15 +318,6 @@
margin-bottom: 4px;
}
.settings-menu-mailgun-warning .gh-box-info {
border-left: var(--yellow);
}
.settings-menu-mailgun-warning a {
text-decoration: underline;
color: color-mod(var(--yellow) l(-8%) s(+10%));
}
.settings-menu-email .disabled button,
.settings-menu-email .disabled input {
opacity: 0.5;

View File

@ -611,8 +611,8 @@
margin-bottom: 25px;
}
.gh-import-errors-warning {
border-left-color: var(--orange);
.gh-import-errors-alert {
border-left-color: color-mod(var(--yellow) l(-8%) s(+10%));
}
.gh-import-errors-title {
@ -623,8 +623,8 @@
color: var(--red);
}
.gh-import-errors-warning .gh-import-errors-title {
color: var(--orange);
.gh-import-errors-alert .gh-import-errors-title {
color: color-mod(var(--yellow) l(-8%) s(+10%));
}
.gh-import-error {

View File

@ -15,46 +15,45 @@
box-shadow: 0 6px 10px -8px rgba(0,0,0,.15)
}
.gh-box a {
color: var(--middarkgrey);
text-decoration: underline;
}
.gh-box svg:first-of-type {
position: absolute;
top: 13px;
left: 12px;
height: 2.1rem;
width: auto;
}
.gh-box-info {
.gh-box-tip {
border-left-color: var(--blue);
}
.gh-box-info svg:first-of-type {
.gh-box-tip svg:first-of-type {
top: 12px;
height: 2rem;
fill: var(--blue);
}
.gh-box-warning {
border-left-color: var(--yellow);
.gh-box-alert {
border-left-color: color-mod(var(--yellow) l(-8%) s(+10%));
}
.gh-box-warning svg:first-of-type {
fill: var(--yellow);
}
.gh-box-warning a {
color: var(--yellow);
.gh-box-alert svg:first-of-type {
top: 14px;
height: 1.8rem;
fill: color-mod(var(--yellow) l(-8%) s(+10%));
}
.gh-box-error {
border-left-color: var(--red);
color: var(--middarkgrey);
}
.gh-box-error svg:first-of-type {
fill: var(--red);
top: 14px;
height: 1.8rem;
}
.gh-box-error a {
color: var(--red);
fill: var(--red);
}
.gh-box-error-border {

View File

@ -18,7 +18,7 @@
<section class="view-container">
<form id="settings-code" novalidate="novalidate">
<fieldset>
<p class="gh-box gh-box-info">
<p class="gh-box gh-box-tip">
{{svg-jar "idea"}}
Ghost allows you to inject code into the top and bottom of your theme files without editing them. This allows for quick modifications to insert useful things like tracking codes and meta tags.
</p>

View File

@ -6,7 +6,7 @@
</GhCanvasHeader>
<section class="view-container settings-debug">
<p class="gh-box gh-box-info">{{svg-jar "idea"}}This is a testing ground for new or experimental features. They may change, break or inexplicably disappear at any time.</p>
<p class="gh-box gh-box-tip">{{svg-jar "idea"}}This is a testing ground for new or experimental features. They may change, break or inexplicably disappear at any time.</p>
{{#if this.session.user.isOwner}}
<div class="gh-setting-header">Members (BETA) </div>
@ -69,7 +69,7 @@
</div>
{{#if this.importErrors}}
<div class="gh-import-errors {{if this.importSuccessful "gh-import-errors-warning"}}" data-test-import-errors>
<div class="gh-import-errors {{if this.importSuccessful "gh-import-errors-alert"}}" data-test-import-errors>
<div class="gh-import-errors-title">
{{#if this.importSuccessful}}
Import successful with warnings

View File

@ -93,6 +93,10 @@
</section>
</GhCanvasHeader>
{{#if user.isLocked}}
<p class="gh-box gh-box-alert">{{svg-jar "info"}}This user account is locked. To sign in, ask this user to perform a password reset on their account.</p>
{{/if}}
{{!-- <div class="bg-"> --}}
<section class="br3 shadow-1 bg-grouped-table">
<div class="gm-main view-container settings-user">

View File

@ -1,3 +1 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M16 6.688c-4.75 0-8.688 3.875-8.688 8.625 0 3.813 2.438 7.125 6 8.25v1.125c0 0.375 0.313 0.625 0.688 0.625h4c0.375 0 0.688-0.25 0.688-0.625v-1.125c3.563-1.125 6-4.438 6-8.25 0-4.75-3.938-8.625-8.688-8.625zM17.813 22.438c-0.25 0.063-0.5 0.313-0.5 0.625v0.938h-2.625v-0.938c0-0.313-0.25-0.563-0.5-0.625-3.25-0.875-5.5-3.75-5.5-7.125 0-4 3.25-7.313 7.313-7.313s7.313 3.313 7.313 7.313c0 3.375-2.25 6.25-5.5 7.125zM16.688 29.313h-1.375c-0.375 0-0.625 0.313-0.625 0.688s0.25 0.688 0.625 0.688h1.375c0.375 0 0.625-0.313 0.625-0.688s-0.25-0.688-0.625-0.688zM18 26.688h-4c-0.375 0-0.688 0.25-0.688 0.625s0.313 0.688 0.688 0.688h4c0.375 0 0.688-0.313 0.688-0.688s-0.313-0.625-0.688-0.625zM16 5.313c0.375 0 0.688-0.25 0.688-0.625v-2.688c0-0.375-0.313-0.688-0.688-0.688s-0.688 0.313-0.688 0.688v2.688c0 0.375 0.313 0.625 0.688 0.625zM29.313 14.688h-2.625c-0.375 0-0.688 0.25-0.688 0.625s0.313 0.688 0.688 0.688h2.625c0.375 0 0.688-0.313 0.688-0.688s-0.313-0.625-0.688-0.625zM5.313 14.688h-2.625c-0.375 0-0.688 0.25-0.688 0.625s0.313 0.688 0.688 0.688h2.625c0.375 0 0.688-0.313 0.688-0.688s-0.313-0.625-0.688-0.625zM8 8.25c0.125 0.125 0.313 0.188 0.438 0.188 0.188 0 0.375-0.063 0.5-0.188 0.25-0.25 0.25-0.688 0-0.938l-2.813-2.813c-0.313-0.25-0.688-0.25-1 0-0.25 0.25-0.25 0.688 0 0.938zM23.563 8.438c0.125 0 0.313-0.063 0.438-0.188l2.813-2.813c0.313-0.25 0.313-0.688 0-0.938-0.25-0.25-0.625-0.25-0.938 0l-2.813 2.813c-0.25 0.25-0.25 0.688 0 0.938 0.125 0.125 0.313 0.188 0.5 0.188z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10.5 23.25a.75.75 0 010-1.5h3a.75.75 0 010 1.5h-3zM10.5 20.25a.75.75 0 01-.75-.75v-1.157a6.708 6.708 0 01-4.5-6.389C5.263 8.246 8.291 5.229 12 5.229a6.718 6.718 0 014.79 1.994 6.708 6.708 0 011.96 4.78 6.697 6.697 0 01-4.5 6.341V19.5a.75.75 0 01-.75.75h-3zm2.25-1.5v-.962a.75.75 0 01.564-.727 5.236 5.236 0 003.936-5.063 5.217 5.217 0 00-1.524-3.719 5.215 5.215 0 00-3.707-1.551l-.021-.375v.375a5.258 5.258 0 00-5.247 5.231 5.245 5.245 0 003.937 5.102.75.75 0 01.562.726v.962h1.5v.001zM12 3.75a.75.75 0 01-.75-.75V1.5a.75.75 0 011.5 0V3a.75.75 0 01-.75.75zM21 11.25a.75.75 0 010-1.5h1.5a.75.75 0 010 1.5H21zM1.5 12.75a.75.75 0 010-1.5H3a.75.75 0 010 1.5H1.5zM5.636 5.636a.743.743 0 01-.53-.22L4.045 4.355a.743.743 0 01-.22-.53c0-.2.078-.389.22-.53a.743.743 0 01.53-.22c.2 0 .389.078.53.22l1.061 1.061c.142.141.22.33.22.53s-.078.389-.22.53a.743.743 0 01-.53.22zM18.364 5.636a.743.743 0 01-.53-.22.743.743 0 01-.22-.53c0-.2.078-.389.22-.53l1.061-1.061a.744.744 0 011.06 0c.142.141.22.33.22.53s-.078.389-.22.53l-1.061 1.061a.743.743 0 01-.53.22z" fill="#000"/></svg>

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>information-circle</title><path d="M12 23.501c-6.341 0-11.5-5.159-11.5-11.5S5.659.501 12 .501s11.5 5.159 11.5 11.5-5.159 11.5-11.5 11.5zm0-22c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5z"/><path d="M13 17.505c-.827 0-1.5-.673-1.5-1.5v-6.5H10c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h1.5c.551 0 1 .449 1 1v6.5c0 .276.224.5.5.5h1.5c.276 0 .5.224.5.5s-.224.5-.5.5H13zM11.745 7.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75.75.336.75.75-.336.75-.75.75z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5 17.25A2.252 2.252 0 0111.25 15v-3.75h-.75a.75.75 0 010-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 010 1.5h-.75z"/><circle cx="11.625" cy="7.125" r="1.125"/><path d="M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z"/></svg>

Before

Width:  |  Height:  |  Size: 559 B

After

Width:  |  Height:  |  Size: 433 B