7 #permalink User Panel

This is the user panel

7.1 #permalink User Panel

Remove the inline style when implementing

Example
profile
timeperiods

Career

  • Total courses8
  • Completed courses8
  • Ending courses4
  • Your courses as Student4
  • Your courses as Administrator12
  • Available Certifications8
Course Credits
Course 1 name 10
Course 2 name 5
Course 3 name 15

News

Cambia lingua

<div class="c-menu user-panel is-active" style="max-height:inherit;position:relative;top:auto;right:auto;bottom:auto;left:auto;">
 	<div class="container-fluid">
	<div class="row">
		<div class="col-xs-6">
		  	<a href="javascript:void(0)" class="c-menu__close"><span class="glyphicon glyphicon-remove">Hide menu</span></a>
		</div>
		<div class="col-xs-6">
			<a title="Logout" href="#">
				<span class="glyphicon glyphicon-off">Logout</span>
			</a>
		</div>
	</div>
	<div class="tabnav js-tabnav">
		<div class="tabnav__label-wrapper">
			<div class="tabnav__label selected" data-tab="profile">profile</div>
			<div class="tabnav__label" data-tab="credits">timeperiods</div>
		</div>
		<div class="tabnav__content-wrapper" style="height: 371px;">
			<div class="tabnav__content tabnav__content--profile is-visible">
				<div class="row profile">
					<div class="col-xs-5">
						<div class="boxed" style="background-image: url(../templates/standard/static/)images/icons/user-panel/icon--up-photo-placeholder.png"></div>
					</div>
					<div class="col-xs-7">
						<a href="#" title="User profile">
							<span class="glyphicon glyphicon-pencil">User profile</span>
						</a>
						<a href="#">Name</a>
						<a href="#">name@domain.com</a>
					</div>
				</div>
				<div class="row comunication">
					<div class="col-xs-4">
						<a class="btn btn-default" href="#">Certifications</a>
					</div>
					<div class="col-xs-4">
						<a class="btn btn-default" href="#">Skills</a>
					</div>
					<div class="col-xs-4">
						<a class="btn btn-default" href="#">Messages</a>
					</div>
				</div>
				<div class="row career">
					<div class="col-xs-12">
						<h2>Career</h2>
						<ul class="list-group">
							<li class="list-group-item">Total courses<span class="badge">8</span></li>
							<li class="list-group-item">Completed courses<span class="badge">8</span></li>
							<li class="list-group-item">Ending courses<span class="badge">4</span></li>
							<li class="list-group-item">Your courses as Student<span class="badge">4</span></li>
							<li class="list-group-item">Your courses as Administrator<span class="badge">12</span></li>
							<li class="list-group-item">Available Certifications<span class="badge"><a href="#">8</a></span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="tabnav__content tabnav__content--credits">
				<div class="row credits">
					<div class="col-xs-12">
						<div class="js-credits-ajax-container">
							<div class="table-credit-wrapper">
								<table class="table-credit">
									<thead>
										<tr class="table-credit__row table-credit__row--head">
											<td>Course</td>
											<td>Credits</td>
										</tr>
									</thead>
									<tbody>
										<tr class="table-credit__row">
											<td>Course 1 name</td>
											<td>10</td>
										</tr>
										<tr class="table-credit__row">
											<td>Course 2 name</td>
											<td>5</td>
										</tr>
										<tr class="table-credit__row">
											<td>Course 3 name</td>
											<td>15</td>
										</tr>
									</tbody>
									<tfoot>
										<tr class="table-credit__row table-credit__row--footer">
											<td>Total</td>
											<td>30</td>
										</tr>
									</tfoot>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row course-subscription">
	  <div class="col-xs-12">
		<div class="input-group">
			<form class="std_form" id="course_autoregistration" method="post" action="#">
				<div class="">
					<input type="hidden" id="authentic_request_course_autoregistration" name="authentic_request" value="">
					<input type="text" class="form-control" id="course_autoregistration_code" name="course_autoregistration_code" value="" maxlength="30" alt="" size="30" placeholder="Subscribtion code">
					<div class="input-group-btn">
						<input type="submit" class="button btn btn-default btn btn-default" id="subscribe_info" name="subscribe_info" value="Subscribe">
					</div>
				</div>
			</form>
		</div>
	  </div>
	</div>
	<div class="row news">
		<div class="col-xs-12">
			<h2 class="heading">News</h2>
			<div id="user-panel-carousel" class="carousel slide carousel-fade" data-ride="carousel">
				<ol class="carousel-indicators">
					<li class="" data-target="#user-panel-carousel" data-slide-to="0"></li>
					<li class="active" data-target="#user-panel-carousel" data-slide-to="1"></li>
					<li class="" data-target="#user-panel-carousel" data-slide-to="2"></li>
				</ol>
				<div class="carousel-inner" role="listbox">
					<div class="item active left">
						<h3>News title</h3>
						<p>News description</p>
						<span>gg-mm-yyyy</span>
					</div>
					<div class="item next left">
						<h3>News title</h3>
						<p>News description</p>
						<span>gg-mm-yyyy</span>
					</div>
					<div class="item">
						<h3>News title</h3>
						<p>News description</p>
						<span>gg-mm-yyyy</span>
					</div>
				</div>
			</div>
		</div>
  	</div>
	<div class="row lang">
		<div class="col-xs-6">
			<p>Cambia lingua</p>
		</div>
		<div class="col-xs-6">
			<ul class="list-inline" id="language_selection">
				<li><a class="lang-sprite lang_english" href="#" title="English"></a></li>
				<li><a class="lang-sprite lang_finnish" href="#" title="Finnish"></a></li>
				<li><a class="lang-sprite lang_italian current" href="#" title="Italiano"></a></li>
				<li><a class="lang-sprite lang_spanish" href="#" title="Spanish"></a></li>
			</ul>
		</div>
	</div>
	<div class="row footer">
		<div class="col-xs-12">
			<p>Testing forma.lms - Copyright © forma.lms<br>Powered by forma.lms CE</p>
		</div>
	</div>
</div>
</div>