chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

update base.css about course - refs #2681

Browse Source
pull/2818/head
Alex Aragón 6 years ago
parent b60e115b82
commit bb17c0a8d1
3 changed files with 122 additions and 337 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 302
      assets/css/base.css
  2. 118
      assets/css/scss/_base.scss
  3. 39
      main/template/default/course_home/about.html.twig

302
assets/css/base.css
Unescape View File

@ -3656,308 +3656,6 @@ div#chat-remote-video video {
min-height: 284px;
}
#about-course .panel-information ul {
margin: 20px 0;
}
#about-course .course, #about-course .session {
padding-top: 10px;
padding-bottom: 10px;
}
#about-course .session-requirements h5 {
font-weight: bold;
}
#about-course .session-title {
font-weight: bold;
}
#about-course .session-tutor {
margin-top: 20px;
margin-bottom: 20px;
font-size: 12px;
}
#about-course .share-social-media {
padding: 10px 0 0 0;
}
#about-course .share-social-media .sharing-buttons li {
padding-left: 0;
}
#about-course .session-info .date {
font-weight: bold;
text-align: center;
}
#about-course .panel-tags {
display: inline-block;
width: 100%;
padding: 0 10px;
margin-top: 10px;
}
#about-course .panel-tags .course-tags {
margin-bottom: 0;
}
#about-course .panel-tags .course-tags li {
margin-bottom: 0;
padding-top: 5px;
padding-bottom: 5px;
}
#about-course .sub-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 20px;
}
#about-course .topics .title-info {
margin: 30px 0 20px 0;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
#about-course .coach-header {
display: flex;
-moz-box-align: center;
-webkit-box-align: center;
align-items: center;
flex-flow: row;
}
#about-course .coach-header .coach-avatar {
width: 70px;
margin-right: 20px;
}
#about-course .coach-header .coach-avatar .img-circle {
border: 1px solid #C0C0C0;
}
#about-course .coach-header .coach-title {
flex-flow: column;
align-items: flex-start;
display: flex;
}
#about-course .coach-header .coach-title p {
font-size: 13px;
}
#about-course .coach-title p {
margin: 0;
}
#about-course .coach-information {
width: 100%;
display: block;
border-bottom: 1px solid #dddddd;
margin-bottom: 10px;
padding-bottom: 10px;
}
#about-course .coach-information:last-child {
border-bottom: none;
}
#about-course .coach-information h4 {
font-weight: bold;
}
#about-course .course-title h3 {
font-size: 22px;
line-height: 32px;
font-weight: bold;
margin-top: 0;
margin-bottom: 15px;
}
#about-course .tags-course {
padding: 10px;
background-color: #ECF0F1;
margin-bottom: 10px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#about-course .tags-course .fa-tags {
color: #D94D38;
}
#about-course .tags-course a {
display: inline-block;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
background-color: #ffffff;
border-radius: 10%;
-moz-border-radius: 10%;
-webkit-border-radius: 10%;
}
#about-course .subscribe {
padding: 5px;
text-align: center;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#about-course .info-course {
margin-top: 20px;
padding-top: 20px;
}
#about-course .info-course .panel-heading h4 {
margin: 0;
}
#about-course .info-course .title-info {
color: #00829C;
border-bottom: 1px dotted #eeeeee;
padding-bottom: 10px;
margin-bottom: 10px;
}
#about-course .info-course .content-info {
padding: 10px;
}
#about-course .extrafield_dt {
margin-bottom: 10px;
}
#about-course .extrafield_dd {
color: #666666;
}
#about-course .socialshare {
text-align: center;
}
#about-course .socialshare .networks {
padding-left: 0;
list-style: none;
}
#about-course .socialshare .networks li {
padding-right: 2px;
padding-left: 2px;
margin-bottom: 10px;
display: inline-block;
}
#about-course .socialshare .networks li a {
display: block;
width: 48px;
height: 48px;
font-size: 2.3rem;
line-height: 18px;
text-align: center;
color: #FFF;
background-color: #337AB7;
border-radius: 50%;
padding: 10px;
}
#about-course .socialshare .networks li a:hover {
background-color: #286090;
}
#about-course .course-tags .tag-value {
display: inline-block;
margin-bottom: 15px;
}
#about-course .course-tags li span {
position: relative;
display: inline-block;
padding: 0 3px;
height: 20px;
line-height: 20px;
font-size: 1.5rem !important;
font-weight: 600 !important;
background: #D7E3E6 !important;
border-radius: 0 3px 3px 0 !important;
-webkit-transition: none 0.15s ease-in-out;
-o-transition: none 0.15s ease-in-out;
transition: none 0.15s ease-in-out;
}
#about-course .course-tags li span::before {
display: inline-block;
content: "";
top: 0;
left: -8px;
position: absolute;
width: 0;
height: 0;
border-right: 8px solid #D7E3E6;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
#about-course .course-tags li span::after {
z-index: 1;
content: "";
top: 8px;
left: -3px;
position: absolute;
width: 4px;
height: 4px;
background-color: #F2F2F2;
border-radius: 10px;
}
#about-course .panel-tags .panel-body {
text-align: center;
}
#about-course .price-text {
font-size: 36px;
font-weight: 700;
line-height: 40px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 10px;
}
#about-course .buy-box .btn-primary {
color: #fff;
background-color: #ec5252;
border: 1px solid transparent;
font-size: 15px;
line-height: 1.35135;
border-radius: 2px;
}
#about-course .course-short{
padding-top: 5px;
padding-bottom: 5px;
}
#about-course .course-short ul{
display: inline-block;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
#about-course .course-short ul li{
display: inline-block;
}
#about-course .course-short ul li.author{
font-weight: bold;
margin-right: 5px;
}
#about-course #course-info-top .session-title{
margin-top: 10px;
}
/*************** SCROLLBAR BASE CSS ***************/

