Cliffbreak/CliffbreakTS-Viewer
4
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

feat(webapp): add new UI

Browse source
This commit is contained in:
Marc 2020-09-21 17:49:20 +02:00
parent 7726223698
commit f0b86e7bd8
2 changed files with 46 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
webapp/src/scss/index.scss
View file

@ -1,14 +1,41 @@
@import "normalize-scss/sass/normalize/import-now"; @import "normalize-scss/sass/normalize/import-now";
// @import "normalize-scss/sass/_normalize";
// @include normalize();
/** COLORS **/
$backgroundColor: #fcfcfc;
body { body {
font-family: "Roboto"; font-family: "Roboto";
background-color: $backgroundColor; padding-top: 20px;
background-color: #1e1e1e;
display: block;
}
.channel {
margin: auto;
width: 20%;
word-wrap: break-word;
font-size: 20px;
color: #cb1919;
font-weight: bold;
box-shadow: 3px 0 0 0 white, 0 3px 0 0 white, 3px 3px 0 0 white, 3px 0 0 0 white inset, 0 3px 0 0 white inset;
display: block;
overflow: hidden;
text-align: center;
border-collapse: collapse;
}
.subchannel {
text-align: left;
width: 100%;
box-shadow: 1px 0 0 0 white, 0 1px 0 0 white, 1px 1px 0 0 white, 1px 0 0 0 white inset, 0 1px 0 0 white inset;
color: #cb1919;
margin: 0;
padding: 0;
border-collapse: collapse;
box-sizing: content-box;
}
.client {
display: block;
padding-left: 15px;
color: #a01919;
} }
// @import "animations"; // @import "animations";

12
webapp/src/views/index.hbs
View file

@ -1,12 +1,16 @@
{{#each channels}} {{#each channels}}
{{this.name}}<br /> <div class="channel">
{{this.name}}
{{#each this.clients}} {{#each this.clients}}
&nbsp;&nbsp;&nbsp;{{this.name}}<br /> <div class="client">{{this.name}}</div>
{{/each}} {{/each}}
{{#each this.children}} {{#each this.children}}
&nbsp;&nbsp;&nbsp;{{this.name}}<br /> <div class="subchannel">
{{this.name}}
{{#each this.clients}} {{#each this.clients}}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{this.name}}<br /> <div class="client">{{this.name}}</div>
{{/each}} {{/each}}
</div>
{{/each}} {{/each}}
</div>
{{/each}} {{/each}}