3 #permalink Course Box
These are the restyled course boxes
3 #permalink Section Course
These are the restyled course section
3.1 #permalink My courses
This is the restyled course box used in My Courses
NB: The 'style' attributes are just for this representation only, when implementing
be sure to delete them.
Lorem ipsum dolor sit amet
<div class="row section-coourse">
<div class="section-coourse__header col-lg-12">
<div class="row">
<div class="col-sm-3 text-center">
<div class="row">
<img src="path/to/img" class="img-responsive section-coourse__img">
</div>
</div>
<div class="col-sm-9">
<h1 class="section-coourse__title">Lorem ipsum dolor sit amet</h1>
<div class="section-coourse__progress-cotainer">
<div class="progress section-coourse__progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
<span class="glyphicon glyphicon-signal pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="section-coourse__menu">
<div class="col-sm-3 text-center">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-flex">
<button type="button" class="btn btn-default">Menu</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-id="menu_id"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <b>Lorem ipsum dolor</b></a></li>
</ul>
</div>
</div>
</div>
</div>
3.1 #permalink Course
This is the restyled course section
NB: The 'style' attributes are just for this representation only, when implementing
be sure to delete them.
Lorem ipsum dolor sit amet
<div class="row section-coourse">
<div class="section-coourse__header col-lg-12">
<div class="row">
<div class="col-sm-3 text-center">
<div class="row">
<img src="path/to/img" class="img-responsive section-coourse__img">
</div>
</div>
<div class="col-sm-9">
<h1 class="section-coourse__title">Lorem ipsum dolor sit amet</h1>
<div class="section-coourse__progress-cotainer">
<div class="progress section-coourse__progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
<span class="glyphicon glyphicon-signal pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="section-coourse__menu">
<div class="col-sm-3 text-center">
<div class="row">
<div class="col-xs-12">
<div class="btn-group btn-flex">
<button type="button" class="btn btn-default">Menu</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#" data-id="menu_id"><span class="glyphicon glyphicon-signal" aria-hidden="true"></span> <b>Lorem ipsum dolor</b></a></li>
</ul>
</div>
</div>
</div>
</div>
3.2 #permalink Course Catalogue
This is the restyled course box used in Course Catalogue
NB: The 'style' attributes are just for this representation only, when implementing
be sure to delete them.
Also the id attribute of the forma-button here is used by YUI, so when the refactor ends
it will likely disappear.
<div style="max-width: 404px;">
<div class="course-box">
<div class="course-box__item">
<div class="course-box__title">Lorem ipsum dolor sit amet</div>
</div>
<div class="course-box__item course-box__item--no-padding">
<div class="course-box__img">
<img src="" alt="">
<div class="course-box__img-title">lorem ipsum</div>
</div>
</div>
<div class="course-box__item">
<div class="course-box__desc">
Lorem Ipsum dolor sit amet, consectetur adipiscing elit. Facilis ponatur
infinito oderis obruamus. Effectices, terroribus cognosci elegans totam
atilli arare p minuendas.
</div>
</div>
<div class="course-box__item">
<div class="course-box__date-box calendar-icon--check">31 agosto 2016</div>
<i class="fa fa-angle-right" aria-hidden="true"></i>
<div class="course-box__date-box course-box__date-box--end calendar-icon--green-cross">30 novembre 2017</div>
</div>
<div class="course-box__item" id="">
<a class="forma-button forma-button--orange-hover forma-button--full" href="">
<span class="forma-button__label">
Entra nel corso
</span>
</a>
</div>
</div>
</div>
3.3 #permalink Course Slider Menu
Internal menu of courses
<div class="section-coourse__menu col-xs-12">
<div class="row-fluid">
<div class="section-coourse__dropdown col-sm-5 text-center">
<div class="row">
<div class="col-xs-12">
<div class="forma-dropdown">
<button type="button" class="forma-dropdown__selected forma-button dropdown-toggle has-icon icon--coourse-menu icon--coourse-menu-area-corso" data-toggle="dropdown">Area corso</button>
<button type="button" class="forma-dropdown__toggle forma-button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-area-corso">
<span class="" aria-hidden="true"></span>
Area corso
</a>
</li>
<li>
<a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-statistiche">
<span class="" aria-hidden="true"></span>
Statistiche
</a>
</li>
<li>
<a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-area-social">
<span class="" aria-hidden="true"></span>
Area social
</a>
</li>
<li>
<a href="" data-id="" class="has-icon icon--coourse-menu icon--coourse-menu-gestione">
<span class="" aria-hidden="true"></span>
Gestione
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-sm-7 section-coourse__menu-horizontal">
<ul class="slider-menu">
<li class="slider-menu__item is-selected">
<a href="">Materiali</a>
</li>
<li class="slider-menu__item">
<a href="">Valutazioni</a>
</li>
<li class="slider-menu__item">
<a href="">Scheda corso</a>
</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</div>
Tempo parziale
00m
Tempo totale
19h 49m
Utenti on line
1
Materiali
3
Completato
1
progress failed
2
passed
1
failed
0
<div class="section-coourse-modal">
<div class="modal-body">
<div class="row">
<div class="modal__item col-sm-12 col-md-4">
<h3 class="title">
Tempo parziale
</h3>
<p class="text">
00m
</p>
</div>
<div class="modal__item col-sm-12 col-md-4">
<h3 class="title">
Tempo totale
</h3>
<p class="text">
19h 49m
</p>
</div>
<div class="modal__item col-sm-12 col-md-4">
<h3 class="title">
Utenti on line
</h3>
<p class="text">
1
</p>
</div>
<div class="modal__item col-sm-12 col-md-4">
<h3 class="title">
Materiali
</h3>
<p class="text">
3
</p>
</div>
<div class="modal__item col-sm-12 col-md-4">
<h3 class="title">
Completato
</h3>
<p class="text">
1
</p>
</div>
<div class="modal__item col-sm-12 col-md-4">
<h3 class="title">
progress failed
</h3>
<p class="text">
2
</p>
</div>
<div class="modal__item col-sm-12 col-md-6">
<h3 class="title">
passed
</h3>
<p class="text">
1
</p>
</div>
<div class="modal__item col-sm-12 col-md-6">
<h3 class="title">
failed
</h3>
<p class="text">
0
</p>
</div>
</div>
</div>
</div>