From 302c6618e34d14eed349a7cba4ce720490eea588 Mon Sep 17 00:00:00 2001
From: Roger-Wu <gsetcrw@gmail.com>
Date: Sun, 21 Aug 2016 07:23:25 +0800
Subject: [PATCH 1/2] change color, font-size

---
 app/components/home/home.html             |  6 +--
 app/components/home/home.scss             |  1 +
 app/components/leftPanel/leftPanel.html   | 35 +++++++++------
 app/components/leftPanel/leftPanel.scss   | 21 +++++----
 app/components/rightPanel/rightPanel.html | 14 +++---
 app/components/rightPanel/rightPanel.scss | 55 ++++++++++++++++++-----
 app/index.html                            |  2 +-
 app/index.scss                            |  6 ++-
 8 files changed, 96 insertions(+), 44 deletions(-)

diff --git a/app/components/home/home.html b/app/components/home/home.html
index 659459c..f225a4e 100644
--- a/app/components/home/home.html
+++ b/app/components/home/home.html
@@ -2,10 +2,10 @@
 	<div class="topPanel">
 		<div class="diamondCount">
 			<div class="diamondCountWrap">
-				<i class="ui diamond icon diamondIcon"></i>
+				<i class="ui diamond icon diamondIcon" style="color: #5cbcff;"></i>
 				<div>{{homeCtrl.diamondCount | number: 0}}</div>
 			</div>
-			<div>
+			<div style="color: rgba(255, 255, 255, 0.5); font-size: 24px;">
 				Rate: {{homeCtrl.diamondRate | number: 1}}
 			</div>
 		</div>
@@ -20,7 +20,7 @@
 		<div class="thunder-wrap">
 			<div class="thunder"></div>
 		</div>
-        
+
         <div class="moon"></div>
         <div class="moon2"></div>
         <div class="stars"></div>
diff --git a/app/components/home/home.scss b/app/components/home/home.scss
index ccc2b14..8111894 100644
--- a/app/components/home/home.scss
+++ b/app/components/home/home.scss
@@ -259,6 +259,7 @@
 .diamondIcon {
   position: relative;
   top: -2px;
+  color: #5cbcff;
 }
 
 .diamondCount {
diff --git a/app/components/leftPanel/leftPanel.html b/app/components/leftPanel/leftPanel.html
index 1ab5af1..108a83e 100644
--- a/app/components/leftPanel/leftPanel.html
+++ b/app/components/leftPanel/leftPanel.html
@@ -8,19 +8,28 @@
             <img class="zooImg" ng-src="{{item.img}}" alt="{{item.name}}">
             <p>{{item.name}}</p>
         </a> -->
-        <div class="animalWrap top">
-        </div>
-        <div class="animalWrap" ng-repeat="animal in leftPanelCtrl.ownAnimals" ng-click="leftPanelCtrl.openUpgradeModal(animal)">
-          <div class="leftPanelImageWrap" style="background: url('images/{{animal.img}}')">
-          </div>
-            <div class="leftPhotoWrap">
-                <div class="header">
-                    {{animal.name}}
-                </div>
-                <div class="attribute">
-                    <span><img class="attr-icon" src="//i.imgur.com/7XAsKFu.png" alt="">: 0</span>
-                    <span><img class="attr-icon" src="//i.imgur.com/ztfDn80.png" alt="">: 10</span>
-                    <span><img class="attr-icon" src="//i.imgur.com/qJHPUlh.png" alt="">: 20</span>
+        <div class="animalList">
+            <div class="animalWrap" ng-repeat="animal in leftPanelCtrl.ownAnimals" ng-click="leftPanelCtrl.openUpgradeModal(animal)">
+              <div class="leftPanelImageWrap" style="background: url('images/{{animal.img}}')">
+              </div>
+                <div class="leftPhotoWrap">
+                    <div class="header">
+                        {{animal.name}}
+                    </div>
+                    <div class="attribute">
+                        <span class="left-attr-column">
+                            <img class="attr-icon" src="//i.imgur.com/7XAsKFu.png" alt="">
+                            <span class="left-attr-number">0</span>
+                        </span>
+                        <span class="left-attr-column">
+                            <img class="attr-icon" src="//i.imgur.com/ztfDn80.png" alt="">
+                            <span class="left-attr-number">10</span>
+                        </span>
+                        <span class="left-attr-column">
+                            <img class="attr-icon" src="//i.imgur.com/qJHPUlh.png" alt="">
+                            <span class="left-attr-number">20</span>
+                        </span>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/app/components/leftPanel/leftPanel.scss b/app/components/leftPanel/leftPanel.scss
index ed4cc94..10222e4 100644
--- a/app/components/leftPanel/leftPanel.scss
+++ b/app/components/leftPanel/leftPanel.scss
@@ -7,14 +7,12 @@
   margin: auto;
 }
 
