<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<div class="row">
<!-- uncomment code for absolute positioning tweek see top comment in css -->
<!-- <div class="absolute-wrapper"> </div> -->
<!-- Menu -->
<div class="side-menu">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="brand-wrapper">
<!-- Hamburger -->
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand -->
<div class="brand-name-wrapper">
<a class="navbar-brand" href="#">
#ArgentinaVota
</a>
</div>
<!-- Search -->
<a data-toggle="collapse" href="#search" class="btn btn-default" id="search-trigger">
<span class="glyphicon glyphicon-search"></span>
</a>
<!-- Search body -->
<div id="search" class="panel-collapse collapse">
<div class="panel-body">
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar">
</div>
<button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-ok"></span></button>
</form>
</div>
</div>
</div>
</div>
<!-- Main Menu -->
<div class="side-menu-container">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-user"></span>Candidatos</a></li>
<li class="active"><a href="#"><span></span>Propuestas</a></li>
<li class="active"><a href="#"><span></span>Quejas</a></li>
<!-- Dropdown-->
<li class="panel panel-default" id="dropdown">
<a data-toggle="collapse" href="#dropdown-lvl1">
<span class="glyphicon glyphicon-user"></span> Adminitración <span class="caret"></span>
</a>
<!-- Dropdown level 1 -->
<div id="dropdown-lvl1" class="panel-collapse collapse">
<div class="panel-body">
<ul class="nav navbar-nav">
<li><a href="#">Verificar Candidatos</a></li>
<li><a href="#">Resetear Contraseñas</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
<!-- Main Content -->
<div class="container-fluid">
<div class="side-body">
<div class="container">
<div class="row user-menu-container square">
<div class="col-md-7 user-details">
<div class="row coralbg white">
<div class="col-md-6 no-pad">
<div class="user-pad">
<h3>Bienvenido devuelta, Horacio</h3>
<h4 class="white"><i class="fa fa-check-circle-o"></i> Recoleta, Buenos Aires</h4>
<h4 class="white"><i class="fa fa-check-circle-o"></i> Union PRO</h4>
<button type="button" class="btn btn-labeled btn-info" href="#">
<span class="btn-label"><i class="fa fa-pencil"></i></span>Actualizar perfil</button>
</div>
</div>
<div class="col-md-6 no-pad">
<div class="user-image">
<img src="http://ambito.com/diario/2011/0503/imagenes/not_20110503_580675.jpg" class="img-responsive thumbnail">
</div>
</div>
</div>
<div class="row overview">
<div class="col-md-3">
<h3>Solcitar Verificación</h3>
</div>
<div id="socialHolder" class="col-md-3">
<div id="socialShare" class="btn-group share-group">
<button href="#" data-toggle="dropdown" class="btn btn-info dropdown-toggle share">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a data-original-title="Twitter" rel="tooltip" href="#" class="btn btn-twitter" data-placement="left">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a data-original-title="Facebook" rel="tooltip" href="#" class="btn btn-facebook" data-placement="left">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a data-original-title="Telefono" rel="tooltip" class="btn btn-telefono" data-placement="left">
<i class="fa fa-telefono">tel</i>
</a>
</li>
<li>
<a data-original-title="Email" rel="tooltip" class="btn btn-mail" data-placement="left">
<i class="fa fa-envelope"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1 user-menu-btns">
<div class="btn-group-vertical square" id="responsive">
<a href="#" class="btn btn-block btn-default active">
<i class="fa fa-bell-o fa-3x"></i>
</a>
<a href="#" class="btn btn-default">
<i class="fa fa-envelope-o fa-3x"></i>
</a>
<a href="#" class="btn btn-default">
<i class="fa fa-laptop fa-3x"></i>
</a>
</div>
</div>
<div class="col-md-4 user-menu user-pad">
<div class="user-menu-content active">
<h3>
Interacciones Recientes
</h3>
<ul class="user-menu-list">
<li>
<h4><i class="fa fa-paper-plane-o coral"></i> Comentaste la Propuesta de Mariano Recalde.</h4>
</li>
<li>
<h4><i class="fa fa-paper-plane-o coral"></i> Comentaste la Propuesta de Martín Lousteau.</h4>
</li>
<li>
<h4><i class="fa fa-paper-plane-o coral"></i> Daniel Scioli comentó tu queja.</h4>
</li>
<li>
<button type="button" class="btn btn-labeled btn-success" href="#">
<span class="btn-label"><i class="fa fa-bell-o"></i></span>Ver toda la actividad</button>
</li>
</ul>
</div>
<div class="user-menu-content">
<h3>
Your Inbox
</h3>
<ul class="user-menu-list">
<li>
<h4>From Roselyn Smith <small class="coral"><strong>NEW</strong> <i class="fa fa-clock-o"></i> 7:42 A.M.</small></h4>
</li>
<li>
<h4>From Jonathan Hawkins <small class="coral"><i class="fa fa-clock-o"></i> 10:42 A.M.</small></h4>
</li>
<li>
<h4>From Georgia Jennings <small class="coral"><i class="fa fa-clock-o"></i> 10:42 A.M.</small></h4>
</li>
<li>
<button type="button" class="btn btn-labeled btn-danger" href="#">
<span class="btn-label"><i class="fa fa-envelope-o"></i></span>View All Messages</button>
</li>
</ul>
</div>
<div class="user-menu-content">
<h3>
Trending
</h3>
<div class="row">
<div class="col-md-6">
<div class="view">
<div class="caption">
<p>47LabsDesign</p>
<a href="" rel="tooltip" title="Appreciate"><span class="fa fa-heart-o fa-2x"></span></a>
<a href="" rel="tooltip" title="View"><span class="fa fa-search fa-2x"></span></a>
</div>
<img src="http://24.media.tumblr.com/273167b30c7af4437dcf14ed894b0768/tumblr_n5waxesawa1st5lhmo1_1280.jpg" class="img-responsive">
</div>
<div class="info">
<p class="small" style="text-overflow: ellipsis">An Awesome Title</p>
<p class="small coral text-right"><i class="fa fa-clock-o"></i> Posted Today | 10:42 A.M.</small>
</div>
<div class="stats turqbg">
<span class="fa fa-heart-o"> <strong>47</strong></span>
<span class="fa fa-eye pull-right"> <strong>137</strong></span>
</div>
</div>
<div class="col-md-6">
<div class="view">
<div class="caption">
<p>47LabsDesign</p>
<a href="" rel="tooltip" title="Appreciate"><span class="fa fa-heart-o fa-2x"></span></a>
<a href="" rel="tooltip" title="View"><span class="fa fa-search fa-2x"></span></a>
</div>
<img src="http://24.media.tumblr.com/282fadab7d782edce9debf3872c00ef1/tumblr_n3tswomqPS1st5lhmo1_1280.jpg" class="img-responsive">
</div>
<div class="info">
<p class="small" style="text-overflow: ellipsis">An Awesome Title</p>
<p class="small coral text-right"><i class="fa fa-clock-o"></i> Posted Today | 10:42 A.M.</small>
</div>
<div class="stats turqbg">
<span class="fa fa-heart-o"> <strong>47</strong></span>
<span class="fa fa-eye pull-right"> <strong>137</strong></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.square, .btn {
border-radius: 0px!important;
}
/* -- color classes -- */
.coralbg {
background-color: #FA396F;
}
.coral {
color: #FA396f;
}
.turqbg {
background-color: #46D8D2;
}
.turq {
color: #46D8D2;
}
.white {
color: #fff!important;
}
/* -- The "User's Menu Container" specific elements. Custom container for the snippet -- */
div.user-menu-container {
z-index: 10;
background-color: #fff;
margin-top: 20px;
background-clip: padding-box;
opacity: 0.97;
filter: alpha(opacity=97);
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
div.user-menu-container .btn-lg {
padding: 0px 12px;
}
div.user-menu-container h4 {
font-weight: 300;
color: #8b8b8b;
}
div.user-menu-container a, div.user-menu-container .btn {
transition: 1s ease;
}
div.user-menu-container .thumbnail {
width:100%;
min-height:200px;
border: 0px!important;
padding: 0px;
border-radius: 0;
border: 0px!important;
}
/* -- Vertical Button Group -- */
div.user-menu-container .btn-group-vertical {
display: block;
}
div.user-menu-container .btn-group-vertical>a {
padding: 20px 25px;
background-color: #46D8D2;
color: white;
border-color: #fff;
}
div.btn-group-vertical>a:hover {
color: white;
border-color: white;
}
div.btn-group-vertical>a.active {
background: #FA396F;
box-shadow: none;
color: white;
}
/* -- Individual button styles of vertical btn group -- */
div.user-menu-btns {
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
div.user-menu-btns div.btn-group-vertical>a.active:after{
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 10px solid #46D8D2;
}
/* -- The main tab & content styling of the vertical buttons info-- */
div.user-menu-content {
color: #323232;
}
ul.user-menu-list {
list-style: none;
margin-top: 20px;
margin-bottom: 0;
padding: 10px;
border: 1px solid #eee;
}
ul.user-menu-list>li {
padding-bottom: 8px;
text-align: center;
}
div.user-menu div.user-menu-content:not(.active){
display: none;
}
/* -- The btn stylings for the btn icons -- */
.btn-label {position: relative;left: -12px;display: inline-block;padding: 6px 12px;background: rgba(0,0,0,0.15);border-radius: 3px 0 0 3px;}
.btn-labeled {padding-top: 0;padding-bottom: 0;}
/* -- Custom classes for the snippet, won't effect any existing bootstrap classes of your site, but can be reused. -- */
.user-pad {
padding: 20px 25px;
}
.no-pad {
padding-right: 0;
padding-left: 0;
padding-bottom: 0;
}
.user-details {
background: #eee;
min-height: 333px;
}
.user-image {
max-height:200px;
overflow:hidden;
}
.overview h3 {
font-weight: 300;
margin-top: 15px;
margin: 10px 0 0 0;
}
.overview h4 {
font-weight: bold!important;
font-size: 40px;
margin-top: 0;
}
.view {
position:relative;
overflow:hidden;
margin-top: 10px;
}
.view p {
margin-top: 20px;
margin-bottom: 0;
}
.caption {
position:absolute;
top:0;
right:0;
background: rgba(70, 216, 210, 0.44);
width:100%;
height:100%;
padding:2%;
display: none;
text-align:center;
color:#fff !important;
z-index:2;
}
.caption a {
padding-right: 10px;
color: #fff;
}
.info {
display: block;
padding: 10px;
background: #eee;
text-transform: uppercase;
font-weight: 300;
text-align: right;
}
.info p, .stats p {
margin-bottom: 0;
}
.stats {
display: block;
padding: 10px;
color: white;
}
.share-links {
border: 1px solid #eee;
padding: 15px;
margin-top: 15px;
}
.square, .btn {
border-radius: 0px!important;
}
/* -- media query for user profile image -- */
@media (max-width: 767px) {
.user-image {
max-height: 400px;
}
}
.mobile-social-share {
background: none repeat scroll 0 0 #EEEEEE;
display: block !important;
min-height: 70px !important;
margin: 50px 0;
}
body {
color: #777777;
font-family: "Lato","Helvetica Neue","Arial","Helvetica",sans-serif;
font-size: 13px;
line-height: 19.5px;
}
.mobile-social-share h3 {
color: inherit;
float: left;
font-size: 15px;
line-height: 20px;
margin: 25px 25px 0 25px;
}
.share-group {
float: right;
margin: 18px 25px 0 0;
}
.btn-group {
display: inline-block;
font-size: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
}
.mobile-social-share ul {
float: right;
list-style: none outside none;
margin: 0;
min-width: 61px;
padding: 0;
}
.share {
min-width: 17px;
}
.mobile-social-share li {
display: block;
font-size: 18px;
list-style: none outside none;
margin-bottom: 3px;
margin-left: 4px;
margin-top: 3px;
}
.btn-share {
background-color: #BEBEBE;
border-color: #CCCCCC;
color: #333333;
}
.btn-twitter {
background-color: #3399CC !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-facebook {
background-color: #3D5B96 !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-facebook {
background-color: #3D5B96 !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-telefono {
background-color: #CC1E2D !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-mail {
background-color: #FFC90E !important;
width: 51px;
color:#FFFFFF!important;
}
.caret {
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}
#socialShare {
max-width:20px;
margin-bottom:18px;
}
#socialShare > a{
padding: 6px 10px 6px 10px;
}
@media (max-width : 320px) {
#socialHolder{
padding-left:5px;
padding-right:5px;
}
.mobile-social-share h3 {
margin-left: 0;
margin-right: 0;
}
#socialShare{
margin-left:5px;
margin-right:5px;
}
.mobile-social-share h3 {
font-size: 15px;
}
}
@media (max-width : 238px) {
.mobile-social-share h3 {
font-size: 12px;
}
}
:focus {
outline: none;
}
.row {
margin-right: 0;
margin-left: 0;
}
/*
Sometimes the sub menus get too large for the page and prevent the menu from scrolling, limiting functionality
A quick fix is to change .side-menu to
-> position:absolute
and uncomment the code below.
You also need to uncomment
-> <div class="absolute-wrapper"> </div> in the html file
you also need to tweek the animation. Just uncomment the code in that section
--------------------------------------------------------------------------------------------------------------------
If you want to make it really neat i suggest you look into an alternative like http://areaaperta.com/nicescroll/
This will allow the menu to say fixed on body scoll and scoll on the side bar if it get to large
*/
/*.absolute-wrapper{
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}*/
.side-menu {
position: fixed;
width: 300px;
height: 100%;
background-color: #f8f8f8;
border-right: 1px solid #e7e7e7;
}
.side-menu .navbar {
border: none;
}
.side-menu .navbar-header {
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav .active a {
background-color: transparent;
margin-right: -1px;
border-right: 5px solid #e7e7e7;
}
.side-menu .navbar-nav li {
display: block;
width: 100%;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .navbar-nav li a {
padding: 15px;
}
.side-menu .navbar-nav li a .glyphicon {
padding-right: 10px;
}
.side-menu #dropdown {
border: 0;
margin-bottom: 0;
border-radius: 0;
background-color: transparent;
box-shadow: none;
}
.side-menu #dropdown .caret {
float: right;
margin: 9px 5px 0;
}
.side-menu #dropdown .indicator {
float: right;
}
.side-menu #dropdown > a {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body {
padding: 0;
background-color: #f3f3f3;
}
.side-menu #dropdown .panel-body .navbar-nav {
width: 100%;
}
.side-menu #dropdown .panel-body .navbar-nav li {
padding-left: 15px;
border-bottom: 1px solid #e7e7e7;
}
.side-menu #dropdown .panel-body .navbar-nav li:last-child {
border-bottom: none;
}
.side-menu #dropdown .panel-body .panel > a {
margin-left: -20px;
padding-left: 35px;
}
.side-menu #dropdown .panel-body .panel-body {
margin-left: -15px;
}
.side-menu #dropdown .panel-body .panel-body li {
padding-left: 30px;
}
.side-menu #dropdown .panel-body .panel-body li:last-child {
border-bottom: 1px solid #e7e7e7;
}
.side-menu #search-trigger {
background-color: #f3f3f3;
border: 0;
border-radius: 0;
position: absolute;
top: 0;
right: 0;
padding: 15px 18px;
}
.side-menu .brand-name-wrapper {
min-height: 50px;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: block;
}
.side-menu #search {
position: relative;
z-index: 1000;
}
.side-menu #search .panel-body {
padding: 0;
}
.side-menu #search .panel-body .navbar-form {
padding: 0;
padding-right: 50px;
width: 100%;
margin: 0;
position: relative;
border-top: 1px solid #e7e7e7;
}
.side-menu #search .panel-body .navbar-form .form-group {
width: 100%;
position: relative;
}
.side-menu #search .panel-body .navbar-form input {
border: 0;
border-radius: 0;
box-shadow: none;
width: 100%;
height: 50px;
}
.side-menu #search .panel-body .navbar-form .btn {
position: absolute;
right: 0;
top: 0;
border: 0;
border-radius: 0;
background-color: #f3f3f3;
padding: 15px 18px;
}
/* Main body section */
.side-body {
margin-left: 310px;
}
/* small screen */
@media (max-width: 768px) {
.side-menu {
position: relative;
width: 100%;
height: 0;
border-right: 0;
border-bottom: 1px solid #e7e7e7;
}
.side-menu .brand-name-wrapper .navbar-brand {
display: inline-block;
}
/* Slide in animation */
@-moz-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-webkit-keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@keyframes slidein {
0% {
left: -300px;
}
100% {
left: 10px;
}
}
@-moz-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@-webkit-keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
@keyframes slideout {
0% {
left: 0;
}
100% {
left: -300px;
}
}
/* Slide side menu*/
/* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */
.side-menu-container > .navbar-nav.slide-in {
-moz-animation: slidein 300ms forwards;
-o-animation: slidein 300ms forwards;
-webkit-animation: slidein 300ms forwards;
animation: slidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.side-menu-container > .navbar-nav {
/* Add position:absolute for scrollable menu -> see top comment */
position: fixed;
left: -300px;
width: 300px;
top: 43px;
height: 100%;
border-right: 1px solid #e7e7e7;
background-color: #f8f8f8;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Uncomment for scrollable menu -> see top comment */
/*.absolute-wrapper{
width:285px;
-moz-animation: slideout 300ms forwards;
-o-animation: slideout 300ms forwards;
-webkit-animation: slideout 300ms forwards;
animation: slideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}*/
@-moz-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-webkit-keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@keyframes bodyslidein {
0% {
left: 0;
}
100% {
left: 300px;
}
}
@-moz-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@-webkit-keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
@keyframes bodyslideout {
0% {
left: 300px;
}
100% {
left: 0;
}
}
/* Slide side body*/
.side-body {
margin-left: 5px;
margin-top: 70px;
position: relative;
-moz-animation: bodyslideout 300ms forwards;
-o-animation: bodyslideout 300ms forwards;
-webkit-animation: bodyslideout 300ms forwards;
animation: bodyslideout 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.body-slide-in {
-moz-animation: bodyslidein 300ms forwards;
-o-animation: bodyslidein 300ms forwards;
-webkit-animation: bodyslidein 300ms forwards;
animation: bodyslidein 300ms forwards;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Hamburger */
.navbar-toggle {
border: 0;
float: left;
padding: 18px;
margin: 0;
border-radius: 0;
background-color: #f3f3f3;
}
/* Search */
#search .panel-body .navbar-form {
border-bottom: 0;
}
#search .panel-body .navbar-form .form-group {
margin: 0;
}
.navbar-header {
/* this is probably redundant */
position: fixed;
z-index: 3;
background-color: #f8f8f8;
}
/* Dropdown tweek */
#dropdown .panel-body .navbar-nav {
margin: 0;
}
}
$(document).ready(function() {
var $btnSets = $('#responsive'),
$btnLinks = $btnSets.find('a');
$btnLinks.click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
$("div.user-menu>div.user-menu-content").removeClass("active");
$("div.user-menu>div.user-menu-content").eq(index).addClass("active");
});
});
$( document ).ready(function() {
$("[rel='tooltip']").tooltip();
$('.view').hover(
function(){
$(this).find('.caption').slideDown(250); //.fadeIn(250)
},
function(){
$(this).find('.caption').slideUp(250); //.fadeOut(205)
}
);
});
$(function () {
$('.navbar-toggle').click(function () {
$('.navbar-nav').toggleClass('slide-in');
$('.side-body').toggleClass('body-slide-in');
$('#search').removeClass('in').addClass('collapse').slideUp(200);
/// uncomment code for absolute positioning tweek see top comment in css
//$('.absolute-wrapper').toggleClass('slide-in');
});
// Remove menu for searching
$('#search-trigger').click(function () {
$('.navbar-nav').removeClass('slide-in');
$('.side-body').removeClass('body-slide-in');
/// uncomment code for absolute positioning tweek see top comment in css
//$('.absolute-wrapper').removeClass('slide-in');
});
});
