Skip to content

Commit

Permalink
Merge pull request #21 from jdm135/master
Browse files Browse the repository at this point in the history 
Update UI. Move appStyle to own css file.
  • Loading branch information
@DanielHindi
DanielHindi committed Jan 15, 2016
2 parents 7d277da + ba98dee commit 5fbaa6e
Show file tree
Hide file tree
Showing 4 changed files with 260 additions and 11 deletions.
4 changes: 2 additions & 2 deletions control/content/templates/home.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div ng-if="!ContentHome.socialAppId || !ContentHome.posts.length">
<h3 style="text-align: center;">You do not have any posts yet</h3>
<h4 class="text-center">You do not have any posts yet.</h4>
</div>
<div ng-if="ContentHome.socialAppId" ng-style="{'height': ContentHome.height ? ContentHome.height-100+ 'px' : '800px'}"
style="overflow-y:scroll;" class="infinite-scroll-parent">
Expand Down Expand Up @@ -67,7 +67,7 @@ <h3 style="text-align: center;">You do not have any posts yet</h3>
</div>
<hr class="small margin-zero">
<div ng-if="post.comments.length % 10 == 0 && post.viewComments && !post.moreComments"
class="padding-top-ten head-btn text-center border-bottom-grey padding-bottom-ten">
class="padding-top-ten head-btn text-center padding-bottom-ten">
<a ng-click="ContentHome.loadMoreComments(post)">Show More Comments</a>
</div>
<div class="comments-list" ng-if="post.comments.length && post.viewComments">
Expand Down
254 changes: 252 additions & 2 deletions widget/assets/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,224 @@
/* Plugin CSS */
/* Fixed Bottom */
.holder.has-bottom{
padding-bottom:38px !important;
}
.holder.has-bottom.has-bottom-viewing{
padding-bottom:65px !important;
}
.holder .bottom.fixed-bottom{
position:fixed;
bottom:0;
left:0;
width:100%;
background:#fff;
z-index:11;
}
.holder .bottom div{
padding:0;
}
.holder .bottom .padded{
padding:15px;
}
.holder .bottom div a{
display:inline-block;
width:100%;
height:100%;
padding:8px;
text-decoration:none;
}
.places-plugin .bottom.fixed-bottom .col-xs-4 + .col-xs-4{
border-left:1px solid rgba(20, 20, 20, 0.25);
}
.places-plugin .bottom.fixed-bottom .col-xs-4.active{
background:rgba(0,0,0,0.15);
}
.holder .bottom > .hidden-content{
background:#fff;
}
.holder .places-plugin .bottom,
.holder .fixed-bottom.bottom{
bottom:-270px;
}
.holder .places-plugin .bottom.active,
.holder .fixed-bottom.bottom.active{
bottom:0;
}
.holder .bottom .hidden-content .tabs .tab a,
.notification-plugin .tabs .tab a{
display:block;
padding-top:10px;
color:#5f5f5f;
}
.holder .bottom .hidden-content .tabs .tab + .tab,
.notification-plugin .tabs .tab + .tab{
border-left:1px solid #e5e5e5;
}
.notification-plugin .tabs .tab.active a{
color:#09a3ee;
}
.holder .bottom .hidden-content .tabs .tab.active:after,
.notification-plugin .tabs .tab.active:after{
content:'';
display:block;
width:100%;
height:2px;
background:#09a3ee;
position:absolute;
bottom:-1px;
left:0;
}
.holder .bottom .hidden-content .tab-content .tab{
display:none;
height:229px;
overflow-y:auto !important;
-webkit-overflow-scrolling:touch !important;
}
.notification-plugin .tabs .tab a{
padding:14px 8px 10px;
display:block;
}
.notification-plugin .tab-content .tab{
display:none;
}
.holder .bottom .hidden-content .tab-content .tab.active,
.notification-plugin .tab-content .tab.active{
display:block;
}
.holder .bottom .hidden-content .tab-content a,
.notification-plugin .tab-content a{
height:auto;
}
.holder .bottom .hidden-content .tab-content a.list-item.active{
background:#09a3ee;
color:#fff;
}
.holder .bottom .hidden-content .toggle-btns{
border:1px solid #09a3ee;
}
.holder .bottom .hidden-content .toggle-btns a{
padding:6px 8px 4px;
font-size:12px;
vertical-align:top;
}
.holder .bottom .hidden-content .toggle-btns a.active{
color:#fff;
}
.holder .bottom .extra-links a{
position:absolute;
top:-45px;
left:10px;
border-radius:100%;
font-size:21px;
padding:7px;
text-align:center;
height:35px;
width:35px;
color:#fff;
z-index:13;
opacity:0.8;
}
.holder .bottom .extra-links a.view-type{
top:-95px;

top:-45px;
left:inherit;
right:10px;
padding-top:6px;
font-size:22px;
}
.holder .bottom .viewing-label{
position:absolute;
top:-28px;
padding:3px;
}

