some changes to color and to routes

chameleon-client/src/App.vue

@@ -1,43 +1,45 @@
-<template>
-  <div id="app">
-      <div class="layout">
-        <Layout :style="{minHeight: '100vh'}">
-            <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
+  <template>
+  <div class="layout">
+      <Layout>
+        <Header>Header</Header>
+        <Layout>
+          <Sider collapsible :collapsed-width="78" v-model="isCollapsed">
                 <Menu @on-open-change="onOpenChange" active-name="vision-input" :open-names="['vision']" theme="dark"  width="auto" :class="menuitemClasses">
                     <Submenu name="vision">
                       <template slot="title">
                         <Icon type="ios-videocam"/>
                         <span v-if="!isCollapsed">Vision</span>
                       </template>
-                      <MenuItem name="vision-input" to="/input">Input</MenuItem>
-                      <MenuItem name="vision-3D" to="3d">3D</MenuItem>
+                      <MenuItem name="vision-input" to="/vision/input">Input</MenuItem>
+                      <MenuItem name="vision-3D" to="/vision/3d">3D</MenuItem>
                     </Submenu>
                     <Submenu name="settings">
                       <template slot="title">
                         <Icon type="ios-settings"/>
                         <span v-if="!isCollapsed">Settings</span>
                       </template>
-                      <MenuItem name="settings-color">Color</MenuItem>
-                      <MenuItem name="settings-brightness">Brightness</MenuItem>
+                      <MenuItem name="settings-color">System</MenuItem>
+                      <MenuItem name="settings-brightness">Cameras</MenuItem>
                     </Submenu>
                 </Menu>
             </Sider>
             <Layout id="main-layout">
-                <Content id="main-content">
-                  <router-view></router-view>
-                </Content>
-            </Layout>
-            <Layout id="camera">
-                <Content>
-                  Camera 1
+            <Content id="main-content">
+               <row type="flex" justify="start" align="middle" :gutter="5" >
+                <i-col span="12">
+                <router-view></router-view>
+                </i-col span="12">
+                <i-col>
                   <img src="./assets/logo.png">
+              </i-col>
+              </row>
                 </Content>
             </Layout>
         </Layout>
-    </div>
-  </div>
+        <!-- <Footer>Footer</Footer> -->
+    </Layout>
+</div>
 </template>
-
 <script>
 
 export default {
@@ -62,7 +64,6 @@ export default {
   }
 }
 </script>
-
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
@@ -106,4 +107,4 @@ export default {
     vertical-align: middle;
     font-size: 22px;
 }
-</style>
+</style>

chameleon-client/src/components/InputTab.vue

@@ -1,9 +1,10 @@
 
 <template>
     <div id="InputTab">
-        <chslider title="exposure"></chslider>
-        <chslider title="fuck off"></chslider>
-        <chselect title="tet" placeholdert="fuck of this took time"  :list="[1,2,23]" ></chselect>
+        <chslider class="spacing" title="exposure"></chslider>
+        <chslider class="spacing" title="Brightness"></chslider>
+        <chselect class="spacing" title="Orientation" placeholdert=""  :list="['Normal','Inverted']" ></chselect>
+        <chselect class="spacing" title="Resolution" placeholdert="" :list="['idk']"></chselect>
         </div>
 
 </template>
@@ -28,4 +29,8 @@ import chselect from './ch-select.vue'
 </script>
 
 <style scoped>
+.spacing{
+    margin-top: 20px;
+}
+
 </style>

chameleon-client/src/components/ch-select.vue

@@ -27,8 +27,15 @@
     }
 </script>
 
-<style scoped>
+<style>
 h4 {
      color: #e6ebf1;
  }
+ .ivu-select-selection{
+     background-color: #2c3e50 !important;
+ }
+ .ivu-select-selected-value{
+     color: #fff !important;
+ }
+
 </style>

chameleon-client/src/components/ch-slider.vue

@@ -8,7 +8,7 @@
                     <InputNumber v-model="value" size="small"></InputNumber>
                 </col>
                 <Col span="14">
-                    <Slider v-model="value"></Slider>
+                    <Slider style="margin-left:5px;" v-model="value"></Slider>
                 </col>
         </row>
 </template>
@@ -25,8 +25,14 @@
     }
 </script>
 
-<style scoped>
+<style >
 h4 {
      color: #e6ebf1;
  }
-</style>
+ .ivu-input-number-input{
+     background-color: #2c3e50 !important;
+     color: #fff !important;
+ }
+ 
+</style>
+

chameleon-client/src/routes.js

@@ -3,9 +3,9 @@ import Input from "./components/InputTab.vue";
 import ThreeD from "./components/3DTab.vue";
 
 const routes = [
-  { path: '/', redirect: '/input' },
-  { path: '/input', component: Input },
-  { path: '/3d', component: ThreeD }
+  { path: '/', redirect: '/vision/input' },
+  { path: '/vision/input', component: Input },
+  { path: '/vision/3d', component: ThreeD }
 ]
 
 const router = new VueRouter({