mirror of
https://github.com/valitydev/gentelella.git
synced 2024-11-06 08:15:17 +00:00
Merge pull request #110 from christianesperar/master
Fix profile details overlapping content and fix messy layout when profile height is different
This commit is contained in:
Aigars Silkalns
commit
a282c7e417
@ -320,58 +320,47 @@
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
<button class="btn btn-default" type="button">Go!</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="x_panel">
|
||||
<div class="x_content">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-12 col-sm-12 col-xs-12" style="text-align:center;">
|
||||
<div class="col-md-12 col-sm-12 col-xs-12 text-center">
|
||||
<ul class="pagination pagination-split">
|
||||
<li><a href="#">A</a>
|
||||
</li>
|
||||
<li><a href="#">B</a>
|
||||
</li>
|
||||
<li><a href="#">C</a>
|
||||
</li>
|
||||
<li><a href="#">D</a>
|
||||
</li>
|
||||
<li><a href="#">E</a>
|
||||
</li>
|
||||
<li><a href="#">A</a></li>
|
||||
<li><a href="#">B</a></li>
|
||||
<li><a href="#">C</a></li>
|
||||
<li><a href="#">D</a></li>
|
||||
<li><a href="#">E</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">W</a>
|
||||
</li>
|
||||
<li><a href="#">X</a>
|
||||
</li>
|
||||
<li><a href="#">Y</a>
|
||||
</li>
|
||||
<li><a href="#">Z</a>
|
||||
</li>
|
||||
<li><a href="#">W</a></li>
|
||||
<li><a href="#">X</a></li>
|
||||
<li><a href="#">Y</a></li>
|
||||
<li><a href="#">Z</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
<div class="left col-xs-7">
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -391,7 +380,7 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
@ -400,7 +389,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
@ -408,9 +397,8 @@
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -430,7 +418,7 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
@ -439,7 +427,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
@ -447,9 +435,8 @@
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -469,7 +456,7 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
@ -478,7 +465,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
@ -486,9 +473,8 @@
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -508,7 +494,45 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
<div class="left col-xs-7">
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UX / Graphic Artist / Coffee Lover </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
<img src="images/img.jpg" alt="" class="img-circle img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 bottom text-center">
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<p class="ratings">
|
||||
<a>4.0</a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star-o"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
@ -517,7 +541,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
@ -525,9 +549,8 @@
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -547,7 +570,7 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
@ -556,7 +579,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
@ -564,9 +587,8 @@
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -586,7 +608,7 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
@ -595,7 +617,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
@ -603,9 +625,8 @@
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -625,7 +646,7 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
@ -634,7 +655,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="col-md-4 col-sm-4 col-xs-12 profile_details">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
@ -642,9 +663,8 @@
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
<li><i class="fa fa-building"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Phone #: </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
@ -664,46 +684,7 @@
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 col-sm-4 col-xs-12">
|
||||
<div class="well profile_view">
|
||||
<div class="col-sm-12">
|
||||
<h4 class="brief"><i>Digital Strategist</i></h4>
|
||||
<div class="left col-xs-7">
|
||||
<h2>Nicole Pearson</h2>
|
||||
<p><strong>About: </strong> Web Designer / UI. </p>
|
||||
<ul class="list-unstyled">
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
<li><i class="fa fa-phone"></i> Address: </li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="right col-xs-5 text-center">
|
||||
<img src="images/user.png" alt="" class="img-circle img-responsive">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 bottom text-center">
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<p class="ratings">
|
||||
<a>4.0</a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star"></span></a>
|
||||
<a href="#"><span class="fa fa-star-o"></span></a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 emphasis">
|
||||
<button type="button" class="btn btn-success btn-xs"> <i class="fa fa-user">
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
</i> <i class="fa fa-comments-o"></i> </button>
|
||||
<button type="button" class="btn btn-primary btn-xs">
|
||||
<i class="fa fa-user"> </i> View Profile
|
||||
</button>
|
||||
|
||||
@ -868,73 +868,81 @@ legend {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
/* ********* contacts ********************************** */
|
||||
/** Contacts **/
|
||||
.profile_details:nth-child(3n){
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.profile_view {
|
||||
margin-bottom: 20px;
|
||||
.profile_details .profile_view {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.well.profile_view {
|
||||
padding: 10px 0 0;
|
||||
background: #fff;
|
||||
}
|
||||
.well.profile_view .divider {
|
||||
|
||||
.profile_details .profile_view .divider {
|
||||
border-top: 1px solid #e5e5e5;
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.well.profile_view .ratings {
|
||||
|
||||
.profile_details .profile_view .ratings {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile_details .profile_view .bottom {
|
||||
background: #F2F5F7;
|
||||
padding: 9px 0;
|
||||
border-top: 1px solid #E6E9ED;
|
||||
}
|
||||
|
||||
.profile_details .profile_view .left {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.profile_details .profile_view .left p {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.profile_details .profile_view .right {
|
||||
margin-top: 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.profile_details .profile_view .img-circle {
|
||||
border: 1px solid #E6E9ED;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.profile_details .profile_view h2 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.profile_details .profile_view .ratings {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.profile_details .profile_view .brief {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.profile_details .profile_left {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.pagination.pagination-split li {
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.pagination.pagination-split li a {
|
||||
border-radius: 4px;
|
||||
color: #768399;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
}
|
||||
.well.profile_view {
|
||||
background: #fff;
|
||||
}
|
||||
.well.profile_view .bottom {
|
||||
margin-top: -20px;
|
||||
background: #F2F5F7;
|
||||
padding: 9px 0;
|
||||
border-top: 1px solid #E6E9ED;
|
||||
}
|
||||
.well.profile_view .left {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.well.profile_view .left p {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.well.profile_view .right {
|
||||
margin-top: 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
.well.profile_view .img-circle {
|
||||
border: 1px solid #E6E9ED;
|
||||
padding: 2px;
|
||||
}
|
||||
.well.profile_view h2 {
|
||||
margin: 5px 0;
|
||||
}
|
||||
.well.profile_view .ratings {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
.well.profile_view .brief {
|
||||
margin: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
.profile_left {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* ********* /contacts ********************************** */
|
||||
/** Contacts **/
|
||||
|
||||
|
||||
/* ********* /custom accordion **************************** */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user