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

better display of the column header

This commit is contained in:
Nicolas Constant 2019-01-28 01:10:18 -05:00
parent fed9533015
commit fb2711cfed
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/stream/stream.component.html
View File

@ -7,7 +7,7 @@
[browseThreadData]="overlayThreadToBrowse"></app-stream-overlay> [browseThreadData]="overlayThreadToBrowse"></app-stream-overlay>
<div class="stream-column__stream-header"> <div class="stream-column__stream-header">
<a href title="return to top" (click)="goToTop()"> <a class="stream-column__stream-selector" href title="return to top" (click)="goToTop()">
<h1>{{ streamElement.name.toUpperCase() }}</h1> <h1>{{ streamElement.name.toUpperCase() }}</h1>
</a> </a>
</div> </div>

21
src/app/components/stream/stream.component.scss
View File

@ -1,30 +1,39 @@
@import "variables"; @import "variables";
@import "commons"; @import "commons";
$stream-header-height: 40px;
.stream-column { .stream-column {
position: relative; position: relative;
width: $stream-column-width; width: $stream-column-width;
height: calc(100%); height: calc(100%);
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 {
border-bottom: 1px solid #222736;
}
&__stream-selector {
display: block;
width: calc(100%); width: calc(100%);
height: 30px; height: $stream-header-height;
background-color: $column-header-background-color; background-color: $column-header-background-color;
border-bottom: 1px solid black;
&:hover {
text-decoration: none;
}
& h1 { & h1 {
color: whitesmoke; color: whitesmoke;
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
padding: 8px 0 0 10px; padding: 13px 0 0 10px;
} }
} }
} }
.stream-statuses { .stream-statuses {
display: block; display: block;
height: calc(100% - 30px); height: calc(100% - #{$stream-header-height});
width: 320px; width: 320px;
} }
@ -37,10 +46,8 @@
// border-width: 0 0 1px 0; // border-width: 0 0 1px 0;
// } // }
// } // }
.stream-overlay { .stream-overlay {
position: absolute; position: absolute;
z-index: 50; z-index: 50;
width: $stream-column-width; width: $stream-column-width;
height: calc(100%); height: calc(100%);

3
src/sass/_variables.scss
View File

@ -6,7 +6,7 @@ $color-primary: #141824;
$color-secondary: #090b10; $color-secondary: #090b10;
$column-color: #0f111a; $column-color: #0f111a;
$column-header-background-color: black; $column-header-background-color: #0c0c10;
@ -32,6 +32,7 @@ $stream-selector-height: 30px;
$stream-column-separator: 7px; $stream-column-separator: 7px;
$stream-column-width: 320px; $stream-column-width: 320px;
$avatar-column-space: 70px; $avatar-column-space: 70px;
//Bootstrap cuistomization //Bootstrap cuistomization
$enable-rounded: false; $enable-rounded: false;