Make right panel fill all page

This commit is contained in:
Roman Hotsiy 2016-03-14 22:27:07 +02:00
parent a0a209820f
commit ca2c01b8ac
4 changed files with 43 additions and 51 deletions

View File

@ -1,15 +1,17 @@
<h1 class="api-info-header">{{data.title}} ({{data.version}})</h1> <div>
<p *ngIf="data.description" innerHtml="{{data.description | marked}}"> </p> <h1 class="api-info-header">{{data.title}} ({{data.version}})</h1>
<p> <p *ngIf="data.description" innerHtml="{{data.description | marked}}"> </p>
<!-- TODO: create separate components for contact and license ? --> <p>
<span *ngIf="data.contact"> Contact: <!-- TODO: create separate components for contact and license ? -->
<a *ngIf="data.contact.url" href="{{data.contact.url}}"> <span *ngIf="data.contact"> Contact:
{{data.contact.name || data.contact.url}}</a> <a *ngIf="data.contact.url" href="{{data.contact.url}}">
<a *ngIf="data.contact.email" href="mailto:{{data.contact.email}}"> {{data.contact.name || data.contact.url}}</a>
{{data.contact.email}}</a> <a *ngIf="data.contact.email" href="mailto:{{data.contact.email}}">
</span> {{data.contact.email}}</a>
<span *ngIf="data.license"> License: </span>
<a *ngIf="data.license.url" href="{{data.license.url}}"> {{data.license.name}} </a> <span *ngIf="data.license"> License:
<span *ngIf="!data.license.url"> {{data.license.name}} </span> <a *ngIf="data.license.url" href="{{data.license.url}}"> {{data.license.name}} </a>
</span> <span *ngIf="!data.license.url"> {{data.license.name}} </span>
</p> </span>
</p>
</div>

View File

@ -3,3 +3,7 @@
.api-info-header { .api-info-header {
font-weight: normal; font-weight: normal;
} }
> div {
width: 60%;
}

View File

@ -5,6 +5,7 @@
padding: 40px; padding: 40px;
box-sizing: border-box; box-sizing: border-box;
background-color: white; background-color: white;
width: 60%;
} }
.tag-info:after, .tag-info:before { .tag-info:after, .tag-info:before {
@ -22,20 +23,3 @@
display: block; display: block;
position: relative;; position: relative;;
} }
.methods:before {
content: "";
background: $samples-panel-bg-color;
height: 100%;
width: $samples-panel-width;
top: 0;
right: 0;
position: absolute;
z-index: -1;
}
@media (max-width: 1100px) {
.methods:before {
display: none;
}
}

View File

@ -55,28 +55,30 @@ api-logo {
} }
#api-content { #api-content {
margin-left: $side-bar-width; margin-left: $side-bar-width;
@media (max-width: $side-menu-mobile-breakpoint) { position: relative;
padding-top: 3em; @media (max-width: $side-menu-mobile-breakpoint) {
margin-left: 0; padding-top: 3em;
} margin-left: 0;
}
} }
#api-content:after { #api-content:before {
content: ""; content: "";
position: absolute;; background: $samples-panel-bg-color;
left:0; height: 100%;
right: 0; width: $samples-panel-width;
top: 0; top: 0;
bottom: 0; right: 0;
background-color: black; position: absolute;
opacity: 0.5; z-index: -1;
transition: all 0.3s ease; }
@media (max-width: 1100px) {
#api-content:before {
display: none; display: none;
} }
#api-content.menu-opened:after {
display: block;;
} }
/* global redoc styles */ /* global redoc styles */