Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

flex migration floating column + hover timeline

This commit is contained in:
Nicolas Constant 2024-03-06 23:13:46 -05:00
parent 909b190b33
commit 46adf207bb
4 changed files with 51 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/floating-column/floating-column.component.html
View File

@ -10,7 +10,7 @@
<div class="floating-column__inner--left">
<div class="floating-column__header">
<a class="close-button" href (click)="closePanel()" title="close">
<fa-icon [icon]="faTimes"></fa-icon>
<fa-icon class="close-button__icon" [icon]="faTimes"></fa-icon>
</a>
</div>

13
src/app/components/floating-column/floating-column.component.scss
View File

@ -29,9 +29,20 @@
}
.close-button {
// outline: 1px dotted orange;
display: block;
float: right;
font-size: 14px;
color: white;
margin: 10px 16px 0 0;
margin: 5px 5px 0 0;
width: 40px;
height: 34px;
&__icon {
position: relative;
top: 6px;
left: 17px;
}
}

14
src/app/components/stream/stream-overlay/stream-overlay.component.html
View File

@ -1,9 +1,5 @@
<div class="overlay">
<div class="overlay__header">
<a href class="overlay__button overlay-close" title="close" (click)="close()">
<fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
</a>
<a href class="overlay__button overlay-previous"
[ngClass]="{'overlay__button--focus': hasPreviousElements }" title="previous" (click)="previous()">
<fa-icon class="overlay-previous__icon" [icon]="faAngleLeft"></fa-icon>
@ -12,13 +8,17 @@
title="refresh" (click)="refresh()">
<fa-icon class="overlay-refresh__icon" [icon]="faRedoAlt"></fa-icon>
</a>
<a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
title="next" (click)="next()">
<fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
</a>
<a href title="return to top" class="overlay-gototop" (click)="goToTop()">
</a>
<a href class="overlay__button overlay-next" [ngClass]="{'overlay__button--focus': hasNextElements }"
title="next" (click)="next()">
<fa-icon class="overlay-next__icon" [icon]="faAngleRight"></fa-icon>
<a href class="overlay__button overlay-close" title="close" (click)="close()">
<fa-icon class="overlay-close__icon" [icon]="faTimes"></fa-icon>
</a>
</div>

56
src/app/components/stream/stream-overlay/stream-overlay.component.scss
View File

@ -11,7 +11,9 @@ $header-content-height: 40px;
width: calc(100%);
height: $header-content-height;
background-color: $column-header-background-color;
border-bottom: 1px solid #222736;
border-bottom: 1px solid #222736;
display: flex;
}
&__content-wrapper {
transition: all .2s;
@ -44,11 +46,17 @@ $header-content-height: 40px;
}
&__button {
// outline: 1px dotted orange;
width: 25px;
height: 25px;
width: $header-content-height;
height: $header-content-height;
color: #354060;
transition: all .2s;
margin: 8px 0 0 8px;
&:hover {
color: #536599;
color: #7a8dc7;
@ -68,19 +76,8 @@ $header-content-height: 40px;
&__icon {
position: relative;
left: 7px;
top: -1px
}
}
&-next {
display: block;
float: left;
font-size: 18px;
&__icon {
position: relative;
left: 8px;
top: -1px
left: 17px;
top: 7px
}
}
&-refresh {
@ -90,29 +87,38 @@ $header-content-height: 40px;
&__icon {
position: relative;
left: 5px;
top: 1px
left: 13px;
top: 9px
}
}
&-next {
display: block;
float: left;
font-size: 18px;
&__icon {
position: relative;
left: 13px;
top: 7px
}
}
&-gototop {
position: absolute;
top: 0;
left: 110px;
right: 40px;
// outline: 1px dotted orange;
flex-grow: 1;
display: block;
height: $header-content-height;
}
&-close {
display: block;
float: right;
font-size: 13px;
color: white;
margin-right: 8px;
&__icon {
position: relative;
left: 7px;
top: 1px
left: 15px;
top: 9px
}
}
}