More Setings UI Tweaks

This commit is contained in:
Sagi Dayan 2015-06-17 22:46:26 +03:00
parent d736cb021a
commit 51d11cac93
3 changed files with 187 additions and 56 deletions

View file

@ -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*/

View file

@ -41,17 +41,38 @@ angular.module('SeHub')
}
}
// {
// name: ";"
// isLecturer: false
// email: "sagidayan@gmail.com"
// username: "sagidayan"
// seToken: "76cd4178-94dd-4cb4-b464-111d2239e567"
// isFirstLogin: true
// campuses_id_list: [0]
// classes_id_list: [0]
// avatar_url: "https://avatars.githubusercontent.com/u/2984053?v=3"
// }
/**
* DEBUG DATA
*/
$scope.courses = [{
"courseName": "Advance Math",
"campusName": "JCE",
"startDate": {
"year": 2015,
"month": 4,
"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'
}];
}]);
}
]);

View file

@ -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>