.holder .plugin-banner{
position:relative;
border-bottom:none !important;
}
.holder .info-bar,
.holder .info-circle{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:10px 0;
opacity:0.85;
z-index:9;
}
.holder .info-bar{
background:rgba(0,0,0,0.8);
}
.holder .info-circle{
bottom:inherit;
top:28px;
left:50%;
margin-left:-75px;
width:150px;
height:150px;
text-align:center;
border-radius:100%;
background:#efefef;
}
.holder .info-circle.bg-white{
background:rgba(255, 255, 255, 0.8);
}
.holder .info-circle .info-circle-inner{
margin-top:33px;
}
.holder .info-circle .info-circle-inner h1{
font-size:50px;
line-height:54px;
}
.holder .info-circle.small{
width:110px;
height:110px;
margin-left:-55px;
}
.holder .info-circle.small .info-circle-inner{
margin-top:11px;
}
.holder .info-bar p{
max-width:100%;
}
.holder .info-bar .right-icon{
margin-top:7px;
}
.holder .info-bar .pull-right .padded-icon{
padding:5px;
display:inline-block;
width:30px;
height:30px;
}
.holder .info-bar .pull-right span.icon{
font-size:24px;
vertical-align:middle;
}
.holder .info-bar .pull-right span.icon.icon-sm{
font-size:14px;
position:relative;
top:-2px;
}
.holder .info-bar .pull-right.padded-icon span.icon{
font-size:18px;
vertical-align:middle;
}
.social-plugin .head-btn{
position:relative;
}
.social-plugin .head-btn:before{
content:'';
border-bottom:1px solid #ddd;
opacity:0.25;
bottom:0;
left:0;
position:absolute;
width:100%;
}
/* End Plugin CSS */


/* Join Group Link */
.head-btn a{
display:block;
Expand Down Expand Up @@ -47,7 +268,7 @@
/* Bottom Message */
.holder.bottom-post{
background:#fff;
position:absolute;
position:fixed;
left:0;
bottom:0;
width:100%;
Expand Down Expand Up @@ -91,11 +312,13 @@
}
.holder.bottom-post .post-holder .add-media .icon{
font-size:20px;
line-height:24px;
}
.holder.bottom-post .post-holder .send-message input{
border:none;
background:none;
height:100%;
padding-top:7px;
}
@media(max-width: 620px){
p{
Expand All @@ -109,6 +332,8 @@
resize: none;
padding: 2.5% 2%;
line-height:25px;
position:relative;
top:2px;
}

/* BOF Upload image section with uploader and cross */
Expand Down Expand Up @@ -148,4 +373,29 @@
.filename {
color: #555555 !important;
}
/* EOF Upload image section with uploader and cross */
/* EOF Upload image section with uploader and cross */

/* Play Btn */
.play-btn{
position:relative;
}
.play-btn:after{
content:"\e612";
font-family:'icomoon';
position:absolute;
width:30px;
height:26px;
color:#fff;
font-size:30px;
line-height:24px;
top:50%;
left:50%;
margin-top:-12px;
margin-left:-15px;
}
.list-item-media .list-media-holder.play-btn:after{
font-size:24px;
width:24px;
margin-left:-12px;
margin-top:-12px;
}
7 changes: 3 additions & 4 deletions widget/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

<!-- CSS -->
<link rel="stylesheet" href="../../../styles/bootstrap.css">
<link rel="stylesheet" href="../../../styles/appStyle.css">
<link rel="stylesheet" href="../../../styles/siteIcons.css">
<link rel="stylesheet" href="../../../styles/helper.css">
<link rel="stylesheet" href="../../../styles/transitionAnimation.css">
Expand Down Expand Up @@ -44,7 +43,7 @@
<div class="slide content">
<div class="padding-zero" style="height: 100%;">
<div class="social-plugin social-wall" style="height: calc(100% - 45px)">
<div class="padded head-btn text-center border-bottom-grey padding-bottom-ten margin-bottom-fifteen" style="margin:0 !important;">
<div class="padded head-btn text-center padding-bottom-ten margin-bottom-fifteen" style="margin:0 !important;">
<a ng-click="WidgetWall.followUnfollow(WidgetWall.getFollowingStatus())" >{{WidgetWall.getFollowingStatus()}}</a>
</div>
<div style="overflow-x:hidden; width:100%; overflow-y: auto;height: calc(100% - 48px);" class="infinite-scroll-parent">
Expand Down Expand Up @@ -102,15 +101,15 @@
</div>
</div>
<div ng-show="WidgetWall.SocialItems.items.length<=0">
<h4 style="text-align: center;">You do not have any posts yet</h4>
<h5 class="text-center margin-top-fifteen">You do not have any posts yet.</h5>
</div>
</div>
</div>
</div>

</div>
<div class="holder padding-zero bottom-post bodyBackgroundTheme post-container" ng-if="WidgetWall.SocialItems.socialAppId">
<hr class="small">
<hr class="small" style="border-top:none !important;">
<form ng-submit="" handle-phone-submit >
<div class="post-holder clearfix">
<div class="add-media">
Expand Down
6 changes: 3 additions & 3 deletions widget/templates/thread.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="slide content">
<div class="padding-zero" style="height: calc(100% - 45px);">
<div class="social-plugin social-thread" style="height: 100%;">
<div class="padded head-btn text-center border-bottom-grey padding-bottom-ten">
<div class="padded head-btn text-center padding-bottom-ten">
<a ng-click="Thread.followUnfollow(Thread.getFollowingStatus())">{{Thread.getFollowingStatus()}}</a>
</div>
<div style="height: calc(100% - 48px);overflow-y: auto;overflow-x: hidden;">
Expand Down Expand Up @@ -54,7 +54,7 @@
</div>
<hr class="small margin-bottom-zero">
<div ng-if="Thread.post.commentsCount > 10 && Thread.showMore"
class="padded head-btn text-center border-bottom-grey padding-bottom-ten margin-bottom-five">
class="padded head-btn text-center padding-bottom-ten margin-bottom-five">
<a ng-click="Thread.loadMoreComments()">Load More Comments</a>
</div>
<div class="comments-list">
Expand Down Expand Up @@ -111,7 +111,7 @@
</div>
</div>
<div class="holder padding-zero bottom-post bodyBackgroundTheme post-container">
<hr class="small">
<hr class="small" style="border-top:none !important;">
<div class="post-holder clearfix">
<div class="add-media">
<a>
Expand Down

0 comments on commit 5fbaa6e

Please sign in to comment.