minor structure change

Author: Vlad Sternbach

src/components/comment-list/comment-list.scss

@@ -0,0 +1,21 @@
+* {
+  box-sizing: border-box;
+  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.discussion-timeline {
+  position: relative;
+  margin: 0 auto;
+  width: 760px;
+  &:before {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 79px;
+    z-index: -1;
+    display: block;
+    width: 2px;
+    content: "";
+    background-color: #f3f3f3;
+  }
+}

src/components/comments.component.ts src/components/comment-list/comments.component.ts

@@ -1,7 +1,8 @@
 /**
  * Created by voland on 4/2/16.
  */
-import Component from '../decorators';
+import Component from '../../decorators';
+import './comment-list.scss';
 
 @Component('app.components', 'comments', {
     template: `

src/components/comment.component.ts src/components/comment/comment.component.ts

@@ -1,8 +1,8 @@
 /**
  * Created by voland on 4/2/16.
  */
-import Component from 'decorators';
-import 'components/comment.scss';
+import Component from '../../decorators';
+import './comment.scss';
 
 @Component('app.components', 'comment', {
     template: `

src/components/comment.scss src/components/comment/comment.scss

@@ -1,25 +1,3 @@
-* {
-  box-sizing: border-box;
-  font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-.discussion-timeline {
-  position: relative;
-  margin: 0 auto;
-  width: 760px;
-}
-.discussion-timeline::before {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 79px;
-  z-index: -1;
-  display: block;
-  width: 2px;
-  content: "";
-  background-color: #f3f3f3;
-}
-
 .comment-wrapper {
   position: relative;
   padding-left: 64px;
@@ -94,7 +72,6 @@
   user-select: none;
   background-color: transparent;
   border: 0;
-  appearance: none;
 }
 
 
@@ -141,7 +118,6 @@
 }
 
 .comment-tabnav {
-  padding-top: 0;
   background-color: #fff;
   padding: 6px 10px 0;
   border-radius: 3px 3px 0 0;
@@ -165,14 +141,13 @@
   background-color: transparent;
   border: 1px solid transparent;
   border-bottom: 0;
+  &:hover {
+    text-decoration: none;
+  }
+  &.selected {
+    color: #333;
+    background-color: #fff;
+    border-color: #ddd;
+    border-radius: 3px 3px 0 0;
+  }
 }
-.tabnav-tab:hover {
-  text-decoration: none;
-}
-
-.tabnav-tab.selected {
-  color: #333;
-  background-color: #fff;
-  border-color: #ddd;
-  border-radius: 3px 3px 0 0;
-}

src/main.ts

@@ -7,8 +7,8 @@ import 'angular-ui-router';
 
 import services   from './services/services.module';
 import components from './components/components.module';
-import './components/comment.component.ts';
-import './components/comments.component.ts';
+import './components/comment/comment.component.ts';
+import './components/comment-list/comments.component.ts';
 
 // configure the main module
 angular.module('app', [