Merge pull request #11 from fga-gpp-mds/interface_improvement

Interface improvement
falko-org · Sep 29, 2017 · 74e76f4 · 74e76f4
2 parents 2324925 + d83bbcd
commit 74e76f4
Show file tree

Hide file tree

Showing 14 changed files with 213 additions and 189 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,7 +13,6 @@
 #Custom
 node_modules
 *.pid
-package-lock.json
 
 #Ignore vim temporary files
 *.sw*

diff --git a/.travis.yml b/.travis.yml
@@ -28,7 +28,12 @@ notifications:
     slack: gppmds8-github:sJE6QlBfPGMkfUf48wuTsKa7
 
 script:
-  - "npm test"
+  - docker pull alaxalves/front:1.3
+  - docker create --name travis -v `pwd`:/Falko-2017.2-BackEnd alaxalves/front:1.3
+  - sudo docker start travis
+  - docker logs -f travis
+  - test `docker ps -a --filter exited=1 | wc -l` == "1"
+
 
 after_success:
-  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
+  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.vue b/src/App.vue
@@ -1,24 +1,19 @@
 <template>
-  <div id="app">
-  	<nav class="navbar topo static-top fixed-top navbar-expand-lg container.fluid">
-        <div class = "navbar-header">
-          <a class="navbar-brand" href="#">
-            <img src = "./assets/Falko - Final .png" width="50" height="40"/>
-            <img src = "./assets/Falko - Texto.png" width="50" height="40"/>
-          </a>
-        </div>
-        <div class="form-inline pesquisa my-2 my-lg-0">
-          <input type="text" class="form-control" placeholder="Search">
-          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">OK</button>
-        </div>
-    </nav>
+  <div>
+    <navbar></navbar>
     <router-view></router-view>
   </div>
 </template>
 
 <script>
+import Navbar from '@/components/Navbar.vue'
+
 export default {
-  name: 'app'
+  name: 'app',
+
+   components: {
+    navbar: Navbar
+  },
 }
 </script>
 
@@ -33,23 +28,8 @@ export default {
   margin-top: 100px;
 }
 
