"SmashQ User layout"
Bootstrap 4.1.1 Snippet by gbdevteam

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style> @import url(https://fonts.googleapis.com/css?family=Oswald:400,300); @import url(https://fonts.googleapis.com/css?family=Open+Sans); html, body { max-width: 100%; overflow-x: hidden; } .popup-box { background-color: #ffffff; border: 1px solid #b0b0b0; bottom: 0px; display: none; height: 415px; position: fixed; z-index: 100; right: 70px; width: 300px; font-family: 'Open Sans', sans-serif; } .round.hollow { margin: 0px 0 0; } .round.hollow a { width: 112px; height: 30px; border-radius: 15px; border-style: none; color: white; font-size: 18px; font-weight: 700; } .round.hollow a:hover { width: 112px; height: 30px; border-radius: 15px; border-style: none; color: white; font-size: 18px; font-weight: 700; } .popup-box-on { display: block !important; } .popup-box .popup-head { background-color: #fff; clear: both; color: #000000; display: inline-table; font-size: 21px; padding: 7px 10px; width: 100%; font-family: Oswald; } .bg_none i { border: 1px solid #f9f9f9; border-radius: 25px; color: #ffffff; font-size: 17px; background-image: linear-gradient(180deg,#000,#000); height: 33px; line-height: 30px; width: 33px; } .bg_none:hover i { border: 1px solid #000; border-radius: 25px; color: #fff; font-size: 17px; height: 33px; line-height: 30px; width: 33px; } .bg_none { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; } .popup-box .popup-head .popup-head-right { margin: 11px 7px 0; } .popup-box .popup-messages { } .popup-head-left img { border: 1px solid #7b7b7b; border-radius: 50%; width: 44px; } .popup-messages-footer > textarea { border-bottom: 1px solid #b2b2b2 !important; height: 34px !important; margin: 7px; padding: 5px !important; border: medium none; width: 95% !important; } .popup-messages-footer { background: #fff none repeat scroll 0 0; bottom: 0; position: absolute; width: 100%; } .popup-messages-footer .btn-footer { overflow: hidden; padding: 2px 5px 10px 6px; width: 100%; } .simple_round { background: #d1d1d1 none repeat scroll 0 0; border-radius: 50%; color: #4b4b4b !important; height: 21px; padding: 0 0 0 1px; width: 21px; } .popup-box .popup-messages { background: #000 none repeat scroll 0 0; height: 275px; overflow: auto; } .direct-chat-messages { overflow: auto; padding: 10px; transform: translate(0px, 0px); } .popup-messages .chat-box-single-line { border-bottom: 1px solid #a4c6b5; height: 12px; margin: 7px 0 20px; position: relative; text-align: center; } .popup-messages abbr.timestamp { background: #000 none repeat scroll 0 0; color: #fff; padding: 0 11px; } .popup-head-right .btn-group { display: inline-flex; margin: 0 8px 0 0; vertical-align: top !important; } .chat-header-button { background: transparent none repeat scroll 0 0; border: 1px solid #636364; border-radius: 50%; font-size: 14px; height: 30px; width: 30px; } .popup-head-right .btn-group .dropdown-menu { border: medium none; min-width: 122px; padding: 0; } .popup-head-right .btn-group .dropdown-menu li a { font-size: 12px; padding: 3px 10px; color: #303030; } .popup-messages abbr.timestamp { background: #000 none repeat scroll 0 0; color: #fff; padding: 0 11px; } .popup-messages .chat-box-single-line { border-bottom: 1px solid #a4c6b5; height: 12px; margin: 7px 0 20px; position: relative; text-align: center; } .popup-messages .direct-chat-messages { height: auto; } .popup-messages .direct-chat-text { background: #fff none repeat scroll 0 0; border: 1px solid #dfece7; border-radius: 2px; color: #1f2121; } .popup-messages .direct-chat-timestamp { color: #fff; opacity: 0.6; } .popup-messages .direct-chat-name { font-size: 15px; font-weight: 600; margin: 0 0 0 49px !important; color: #fff; opacity: 0.9; } .popup-messages .direct-chat-info { display: block; font-size: 12px; margin-bottom: 0; } .popup-messages .big-round { margin: -9px 0 0 !important; } .popup-messages .direct-chat-img { border: 1px solid #fff; background: #3f9684 none repeat scroll 0 0; border-radius: 50%; float: left; height: 40px; margin: -21px 0 0; width: 40px; } .direct-chat-reply-name { color: #fff; font-size: 15px; margin: 0 0 0 10px; opacity: 0.9; } .direct-chat-img-reply-small { border: 1px solid #fff; border-radius: 50%; float: left; height: 20px; margin: 0 8px; width: 20px; background:#3f9684; } .popup-messages .direct-chat-msg { margin-bottom: 10px; position: relative; } .popup-messages .doted-border::after { background: transparent none repeat scroll 0 0 !important; border-right: 2px dotted #fff !important; bottom: 0; content: ""; left: 17px; margin: 0; position: absolute; top: 0; width: 2px; display: inline; z-index: -2; } .popup-messages .direct-chat-msg::after { background: #fff none repeat scroll 0 0; border-right: medium none; bottom: 0; content: ""; left: 17px; margin: 0; position: absolute; top: 0; width: 2px; display: inline; z-index: -2; } .direct-chat-text::after, .direct-chat-text::before { border-color: transparent #dfece7 transparent transparent; } .direct-chat-text::after, .direct-chat-text::before { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: transparent #d2d6de transparent transparent; border-image: none; border-style: solid; border-width: medium; content: " "; height: 0; pointer-events: none; position: absolute; right: 100%; top: 15px; width: 0; } .direct-chat-text::after { border-width: 5px; margin-top: -5px; } .popup-messages .direct-chat-text { background: #fff none repeat scroll 0 0; border: 1px solid #dfece7; border-radius: 2px; color: #1f2121; } .direct-chat-text { background: #d2d6de none repeat scroll 0 0; border: 1px solid #d2d6de; border-radius: 5px; color: #444; margin: 5px 0 0 50px; padding: 5px 10px; position: relative; } </style> <!-- <div class="row content__box"> <div ng-click="$ctrl.closeSearch()" class="col-lg-12" style="padding:0px;"> <div ng-click="$event.stopPropagation()" class="center-content" > <div ng-show="!$ctrl.searchIsActive"> <div class="profileInfo-container"> <div class="row margin-none" ng-if="searchedUser"> <div class="inline-container profileInfo__avatar-container"> <img class="profileInfo__avatar-img" src="{{ searchedUser.profileImage }}" alt="" /> </div> <div class="profileInfo__info-container"> <ul class="row profileInfo__info-list "> <li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.followers }}</strong> Followers</li> <li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.following }}</strong> Following</li> </ul> <div class="profileInfo__settings-container"> <div class="profileInfo__settings-box" ng-if="$ctrl.isLoggedInUser"> <a class="btn-style profileInfo__settings-editProfile" ui-sref="settings/editprofile">Edit Profile</a> <a class="profileInfo__settings-btn" ui-sref="settings" class="navIconColorOne"><img src="../../../assets/images/settings-icon.svg"></a> </div> <br> <button class="MessageBtn">Message</button> <div class="followBtn-container" > <!--ng-if="!$ctrl.isLoggedInUser && $ctrl.showFollowBtn"--> <!-- <button class="followBtn" ng-if="!following" ng-click="$ctrl.isFollowing(searchedUser)">Follow</button> <button class="followBtn followBtn--unfollow" ng-if="following" ng-click="$ctrl.isFollowing(searchedUser)">Unfollow</button> </div> </div> </div> <div class="profileInfo__userInfo"> <p class="profileInfo__userInfo-username">{{ searchedUser.username }}</p> <p class="profileInfo__userInfo-description">{{ searchedUser.description }}</p> <p class="profileInfo__userInfo-links" > <a ng-if="searchedUser.facebookId" href="https://www.facebook.com/{{ searchedUser.facebookId }}" class="user__link icon--facebook" target="_blank"></a> <a ng-if="searchedUser.instagramId" href="https://www.facebook.com/{{ searchedUser.instagramId }}" class="user__link icon--instagram" target="_blank"></a> <a ng-if="searchedUser.twitterId" href="https://www.facebook.com/{{ searchedUser.twitterId }}" class="user__link icon--twitter" target="_blank"></a> <a ng-if="searchedUser.website" href="https://www.facebook.com/{{ searchedUser.website }}" class="user__link icon--wishlist" target="_blank"></a> <a ng-if="searchedUser.snapchatId" href="https://www.facebook.com/{{ searchedUser.snapchatId }}" class="user__link icon--snap" target="_blank"></a> <a ng-if="searchedUser.youtubeId" href="https://www.facebook.com/{{ searchedUser.youtubeId }}" class="user__link icon--youtube" target="_blank"></a> </p> </div> </div> <div class="user-loading items__spinner" ng-if="!searchedUser"> <i class="fa fa-spinner fa-spin" aria-hidden="true"></i> </div> </div> <div class="items-container"> <div class="row items__btn-section"> <button ng-click="$ctrl.sectionType='myStories'" ng-class="{'active': $ctrl.sectionType=='myStories'}" class="col-xs-4 items__btn-section__tabs"><strong>{{ $ctrl.isLoggedInUser ? 'My stories' : 'Published Stories' }}</strong></button><!-- --> <!-- <button ng-click="$ctrl.sectionType='24hPurchase'" ng-class="{'active': $ctrl.sectionType=='24hPurchase'}" class="col-xs-4 items__btn-section__tabs"><strong>24h Purchases</strong></button><!-- --> <!-- <button ng-click="$ctrl.sectionType='archived'" ng-class="{'active': $ctrl.sectionType=='archived'}" class="col-xs-4 items__btn-section__tabs"><strong>Archived</strong></button> </div> <div> <div ng-switch="$ctrl.sectionType"> <!-- Section: 24h Purchases --> <!-- <div ng-switch-when="24hPurchase"> <div ng-repeat="message in purchased.purchasedMessages" class="message"> <user-info user-info="message" user-info-type="'message'" section="'24hPurchase'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-repeat="story in purchased.purchasedStories" class="story"> <user-info user-info="story" user-info-type="'story'" section="'24hPurchase'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-if="$ctrl.showSpinner.purchased" class="items__spinner"> <div class="fa fa-spinner fa-spin"></div> </div> <div ng-if="!$ctrl.showSpinner.purchased && ( purchased.purchasedStories.length == 0 && purchased.purchasedMessages.length == 0 )" class="message__box message__box--grey"> <div class="user-live__no-items message__box__info"> <p> No recent purchased stories to display. </p> </div> </div> </div> <!-- Section: Archived --> <!-- <div ng-switch-when="archived"> <div ng-repeat="message in archived.archivedMessages" class="message"> <user-info user-info="message" user-info-type="'message'" section="'archived'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-repeat="story in archived.archivedStories" class="story"> <user-info user-info="story" user-info-type="'story'" section="'archived'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-if="$ctrl.showSpinner.archived" class="items__spinner"> <div class="fa fa-spinner fa-spin"></div> </div> <div ng-if="!$ctrl.showSpinner.archived && ( archived.archivedMessages.length == 0 && archived.archivedStories.length == 0 )" class="message__box message__box--grey"> <div class="user-live__no-items message__box__info"> <p> No recent archives to display. </p> {{!$ctrl.showSpinner.archived}} {{archived.archivedMessages.length == 0}} {{ archived.archivedStories.length == 0 }} </div> </div> </div> <!-- Section: MyStories / Published Stories --> <!-- <div ng-switch-default> <div ng-repeat="story in userOwnStories" class="story"> <user-info user-info="story" user-info-type="'story'" section="'ownStories'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section; $ctrl.itemPrice = $event.itemPrice; $ctrl.storyOrMessage = $event.storyOrMessage; $ctrl.alreadyHaveIt = $event.alreadyHaveIt;"> </user-info> </div> <div ng-if="$ctrl.showSpinner.userOwnStories" class="items__spinner"> <div class="fa fa-spinner fa-spin"></div> </div> <div ng-if="!$ctrl.showSpinner.userOwnStories && userOwnStories.length == 0 " class="message__box message__box--grey"> <div class="user-live__no-items message__box__info"> <p> No stories to display. </p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> --> <div class="popup-box chat-popup" id="qnimate"> <div class="popup-head"> <div class="popup-head-left pull-left"><img src="http://34.217.69.61/wp-content/uploads/2019/03/img-01.png"> Stacy Wood</div> <div class="popup-head-right pull-right"> <div class="btn-group"> <button class="chat-header-button" data-toggle="dropdown" type="button" aria-expanded="false"> <i class="glyphicon glyphicon-cog"></i> </button> <ul role="menu" class="dropdown-menu pull-right"> <li><a href="#">Media</a> </li> <li><a href="#">Block</a> </li> <li><a href="#">Clear Chat</a> </li> <li><a href="#">Email Chat</a> </li> </ul> </div> <button data-widget="remove" id="removeClass" class="chat-header-button pull-right" type="button"><i class="glyphicon glyphicon-off"></i> </button> </div> </div> <div class="popup-messages"> <div class="direct-chat-messages"> <div class="chat-box-single-line"> <abbr class="timestamp">July 22, 2016</abbr> </div> <!-- Message. Default to the left --> <div class="direct-chat-msg doted-border"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Stacy Wood</span> </div> <!-- /.direct-chat-info --> <img alt="message user image" src="http://34.217.69.61/wp-content/uploads/2019/03/img-01.png" class="direct-chat-img"> <!-- /.direct-chat-img --> <div class="direct-chat-text"> Hey sexy, how’s everything going ? </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-timestamp pull-right">3.36 PM</span> </div> <!-- /.direct-chat-text --> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Alexis Ren</span> </div> <!-- /.direct-chat-info --> <img alt="message user image" src="http://34.217.69.61/wp-content/uploads/2019/03/img-03.png" class="direct-chat-img"> <!-- /.direct-chat-img --> <div class="direct-chat-text"> Hey cutie, just at work, would you like to watch me? </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-timestamp pull-right">3.36 PM</span> </div> </div> <!-- /.direct-chat-msg --> <div class="chat-box-single-line"> <abbr class="timestamp">July 23, 2016</abbr> </div> <!-- Message. Default to the left --> <div class="direct-chat-msg doted-border"> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Stacy Wood</span> </div> <!-- /.direct-chat-info --> <img src="http://34.217.69.61/wp-content/uploads/2019/03/img-01.png" class="direct-chat-img"> <!-- /.direct-chat-img --> <div class="direct-chat-text"> Hey cutie, glad you could wacth me, would like my GF package for $600 ? </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-timestamp pull-right">3.36 PM</span> </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-name pull-left">Alexis Ren</span> </div> <!-- /.direct-chat-info --> <img src="http://34.217.69.61/wp-content/uploads/2019/03/img-03.png" class="direct-chat-img"> <!-- /.direct-chat-img --> <div class="direct-chat-text"> I would love to, would you like smash coins or paypal? </div> <div class="direct-chat-info clearfix"> <span class="direct-chat-timestamp pull-right">3.38 PM</span> </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> </div> <div class="popup-messages-footer"> <textarea id="status_message" placeholder="Type a message..." rows="10" cols="40" name="message"></textarea> <div class="btn-footer"> <button class="bg_none"><i class="glyphicon glyphicon-film"></i> </button> <button class="bg_none"><i class="glyphicon glyphicon-camera"></i> </button> <button class="bg_none"><i class="glyphicon glyphicon-paperclip"></i> </button> <button class="bg_none pull-right"><i class="glyphicon glyphicon-thumbs-up"></i> </button> </div> </div> </div> <script> $(function(){ $("#addClass").click(function (e) { e.preventDefault(); $('#qnimate').addClass('popup-box-on'); }); $("#removeClass").click(function () { $('#qnimate').removeClass('popup-box-on'); }); }); </script> <style> .feed-photos { max-width: 968px; margin: 0 auto; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .feed-photos { ul.thumbnails{ margin: 15px 10px; } .thumbnail{ background: #fff; } } /*sizing for thumbnails*/ .profile-user { position: relative; max-width: 964px; min-height: 75px; margin: 0 auto; padding: 10px 0px 15px; } .compContainer { position: absolute; right: 0; top: 0; bottom: 0; left: 0; margin-left: 0; margin-top: 1px; background-color: #000; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); -moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .compNoComp .compContainer, .compContainerLoading { background-color: #444; } .compPhoto { position: absolute; height: 50%; width: 20%; margin: 0 0 0 -1px; .compFrontside, .compFlipside { bottom: 1px; left: 1px; position: absolute; right: 0; top: 0; -webkit-transition: opacity .6s ease-out; -moz-transition: opacity .6s ease-out; -o-transition: opacity .6s ease-out; transition: opacity .6s ease-out; } } .compPhotoShadow { border: 1px solid rgba(255, 255, 255, 0.15); bottom: 0; display: block; left: 0; position: absolute; right: 0; top: 0; } .meta{ text-align:center; color: #999; } a:hover{ text-decoration: none !important; } } .gallery { display: inline-block; margin-top: 20px; } .bio{ font-size: 16px; padding-top: 10px; line-height: 24px; color: #252525; font-weight: 400; display: inline-block; display: -moz-inline-box; *display: inline; /* For IE7 */ zoom: 1; /* Trigger hasLayout */ width: 100%; font-family: museo_sans_cyrl_500, Arial, sans-serif; text-align: left; } ul.thumbnails li{ margin: 15px !important; } .item__wrapper { position: relative; height: 100%; padding: 0px 10px; padding-right: 50px; z-index: 2; transition: 0.6s ease; } .item__wrapper-xs { position: relative; height: 120px; z-index: 10; } .item__wrapper--menu-active { padding-right: 50px; } .item-container { position: relative; height: 110px; margin-top: 0px; margin-bottom: 30px; overflow: hidden; } .item__backgroundImg { content: ""; position: absolute; top: 0; bottom: 0; right: 0; left: 0; display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; opacity: 0.3; } .item__background { height: 200px; margin-top: -200px; background-color: rgba(256,256,256,0.5); } .item__background--story { background-image: url("/assets/images/message_story_bg.png"); } .item__background--message { background-image: url("/assets/images/message_recent_bg.png"); } .item__box { width: 100%; height: 100%; margin: 0; padding-left: 160px; padding-right: 5px; } .item__container { position: relative; height: 100%; padding-top: 20px; padding-left: 10px; padding-right: 0px; } .item__container:nth-child(1) { padding-left: 0px; } .item__container--top-lg { padding-top: 16px; } .item__container--top-sm { padding-top: 26px; } .col-xs-3.item__container--top-lg { padding-top: 12px; } .item__user__info__container{ position: absolute; bottom: 5px; left: 0px; right: 0; text-align: left; } .item__avatar__container { position: absolute; top: 50%; display: inline-block; width: 85px; height: 85px; padding: 0px; transform: translate( 0%, -50%); } .item__avatar { display: inline-block; width: 100%; height: 100%; background-size: cover; background-position: center; border-radius: 50%; } .item__user__name { margin: 0; color: #111111; font-size: 18px; font-weight: 500; } .item__user__title { margin-bottom: 8px; color: #000000; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item__user__name, .item__user__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item__username { color: #000000; font-size: 20px; } .item__username_story{ color: #333333; font-family: Roboto; font-size: 20px; font-weight: 400; } .item__info__container { text-align: right; } .item__info__iconText { display: inline-block; width: 200px; padding-left: 30px; color: #333333; font-family: Roboto; font-size: 18px; font-weight: 400; text-align: left; } .item__info__iconText:nth-child(2) { margin-top: 7px; padding-left: 34px; } .item__info__icon { display: inline-block; width: 22px; height: 22px; } .item__info__text { display: inline-block; font-weight: 500; vertical-align: text-top; } .item__info__text i::before, .item__info__text img{ width: 18px; height: 18px; font-size: 18px; } .item__info__iconText--clock { display: inline; padding-left: 0px !important; font-size: 14px; vertical-align: middle; } .item__info__iconText--clock img{ margin-right: 2px; } .item__info__watchBtn-container { display: inline-block; margin-top: 15px; } .item__info__watchBtn { width: 200px; height: 50px; margin-top: 4px; margin-left: 10px; border-radius: 30px; border-style: none; color: #ffffff; font-family: Roboto; font-size: 20px; font-weight: 400; background: #111111; } .item__info__watchBtn-container { display: inline-block; margin-top: 15px; } .item__info__watchBtn { width: 200px; height: 50px; margin-top: 4px; margin-left: 10px; border-radius: 30px; border-style: none; color: #ffffff; font-family: Roboto; font-size: 20px; font-weight: 400; background: #111111; } .item__info__qBtn{ position: relative; display: inline-block; width: 75px; height: 75px; background: url("/assets/images/q-symbol.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer; text-align: right; } .item__info__qBtn-text{ position: absolute; top: 45%; left: 50%; min-width: 30px; margin: 0; border-radius: 50%; color: white; background: #111111; font-size: 14px; font-weight: 500; text-transform: uppercase; line-height: 40px; transform: translate(-50%, -50%); text-align: center; } .item__info__watchBtn__spinner { position: absolute; right: 35%; top: 32%; color: white; font-size: 22px; z-index: -1; transform: translate(-50%, -50%); } .item__user__playCount-wrapper{ display: inline-block; margin-top: 0px; vertical-align: middle; margin-right: 5px; } .item__user__playCount-paragr { margin: 0; margin-right: 3px; color: #333333; font-family: Roboto; } .item__user__playCount-paragr i { width: 22px; height: 22px; color: #333333; vertical-align: bottom; } .item__user__playCount-wrapper i:before { position: absolute; width: 22px; height: 22px; z-index: 1; font-size: 22px; } .item__user__playCount-wrapper i:after{ content: ""; background: white; border-radius: 50%; } .item__menu { position: absolute; top: 50%; right: 0px; width: 50px; height: 100%; cursor: pointer; transform: translate( 0%,-50%); z-index: 10; } .item__menu__hidden__menu{ position: absolute; top: 0; right: -35px; width: 50px; height: 100%; background: black; z-index: 10; transition: 0.6s ease; } .item__menu__hidden__menu.active{ right: 15px; } .item__menu__more-options-container { position: absolute; display: flex; align-items: center; justify-content: center; top: 10px; right: 0px; bottom: 20px; left: 0px; background: #ffffff; z-index: 1; } .item__info__tab { position: relative; display: inline-block; width: 100%; height: calc(100%/3); color: #666666; text-align: center; float: left; transition: 0.6s ease; } .item__info__tab.active{ background-color: white; } .item__info__tab i { position: absolute; top: 50%; left: 50%; font-size: 23px; transform: translate(-50%, -50%); } .item__info__tab .item__info__icon{ display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 25px; } .item__menu__more-options-btn { position: absolute; top: 50%; right: 34%; font-size: 38px; color: black; transform: translate(-50%,-50%); } .item__menu__more-options-btn:after { content: ''; } @media (max-width: 1024px) { .item-container { height: 110px; } .item__container--top-lg { padding-top: 16px; padding-right: 0px; padding-left: 0px; } .col-xs-3.item__container--top-lg { padding-top: 12px; } .item__info__text, .item__user__playCount-paragr{ font-size: 14px; } .item__user__title { font-size: 16px; margin-bottom: 8px; } .item__user__playCount-wrapper { margin: 0; margin-right: 3px; } .item__user__playCount-paragr i:before{ width: 21px; height: 21px; } .item__info__watchBtn-container { display: block; } .item__info__watchBtn { width: 155px; height: 40px; margin: 0; } .item__container--top-sm { padding-top: 20px; } } @media (max-width: 768px) { .item-container { height: 95px; } .item__wrapper { padding: 0px 5px; padding-right: 35px; } .item__wrapper--menu-active { padding-right: 35px; } .item__menu, .item__menu__hidden__menu{ width: 35px; } .item__box { padding-left: 95px; padding-right: 0px; } .item__container { height: 100%; position: unset; padding-left: 0px; padding-right: 5px; } .item__container--top-lg { padding-top: 18px; } .col-xs-3.item__container--top-lg { padding-top: 12px; } .item__user__info__container{ position: absolute; bottom: 5px; left: 0; right: 0; padding-left: 100px; text-align: left; } .item__user__name { font-size: 16px; } .item__info__text, .item__user__playCount-paragr { font-size: 14px; vertical-align: middle; } .item__user__playCount-paragr i{ width: 20px; height: 20px; vertical-align: middle; } .item__user__playCount-wrapper i:before { width: 20px; height: 20px; font-size: 20px; } .item__user__playCount-paragr span{ vertical-align: middle; } .item__user__title { font-size: 14px; } .item__avatar__container { width: 80px; height: 80px; } .item__info__iconText--clock img{ width: 17px; height: 17px; vertical-align: text-bottom; } .item__info__qBtn { width: 70px; height: 70px; } .item__info__qBtn-text{ top: 47%; font-size: 14px; } .item__info__watchBtn__spinner { right: 40%; top: 35%; font-size: 12px; } .item__info__iconText { width: 100%; padding-left: 0px; } .item__info__iconText:nth-child(2) { margin-top: 0px; padding-left: 0px; } .item__info__watchBtn { width: 115px; } .item__menu { right: 0px; } .item__menu__more-options-btn { right: 30%; font-size: 35px; } } @media (max-width: 470px) { .col-xs-3.item__container--top-lg { padding-top: 14px; } .item__box { padding-left: 80px; } .item__container:nth-child(1) { width: 66.66666667%; } .item__container:nth-child(2) { width: 33.33333333%; } .item__user__name { font-size: 16px; font-weight: 450; } .information_text { margin-bottom: 10px; font-size: 16px; } .information_text_btn { top: 2px; font-size: 12px; } .information_text--space-top { margin-top: 20px; } .item__info__icon { width: 18px; height: 18px; } .item__avatar__container { width: 70px; height: 70px; } .item__user__title { font-size: 14px; } .item__info__text, .item__user__playCount-paragr { font-size: 13px; vertical-align: middle; } .item__user__playCount-paragr i{ width: 18px; height: 20px; } .item__user__playCount-wrapper i:before { font-size: 19px; } .item__user__info__container { padding-left: 85px; } .item__info__qBtn { width: 65px; height: 65px; } .item__info__qBtn-text { font-size: 12px; font-weight: 400; } .item__info__watchBtn__spinner { right: 40%; top: 36%; font-size: 10px; } .item__info__iconText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item__info__watchBtn-container { margin-top: 0px; } .item__info__watchBtn { width: 100px; font-size: 16px; } .item__info__iconText--clock img{ width: 16px; height: 16px; } .item__menu { right: 0px; } .item__menu__more-options-btn { right: 30%; } } @media (max-width: 370px) { .item-container { height: 85px; } .item__container { padding-right: 0px; } .item__wrapper { padding-right: 30px; } .item__box { padding-left: 75px; } .item__menu, .item__menu__hidden__menu { width: 30px; } .item__user__info__container { bottom: 2px; padding-left: 70px; } .item__info__qBtn-text { font-size: 11px; font-weight: 400; } .item__avatar__container { width: 60px; height: 60px; } .item__container--top-lg { padding-top: 10px; } .col-xs-3.item__container--top-lg { padding-top: 19px; } .item__info__qBtn { width: 54px; height: 48px; } .item__info__text, .item__user__playCount-paragr { font-size: 12px; } .item__info__tab i { font-size: 22px; } .item__user__name { font-size: 15px; } .item__user__title { font-size: 13px; } .item__info__tab .item__info__icon { background-size: 21px; } } </style> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen"> <script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> <div class="profile-user"> <div class="row-fluid"> <div class="span6"> <div class="pull-left"> <div class='col-sm-6 col-xs-6 col-md-6 col-lg-6' style = "width: 100%;"> <img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" /> </div> </div> </div> <div class="span6" > <div class="profileInfo__userInfo"> <h2 class="profileInfo__userInfo-username">{{ searchedUser.username }}</h2> </div> <div class="profileInfo__info-container"> <ul class="row profileInfo__info-list "> <li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.followers }}</strong> Followers</li> <li class="col-xs-6 profileInfo__info-item"><strong>{{ searchedUser.following }}</strong> Following</li> </ul> <div class="profileInfo__settings-container"> <div class="profileInfo__settings-box" ng-if="$ctrl.isLoggedInUser"> <a class="btn-style profileInfo__settings-editProfile" ui-sref="settings/editprofile" style=" height: 30px; border-radius: 15px; border-style: none; color: white; font-size: 18px; font-weight: 700;">Edit Profile</a> <a class="profileInfo__settings-btn" ui-sref="settings" class="navIconColorOne"><img src="../../../assets/images/settings-icon.svg"></a> </div> <br> <div class="round hollow text-center" style ="float: left; width: 112px; height: 33px; border-radius: 15px; border-style: none; padding-top: 6px; color: white; font-size: 18px; font-weight: 700; background: -webkit-linear-gradient(180deg,#040404,#000000); background: -o-linear-gradient(180deg,#040404,#000000); background: -moz-linear-gradient(180deg,#040404,#000000); background-image: linear-gradient(180deg,#040404,#000000); "> <a href="#" id="addClass">Message</a> </div> <div class="followBtn-container" > <!--ng-if="!$ctrl.isLoggedInUser && $ctrl.showFollowBtn"--> <button class="followBtn" ng-if="!following" ng-click="$ctrl.isFollowing(searchedUser)">Follow</button> <button class="followBtn followBtn--unfollow" ng-if="following" ng-click="$ctrl.isFollowing(searchedUser)">Unfollow</button> </div> </div> </div> <br> <br> <p class="profileInfo__userInfo-links" > <a ng-if="searchedUser.facebookId" href="https://www.facebook.com/{{ searchedUser.facebookId }}" class="user__link icon--facebook" target="_blank" style = " background-image: none; background-color: white; width: 50px; height: 50px;"> </a> <a ng-if="searchedUser.instagramId" href="https://www.facebook.com/{{ searchedUser.instagramId }}" class="user__link icon--instagram" target="_blank" style = " background-image: none; background-color: white; width: 50px; height: 50px;"></a> <a ng-if="searchedUser.twitterId" href="https://www.facebook.com/{{ searchedUser.twitterId }}" class="user__link icon--twitter" target="_blank" style = " background-image: none; background-color: white; width: 50px; height: 50px;"></a> <a ng-if="searchedUser.website" href="https://www.facebook.com/{{ searchedUser.website }}" class="user__link icon--wishlist" target="_blank" style = " background-image: none; background-color: white; width: 50px; height: 50px;"></a> <a ng-if="searchedUser.snapchatId" href="https://www.facebook.com/{{ searchedUser.snapchatId }}" class="user__link icon--snap" target="_blank" style = " background-image: none; background-color: white; width: 50px; height: 50px;"></a> <a ng-if="searchedUser.youtubeId" href="https://www.facebook.com/{{ searchedUser.youtubeId }}" class="user__link icon--youtube" target="_blank" style = " background-image: none; background-color: white; width: 50px; height: 50px;"></a> </p> <p class = "bio"> <strong> <p class="profileInfo__userInfo-description">{{ searchedUser.description }}</p> </strong> </p> </div> </div> </div> <div class="feed-photos"> <div class="row-fluid"> <div class="span12"> <ul class="thumbnails user-media-thumbnails"> <li class="span2"> <img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" /> <div class='text-right'> </div> <!-- text-right / end --> </li> <li class="span2"> <img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" /> <div class='text-right'> </div> <!-- text-right / end --> </li> <li class="span2"> <img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" /> <div class='text-right'> </div> <!-- text-right / end --> </li> <li class="span2"> <img class="img-responsive" alt="" src="{{ searchedUser.profileImage }}" /> <div class='text-right'> </div> <!-- text-right / end --> </li> </ul> </div> <div class="items-container"> <div class="row items__btn-section" style =" margin-left: 0 !important;"> <button ng-click="$ctrl.sectionType='myStories'" ng-class="{'active': $ctrl.sectionType=='myStories'}" class="col-xs-4 items__btn-section__tabs"><strong>{{ $ctrl.isLoggedInUser ? 'My stories' : 'Published Stories' }}</strong></button><!-- --><button ng-click="$ctrl.sectionType='24hPurchase'" ng-class="{'active': $ctrl.sectionType=='24hPurchase'}" class="col-xs-4 items__btn-section__tabs"><strong>24h Purchases</strong></button><!-- --><button ng-click="$ctrl.sectionType='archived'" ng-class="{'active': $ctrl.sectionType=='archived'}" class="col-xs-4 items__btn-section__tabs"><strong>Archived</strong></button> </div> <div> <div ng-switch="$ctrl.sectionType"> <!-- Section: 24h Purchases --> <div ng-switch-when="24hPurchase"> <div ng-repeat="message in purchased.purchasedMessages" class="message"> <user-info user-info="message" user-info-type="'message'" section="'24hPurchase'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-repeat="story in purchased.purchasedStories" class="story"> <user-info user-info="story" user-info-type="'story'" section="'24hPurchase'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-if="$ctrl.showSpinner.purchased" class="items__spinner"> <div class="fa fa-spinner fa-spin"></div> </div> <div ng-if="!$ctrl.showSpinner.purchased && ( purchased.purchasedStories.length == 0 && purchased.purchasedMessages.length == 0 )" class="message__box message__box--grey"> <div class="user-live__no-items message__box__info"> <p> No recent purchased stories to display. </p> </div> </div> </div> <!-- Section: Archived --> <div ng-switch-when="archived"> <div ng-repeat="message in archived.archivedMessages" class="message"> <user-info user-info="message" user-info-type="'message'" section="'archived'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-repeat="story in archived.archivedStories" class="story"> <user-info user-info="story" user-info-type="'story'" section="'archived'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section;"> </user-info> </div> <div ng-if="$ctrl.showSpinner.archived" class="items__spinner"> <div class="fa fa-spinner fa-spin"></div> </div> <div ng-if="!$ctrl.showSpinner.archived && ( archived.archivedMessages.length == 0 && archived.archivedStories.length == 0 )" class="message__box message__box--grey"> <div class="user-live__no-items message__box__info"> <p> No recent archives to display. </p> {{!$ctrl.showSpinner.archived}} {{archived.archivedMessages.length == 0}} {{ archived.archivedStories.length == 0 }} </div> </div> </div> <!-- Section: MyStories / Published Stories --> <div ng-switch-default> <div ng-repeat="story in userOwnStories" class="story"> <user-info user-info="story" user-info-type="'story'" section="'ownStories'" get-item-info=" $ctrl.itemId = $event.itemId; $ctrl.section = $event.section; $ctrl.itemPrice = $event.itemPrice; $ctrl.storyOrMessage = $event.storyOrMessage; $ctrl.alreadyHaveIt = $event.alreadyHaveIt;"> </user-info> </div> <div ng-if="$ctrl.showSpinner.userOwnStories" class="items__spinner"> <div class="fa fa-spinner fa-spin"></div> </div> <div ng-if="!$ctrl.showSpinner.userOwnStories && userOwnStories.length == 0 " class="message__box message__box--grey"> <div class="user-live__no-items message__box__info"> <p> No stories to display. </p> </div> </div> </div> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ //FANCYBOX //https://github.com/fancyapps/fancyBox $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); }); </script>
.profileInfo-container { margin-top: 10px; margin-bottom: 20px; } .username-container{ margin-bottom: 23px; font-size: 26px; } .inline-container { display: inline-block; } .profileInfo__avatar-img { display: block; width: 320px; height: 426px; margin: 0 auto; border-radius: 0; } .profileInfo__avatar-container { margin-right: 20px; } .profileInfo__info-container{ display: inline-block; width: 250px; margin-top: 28px; vertical-align: top; } .profileInfo__info-list{ margin-bottom: 25px; padding: 0px 15px; color: #666666; font-family: Roboto; font-size: 18px; font-weight: 400; list-style: none; text-align: center; } .profileInfo__info-item{ padding: 0px !important; } .profileInfo__info-item strong{ display: block; color: #333333; font-size: 20px; font-weight: 600; } .profileInfo__settings-container{ position: relative; } .profileInfo__settings-box{ } .profileInfo__settings-editProfile { display: block; width: 202.73 !important; height: 30px; padding: 5px 9px; border-radius: 6px; text-align: center; font-size: 16px; font-weight: 400; } .profileInfo__settings-btn{ position: absolute; top: 3px; right: -20px; border-radius: 30px; transform: translate(100% ,0%); } .profileInfo__settings-btn img{ width: 24px; height: 24px; } .profileInfo__userInfo { margin-top: 20px; color: #333333; font-family: Roboto; font-size: 16px; font-weight: 400; } .profileInfo__userInfo-username { margin-bottom: 2px; font-size: 18px; font-weight: 500; } .profileInfo__userInfo-description { margin-bottom: 18px; } .profileInfo__userInfo-links { margin: 0px; } .items__btn-section { margin: 0px; } .items__btn-section--small{ position: relative; display: inline-block; height: 52px; padding: 0px 30px; border-bottom: 2px solid #cccccc; } .items__btn-section--small .items__btn-section__tabs { position: absolute; top: 0; left: 50%; width: 100%; max-width: 217px; border: none; margin-bottom: -5px; transform: translate( -50%, 0%); } .items__btn-section__tabs { height: 51px; margin: 0px; border: none; border-bottom: 2px solid #cccccc; color: #666666; vertical-align: top; transition: 0.3s all; background: rgba(0,0,0,0); } .items__btn-section__tabs strong { font-size: 18px; font-weight: 500; } .items__btn-section__tabs.active { height: 54px; padding-top: 5px; color: #000000; border-bottom: 8px solid #000000; } .followBtn-container { margin-left: 138px; } .followBtn { width: 112px; height: 33px; border-radius: 15px; border-style: none; color: white; font-size: 18px; font-weight: 700; background: #3D2E6B; /* Old Browsers */ background: -webkit-linear-gradient(180deg,#040404,#000000); /*Safari 5.1-6*/ background: -o-linear-gradient(180deg,#040404,#000000); /*Opera 11.1-12*/ background: -moz-linear-gradient(180deg,#040404,#000000); /*Fx 3.6-15*/ background-image: linear-gradient(180deg,#040404,#000000);/*Standard*/ } .MessageBtn{ width: 112px; height: 30px; float: left; border-radius: 15px; border-style: none; color: white; font-size: 18px; font-weight: 700; background: #3D2E6B; /* Old Browsers */ background: -webkit-linear-gradient(180deg,#040404,#000000); /*Safari 5.1-6*/ background: -o-linear-gradient(180deg,#040404,#000000); /*Opera 11.1-12*/ background: -moz-linear-gradient(180deg,#040404,#000000); /*Fx 3.6-15*/ background-image: linear-gradient(180deg,#040404,#000000);/*Standard*/ } .followBtn--unfollow { color: #000000; border: 1px solid #000; background: none; float: left; } .user-statement { margin: 22px 70px 0px; } .user-loading { text-align: center; } .user__link { display: inline-block; width: 38px; height: 38px; margin-right: 4px; border: 2px solid #666666; border-radius: 50%; } .user__link:before { content: ""; display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 33px; } .icon--facebook:before { background-image: url(../../../assets/images/fb.png); } .icon--twitter:before { background-image: url(../../../assets/images/tw.png); } .icon--instagram:before { background-image: url(../../../assets/images/ins.png); } .icon--wishlist:before { background-image: url(../../../assets/images/wish-list.png); } .icon--snap:before { background-image: url(../../../assets/images/snap.png); } .icon--youtube:before { background-image: url(../../../assets/images/youtube.png); } @media (max-width: 768px) { .profileInfo__info-container { width: 210px; margin-top: 15px; } .profileInfo__avatar-container { margin-right: 20px; } .profileInfo__avatar-img { width: 120px; height: 120px; } .profileInfo__info-list { margin-bottom: 15px; font-size: 16px; } .profileInfo__settings-editProfile { padding-top: 10px; font-size: 14px; } .profileInfo__userInfo { font-size: 16px; } .profileInfo__userInfo-username { font-size: 18px; } .items__btn-section__tabs { font-size: 16px; } .items__btn-section__tabs strong { font-size: 16px; } } @media (max-width: 470px) { .profileInfo-container { margin-top: 0px; margin-bottom: 0px; } .profileInfo__avatar-container, .profileInfo__info-container { display: block; margin: auto; } .profileInfo__avatar-img { width: 105px; height: 105px; } .profileInfo__userInfo { margin-top: 20px; padding-left: 10px; font-size: 16px; } .profileInfo__userInfo-username { font-size: 16px; } .profileInfo__userInfo-description { font-size: 14px; } .profileInfo__settings-btn { right: -5px; } .items__btn-section__tabs { font-size: 14px; padding-right: 2px; padding-left: 2px; } .items__btn-section__tabs.active { font-size: 16px; } .items__btn-section__tabs strong { font-size: 14px; } .profileInfo__settings-editProfile { height: 35px; padding-top: 9px; font-size: 14px; } .profileInfo__settings-btn img { width: 30px; height: 30px; } .profileInfo__info-list{ margin-top: 5px; font-size: 14px; } .profileInfo__info-item strong { font-size: 16px; font-weight: 500; } .user__link { width: 34px; height: 34px; } .user__link:before { background-size: 94%; } } @media (max-width: 370px) { .items__btn-section__tabs { font-size: 12px; padding-right: 2px; padding-left: 2px; } .items__btn-section__tabs strong { font-size: 12px; font-weight: 500; } } /*styling for the pop up message*/

Related: See More


Questions / Comments: