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"> <fieldset class="gh-portal-settings-form">
<div class="gh-portal-setting-section divider-top"> <div class="gh-portal-setting-section divider-top">
<h3 class="gh-portal-setting-sectionheading">Singup options</h3> <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="flex justify-between items-center">
<div class="mr3"> <div class="mr3">
<h4 class="gh-portal-setting-title">Display name in signup form</h4> <h4 class="gh-portal-setting-title">Display name in signup form</h4>
@ -150,7 +150,7 @@
</GhFormGroup> </GhFormGroup>
{{#if this.settings.portalButton}} {{#if this.settings.portalButton}}
<div class="mt5"> <div class="mt5">
<GhFormGroup class="space-l"> <GhFormGroup @classNames="space-l">
<h4 class="gh-portal-setting-title mb1">Portal button style</h4> <h4 class="gh-portal-setting-title mb1">Portal button style</h4>
<span <span
class="gh-select mt2" class="gh-select mt2"
@ -170,7 +170,7 @@
</span> </span>
</GhFormGroup> </GhFormGroup>
{{#if showIconSetting}} {{#if showIconSetting}}
<GhFormGroup class="space-l"> <GhFormGroup @classNames="space-l">
<h4 class="gh-portal-setting-title">Icon</h4> <h4 class="gh-portal-setting-title">Icon</h4>
<GhUploader <GhUploader
@extensions={{this.iconExtensions}} @extensions={{this.iconExtensions}}
@ -179,7 +179,7 @@
as as
|uploader| |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"> <div class="gh-portal-settings-icons">
{{#each this.defaultButtonIcons as |imgIcon| }} {{#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> <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}} {{/if}}
</div> </div>
{{#if showButtonTextSetting}} {{#if showButtonTextSetting}}
<GhFormGroup class="space-l"> <GhFormGroup @classNames="space-l">
<h4 class="gh-portal-setting-title">Signup button text</h4> <h4 class="gh-portal-setting-title">Signup button text</h4>
<div class="flex items-center mt2"> <div class="flex items-center mt2">
@ -260,11 +260,11 @@
</div> </div>
<div class="gh-portal-settings-main"> <div class="gh-portal-settings-main">
<ul class="gh-portal-settings-maintabs"> <ul class="gh-portal-settings-maintabs">
<li><a href="#" {{action "switchPreviewPage" "signup"}} data-test-link="switch-portal-preview-page">Signup</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><a href="#" {{action "switchPreviewPage" "accountHome"}} data-test-link="switch-portal-preview-page">Account</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><a href="#" {{action "switchPreviewPage" "links"}} data-test-link="switch-portal-preview-page">Links</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> </ul>
<div style="position: relative;flex-grow: 1"> <div class="relative flex-grow-1">
<GhSiteIframe <GhSiteIframe
@guid="test-site-portal" @guid="test-site-portal"
@src={{this.portalPreviewUrl}} @src={{this.portalPreviewUrl}}

View File

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