118
assets/css/scss/_base.scss
Unescape View File

@ -770,7 +770,7 @@ footer {
}
}
/******************* Accordion B4 *****************/
/******************* ACCORDION B4 *****************/
.accordion-b4 {
.card {
@ -852,7 +852,7 @@ footer {
}
}
/************* SOCIAL *************/
/****** SOCIAL ******/
.profile {
.profile-bg {
position: absolute;
@ -913,7 +913,9 @@ footer {
font-size: 12px;
}
}
/***** CALENDAR ******/
/****** CALENDAR ******/
.fc-day-grid-event{
border: none;
padding: 6px 12px 6px 22px;
@ -922,7 +924,9 @@ footer {
cursor: pointer;
border-radius: 4px;
}
/********* ACTIONS **********/
/****** ACTIONS ******/
.actions {
background: #ffffff;
border: 1px solid #dddddd;
@ -980,7 +984,8 @@ footer {
}
}
}
/****** EXERCISE *********/
/****** EXERCISE ******/
.card-exercise{
margin-bottom: 20px;
.list-exercise{
@ -1027,7 +1032,6 @@ footer {
border-radius: 5px;
}
}
.checkradios
{
-webkit-appearance: none;
@ -1041,7 +1045,6 @@ footer {
height: 30px;
width: 30px;
border: 1px solid #cdcdcd;
cursor: pointer;
margin-right: 7px;
outline: none;
@ -1268,7 +1271,8 @@ footer {
}
}
/*** GALERY ***/
/****** GALERY ******/
.gallery{
.img-gallery {
height: 100%;
@ -1301,7 +1305,7 @@ footer {
}
}
/*** EXERCISE RESULTS ***/
/****** EXERCISE RESULTS ******/
.ribbon {
display: inline-block;
@ -1465,7 +1469,7 @@ footer {
.career p {
padding-left: 10px;
}
/*** WHOISONLINE ***/
/****** WHOISONLINE ******/
#whoisonline {
.items-user {
@ -1485,7 +1489,8 @@ footer {
}
}
/***** FORM REGISTER *****/
/****** FORM REGISTER ******/
.terms-conditions {
padding: 15px 10px;
background-color: #DDD;
@ -1658,7 +1663,8 @@ footer {
}
}
/***** BLOG *****/
/****** BLOG ******/
.blog {
padding: 0;
.title-post {
@ -1716,7 +1722,8 @@ footer {
}
}
/***** SOCIAL MEDIA *****/
/****** SOCIAL MEDIA ******/
.share-social-media {
background-color: #FFF;
margin-bottom: 5px;
@ -1771,7 +1778,7 @@ footer {
}
}
/**** FORUM CSS ****/
/****** FORUM CSS ******/
.forum{
.number-post {
@ -1836,3 +1843,86 @@ footer {
}
}
}
/****** ABOUT COURSE AND SESSION ******/
.about{
.share-social-media {
padding: 10px 0 0 0;
.sharing-buttons {
list-style: none;
margin: 0 0 10px 0;
padding: 0;
li{
padding-left: 0;
}
}
}
.topics{
.title-info {
margin: 30px 0 20px 0;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
}
}
.course-tags{
width: 100%;
margin-top: 10px;
li{
span{
position: relative;
display: inline-block;
padding: 0 3px;
height: 20px;
line-height: 20px;
font-weight: 600 !important;
background: #D7E3E6 !important;
border-radius: 0 3px 3px 0 !important;
-webkit-transition: none 0.15s ease-in-out;
-o-transition: none 0.15s ease-in-out;
transition: none 0.15s ease-in-out;
&:before{
display: inline-block;
content: "";
top: 0;
left: -8px;
position: absolute;
width: 0;
height: 0;
border-right: 8px solid #D7E3E6;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
&:after{
z-index: 1;
content: "";
top: 8px;
left: -3px;
position: absolute;
width: 4px;
height: 4px;
background-color: #F2F2F2;
border-radius: 10px;
}
}
}
}
.course-short{
padding-top: 5px;
padding-bottom: 5px;
ul{
display: inline-block;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
li{
display: inline-block;
&.author{
font-weight: bold;
margin-right: 5px;
}
}
}
}
}

39
main/template/default/course_home/about.html.twig
Unescape View File

@ -1,5 +1,5 @@
{% autoescape false %}
<div id="about-course">
<div id="about-course" class="about">
<div id="course-info-top">
<h2 class="session-title">{{ course.title }}</h2>
<div class="course-short">
@ -19,8 +19,8 @@
{% endif %}
{% endfor %}
<div class="panel panel-default">
<div class="panel-body">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-5">
{% if course_video %}
@ -42,19 +42,19 @@
</li>
<li>
<a href="https://www.facebook.com/sharer/sharer.php?u={{ url }}"
target="_blank" class="btn btn-facebook btn-inverse btn-xs">
target="_blank" class="btn btn-facebook btn-inverse btn-sm">
<em class="fab fa-facebook-square"></em> Facebook
</a>
</li>
<li>
<a href="https://twitter.com/home?{{ {'status': course.title ~ ' ' ~ url }|url_encode }}"
target="_blank" class="btn btn-twitter btn-inverse btn-xs">
target="_blank" class="btn btn-twitter btn-inverse btn-sm">
<em class="fab fa-twitter"></em> Twitter
</a>
</li>
<li>
<a href="https://www.linkedin.com/shareArticle?{{ {'mini': 'true', 'url': url , 'title': course.title }|url_encode }}"
target="_blank" class="btn btn-linkedin btn-inverse btn-xs">
target="_blank" class="btn btn-linkedin btn-inverse btn-sm">
<em class="fab fa-linkedin-in"></em> Linkedin
</a>
</li>
@ -68,17 +68,14 @@
</div>
</div>
{% if course.tags %}
<div class="panel-tags">
<ul class="list-inline course-tags">
<li>{{ 'Tags'|get_lang }} :</li>
{% for tag in course.tags %}
<li class="tag-value">
<span>{{ tag.getTag }}</span>
</li>
{% endfor %}
</ul>
</div>
<ul class="list-inline course-tags d-flex flex-row bd-highlight mb-3">
<li class="px-2 bd-highlight">{{ 'Tags'|get_lang }} :</li>
{% for tag in course.tags %}
<li class="px-2 bd-highlight">
<span>{{ tag.getTag }}</span>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
@ -107,8 +104,8 @@
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<div class="card">
<div class="card-body">
{% if is_premium == false %}
<h5>{{ 'CourseSubscription'|get_lang }}</h5>
<div class="session-subscribe">
@ -139,8 +136,8 @@
{% endif %}
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<div class="card">
<div class="card-body">
<div class="panel-teachers">
<h3 class="sub-title">{{ "Coaches"|get_lang }}</h3>
</div>

Write Preview
Loading…
Cancel
Save