Skip to content

Commit

Permalink
Closes #322: Feature request: Clickable logo that points to specific url
Browse files Browse the repository at this point in the history
Add "Return to website" link to the top right that leads to `info.contacts.url` if any.
Increase padding top for `.api-info-wrapper` when left sidebar is hidding to avoid header overlaying by top menu.
  • Loading branch information
khorolets committed Aug 16, 2017
1 parent 86b4db4 commit 51b5626
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 1 deletion.
1 change: 1 addition & 0 deletions lib/components/ApiInfo/api-info.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<div class="api-info-wrapper">
<a *ngIf="info.contact.url" href="{{info.contact.url}}" class="go-back-link">Return to website</a>
<h1>{{info.title}} <span class="api-info-version">({{info.version}})</span></h1>
<p class="download-openapi" *ngIf="specUrl">
Download OpenAPI specification:
Expand Down
14 changes: 14 additions & 0 deletions lib/components/ApiInfo/api-info.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,24 @@
padding: $section-spacing;
width: 60%;

.go-back-link {
float: right;
margin-top: -25px;

@media (max-width: $side-menu-mobile-breakpoint) {
margin-top: 0;
float: none;
display: block;
text-align: center;
}
}

@media (max-width: $right-panel-squash-breakpoint) {
width: 100%;
}
@media (max-width: $side-menu-mobile-breakpoint) {
padding-top: $section-spacing + 20px;
}
}

.openapi-button {
Expand Down
5 changes: 4 additions & 1 deletion lib/components/ApiLogo/api-logo.html
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
<img *ngIf="logo.imgUrl" [attr.src]="logo.imgUrl" [ngStyle]="{'background-color': logo.bgColor}">
<a *ngIf="logo.url" href="{{logo.url}}">
<img *ngIf="logo.imgUrl" [attr.src]="logo.imgUrl" [ngStyle]="{'background-color': logo.bgColor}">
</a>
<img *ngIf="logo.imgUrl && !logo.url" [attr.src]="logo.imgUrl" [ngStyle]="{'background-color': logo.bgColor}">
3 changes: 3 additions & 0 deletions lib/components/ApiLogo/api-logo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ export class ApiLogo extends BaseComponent implements OnInit {

init() {
let logoInfo = this.componentSchema.info['x-logo'];
if ('url' in this.componentSchema.info['contact']) {
this.logo.url = this.componentSchema.info['contact']['url'];
}
if (!logoInfo) return;
this.logo.imgUrl = logoInfo.url;
this.logo.bgColor = logoInfo.backgroundColor || 'transparent';
Expand Down

0 comments on commit 51b5626

Please sign in to comment.