- feed design Fixed

This commit is contained in:
Matan Bar Yosef 2015-06-18 21:13:31 +03:00
parent af608da379
commit a2b763e00d
3 changed files with 87 additions and 79 deletions

View file

@ -76,19 +76,12 @@ body.noscroll
margin-top: 1em; margin-top: 1em;
margin-right: 1em; margin-right: 1em;
position: center; position: center;
-webkit-border-radius: 30%; -webkit-border-radius: 30%;
-moz-border-radius: 30%; -moz-border-radius: 30%;
border-radius: 30%; border-radius: 30%;
} }
/*.avatar { .avatar img {
background: rgba(0, 0, 0, 0.2);
}*/
.avatar img {
border-radius: 40px; border-radius: 40px;
position:center; position:center;
width: 80px; width: 80px;
@ -97,7 +90,7 @@ body.noscroll
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75); -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); -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); box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.75);
} }
/* Added BY devMatan */ /* Added BY devMatan */
@ -111,14 +104,8 @@ body.noscroll
}*/ }*/
.campusAvatar img .campusAvatar img
{ {
/*
margin-top: 1em;
margin-right: 1em;
position: center;
*/
border-radius: 40px; border-radius: 40px;
position:center; position:center;
width: 80px; width: 80px;
@ -162,6 +149,26 @@ body.noscroll
/*TODO*/ /*TODO*/
} }
.feed
{
overflow-y: scroll;
height: 300px;
/*width: 100%;*/
}
.feedMessages
{
overflow: scroll;
height: 300px;
width: 100%;
}
.feedTasks
{
overflow: scroll;
height: 300px;
width: 100%;
}
.feedContent .feedContent
{ {
padding-left: 6%; padding-left: 6%;
@ -181,7 +188,6 @@ body.noscroll
border-radius: 150px; border-radius: 150px;
-webkit-border-radius: 150px; -webkit-border-radius: 150px;
-moz-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); box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-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); -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
@ -302,7 +308,6 @@ body.noscroll
.user-box img{ .user-box img{
width: 100%; width: 100%;
border: 4px #7f7f7f solid; border: 4px #7f7f7f solid;
-webkit-border-radius: 5px; -webkit-border-radius: 5px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
border-radius: 5px; border-radius: 5px;
@ -351,6 +356,41 @@ body.noscroll
} }
/*gridList Effects*/
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;
}
md-grid-tile {
transition: all 400ms ease-out 50ms;
}
/*END gridList Effects*/
/* md-list-item .md-no-style.md-button, md-list-item.md-no-proxy.md-button { /* md-list-item .md-no-style.md-button, md-list-item.md-no-proxy.md-button {
font-size: inherit; font-size: inherit;
height: inherit; height: inherit;

View file

@ -8,20 +8,6 @@ angular.module('SeHub')
]; ];
$scope.messages = [ $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, face : imagePath,
what: 'Let me tell you a secret', what: 'Let me tell you a secret',

View file

@ -24,45 +24,27 @@
</md-content> </md-content>
<md-content layout-padding> <md-content layout-padding>
<md-card> <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>
<div class="spacer"></div> <h3>Messages</h3>
<br></br> </md-grid-tile-header>
<md-divider class = "feedContent"> <!-- Enter Wanted MESSAGES Text Here -->
<h4>{{ item.who }}</h4> </md-grid-tile>
<h5>{{ item.what }}</h5> <md-grid-tile class="gray"
<h5><b>{{ item.notes }}</b></h5> md-rowspan="2" md-colspan="3" md-colspan-sm="1">
<h6>{{ item.when }}</h6> <md-grid-tile-header>
</md-divider> <h3>Tasks</h3>
</div> </md-grid-tile-header>
</md-list-item> <!-- Enter Wanted TASKS Text Here -->
</md-grid-tile>
</md-grid-list>
</div> </div>
</md-card> </md-card>
</md-content> </md-content>
<div class="port_spacer"></div>
<div>
<md-content>
<md-card style="margin:0">
<!-- <md-list> -->
<md-subheader class="md-no-sticky" style = "background-color:aliceblue; margin-right:0;">Tasks</md-subheader>
<md-list-item class="md-3-line" ng-repeat="item in tasks">
<!-- <img ng-src="{{item.face}}?{{$index}}" class="md-avatar" alt="{{item.who}}" /> -->
<div class="md-list-item-text" style="border: 1px solid black;">
<md-divider class = "feedContent">
<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> </div>