Merge pull request #49 from sagidayan/UI

Ui

templates/css/theme.css

@@ -76,28 +76,21 @@ body.noscroll
   margin-top: 1em;
   margin-right: 1em;
   position: center;
-
   -webkit-border-radius: 30%;
   -moz-border-radius: 30%;
   border-radius: 30%;
-
-
 }
 
-/*.avatar {
+.avatar img {
-  background: rgba(0, 0, 0, 0.2);
-  }*/
-
-  .avatar img {
   border-radius: 40px;
   position:center;
   width: 80px;
   height: 80px;
-    margin: 6px;  /*centers the image in the parent element */
+  margin: 6px;
   -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
   -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
   box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
-  }
+}
 
   /* Added BY devMatan */
 
@@ -111,14 +104,8 @@ body.noscroll
  
   }*/
 
-  .campusAvatar img
+.campusAvatar img
-  {
+{
-/*
-  margin-top: 1em;
-  margin-right: 1em;
-  position: center;
-  */
-
   border-radius: 40px;
   position:center;
   width: 80px;
@@ -157,9 +144,24 @@ body.noscroll
   margin-bottom: 10px;
 }
 
-.md-avatar img  
+.feed
 {
-  /*TODO*/
+  overflow-y: scroll;
+  height: 300px;
+  /*width: 100%;*/
+}
+
+/*.feedMessages
+{
+  overflow: scroll;
+  height: 300px;
+  width: 100%;
+}
+.feedTasks
+{
+  overflow: scroll;
+  height: 300px;
+  width: 100%;
 }
 
 .feedContent
@@ -167,7 +169,7 @@ body.noscroll
   padding-left: 6%;
   font-size: 15px;
   display:table;
-}
+}*/
 
 .md-no-sticky
 {
@@ -181,7 +183,6 @@ body.noscroll
   border-radius: 150px;
   -webkit-border-radius: 150px;
   -moz-border-radius: 150px;
-  /*background: url(http://i61.tinypic.com/v86f7.png) no-repeat;*/
   box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
   -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
@@ -256,7 +257,6 @@ body.noscroll
     -moz-border-radius: 100px;
     border-radius: 50px;
     width: 30%;
-    /*top: -40px;*/
     position: relative;
     z-index: 50;
   }
@@ -302,7 +302,6 @@ body.noscroll
   .user-box img{
     width: 100%;
     border: 4px #7f7f7f solid;
-
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
@@ -350,17 +349,66 @@ body.noscroll
     box-sizing: content-box;
   }
 
+/*gridList Effects*/
 
-/*  md-list-item .md-no-style.md-button, md-list-item.md-no-proxy.md-button {
+md-grid-list
+{
+  margin: 8px;
+}
+.gray
+{
+  background:#f5f5f5;
+}
+
+.aliceblue {
+  background: aliceblue; 
+}
+  .green {
+  background: #b9f6ca;
+}
+  .yellow {
+  background: #ffff8d;
+}
+  .blue {
+  background: #84ffff;
+}
+  .purple {
+  background: #b388ff;
+}
+  .red {
+  background: #ff8a80;
+}
+
+.whiteframedemoBasicUsage md-whiteframe {
+  background: #fff;
+  margin: 20px;
+  padding: 20px;
+}
+
+
+/*  md-grid-tile {
+  transition: all 400ms ease-out 50ms;
+}*/
+
+/*END gridList Effects*/
+
+
+.tasksContent
+{
+  /*float:left;*/
+}
+
+
+  md-list-item .md-no-style.md-button, md-list-item.md-no-proxy.md-button {
   font-size: inherit;
   height: inherit;
   text-align: left;
   text-transform: none;
-  width: 100%;
+  width: 300px;
   white-space: normal;
 }
 
-md-list-item, md-list-item .md-list-item-inner {
+/*md-list-item, md-list-item .md-list-item-inner {
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;

templates/js/app.js

@@ -41,8 +41,11 @@ app.config(['$routeProvider', '$locationProvider',
 			.when('/Settings', {
 				templateUrl: 'templates/views/settings.html',
 				controller: 'settingsController'
+			})
+			.when('/tasks', {
+				templateUrl: 'templates/views/tasks.html',
+				controller: 'tasksController'
 			});
-
 	}
 ]);
 

templates/js/controllers/homeController.js

@@ -8,20 +8,6 @@ angular.module('SeHub')
     ];
 
     $scope.messages = [
-      {
-        face : imagePath,
-        what: 'I need to go to luna-park',
-        who: 'Matan Bar Yosef',
-        when: '3:08PM',
-        notes: " Lets do something"
-      },
-      {
-        face : imagePath,
-        what: 'Lets Lets Lets',
-        who: 'Matan Bar Yosef',
-        when: '4:33PM',
-        notes: " Lets go drink something"
-      },
       {
         face : imagePath,
         what: 'Let me tell you a secret',

templates/js/controllers/mainController.js

@@ -53,7 +53,7 @@ angular.module('SeHub')
 				"title": "Tasks",
 				"icon": "fa fa-clipboard",
 				"style": "",
-				"route": "/campuses"
+				"route": "/tasks"
 			}, {
 				"title": "Settings",
 				"icon": "fa fa-cogs",

templates/views/home.html

@@ -22,47 +22,52 @@
 			</div>
 		</md-card>
 	</md-content>
+	
 	<md-content layout-padding>
 		<md-card>
-		<div class = "feed" ><!--  layout-align="center center"> -->
+			<div class = "feed">
-			<div>
+				<md-grid-list
-				<md-subheader class="md-no-sticky" style = "background-color:aliceblue; margin-right:0;">Messages</md-subheader>
+			        md-cols-sm="1" md-cols-md="2" md-cols-gt-md="6"
-				<md-list-item class="md-3-line" ng-repeat="item in messages">
+			        md-row-height-gt-md="1:1" md-row-height="2:2"
-					<div class="md-list-item-text" style="border: 1px solid black;">
+			        md-gutter="12px" md-gutter-gt-sm="8px" >
-						<img ng-src="{{user.avatar_url}}" class="roundUserAvatar" alt="{{item.who}}" style="margin:8px"/> 
+				    <md-grid-tile class="aliceblue"
-						<!-- Instead of "user.avatar.url" suppose to be "postedUserAvatarUrl" -->
+				        md-rowspan="2" md-colspan="3" md-colspan-sm="1">
+						<md-grid-tile-header>
+					        <h3>Messages</h3>
+						</md-grid-tile-header>
+						In The Future Will Enter Wanted MESSAGES Text Here
+				    </md-grid-tile>
+			    	<md-grid-tile class="gray"
+						md-rowspan="2" md-colspan="3" md-colspan-sm="1">
+						<md-grid-tile-header>
+				        	<h3>Tasks</h3>
+						</md-grid-tile-header>
+						<!-- In The Future Will Enter Wanted TASKS Text Here -->
+						<div class = "tasksContent" style:"text-align= left;">
+							For Task 3 Press: <a href="http://localhost:8080/home#/tasks">Task #3</a>
+							<br>=====================</br>
+							For Task 4 Press: <a href="http://localhost:8080/home#/home">Task #4</a>
+						</div>
 
-						<div class="spacer"></div>
+					</md-grid-tile>
-						<br></br>
+				</md-grid-list>
-						<md-divider class = "feedContent">
-							<h4>{{ item.who }}</h4>
-							<h5>{{ item.what }}</h5>
-							<h5><b>{{ item.notes }}</b></h5>
-							<h6>{{ item.when }}</h6>
-						</md-divider>	
-					</div>
-				</md-list-item>
 			</div>
 		</md-card>
 	</md-content>
-	<div class="port_spacer"></div>
+
-	<div>
+
-		<md-content>
+	<!-- <div layout="row" layout-fill style="padding-right: 320px;">
-			<md-card style="margin:0">
+		<md-whiteframe class="md-whiteframe-z4" layout layout-align="center center">
-				<!-- <md-list> -->
+			<span>.md-whiteframe-z4</span>
-				<md-subheader class="md-no-sticky" style = "background-color:aliceblue; margin-right:0;">Tasks</md-subheader>
+		</md-whiteframe>
-				<md-list-item class="md-3-line" ng-repeat="item in tasks">
+		<md-whiteframe class="md-whiteframe-z5" layout layout-align="center center">
-				<!-- <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" /> -->
+			<span>.md-whiteframe-z5</span>
-					<div class="md-list-item-text" style="border: 1px solid black;">
+		</md-whiteframe>
-						<md-divider class = "feedContent">
+	</div> -->
-							<h6><u><em>Ex: {{ item.ExNum }}</em></u></h6>
+
-							<h5>Task Title: {{ item.notes }}</h5>
+
-							<h6>Due Date: {{ item.dueDate }}</h6>
+
-						</md-divider>	
+
-					</div>
+
-				</md-list-item>
+
-			</md-card>
-		</md-content>	
-</div>
-		<!-- </md-card> -->
 </div>