Skip to content

Commit

Permalink
Improved responsive layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@iflorespaz
iflorespaz committed Apr 19, 2015
1 parent d9b5206 commit 2339c83
Show file tree
Hide file tree
Showing 2 changed files with 197 additions and 62 deletions.
175 changes: 118 additions & 57 deletions main/responsive/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
</div>
</div>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-static-top navbar-bgcolor">
<nav class="navbar navbar-default navbar-static-top navbar-bgcolor mb4">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
Expand All @@ -58,21 +58,31 @@
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Courses</a></li>
<li><a href="#about">Sessions</a></li>
<li><a href="#contact">Reporting</a></li>
<li><a href="#contact">Administration</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span><span class="pdl5">Home</span></a></li>
<li><a href="#about"><span class="glyphicon glyphicon-book"></span><span class="pdl5">Courses</span></a></li>
<li><a href="#about"><span class="glyphicon glyphicon-briefcase"></span><span class="pdl5">Sessions</span></a></li>
<li><a href="#contact"><span class="glyphicon glyphicon-stats"></span><span class="pdl5">Reporting</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-pencil"></span><span class="pdl5">Customize</span> <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Logo</a></li>
<li><a href="#">Slide</a></li>
<li><a href="#">Home Page</a></li>
<li><a href="#">Theme</a></li>
</ul>
</li>
<li><a href="#contact"><span class="glyphicon glyphicon-asterisk"></span><span class="pdl5">Administration</span></a></li>
<li>
<div class="mt8">
<div class="row">
<div class="col-lg-12">
<div class="col-md-10">
<div class="input-group" style="width: 250px;">
<input type="text" class="form-control" aria-label="..." placeholder="Management" />
<input type="text" class="form-control" aria-label="..." placeholder="eLearning" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-search"></span> <span class="caret"></span></button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="glyphicon glyphicon-search"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="#">Users</a></li>
<li class="divider"></li>
Expand All @@ -86,25 +96,26 @@
</div><!-- /.row -->
</div>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Sign In <span class="caret"></span></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-log-in"></span><span class="pdl5">Sign In</span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">My Profile</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Theme</a></li>
<li class="divider"></li>
<li><a href="#contact">Users Management</a></li>
<li><a href="#contact">Course Management</a></li>
<li><a href="#contact">Session Management</a></li>
<li class="divider"></li>
<li><a href="#contact">Support</a></li>
<li class="divider"></li>
<li><a href="#contact">LOGIN</a></li>
<li><a href="#contact">Login</a></li>
<li class="divider"></li>
<li><a href="#contact">Register</a></li>
<li><a href="#contact">Lost Password</a></li>
<li class="divider"></li>
<li><a href="#">LOGOUT</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
Expand All @@ -113,51 +124,101 @@
</nav>
</header>
<main>
<!-- Begin page content -->
<div class="container">
<!-- Begin page content -->
<div id="wrap" class="container pdl5 pdr5">

<div class="container pdl5 pdr5">
<div class="col-md-8 column">
<div class="row">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" ></li>
<li data-slide-to="2" data-target="#carousel-example-generic" ></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img class="img img-responsive" alt="First slide [900x500]" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjMxNi43MTY2NTk1NDU4OTg0NCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjQycHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
<div class="carousel-caption">
Block 1
</div>
</div>
<div class="item">
<img class="img img-responsive" alt="Second slide [900x500]" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjxnPjx0ZXh0IHg9IjI3Ni4yNzQ5OTM4OTY0ODQ0IiB5PSIyNTAiIHN0eWxlPSJmaWxsOiM0NDQ7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDJwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
<div class="carousel-caption">
Block 2
</div>
</div>
<div class="item">
<img class="img img-responsive" alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjMwNy40MTY2NzE3NTI5Mjk3IiB5PSIyNTAiIHN0eWxlPSJmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDJwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9zdmc+" data-holder-rendered="true">
<div class="carousel-caption">
Block 3
</div>
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>

<div class="col-md-4">
<div class="row mt0 pdl5 pdr5 ">
<div class="panel panel-default">
<div class="panel-heading">
<strong> Sign in to continue</strong>
</div>
<div class="panel-body">
<form role="form" action="#" method="POST">
<fieldset>

<div class="col-sm-12 col-md-12 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input required="true" class="form-control" placeholder="Username" name="loginname" type="text" autofocus>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input required="true" class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign in">
</div>
</div>

</fieldset>
</form>
</div>
<div class="panel-footer ">
Don't have an account! <a href="#" onClick=""> Sign Up Here </a>
</div>
</div>

