mrtoth/frontend-tutorial-framework
1
0
Fork 0
mirror of https://github.com/avatao-content/frontend-tutorial-framework synced 2025-04-03 10:12:41 +00:00
Code Issues Releases Wiki Activity

Merge pull request #22 from avatao-content/layout-fix

Browse Source 
Fix breaking layout for web component
This commit is contained in:
therealkrispet 2018-05-16 13:09:01 +02:00 committed by GitHub
commit 1c88e61b0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/dashboard/dashboard.component.scss
View File

@ -22,6 +22,26 @@
} }
} }
@mixin set-scrollbar-style() {
::-webkit-scrollbar-track
{
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 4px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: gray;
}
}
.tfw-grid-main-components { .tfw-grid-main-components {
display: grid; display: grid;
width: 100vw; width: 100vw;
@ -58,10 +78,14 @@
div[class="terminal-ide-web"] & { div[class="terminal-ide-web"] & {
max-height: 55vmin; max-height: 55vmin;
} }
@include set-scrollbar-style();
} }
.tfw-ide { .tfw-ide {
background-color: $tao-plum-900; background-color: $tao-plum-900;
@include set-scrollbar-style();
} }
.tfw-sidebar { .tfw-sidebar {
@ -78,6 +102,8 @@
.tfw-terminal { .tfw-terminal {
overflow-y: hidden; overflow-y: hidden;
background-color: $tao-gray-800; background-color: $tao-gray-800;
@include set-scrollbar-style();
div[class*="web"] & { div[class*="web"] & {
border-top: 1px solid $tao-plum-100; border-top: 1px solid $tao-plum-100;

4
src/assets/scss/mixins/_layout.scss
View File

@ -18,7 +18,7 @@ $terminal-web-layout: (
'messages': (1, 6, 2, $grid-columns-count+1), 'messages': (1, 6, 2, $grid-columns-count+1),
'ide': (), 'ide': (),
'terminal': (15, $grid-columns-count, 1, $grid-rows-count+1), 'terminal': (15, $grid-columns-count, 1, $grid-rows-count+1),
'web': (6, 15, 1, 10), 'web': (6, 15, 1, $grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
); );
@ -45,7 +45,7 @@ $ide-web-vertical-layout: (
'messages': (1, 6, 2, $grid-rows-count+1), 'messages': (1, 6, 2, $grid-rows-count+1),
'ide': (15, $grid-columns-count, 1,$grid-rows-count+1), 'ide': (15, $grid-columns-count, 1,$grid-rows-count+1),
'terminal': (), 'terminal': (),
'web': (6, 15, 10, $grid-rows-count+1), 'web': (6, 15, 1, $grid-rows-count+1),
'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1) 'sidebar': ($grid-columns-count,$grid-columns-count+1, 1,$grid-rows-count+1)
); );