Alterações tela ajuda e menu principal

paulovirote · Oct 20, 2017 · 94415dd · 94415dd
1 parent b77f1fb
commit 94415dd
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 69 deletions.
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "vue-bulma-components": "^1.5.0",
     "vue-notification": "^1.3.1",
     "vue-router": "^2.7.0",
+    "vuetify": "^0.16.9",
     "vulma": "0.0.11",
     "webrtc-adapter": "^4.2.2"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -12,12 +12,10 @@
   </div>
 </template>
 <script>
-  import tabsComponent from './components/tabs/Tabs'
   import menuComponent from './components/menu/Menu'
   export default {
     name: 'app',
     components: {
-      'tabs': tabsComponent,
       'menu-component': menuComponent
     }
   }
@@ -32,6 +30,10 @@ body
   background-color: iuvo-main-blue;
   height: 100vh;
 
+.wrapper{
+  padding-top 68px
+}
+
 #app
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;

diff --git a/src/components/home/Home.vue b/src/components/home/Home.vue
@@ -2,15 +2,13 @@
     <forecast></forecast>
 </template>
 <script>
-import tabsComponent from '../tabs/Tabs'
 import menuComponent from '../menu/Menu'
 import weatherForecastComponent from '../weatherForecast/WeatherForecast'
 
 export default {
   name: 'timeline',
 
   components: {
-    'tabs': tabsComponent,
     'menu-component': menuComponent,
     'forecast': weatherForecastComponent
   },

diff --git a/src/components/menu/Menu.vue b/src/components/menu/Menu.vue
@@ -43,7 +43,7 @@ export default {
       accountTitle: 'Conta',
       paymentTitle: 'Pagamento',
       projectsTitle: 'Projetos',
-      title: 'Timeline'
+      title: 'Iuvo'
     }
   }
 

diff --git a/src/components/tabs/Tabs.vue b/src/components/tabs/Tabs.vue
diff --git a/src/components/timeline/Timeline.vue b/src/components/timeline/Timeline.vue
@@ -2,14 +2,12 @@
   <div class="wrapper-card"></div>
 </template>
 <script>
-import tabsComponent from '../tabs/Tabs'
 import menuComponent from '../menu/Menu'
 
 export default {
   name: 'timeline',
 
   components: {
-    'tabs': tabsComponent,
     'menu-component': menuComponent
   }
   // data () {

diff --git a/src/components/weatherForecast/WeatherForecast.vue b/src/components/weatherForecast/WeatherForecast.vue
@@ -7,11 +7,27 @@
                     <h2 class="city-name">Charqueadas</h2>
                 </div>
                 <div class="weather-image-wrapper">
-                    <img src="../../assets/images/animated/day.svg" alt="Tempo Atual" class="weather-image">
+                    <div class="weather-description">
+                        Ensolarado
+                    </div>
+                    <div class="weather-information">
+                        <img src="../../assets/images/animated/day.svg" alt="Tempo Atual" class="weather-image">
+                        <div class="main-temperature">
+                            23°
+                        </div>
+                    </div>
+                    <div class="weather-risk normal">
+                        Sem risco
+                    </div>
+                    <div class="other-temperature">
+                        <i class="fa fa-long-arrow-up maximum"></i> 23 | 15 <i class="fa fa-long-arrow-down minimum"></i>
+                    </div>
                 </div>
+
             </div>
 
         </div>
+        <vulma-button class="danger" color='primary'>Preciso de Ajuda</vulma-button>
     </div>
 </template>
 
@@ -28,18 +44,82 @@
         position: relative;
 
     .weather-image-wrapper
-        background-color: #1c2d3e;
+        background-color #1c2d3e
+
+        .weather-description, .weather-risk
+            color #fff
+            position absolute
+            width 100%
+
+        .weather-description
+            text-align center
+            margin-top 5px
+            font-size: 20px
     
-    .weather-image
-        width: 70%;
-        max-width: 200px;
+        .weather-information
+            text-align left
+            position relative
+            padding 15px 0
+            .weather-image
+                width 70%
+                max-width 200px
+                display inline
+            .main-temperature
+                color #fff
+                position: absolute
+                top 50%
+                right 20px
+                text-align center
+                -webkit-transform translateY(-50%)
+                -ms-transform translateY(-50%)
+                transform translateY(-50%)
+                font-size 60px
+
+        .weather-risk
+            bottom 8px
+            right 8px
+            width auto
+            padding 2px 10px
+            border-radius 100px
+
+        .normal
+            background-color #00d1b2
+        .alert
+            background-color #f1c40f
+        .danger
+            background-color #e74c3c
 
+        .other-temperature
+            position absolute
+            bottom 0px
+            left 8px
+            bottom 8px
+            width auto
+            padding 2px 10px
+            border-radius 100px
+            background-color #fff
+
+        .maximum
+            color #e74c3c
+        .minimum
+            color #3498db
     .city-information
-        color: #fff;
+        color #fff
 
     .city-name
-        margin: 20px 0px 10px;
-        font-size: 28px;
-        font-weight: inherit;
-        font-style: normal;
+        margin 20px 0
+        font-size 28px
+        font-weight inherit
+        font-style normal
+
+    .danger
+        font-size 20px
+        width 100%
+        height 66px
+        position absolute
+        bottom 0
+        left 50%
+        transform translate3d(-50%,0,0)
+        background-color #e74c3c
+
 </style>
diff --git a/src/main.js b/src/main.js
@@ -7,13 +7,15 @@ import Notifications from 'vue-notification'
 import Vulma from 'vulma'
 import Bulma from 'Bulma'
 import vueBulmaComponents from 'vue-bulma-components'
+import Vuetify from 'vuetify'
 
 Vue.config.productionTip = false
 
 Vue.use(Vulma)
 Vue.use(Bulma)
 Vue.use(Notifications)
 Vue.use(vueBulmaComponents)
+Vue.use(Vuetify)
 
 /* eslint-disable no-new */
 new Vue({

diff --git a/src/router/index.js b/src/router/index.js
@@ -1,8 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Hello from '@/components/Hello'
-import SignUp from '@/components/signUp/SignUp'
-import SignIn from '@/components/signIn/SignIn'
 import Timeline from '@/components/timeline/Timeline'
 import Home from '@/components/home/Home'
 
@@ -20,16 +18,6 @@ export default new Router({
       name: 'Hello',
       component: Hello
     },
-    {
-      path: '/signUp',
-      name: 'SignUp',
-      component: SignUp
-    },
-    {
-      path: '/signIn',
-      name: 'SignIn',
-      component: SignIn
-    },
     {
       path: '/timeline',
       name: 'Timeline',