-.panelTitle {
-  display: flex;
-  padding: 30px 0;
-  background-color: #183a5d;
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
+// defined in rightPanel.scss
+// .panelTitle {
+//   display: flex;
+//   background-color: #183a5d;
+//   height: 80px;
+// }
 
 .leftPanelImageWrap {
   width: 75px;
@@ -41,7 +39,8 @@
 }
 
 .leftPhotoWrap .header {
-    font-size: 20px;
+    font-size: 18px;
+    color: rgba(255, 255, 255, 0.875);
 }
 
 .leftPhotoWrap .attribute {
@@ -73,3 +72,7 @@
 .zooImg {
 	width: 100px !important;
 }
+
+.left-attr-column {
+  margin-right: 8px;
+}
diff --git a/app/components/rightPanel/rightPanel.html b/app/components/rightPanel/rightPanel.html
index 7fcf222..369c83d 100644
--- a/app/components/rightPanel/rightPanel.html
+++ b/app/components/rightPanel/rightPanel.html
@@ -12,29 +12,29 @@
             <div class="rightTitle">SHOP</div>
         </div>
         <div class="animalList">
-            <div class="animalWrap top">
-            </div>
+            <!-- <div class="animalWrap top"></div> -->
             <div class="animalWrap" ng-repeat="animal in rightPanelCtrl.animals" ng-click="rightPanelCtrl.buyAnimal(animal)">
-                <div class="rightPanelImageWrap" style="background: url('images/{{animal.img}}')">
+                <div class="rightPanelImageWrap" style="background-image: url('images/{{animal.img}}')">
                 </div>
                 <div class="rightPhotoWrap">
                     <div class="rightPhotoName">
                         {{animal.name}}
                     </div>
                     <div class="description">
-                        <p><i class="diamond icon white"></i>{{animal.cost}}</p>
+                        <i class="diamond icon right-animal-diamond"></i>
+                        <span class="right-animal-cost">{{animal.cost}}</span>
                     </div>
                 </div>
                 <div class="rightActionBtnWrap">
-                    <i class="ui circle info icon cursor big" ng-click="rightPanelCtrl.checkInfo(animal); $event.stopPropagation();"></i>
+                    <i class="ui circle info icon cursor big right-animal-info" ng-click="rightPanelCtrl.checkInfo(animal); $event.stopPropagation();"></i>
                 </div>
             </div>
             <div class="ui modal" id="infoModal">
                 <i class="close icon"></i>
-                <div class="header">
+                <div class="header info-modal-header">
                     動物護照
                 </div>
-                <div class="image content">
+                <div class="image content info-modal-content">
                     <div class="ui medium image">
                         <img ng-src="images/{{rightPanelCtrl.currentAnimal.img}}">
                     </div>
diff --git a/app/components/rightPanel/rightPanel.scss b/app/components/rightPanel/rightPanel.scss
index 02bbf70..3794032 100644
--- a/app/components/rightPanel/rightPanel.scss
+++ b/app/components/rightPanel/rightPanel.scss
@@ -5,10 +5,11 @@
 .rightIcons {
     margin: 10px 0;
     cursor: pointer;
+    color: $text-gray;
 }
 
 .rightIcons:hover {
-    opacity: 0.6;
+    color: $text-white;
 }
 
 .closeBtn {
@@ -17,11 +18,15 @@
     left: 10px;
 }
 
-.animalList {}
+.animalList {
+  height: calc(100% - 80px);
+  overflow: scroll;
+  background-color: #0a2232;
+}
 
 .animalWrap {
     display: flex;
-    margin: 10px 0;
+    padding: 8px 0;
 }
 
 .animalWrap.top {
@@ -59,7 +64,9 @@
 }
 
 .rightPhotoName {
-  font-size: 20px
+  font-size: 18px;
+  line-height: 24px;
+  color: $text-white;
 }
 
 .rightPhotoWrap .header {
@@ -68,7 +75,8 @@
 }
 
 .rightPhotoWrap .description {
-    font-size: 20px;
+    font-size: 18px;
+    line-height: 24px;
 }
 
 .rightPanelWrap {
@@ -78,11 +86,9 @@
 
 .panelTitle {
     display: flex;
-    padding: 30px 0;
     background-color: #183a5d;
-    position: absolute;
-    top: 0;
-    width: 100%;
+    height: 80px;
+    color: $text-white;
 }
 
 .rightActionBtnWrap {
@@ -107,5 +113,34 @@
   background-repeat: no-repeat !important;
   margin: auto 10px;
   border-radius: 75px;
-  border: 2px solid;
+  border: 2px solid $text-white;
+  background-position: center;
+}
+
+.right-animal-diamond {
+  color: #5cbcff;
+}
+
+.right-animal-cost {
+  color: #5cbcff;
+}
+
+.right-animal-info {
+  color: $text-dark;
+  &:hover {
+    color: $text-white;
+  }
+}
+
+#infoModal {
+  .info-modal-header {
+    background-color: #183a5d;
+    color: $text-white;
+  }
+  .info-modal-content {
+    background-color: #0a2232;
+    .ui.header {
+      color: $text-white;
+    }
+  }
 }
diff --git a/app/index.html b/app/index.html
index 74e7a89..ef90e8c 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Animax</title>
-  <link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Baloo+Paaji" rel="stylesheet">
   <link rel="stylesheet" href="statics/semantic.min.css">
 </head>
 <body ng-app="app">
diff --git a/app/index.scss b/app/index.scss
index ed538a4..8ae26db 100644
--- a/app/index.scss
+++ b/app/index.scss
@@ -3,6 +3,10 @@
 @import 'bourbon';
 // @import 'https://fonts.googleapis.com/css?family=Baloo+Bhaina';
 
+$text-white: rgba(255, 255, 255, 0.75);
+$text-gray: rgba(255, 255, 255, 0.5);
+$text-dark: rgba(255, 255, 255, 0.25);
+
 @import "~components/hero/hero.scss";
 @import "~components/home/home.scss";
 @import "~common/button/button.scss";
@@ -11,7 +15,7 @@
 @import "~components/rightPanel/rightPanel.scss";
 
 * {
-  font-family: 'Baloo Bhaina', cursive;
+  font-family: 'Baloo Paaji', cursive;
 }
 
 body {

From f44f917fc4d4ffdf72c01cbb42714f7c9227bbb4 Mon Sep 17 00:00:00 2001
From: Roger-Wu <gsetcrw@gmail.com>
Date: Sun, 21 Aug 2016 07:40:07 +0800
Subject: [PATCH 2/2] ui almost done

---
 .../leftPanel/leftPanel.controller.js         | 14 ++---
 app/components/leftPanel/leftPanel.html       | 58 +++++++++++--------
 app/components/leftPanel/leftPanel.scss       | 22 ++++++-
 3 files changed, 60 insertions(+), 34 deletions(-)

diff --git a/app/components/leftPanel/leftPanel.controller.js b/app/components/leftPanel/leftPanel.controller.js
index e6053f9..8ad8632 100644
--- a/app/components/leftPanel/leftPanel.controller.js
+++ b/app/components/leftPanel/leftPanel.controller.js
@@ -46,13 +46,13 @@ export default class LeftPanelController {
             },
             data: { "type": animal.code }
         };
-        
-        this.fetch(req).then(function(response){
-            alert(response);
-
-        }, function(){
-            alert('error');
-        });
+        //
+        // this.fetch(req).then(function(response){
+        //     alert(response);
+        //
+        // }, function(){
+        //     alert('error');
+        // });
       // fetch({
       //         method: 'POST',
       //         url: 'http://hackntu-nodered.mybluemix.net/start-talking'
diff --git a/app/components/leftPanel/leftPanel.html b/app/components/leftPanel/leftPanel.html
index 108a83e..838235f 100644
--- a/app/components/leftPanel/leftPanel.html
+++ b/app/components/leftPanel/leftPanel.html
@@ -10,8 +10,8 @@
         </a> -->
         <div class="animalList">
             <div class="animalWrap" ng-repeat="animal in leftPanelCtrl.ownAnimals" ng-click="leftPanelCtrl.openUpgradeModal(animal)">
-              <div class="leftPanelImageWrap" style="background: url('images/{{animal.img}}')">
-              </div>
+                <div class="leftPanelImageWrap" style="background-image: url('images/{{animal.img}}')">
+                </div>
                 <div class="leftPhotoWrap">
                     <div class="header">
                         {{animal.name}}
@@ -35,39 +35,48 @@
         </div>
         <div class="ui modal" id="upgradeModal">
             <i class="close icon"></i>
-            <div class="header">
+            <div class="header upgrade-modal-header">
                 動物護照
             </div>
-            <div class="image content">
+            <div class="image content upgrade-modal-content">
                 <div class="ui medium image">
                     <img ng-src="images/{{leftPanelCtrl.currentAnimal.img}}">
                 </div>
                 <div class="description">
                     <div class="ui header">{{leftPanelCtrl.currentAnimal.name}}</div>
                     <div class="attribute inner">
-                    <span><img class="attr-icon big" src="//i.imgur.com/7XAsKFu.png" alt="">: 0</span>
-                    <span><img class="attr-icon big" src="//i.imgur.com/ztfDn80.png" alt="">: 10</span>
-                    <span><img class="attr-icon big" src="//i.imgur.com/qJHPUlh.png" alt="">: 20</span>
-                </div>
-                    <div class="ui segment">
-                        <p>Hi 小魯～</p>
-                        <p>嘻嘻</p>
-                        <p>哈囉</p>
+                        <span class="left-attr-column">
+                            <img class="attr-icon" src="//i.imgur.com/7XAsKFu.png" alt="">
+                            <span class="left-attr-number">0</span>
+                        </span>
+                        <span class="left-attr-column">
+                            <img class="attr-icon" src="//i.imgur.com/ztfDn80.png" alt="">
+                            <span class="left-attr-number">10</span>
+                        </span>
+                        <span class="left-attr-column">
+                            <img class="attr-icon" src="//i.imgur.com/qJHPUlh.png" alt="">
+                            <span class="left-attr-number">20</span>
+                        </span>
                     </div>
-                    <form class="ui reply form">
-                        <div class="field">
-                            <div class="ui input">
-                                <input type="text" placeholder="Type here...">
-                            </div>
-                        </div>
-                        <div class="ui primary submit button">
-                            <!-- <i class="icon edit"></i> -->
-                            Enter
-                        </div>
-                    </form>
                 </div>
+                <!-- <div class="ui segment">
+                    <p>Hi 小魯～</p>
+                    <p>嘻嘻</p>
+                    <p>哈囉</p>
+                </div>
+                <form class="ui reply form">
+                    <div class="field">
+                        <div class="ui input">
+                            <input type="text" placeholder="Type here...">
+                        </div>
+                    </div>
+                    <div class="ui primary submit button">
+                        Enter
+                    </div>
+                </form> -->
             </div>
-            <!-- <div class="actions">
+        </div>
+        <!-- <div class="actions">
                 <div class="ui black deny button">
                     Nope
                 </div>
@@ -76,6 +85,5 @@
                     <i class="checkmark icon"></i>
                 </div>
             </div> -->
-        </div>
     </div>
 </div>
diff --git a/app/components/leftPanel/leftPanel.scss b/app/components/leftPanel/leftPanel.scss
index 10222e4..d34a32b 100644
--- a/app/components/leftPanel/leftPanel.scss
+++ b/app/components/leftPanel/leftPanel.scss
@@ -22,7 +22,8 @@
   background-repeat: no-repeat !important;
   margin: auto 10px;
   border-radius: 75px;
-  border: 2px solid;
+  border: 2px solid $text-white;
+  background-position: center;
 }
 
 .leftPhotoName {
@@ -40,7 +41,7 @@
 
 .leftPhotoWrap .header {
     font-size: 18px;
-    color: rgba(255, 255, 255, 0.875);
+    color: $text-white;
 }
 
 .leftPhotoWrap .attribute {
@@ -76,3 +77,20 @@
 .left-attr-column {
   margin-right: 8px;
 }
+
+.left-attr-number {
+  color: $text-gray;
+}
+
+#upgradeModal.modal {
+  .upgrade-modal-header {
+    background-color: #183a5d;
+    color: $text-white;
+  }
+  .upgrade-modal-content {
+    background-color: #0a2232;
+    .ui.header {
+      color: $text-white;
+    }
+  }
+}