Updated Portal links page
no refs. - refined copy and design for Portal links page
This commit is contained in:
Peter Zimon
parent
071c9a9636
commit
920b0334ab
|
|
@ -1,92 +1,105 @@
|
|||
<div class="gh-portal-links-container">
|
||||
<div class="gh-portal-links-main">
|
||||
<p>Use these links or data attributes to show the various sections of members modal.</p>
|
||||
<h2>Links</h2>
|
||||
<p>Use these {{if isLink "links" "data attributes"}} to show pages of Portal.</p>
|
||||
<table class="gh-portal-links-table">
|
||||
<tr class="header">
|
||||
<td><h4>Section</h4></td>
|
||||
<td colspan="2">
|
||||
<td><h4>Page</h4></td>
|
||||
<td>
|
||||
<div class='toggle-header'>
|
||||
<h4>{{sectionHeaderLabel}}</h4>
|
||||
<h4 className='gh-portal-links-cell toggle' onclick={{action "toggleShowLinks"}}>{{this.toggleValue}}</h4>
|
||||
<h4 class='gh-portal-links-cell toggle' onclick={{action "toggleShowLinks"}}>{{this.toggleValue}}</h4>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pagename">Default</td>
|
||||
<td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal') 'data-portal'}} disabled="disabled" /></td>
|
||||
<td class='copy'>
|
||||
<button type="button" {{action (perform this.copyDefault (if isLink (concat this.siteUrl '/#/portal') 'data-portal'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
|
||||
{{#if this.copyDefault.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
<td class='page-url'>
|
||||
<div class="page-url-container">
|
||||
<input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal') 'data-portal'}} disabled="disabled" />
|
||||
<button type="button" {{action (perform this.copyDefault (if isLink (concat this.siteUrl '/#/portal') 'data-portal'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyDefault.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up</td>
|
||||
<td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'}} disabled="disabled" /></td>
|
||||
<td class='copy'>
|
||||
<button type="button" {{action (perform this.copySignup (if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
|
||||
{{#if this.copySignup.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
<td class='page-url'>
|
||||
<div class="page-url-container">
|
||||
<input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'}} disabled="disabled" />
|
||||
<button type="button" {{action (perform this.copySignup (if isLink (concat this.siteUrl '/#/portal/signup') 'data-portal="signup"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copySignup.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign in</td>
|
||||
<td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'}} disabled="disabled" /></td>
|
||||
<td class='copy'>
|
||||
<button type="button" {{action (perform this.copySignin (if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
|
||||
{{#if this.copySignin.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
<td class='page-url'>
|
||||
<div class="page-url-container">
|
||||
<input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'}} disabled="disabled" />
|
||||
<button type="button" {{action (perform this.copySignin (if isLink (concat this.siteUrl '/#/portal/signin') 'data-portal="signin"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copySignin.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Account home</td>
|
||||
<td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'}} disabled="disabled" /></td>
|
||||
<td class='copy'>
|
||||
<button type="button" {{action (perform this.copyAccountHome (if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
|
||||
{{#if this.copyAccountHome.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
<td class='page-url'>
|
||||
<div class="page-url-container">
|
||||
<input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'}} disabled="disabled" />
|
||||
<button type="button" {{action (perform this.copyAccountHome (if isLink (concat this.siteUrl '/#/portal/account') 'data-portal="account"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyAccountHome.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Account/Plans</td>
|
||||
<td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'}} disabled="disabled" /></td>
|
||||
<td class='copy'>
|
||||
<button type="button" {{action (perform this.copyAccountPlans (if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
|
||||
{{#if this.copyAccountPlans.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
<td class='page-url'>
|
||||
<div class="page-url-container">
|
||||
<input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'}} disabled="disabled" />
|
||||
<button type="button" {{action (perform this.copyAccountPlans (if isLink (concat this.siteUrl '/#/portal/account/plans') 'data-portal="account/plans"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyAccountPlans.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Account/Profile</td>
|
||||
<td class='page-url'><input value={{if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'}} disabled="disabled" /></td>
|
||||
<td class='copy'>
|
||||
<button type="button" {{action (perform this.copyAccountProfile (if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'))}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
|
||||
{{#if this.copyAccountProfile.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
|
||||
{{else}}
|
||||
Copy
|
||||
{{/if}}
|
||||
</button>
|
||||
<td class='page-url'>
|
||||
<div class="page-url-container">
|
||||
<input class="gh-input" value={{if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'}} disabled="disabled" />
|
||||
<button type="button" {{action (perform this.copyAccountProfile (if isLink (concat this.siteUrl '/#/portal/account/profile') 'data-portal="account/profile"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyAccountProfile.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ export default Component.extend({
|
|||
isLink: true,
|
||||
|
||||
toggleValue: computed('isLink', function () {
|
||||
return this.isLink ? 'Show Data Attributes' : 'Show Links';
|
||||
return this.isLink ? 'Data attributes' : 'Links';
|
||||
}),
|
||||
|
||||
sectionHeaderLabel: computed('isLink', function () {
|
||||
return this.isLink ? 'Link' : 'Data Attribute';
|
||||
return this.isLink ? 'Link' : 'Data attribute';
|
||||
}),
|
||||
|
||||
init() {
|
||||
|
|
|
|||
|
|
@ -345,35 +345,6 @@
|
|||
display: none
|
||||
}
|
||||
|
||||
.gh-portal-links-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr td {
|
||||
white-space: nowrap;
|
||||
padding: 4px 12px 4px 0;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr.header td {
|
||||
border-bottom: 1px solid var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr.header h4.toggle {
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr td:last-of-type {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr.header .toggle-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gh-portal-links-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -394,6 +365,70 @@
|
|||
box-shadow: 0 0 0 1px rgba(0,0,0,0.02), 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.028), 0 12.5px 10px rgba(0, 0, 0, 0.035), 0 22.3px 17.9px rgba(0, 0, 0, 0.042), 0 41.8px 33.4px rgba(0, 0, 0, 0.05), 0 100px 80px rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
|
||||
.gh-portal-links-main h2 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.gh-portal-links-main p {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.gh-portal-links-table {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr td {
|
||||
white-space: nowrap;
|
||||
padding: 10px 12px 0 0;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr.header td {
|
||||
border-bottom: 1px solid var(--lightgrey);
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr.header h4 {
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
color: var(--midlightgrey-d2);
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr.header .gh-portal-links-cell {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
text-transform: none;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr td:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr.header .toggle-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.gh-portal-links-table tr td.pagename {
|
||||
font-size: 1.4rem;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.gh-portal-links-table .page-url-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.gh-portal-links-table .page-url-container .gh-portal-setting-copy {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.gh-portal-custom-icon:hover .gh-portal-button-custom {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue