Updated Portal links page

no refs.
- refined copy and design for Portal links page
This commit is contained in:
Peter Zimon 2020-08-26 17:10:19 +02:00
parent 20bcfd4839
commit 8674e8f32b
3 changed files with 137 additions and 89 deletions

View File

@ -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>

View File

@ -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() {

View File

@ -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;
}