-.topo{
-  padding: 0.2%;
-  width: 100%;
-  background-color: #E8E8E8;
-}
-
 .navbar-brand{
-  left: 30em;
-  margin-left: 0.5em;
-  height: 100%;
-}
-
-.pesquisa{
-  position: fixed;
-  left: 40%;
-  right: 20%;
-  top : 0.45em;
+  margin-left: 1em;
 }
 
 .falko-button {
@@ -66,4 +46,19 @@ export default {
 .falko-button:hover {
   background-color: #86B1ED;
 }
+
+.falko-button-danger {
+  align-self: center;
+  margin: 0.5em 0;
+  border-radius: 2em;
+  padding: 0.5em 2em;
+  cursor: pointer;
+  background-color: #AA0000;
+  border-width: 0;
+  font-weight: bold;
+}
+
+.falko-button-danger:hover {
+  background-color: #660000;
+}
 </style>
diff --git a/src/assets/Falko - Final .png b/src/assets/Falko - Final .png
diff --git a/src/assets/Falko - Texto.png → src/assets/falko-text.png b/src/assets/Falko - Texto.png → src/assets/falko-text.png
diff --git a/src/assets/github.png b/src/assets/github.png
diff --git a/src/components/AddProject.vue b/src/components/AddProject.vue
@@ -1,32 +1,34 @@
 <template>
-	<div class = "addproj">		
-		<button type="button" class="btn btn-info btn-md " id="addbutton" data-toggle="modal" data-target="#myModal">
-			Adicionar
-		</button>
+	<div class="addproj">		
+		<div class="text-center">
+			<button type="button" class="btn btn-info btn-md falko-button" id="addButton" data-toggle="modal" data-target="#myModal">
+				Add a Project
+			</button>
+		</div>
 
 		<div class="modal fade" id ="myModal" role="dialog">
 			<div class="modal-dialog">	
 		    	<div class="modal-content">
-			        <div class="modal-header">
-			          	<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
-			              <span aria-hidden="true">&times;</span>
-			            </button>
-			          <h4 class="modal-title">Adicionar projeto</h4>
-			        </div>
-			        <div class="modal-body">
-			              <p><label > Nome </label></p>
-			              <p><input type = "text" v-model="name"></input><br></p>
-			              <p><label> Descrição </label></p>
-			              <input type = "text" v-model="description"></input><br>
-			        </div>
-			        <div class="modal-footer">
-			          <button type="button" class="btn btn-primary" v-on:click="addProject" data-dismiss="modal">Salvar</button>
-		        	  <button type="button" class="btn btn-secondary" data-dismiss="modal" >Fechar</button>	
-			        </div>
+						<div class="modal-header">
+							<h4 class="modal-title">Add a Project</h4>
+								<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
+									<span aria-hidden="true">&times;</span>
+								</button>
+						</div>
+						<div class="modal-body">
+							<p><label>Name</label></p>
+							<p><input type = "text" v-model="name"></input><br></p>
+							<p><label>Description</label></p>
+							<input type = "text" v-model="description"></input><br>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-primary" v-on:click="addProject" data-dismiss="modal">Save</button>
+							<button type="button" class="btn btn-secondary" data-dismiss="modal" >Close</button>	
+						</div>
 				</div>
 			</div>
 		</div>																	
-    </div>
+	</div>
 </template>
 
 <script>
@@ -61,10 +63,21 @@ export default {
 }
 </script>
 
-<style >
+<style scoped>
+#addButton {
+	margin-top: 2em;
+}
+
 .modal-body{
   position: relative;
   top: 5px;
 }
 
+p {
+	margin-bottom: 0.5em;
+}
+
+label {
+	margin-bottom: 0em;
+}
 </style>
diff --git a/src/components/DeleteProject.vue b/src/components/DeleteProject.vue
@@ -1,23 +1,25 @@
 <template>
-	<div class = "delproject">		
-		<button type="button" class="btn btn-info btn-md " id="deletebutton" data-toggle="modal" data-target="#myModal">
-			Deletar
+	<div class="delproject">		
+		<button type="button" class="btn btn-info btn-md falko-button-danger" id="deletebutton" data-toggle="modal" data-target="#myModal">
+			Delete
 		</button>	
 		<div class="modal fade" id ="myModal" role="dialog">
 			<div class="modal-dialog">	
 		    	<div class="modal-content">
 			        <div class="modal-header">
+									<div>
+			            	<h4 class="modal-title">Delete Project?</h4>
+									</div>
 			          	<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
 			              <span aria-hidden="true">&times;</span>
 			            </button>
-			            <h4 class="modal-title">Apagar Projeto</h4>
 			        </div>
 			        <div class="modal-body">
-			              <p><label > Você tem certeza que deseja fazer isso?</label></p>
+			          <p><label> Are you sure?</label></p>
 			        </div>
 			        <div class="modal-footer">
-            			<button v-on:click="delproje" type="button" class="btn btn-primary" data-dismiss="modal" >Sim</button>            			
-		        	  <button type="button" class="btn btn-secondary" data-dismiss="modal">Não</button>	
+            			<button v-on:click="delproje" type="button" class="btn btn-primary" data-dismiss="modal" >Yes</button>            			
+		        	  <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>	
 			        </div>
 				</div>
 			</div>
@@ -51,11 +53,4 @@ export default {
 
 <style scoped>
 
-#deletebutton {
-  position: fixed;
-  top: 40%;
-  width: 7em;
-  left: 38em;
-  resize: both;
-}
 </style>
diff --git a/src/components/EditProject.vue b/src/components/EditProject.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class = "editproject">		
-		<button type="button" class="btn btn-info btn-md " id="editbutton" data-toggle="modal" data-target="#editModal">
-			Editar
+		<button type="button" class="btn btn-info btn-md falko-button" id="editbutton" data-toggle="modal" data-target="#editModal">
+			Edit
 		</button>
 
 		<div class="modal fade" id ="editModal" role="dialog">
@@ -11,17 +11,17 @@
 			          	<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
 			              <span aria-hidden="true">&times;</span>
 			            </button>
-			          <h4 class="modal-title">Editar projeto</h4>
+			          <h4 class="modal-title">Edit Project</h4>
 			        </div>
 			        <div class="modal-body">
-			              <p><label > Nome </label></p>
-			              <p><input type = "text" v-model="name"></input><br></p>
-			              <p><label> Descrição </label></p>
-			              <input type = "text" v-model="description"></input><br>
+								<p><label > Name </label></p>
+								<p><input type = "text" v-model="name"></input><br></p>
+								<p><label> Description </label></p>
+								<input type = "text" v-model="description"></input><br>
 			        </div>
 			        <div class="modal-footer">
-			          <button type="button" class="btn btn-primary" v-on:click="editProject" data-dismiss="modal">Salvar</button>
-		        	  <button type="button" class="btn btn-secondary" data-dismiss="modal" >Fechar</button>	
+			          <button type="button" class="btn btn-primary" v-on:click="editProject" data-dismiss="modal">Save</button>
+		        	  <button type="button" class="btn btn-secondary" data-dismiss="modal" >Close</button>	
 			        </div>
 				</div>
 			</div>
@@ -58,10 +58,4 @@
 </script>
 
 <style scoped>
-	#editbutton{
-		position: fixed;
-		top: 40%;
-		resize: both;
-
-	}
 </style>
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
@@ -5,13 +5,10 @@
         <div class="row justify-content-around center-block no-margin">
           <div class="col-md-4 align-self-center">
             <h1>Start now!</h1>
