added sliding column in TLs
This commit is contained in:
parent
877449cd4b
commit
eb66cb7760
|
@ -3,7 +3,8 @@
|
||||||
@import "mixins";
|
@import "mixins";
|
||||||
|
|
||||||
.stream-edition {
|
.stream-edition {
|
||||||
width: 100%;
|
width: calc(100%);
|
||||||
|
width: $stream-column-width;
|
||||||
// min-height: 50px;
|
// min-height: 50px;
|
||||||
background-color: #222736;
|
background-color: #222736;
|
||||||
border-bottom: 1px solid $color-secondary;
|
border-bottom: 1px solid $color-secondary;
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
<div class="stream-column">
|
<div class="stream-column">
|
||||||
|
<div class="sliding-column" [class.sliding-column__right-display]="overlayActive">
|
||||||
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"
|
<app-stream-overlay class="stream-overlay" *ngIf="overlayActive" (closeOverlay)="closeOverlay()"
|
||||||
[browseAccountData]="overlayAccountToBrowse" [browseHashtagData]="overlayHashtagToBrowse"
|
[browseAccountData]="overlayAccountToBrowse" [browseHashtagData]="overlayHashtagToBrowse"
|
||||||
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
|
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
|
||||||
|
|
||||||
|
<!-- <div> -->
|
||||||
<div class="stream-column__stream-header">
|
<div class="stream-column__stream-header">
|
||||||
<a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
|
<a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
|
||||||
<fa-icon class="stream-column__stream-selector--icon" [icon]="columnFaIcon"></fa-icon>
|
<fa-icon class="stream-column__stream-selector--icon" [icon]="columnFaIcon"></fa-icon>
|
||||||
|
@ -16,15 +17,14 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen"
|
<app-stream-edition class="stream-edition" *ngIf="editionPanelIsOpen" [streamElement]="streamElement"
|
||||||
[streamElement]="streamElement"
|
|
||||||
(closed)="streamEditionClosed()">
|
(closed)="streamEditionClosed()">
|
||||||
</app-stream-edition>
|
</app-stream-edition>
|
||||||
|
|
||||||
<app-stream-statuses class="stream-statuses"
|
<app-stream-statuses class="stream-statuses" [streamElement]="streamElement"
|
||||||
[streamElement]="streamElement"
|
[goToTop]="goToTopSubject.asObservable()" (browseAccountEvent)="browseAccount($event)"
|
||||||
[goToTop]="goToTopSubject.asObservable()"
|
(browseHashtagEvent)="browseHashtag($event)" (browseThreadEvent)="browseThread($event)">
|
||||||
(browseAccountEvent)="browseAccount($event)"
|
</app-stream-statuses>
|
||||||
(browseHashtagEvent)="browseHashtag($event)"
|
<!-- </div> -->
|
||||||
(browseThreadEvent)="browseThread($event)"></app-stream-statuses>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -7,13 +7,33 @@
|
||||||
z-index: 50;
|
z-index: 50;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sliding-column {
|
||||||
|
transition: all .25s;
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
|
||||||
|
width: calc(2 * #{$stream-column-width});
|
||||||
|
height: calc(100%);
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
&__right-display {
|
||||||
|
transition-timing-function: ease-out;
|
||||||
|
position: relative;
|
||||||
|
left: -$stream-column-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.stream-column {
|
.stream-column {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: $stream-column-width;
|
width: $stream-column-width;
|
||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
|
overflow: hidden;
|
||||||
background-color: $column-color;
|
background-color: $column-color;
|
||||||
margin: 0 0 0 $stream-column-separator;
|
margin: 0 0 0 $stream-column-separator;
|
||||||
|
|
||||||
&__stream-header {
|
&__stream-header {
|
||||||
|
position: relative;
|
||||||
|
width: $stream-column-width;
|
||||||
border-bottom: 1px solid #222736;
|
border-bottom: 1px solid #222736;
|
||||||
}
|
}
|
||||||
&__open-menu {
|
&__open-menu {
|
||||||
|
@ -37,7 +57,7 @@
|
||||||
}
|
}
|
||||||
&__stream-selector {
|
&__stream-selector {
|
||||||
display: block;
|
display: block;
|
||||||
width: calc(100%);
|
width: $stream-column-width;
|
||||||
height: $stream-header-height;
|
height: $stream-header-height;
|
||||||
background-color: $column-header-background-color;
|
background-color: $column-header-background-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -84,8 +104,9 @@
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
.stream-overlay {
|
.stream-overlay {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
z-index: 100;
|
float: right;
|
||||||
|
//z-index: 100;
|
||||||
width: $stream-column-width;
|
width: $stream-column-width;
|
||||||
height: calc(100%);
|
height: calc(100%);
|
||||||
}
|
}
|
Loading…
Reference in New Issue