</div>
</div>
</div>

<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" ></li>
<li data-slide-to="2" data-target="#carousel-example-generic" ></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item active">
<img class="img img-responsive" alt="First slide [900x500]" data-src="holder.js/900x500/auto/#777:#555/text:First slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzc3NyIvPjxnPjx0ZXh0IHg9IjMxNi43MTY2NTk1NDU4OTg0NCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNTU1O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjQycHQ7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+Rmlyc3Qgc2xpZGU8L3RleHQ+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
<div class="carousel-caption">
Block 1
</div>
</div>
<div class="item">
<img class="img img-responsive" alt="Second slide [900x500]" data-src="holder.js/900x500/auto/#666:#444/text:Second slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjxnPjx0ZXh0IHg9IjI3Ni4yNzQ5OTM4OTY0ODQ0IiB5PSIyNTAiIHN0eWxlPSJmaWxsOiM0NDQ7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDJwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj5TZWNvbmQgc2xpZGU8L3RleHQ+PC9nPjwvc3ZnPg==" data-holder-rendered="true">
<div class="carousel-caption">
Block 2
</div>
</div>
<div class="item">
<img class="img img-responsive" alt="Third slide [900x500]" data-src="holder.js/900x500/auto/#555:#333/text:Third slide" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDkwMCA1MDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxkZWZzLz48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzU1NSIvPjxnPjx0ZXh0IHg9IjMwNy40MTY2NzE3NTI5Mjk3IiB5PSIyNTAiIHN0eWxlPSJmaWxsOiMzMzM7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LWZhbWlseTpBcmlhbCwgSGVsdmV0aWNhLCBPcGVuIFNhbnMsIHNhbnMtc2VyaWYsIG1vbm9zcGFjZTtmb250LXNpemU6NDJwdDtkb21pbmFudC1iYXNlbGluZTpjZW50cmFsIj5UaGlyZCBzbGlkZTwvdGV4dD48L2c+PC9zdmc+" data-holder-rendered="true">
<div class="carousel-caption">
Block 3
</div>
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>


<div class="page-header mt0">
<h1>Welcome to your training site</h1>
</div>

<div class="container">
<div class="page-header mt0">
<h1>Welcome to your training site <small>Now is time to setup your portal and edit the basic things from "customize" tab</small></h1>
</div>
<span> Take into account that you are using an "Open Source" solution licensed under GPL version</span>
</div>
</div>
</main>
<footer class="footer">
Expand Down
84 changes: 79 additions & 5 deletions main/responsive/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,92 @@
margin-bottom: 4px !important;
}
.mb0 {
margin-bottom: 0 !important;
margin-bottom: 0px !important;
}
.pdl0 {
padding-left: 0px !important;
}
.pdr0 {
padding-right: 0px !important;
}
pdt0 {
padding-top: 0px !important;
}
pdb0 {
padding-bottom: 0px !important;
}
.pdl5 {
padding-left: 5px !important;
}
.pdr5 {
padding-right: 5px !important;
}
pdt5 {
padding-top: 5px !important;
}
pdb5 {
padding-bottom: 5px !important;
}
.pdl10 {
padding-left: 10px !important;
}
.pdr10 {
padding-right: 10px !important;
}
pdt10 {
padding-top: 10px !important;
}
pdb10 {
padding-bottom: 10px !important;
}
.pdl15 {
padding-left: 15px !important;
}
.pdr15 {
padding-right: 15px !important;
}
pdt15 {
padding-top: 15px !important;
}
pdb15 {
padding-bottom: 15px !important;
}
.pdl20 {
padding-right: 20px !important;
}
.pdr20 {
padding-right: 20px !important;
}
pdt20 {
padding-top: 20px !important;
}
pdb20 {
padding-bottom: 20px !important;
}
.footer {
background-color: #000000 !important;
}
.navbar-bgcolor {
background: #182d33 !important;
background: #A0A0A0 !important;
}
#navbar ul li a {
color: #0A9395 !important;
font-weight: bold !important;
color: #000000 !important;
}
header {
background: #E6E6E6 !important;
background: #EDEDED !important;
}
#wrap {
border-radius: 5px 5px 5px 5px !important;
-moz-border-radius: 5px 5px 5px 5px !important;
-webkit-border-radius: 5px 5px 5px 5px !important;
border: 1px solid #C5C5C5 !important;
padding-top: 10px !important;
min-height: 850px !important;
background-color: #FFFFFF;
}
main {
margin-bottom: 80px !important;
}
body {
background-color: #2D7E86 !important;
}

0 comments on commit 2339c83

Please sign in to comment.