-            <p class="white-description">
-              The Falko platform was designed with the focus on meeting the need for agile
-              project managers to track the productivity of teams and projects managed in a
-              more simplified way. The application aims to present the metrics established,
-              through the data collected in GitHub, as relevant information and compact
-              reports. Thus, it will centralize all the information necessary for the analysis
-              and decision making of the manager.
+            <p class="white-description">              
+              Falko was designed to fit the agile project managers needs. By 
+              giving the necessary tools to improve the <i>vision</i> and control 
+              about your teams, Falko helps you make the best choices.
             </p>
           </div>
 
@@ -25,14 +22,11 @@
       <div class="parallax">
         <div class="row justify-content-around center-block no-margin" id="sectionParallax">
           <div class="col-sm-5 align-self-center" id="loginComponent">
-            <h1>See beyond</h1>
+            <h1>Free Software</h1>
             <p class="white-description">
-              The Falko platform was designed with the focus on meeting the need for agile
-              project managers to track the productivity of teams and projects managed in a
-              more simplified way. The application aims to present the metrics established,
-              through the data collected in GitHub, as relevant information and compact
-              reports. Thus, it will centralize all the information necessary for the analysis
-              and decision making of the manager.
+              Falko is under the MIT license. What does that means? You can use it, 
+              download the source code, improve and do your own based custom software, 
+              and more! Feel free to contribute too!
             </p>
           </div>
 
@@ -43,28 +37,25 @@
       </div>
 
     <div class="" id="sectionDark">
-      <div class="row justify-content-center no-margin">
-        <div class="col-sm-4" align="center" id="registerComponent">
-          <login-register></login-register>
+      <div class="row justify-content-around no-margin">
+        <div class="col-sm-5 align-self-center" align="center">
+          <img src="../assets/github.png" class="img-fluid" width="400em" alt="Falko" id="falkoLogo" />
         </div>
 
         <div class="col-sm-6 align-self-center">
-          <h1>Another Lorem Ipsum</h1>
-          <p class="white-description">
-            The Falko platform was designed with the focus on meeting the need for agile
-            project managers to track the productivity of teams and projects managed in a
-            more simplified way. The application aims to present the metrics established,
-            through the data collected in GitHub, as relevant information and compact
-            reports. Thus, it will centralize all the information necessary for the analysis
-            and decision making of the manager.
-          </p>
+          <h1>See beyond</h1>
+            <p class="white-description">
+              All data comes from Github's API. Track your repositories, commits,
+              issues, branches with graphs and visual data.
+            </p>
         </div>
 
       </div>
     </div>
     <div class="card-footer" id="footer">
       <a>
-Copyright (c) 2017 Falko - UnB-FGA (GPP/MDS) Grupo 8 Segundo Semestre de 2017</a>
+        Copyright (c) 2017 Falko - UnB-FGA (GPP/MDS) Grupo 8 Segundo Semestre de 2017
+      </a>
     </div>
   </div>
 </template>
@@ -154,8 +145,7 @@ h1 {
 #footer {
   background-color: #01161E;
   margin: 0;
-  max-height: 3em;
-  font-size: smaller;
+  padding: 1.5em 0;
   color: #598392;
   font-size: 0.9rem;
   text-align: center;
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,6 @@ @@
     #Custom
     node_modules
     *.pid
-    package-lock.json
     #Ignore vim temporary files
     *.sw*
@@ Expand Down @@