From bdacdd845f6fe81124101f60ea99a7f63bec2d56 Mon Sep 17 00:00:00 2001
From: ori agranat <oriagranat9@gmail.com>
Date: Sun, 24 Mar 2019 20:01:57 +0200
Subject: [PATCH] Improve layout

---
 chameleon-client/src/App.vue                  | 28 ++++++++-------
 chameleon-client/src/components/InputTab.vue  |  4 +--
 chameleon-client/src/components/ch-select.vue | 22 ++++++------
 chameleon-client/src/components/ch-slider.vue | 36 ++++++++++---------
 4 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/chameleon-client/src/App.vue b/chameleon-client/src/App.vue
index 24432cc58..521a3c772 100644
--- a/chameleon-client/src/App.vue
+++ b/chameleon-client/src/App.vue
@@ -24,24 +24,24 @@
                     </Menu>
                 </Sider>
                 <Layout id="main-layout">
-                  <Header id="main-header" v-if="['input','threshold'].indexOf($route.name)>-1">
-                    <row type="flex" justify="start" align="middle" >
-                      <i-col span="12">
-                        <chselect title="select a camera" placeholdert="1" :list="[1,2,3]"></chselect>
-                      </i-col>
-                      <i-col span="12">
-                        <chselect title="select pipline" placeholdert="0" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
-                      </i-col>
+                  <Header id="main-header" v-if="$route.path.includes('vision')">
+                    <Row type="flex" justify="start" align="middle" :gutter="10">
+                      <Col span="12">
+                        <chselect title="select a camera" :list="[1,2,3]"></chselect>
+                      </Col>
+                      <Col span="12">
+                        <chselect title="select pipline" :list="[0,1,2,3,4,5,6,7,8,9]"></chselect>
+                      </Col>
                     </Row>
                   </Header>
                   <Content id="main-content">
                     <row type="flex" justify="start" align="middle" :gutter="5" >
-                        <i-col span="12">
+                        <Col span="12">
                         <router-view></router-view>
-                        </i-col>
-                        <i-col span="12">
+                        </Col>
+                        <Colspan="12">
                           <img src="./assets/logo.png">
-                      </i-col>
+                      </Col>
                       </row>
                     </Content>
                 </Layout>
@@ -126,6 +126,10 @@
     text-align: left
   }
 
+  #main-content {
+    padding: 30px
+  }
+
   .layout{
       height: 100%;
       width: 100%;
diff --git a/chameleon-client/src/components/InputTab.vue b/chameleon-client/src/components/InputTab.vue
index 63c579849..b26c609f2 100644
--- a/chameleon-client/src/components/InputTab.vue
+++ b/chameleon-client/src/components/InputTab.vue
@@ -3,8 +3,8 @@
     <div id="InputTab">
         <chslider class="spacing" title="exposure" v-model="expval" v-on:input="onChange(expval)"></chslider>
         <chslider class="spacing" title="Brightness"></chslider>
-        <chselect class="spacing" title="Orientation" placeholdert=""  :list="['Normal','Inverted']" v-model="OrientationVal" v-on:input="onChange(OrientationVal)" ></chselect>
-        <chselect class="spacing" title="Resolution" placeholdert="" :list="['idk']"></chselect>
+        <chselect class="spacing" title="Orientation" :list="['Normal','Inverted']" v-model="OrientationVal" v-on:input="onChange(OrientationVal)" ></chselect>
+        <chselect class="spacing" title="Resolution" :list="['idk']"></chselect>
         </div>
 
 </template>
diff --git a/chameleon-client/src/components/ch-select.vue b/chameleon-client/src/components/ch-select.vue
index c8999a18a..bb87ed973 100644
--- a/chameleon-client/src/components/ch-select.vue
+++ b/chameleon-client/src/components/ch-select.vue
@@ -1,14 +1,14 @@
 <template>
-            <row type="flex" justify="start" align="middle" :gutter="1" >
-                <Col>
-                    <h4 style="width:100% ; margin-right:10px;">{{title}}</h4>
-                </Col>
-                <col>
-                    <i-select v-model="value" size="small" style="width:40%" v-bind:placeholder="placeholdert" @on-change="handleInput">
-                        <i-option v-for="item in list" :value="item" :key="item">{{item}}</i-option>
-                    </i-select>
-                </col>
-        </row>
+    <Row type="flex" justify="start" align="middle" :gutter="1" >
+        <Col span="4">
+            <h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
+        </Col>
+        <Col span="4">
+            <i-select v-model="value" size="small" v-bind:placeholder="list[0]" @on-change="handleInput">
+                <i-option v-for="item in list" :value="item" :key="item">{{item}}</i-option>
+            </i-select>
+        </Col>
+    </Row>
 </template>
 
 <script>
@@ -16,7 +16,6 @@
         name: 'ch-select',
         props:[
             'title',
-            'placeholdert',
             'list'
         ],
         data() {
@@ -35,6 +34,7 @@
 <style>
 h4 {
      color: #e6ebf1;
+      text-align: left;
  }
  .ivu-select-selection{
      background-color: #2c3e50 !important;
diff --git a/chameleon-client/src/components/ch-slider.vue b/chameleon-client/src/components/ch-slider.vue
index faca79567..747902da7 100644
--- a/chameleon-client/src/components/ch-slider.vue
+++ b/chameleon-client/src/components/ch-slider.vue
@@ -1,15 +1,15 @@
 
 <template>
-            <row type="flex" justify="start" align="middle" :gutter="1" >
-                <Col>
-                    <h4 style="width:100%">{{title}}</h4>
-                </Col>
-                <col >
-                    <InputNumber  style="margin-left: 5px ;width:10%;"  v-model="value" size="small"></InputNumber>
-                </col>
-                <Col span="14">
-                    <Slider style="margin-left:10px;" v-model="value" @on-input="handleInput"></Slider>
-                </col>
+        <row type="flex" justify="start" align="middle" :gutter="1">
+            <Col span="4">
+                <h4>{{title.charAt(0).toUpperCase() + title.slice(1)}} :</h4>
+            </Col>
+            <Col span="4" style="text-align: left">
+                <InputNumber style="align-self: flex-start;" v-model="value" size="small"></InputNumber>
+            </Col>
+            <Col span="14">
+                <Slider v-model="value" @on-input="handleInput"></Slider>
+            </Col>
         </row>
 </template>
 
@@ -30,13 +30,15 @@
     }
 </script>
 
-<style >
+<style>
 h4 {
-     color: #e6ebf1;
- }
- .ivu-input-number-input{
-     background-color: #2c3e50 !important;
-     color: #fff !important;
- }
+    color: #e6ebf1;
+    text-align: left;
+}
+.ivu-input-number-input{
+    background-color: #2c3e50 !important;
+    color: #fff !important;
+}
+
 </style>