Updated Portal preview area tabs

no refs.
- added active style to Portal settings preview area
This commit is contained in:
Peter Zimon 2020-07-16 16:37:54 +02:00
parent 9102f3d51a
commit 058193f9e4
2 changed files with 20 additions and 12 deletions

View File

@ -5,7 +5,7 @@
<fieldset class="gh-portal-settings-form">
<div class="gh-portal-setting-section divider-top">
<h3 class="gh-portal-setting-sectionheading">Singup options</h3>
<GhFormGroup @classNames="gh-members-subscribed-checkbox pb4 mb0">
<GhFormGroup @classNames="gh-members-subscribed-checkbox pb5 mb0">
<div class="flex justify-between items-center">
<div class="mr3">
<h4 class="gh-portal-setting-title">Display name in signup form</h4>
@ -150,7 +150,7 @@
</GhFormGroup>
{{#if this.settings.portalButton}}
<div class="mt5">
<GhFormGroup class="space-l">
<GhFormGroup @classNames="space-l">
<h4 class="gh-portal-setting-title mb1">Portal button style</h4>
<span
class="gh-select mt2"
@ -170,7 +170,7 @@
</span>
</GhFormGroup>
{{#if showIconSetting}}
<GhFormGroup class="space-l">
<GhFormGroup @classNames="space-l">
<h4 class="gh-portal-setting-title">Icon</h4>
<GhUploader
@extensions={{this.iconExtensions}}
@ -179,7 +179,7 @@
as
|uploader|
>
<div class="flex items-center justify-between mt2 br3 ba b--whitegrey">
<div class="flex items-center justify-between mt2 br3 ba b--whitegrey bg-white">
<div class="gh-portal-settings-icons">
{{#each this.defaultButtonIcons as |imgIcon| }}
<span class="gh-portal-button-icon {{if (eq this.buttonIcon imgIcon) "selected-icon"}}" onclick={{action "selectDefaultIcon" imgIcon}}>{{svg-jar imgIcon}}</span>
@ -216,7 +216,7 @@
{{/if}}
</div>
{{#if showButtonTextSetting}}
<GhFormGroup class="space-l">
<GhFormGroup @classNames="space-l">
<h4 class="gh-portal-setting-title">Signup button text</h4>
<div class="flex items-center mt2">
@ -260,11 +260,11 @@
</div>
<div class="gh-portal-settings-main">
<ul class="gh-portal-settings-maintabs">
<li><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</a></li>
<li><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</a></li>
<li><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></li>
<li class="{{if (eq this.page "signup") "active"}}"><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</a></li>
<li class="{{if (eq this.page "accountHome") "active"}}"><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</a></li>
<li class="{{if (eq this.page "links") "active"}}"><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</a></li>
</ul>
<div style="position: relative;flex-grow: 1">
<div class="relative flex-grow-1">
<GhSiteIframe
@guid="test-site-portal"
@src={{this.portalPreviewUrl}}

View File

@ -60,7 +60,7 @@
}
.gh-portal-settings-sidebar {
padding: 28px;
padding: 22px 28px 28px;
}
.gh-portal-settings-form {
@ -132,7 +132,7 @@
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 28px;
padding: 17px 28px 28px;
border-left: 1px solid var(--whitegrey);
}
@ -146,7 +146,7 @@
display: flex;
align-items: center;
padding: 0;
margin: 4px 0 16px;
margin: 4px 0 20px;
}
.gh-portal-settings-maintabs li {
@ -158,6 +158,12 @@
display: inline-block;
padding: 4px 12px;
margin: -4px 0;
font-weight: 500;
color: var(--midgrey);
}
.gh-portal-settings-maintabs li.active a {
color: var(--blue);
}
.gh-portal-settings-maintabs li:first-of-type a {
@ -228,6 +234,8 @@
.gh-portal-setting-copy {
position: absolute;
display: flex;
align-items: center;
top: 2px;
right: 2px;
height: 34px;