More Setings UI Tweaks

templates/css/theme.css

@@ -248,3 +248,62 @@ body.noscroll
     text-decoration: none !important;
     color: #7f7f7f;
   }
+
+/*Settings Style*/
+
+  .settingList .settingListItem:hover{
+    background-color: #E2E2E2;
+    font-weight: bold;
+  }
+
+  .settingList .settingListItemRoot{
+    list-style: none;
+    padding: 0;
+    padding-left: 0;
+  }
+
+  .settingList .settingListItem{
+    width: 100%;
+    padding: 15px 0px auto 15px;
+  }
+
+
+/*End Settings*/
+
+
+  /*md Effects*/
+
+.md-avatar{
+    width: 40px;
+    height: 40px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    margin-right: 16px;
+    border-radius: 50%;
+    box-sizing: content-box;
+  }
+
+
+  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%;
+  white-space: normal;
+}
+
+md-list-item, md-list-item .md-list-item-inner {
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 48px;
+}
+
+/*End Effects for MD*/

templates/js/controllers/settingsController.js

@@ -41,17 +41,38 @@ angular.module('SeHub')
 				}
 			}
 
-		// {
+			/**
-		// name: ";"
+			 * DEBUG DATA
-		// isLecturer: false
+			 */
-		// email: "sagidayan@gmail.com"
+			$scope.courses = [{
-		// username: "sagidayan"
+				"courseName": "Advance Math",
-		// seToken: "76cd4178-94dd-4cb4-b464-111d2239e567"
+				"campusName": "JCE",
-		// isFirstLogin: true
+				"startDate": {
-		// campuses_id_list: [0]
+					"year": 2015,
-		// classes_id_list: [0]
+					"month": 4,
-		// avatar_url: "https://avatars.githubusercontent.com/u/2984053?v=3"
+					"day": 3
-		// }
+				},
+				"endDate": {
+					"year": 2016,
+					"month": 5,
+					"day": 14
+				},
+				"taskFlag": false,
+				"campus_avatar": "https://yt3.ggpht.com/--ZkWxybWGOM/AAAAAAAAAAI/AAAAAAAAAAA/_nAICC_kzzI/s88-c-k-no/photo.jpg"
+			}];
+
+			$scope.campuses = [{
+				'title': 'JCE',
+				'email_ending': '@post.jce.ac.il',
+				'master_user_id': 123453433341,
+				'avatar_url': 'https://yt3.ggpht.com/--ZkWxybWGOM/AAAAAAAAAAI/AAAAAAAAAAA/_nAICC_kzzI/s88-c-k-no/photo.jpg'
+			}, {
+				'title': 'Stanford',
+				'email_ending': '@post.jce.ac.il',
+				'master_user_id': 123453433341,
+				'avatar_url': 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR9M4uQgaJP1zyiCGw-dK31hU8buWqeuOi9vTXBd4Y8hQcFTZqA'
+			}];
 
 
-	}]);
+		}
+	]);

templates/views/settings.html

@@ -9,6 +9,7 @@
 			<div>
 				<md-card layout-padding>
 					<div id="profile" layout="column">
+					<!-- User Profile Box -->
 						<div class="user-box" layout="row">
 							<div>
 								<img ng-src="{{user.avatar_url}}" alt="" style="width:20%">
@@ -20,6 +21,7 @@
 							</div>
 						</div>
 					</div>
+					<!-- Start View Profile -->
 					<div layout="column" ng-if="!isEditMode">
 						<div>
 							<h2>{{user.name}}</h2>
@@ -31,7 +33,7 @@
 							I Am a: {{(user.isLecturer) ? "Lecturer" : "Student"}}
 						</div>
 					</div>
-
+					<!-- End View Profile -->
 					<!-- Starting Edit Mode Div -->
 					<div layout="column" ng-if="isEditMode">
 						<div>
@@ -52,8 +54,57 @@
   							</md-switch>
 						</div>
 					</div>
+					<!-- End Edit Div -->
 				</md-card>
 			</div>
+			<!-- Campuses & Classes Div -->
+			<div flex>
+				<md-card layout-padding>
+					<h3><i class="fa fa-graduation-cap"></i> My Classes</h3>
+					<div class="settingList">
+						<div class="settingListRoot">
+	                        <div ng-repeat="course in courses" class="settingListItem" layout="row">
+	                        	<div>
+                            		<img alt="{{ person.name }}" ng-src="{{ course.campus_avatar }}" class="md-avatar" />
+	                        	</div>
+                            	<div class="port_spacer">
+					    			{{ course.courseName }} - <strong>IN</strong> {{course.campusName}}
+                            	</div>
+					    		<div class="spacer"></div>
+					    		<div>
+						    		<md-button class="">
+						    		X
+						    		</md-button>
+					    		</div>
+	                            <md-divider ng-if="!$last"></md-divider>
+	                        </div>
+	                    </div>
+					</div>
+
+					<h3><i class="fa fa-university"></i> My Campuses</h3>
+
+					<div class="settingList">
+						<div class="settingListRoot">
+	                        <div ng-repeat="campus in campuses" class="settingListItem" layout="row">
+	                        	<div>
+                            		<img alt="{{ person.name }}" ng-src="{{ campus.avatar_url }}" class="md-avatar" />
+	                        	</div>
+                            	<div class="port_spacer">
+					    			{{ campus.title }} - 
+                            	</div>
+					    		<div class="spacer"></div>
+					    		<div>
+						    		<md-button class="">
+						    		X
+						    		</md-button>
+					    		</div>
+	                            <md-divider ng-if="!$last"></md-divider>
+	                        </div>
+	                    </div>
+					</div>
+				</md-card>
+			</div>
+			<!-- End Campuses & Classes Div -->
 		</div>
 		</md-card>