Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-07-12 17:22:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: long paths break EndpointLink ui

Browse Source
This commit is contained in:
Roman Hotsiy 2017-02-26 01:25:53 +02:00
parent 7031176330
commit 8472045945
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/components/EndpointLink/endpoint-link.html
View File

@ -3,10 +3,10 @@
<span><!-- <span><!--
--><span class="method-api-url-path">{{path}}</span><!-- --><span class="method-api-url-path">{{path}}</span><!--
--></span> --></span>
<svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<polygon fill="white" points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
</svg>
</div> </div>
<svg class="expand-icon" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<polygon fill="white" points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
</svg>
<div class="servers-overlay" [@overlayExpand]="expanded ? 'expanded' : 'collapsed'"> <div class="servers-overlay" [@overlayExpand]="expanded ? 'expanded' : 'collapsed'">
<div *ngFor="let server of servers" class="server-item"> <div *ngFor="let server of servers" class="server-item">
<div class="description" [innerHtml]="server.description | marked"></div> <div class="description" [innerHtml]="server.description | marked"></div>

9
lib/components/EndpointLink/endpoint-link.scss
View File

@ -7,13 +7,14 @@
} }
.method-endpoint { .method-endpoint {
padding: 10px 20px; padding: 10px 30px 10px 20px;
border-radius: $border-radius*2; border-radius: $border-radius*2;
background-color: darken($black, 2%); background-color: darken($black, 2%);
display: block; display: block;
font-weight: $light; font-weight: $light;
white-space: nowrap; white-space: nowrap;
overflow-x: auto; overflow-x: hidden;
text-overflow: ellipsis;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -82,10 +83,12 @@
width: 20px; width: 20px;
display: inline-block; display: inline-block;
float: right; float: right;
margin-top: 2px;
background: darken($black, 2%); background: darken($black, 2%);
transform: rotateZ(0); transform: rotateZ(0);
transition: all 0.2s ease; transition: all 0.2s ease;
top: 15px;
right: 5px;
position: absolute;
} }
:host.expanded { :host.expanded {