update box card courses - refs #2681

pull/2715/head
Alex Aragón 7 years ago
parent 62567d09f8
commit 8b0cdf9413
  1. 25
      assets/css/base.css
  2. 35
      assets/css/scss/_base.scss
  3. 8
      assets/css/scss/_sidebar.scss
  4. 7
      assets/css/scss/_variables.scss
  5. 13
      assets/css/themes/chamilo/default.css
  6. 155
      main/template/default/user_portal/grid_courses_without_category.html.twig
  7. BIN
      public/img/session_default.png
  8. 37
      src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
  9. 6
      src/CoreBundle/Resources/views/default/layout/hot_courses.html.twig
  10. 161
      src/ThemeBundle/Resources/views/Layout/topbar.html.twig
  11. 2
      src/ThemeBundle/Resources/views/Macros/box.html.twig

@ -5950,7 +5950,17 @@ div#chat-remote-video video {
padding-top: 10px;
border-bottom: 1px solid #ECF0F1;
}
.toolbar-edit {
display: inline-block;
width: 100%;
margin-top: 10px;
}
.bar-progress {
display: inline-block;
width: 100%;
}
/*
.grid-courses .items .course-student-info {
background-color: #d9edf7;
border: 1px solid #bce8f1;
@ -5965,19 +5975,7 @@ div#chat-remote-video video {
color: #666;
}
.toolbar-edit {
display: inline-block;
width: 100%;
margin-top: 10px;
}
.bar-progress {
display: inline-block;
width: 100%;
}
.grid-courses .items {
/* position: relative; */
vertical-align: top;
white-space: normal;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@ -6191,7 +6189,6 @@ div#chat-remote-video video {
color: #fff;
}
/*---- */
.grid-courses .items .block-author {
display: flex;
margin: 5px 0 5px;
@ -6227,7 +6224,7 @@ div#chat-remote-video video {
margin-top: 15px;
margin-bottom: 15px;
}
*/
.title-session,
.title-courses {
text-align: center;

@ -53,12 +53,12 @@ ul {
}
a {
color: $default-info;
color: $default-link;
&:hover,
&:focus {
text-decoration: none;
color: darken($default-info, 10%);
color: darken($default-link, 20%);
}
&:focus {
@ -253,4 +253,33 @@ footer {
display: block;
padding: 10px;
position: relative;
}
}
.carousel-item img{
max-width: 100%;
height: auto;
}
.card{
border: none;
.category{
position: absolute;
border-radius: 10px;
background-color: $default-yellow;
color: $default-black;
font-weight: bold;
padding: 0.2rem 0.8rem;
top: -0.8rem;
left: 0.5rem;
}
.card-body{
padding: 0.5rem 0.25rem;
.card-title{
.title{
font-size: 16px;
font-weight: bold;
line-height: 22px;
}
}
}
}

@ -195,7 +195,7 @@
.sidebar-link {
&.active::before {
background: $default-warning;
background: $default-yellow;
content: '';
display: block;
height: 100%;
@ -227,7 +227,7 @@
color: $default-white;
&.dropdown-toggle {
background: $default-active;
background: $default-link;
}
.icon-holder {
@ -278,14 +278,14 @@
}
&.active {
background: $default-active;
background: $default-link;
}
&:hover,
&:focus {
color: $default-info;
text-decoration: none;
background: $default-active;
background: $default-link;
.icon-holder {
color: $default-info;

@ -34,9 +34,10 @@ $default-info : #4abaff;
$default-primary : #7774e7;
$default-success : #37c936;
$default-text-color : #72777a;
$default-warning : #fc0;
$default-white : #fff;
$default-active : #006b9e;
$default-yellow : #FFCC00;
$default-white : #FFFFFF;
$default-black : #000000;
$default-link : rgb(0, 153, 255);
$default-background : #FFFFFF;
$default-sidebar : #0181bf;

@ -8,16 +8,3 @@
body {
}
a {
color: #337AB7;
text-decoration: none;
}
a:hover,
a:focus {
color: #2E75A3;
text-decoration: none;
}
a:focus {
outline: none;
}

@ -1,3 +1,91 @@
{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
{% if not courses is empty %}
<div class="course-columns">
<div class="row">
{% for item in courses %}
<div class="col-sm">
{% if item.title %}
{% set image %}
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
<img src="{{ item.image }}" class="card-img-top">
{% else %}
<a title="{{ item.title }}" href="{{ item.link }}">
<img src="{{ item.image }}" alt="{{ item.title }}" class="card-img-top">
</a>
{% endif %}
{% endset %}
{% set content %}
<div class="card-title">
<h5 class="title">
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
{{ item.title_cut }} {{ item.code_course }}
{% else %}
<a title="{{ item.title }}" href="{{ item.link }}">{{ item.title_cut }} {{ item.code_course }}</a>
{% endif %}
</h5>
</div>
<div class="block-author">
{% if item.teachers | length > 6 %}
<a id="plist-{{ loop.index }}" data-trigger="focus" tabindex="0" role="button" class="btn btn-default panel_popover" data-toggle="popover" title="{{ 'CourseTeachers' | get_lang }}" data-html="true">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</a>
<div id="popover-content-plist-{{ loop.index }}" class="hide">
{% for teacher in item.teachers %}
<div class="popover-teacher">
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
<img src="{{ teacher.avatar }}"/>
</a>
<div class="teachers-details">
<h5>
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
{{ teacher.firstname }} {{ teacher.lastname }}
</a>
</h5>
</div>
</div>
{% endfor %}
</div>
{% else %}
{% for teacher in item.teachers %}
{% if item.teachers | length <= 2 %}
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
<img src="{{ teacher.avatar }}"/>
</a>
<div class="teachers-details">
<h5>
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
{{ teacher.firstname }} {{ teacher.lastname }}
</a>
</h5>
<p>{{ 'Teacher' | get_lang }}</p>
</div>
{% elseif item.teachers | length <= 6 %}
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
<img src="{{ teacher.avatar }}"/>
</a>
{% endif %}
{% endfor %}
{% endif %}
</div>
{% endset %}
{{ macro.panel('', content, '', '', '', image) }}
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if not courses is empty %}
<div class="grid-courses">
<div class="row">
@ -8,13 +96,7 @@
{% if item.is_special_course %}
<div class="pin">{{ item.icon }}</div>
{% endif %}
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
<img src="{{ item.image }}" class="img-responsive">
{% else %}
<a title="{{ item.title }}" href="{{ item.link }}">
<img src="{{ item.image }}" alt="{{ item.title }}" class="img-responsive">
</a>
{% endif %}
{% if item.category != '' %}
<span class="category">{{ item.category }}</span>
<div class="cribbon"></div>
@ -38,63 +120,8 @@
{% endif %}
</div>
<div class="description">
<div class="block-title">
<h4 class="title" title="{{ item.title }}">
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
{{ item.title_cut }} {{ item.code_course }}
{% else %}
<a title="{{ item.title }}" href="{{ item.link }}">{{ item.title_cut }} {{ item.code_course }}</a>
{% endif %}
</h4>
</div>
<div class="block-author">
{% if item.teachers | length > 6 %}
<a id="plist-{{ loop.index }}" data-trigger="focus" tabindex="0" role="button" class="btn btn-default panel_popover" data-toggle="popover" title="{{ 'CourseTeachers' | get_lang }}" data-html="true">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</a>
<div id="popover-content-plist-{{ loop.index }}" class="hide">
{% for teacher in item.teachers %}
<div class="popover-teacher">
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
<img src="{{ teacher.avatar }}"/>
</a>
<div class="teachers-details">
<h5>
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
{{ teacher.firstname }} {{ teacher.lastname }}
</a>
</h5>
</div>
</div>
{% endfor %}
</div>
{% else %}
{% for teacher in item.teachers %}
{% if item.teachers | length <= 2 %}
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
<img src="{{ teacher.avatar }}"/>
</a>
<div class="teachers-details">
<h5>
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
{{ teacher.firstname }} {{ teacher.lastname }}
</a>
</h5>
<p>{{ 'Teacher' | get_lang }}</p>
</div>
{% elseif item.teachers | length <= 6 %}
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
<img src="{{ teacher.avatar }}"/>
</a>
{% endif %}
{% endfor %}
{% endif %}
</div>
{% if item.notifications %}
<div class="notifications">{{ item.notifications }}</div>
{% endif %}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 905 B

@ -1,44 +1,31 @@
{% import "ChamiloThemeBundle:Macros:box.html.twig" as macro %}
{% autoescape false %}
{% for item in hot_courses %}
{% if item.title %}
<div class="col-md-3">
{% if item.title %}
{% set tools %}
{% if item.categoryName != '' %}
<span class="category">{{ item.categoryName }}</span>
<div class="cribbon"></div>
{% endif %}
<div class="user-actions">{{ item.description_button }}</div>
{% endset %}
{% set image %}
{% if item.is_registered %}
<a title="{{ item.title}}" href="{{ item.course_public_url }}">
<img src="{{ item.course_image_large }}" class="card-img-top" alt="{{ item.title }}">
</a>
{% else %}
<div class="category">
{{ item.categoryName }}
</div>
<a title="{{ item.title}}" href="{{ item.course_public_url }}">
<img src="{{ item.course_image_large }}" class="card-img-top" alt="{{ item.title }}">
{% endif %}
</a>
{% endset %}
{% set content %}
<div class="card-title">
{% if item.is_registered %}
<h5 class="title">
<a title="{{ item.title }}" href="{{ item.course_public_url }}">{{ item.title_cut}}</a>
</h5>
{% else %}
<h5 class="title" title="{{ item.title }}">
{{ item.title_cut}}
</h5>
{% endif %}
<h5 class="title">
<a title="{{ item.title }}" href="{{ item.course_public_url }}">{{ item.title}}</a>
</h5>
</div>
<div class="ranking">
@ -81,10 +68,8 @@
</div>
</div>
{% endset %}
{{ macro.panel('', content, '', '', '', image) }}
{% endif %}
</div>
{% endfor %}
{% endautoescape %}

@ -34,10 +34,8 @@
{{ "HottestCourses"|get_lang }}
</h5>
</div>
<div class="card-columns">-
{% include '@ChamiloCore/default/layout/hot_course_item.html.twig' %}
<div class="row">
{% include '@ChamiloCore/default/layout/hot_course_item.html.twig' %}
</div>
{% endif %}
{% endautoescape %}

@ -107,7 +107,7 @@
{% if app.user is not null and is_granted('IS_AUTHENTICATED_FULLY') %}
<ul class="nav-right">
<li class="btn-padding">
<a class="btn btn-light btn-create-two btn-sm" href="{{ url('legacy_main', { 'name' : 'main/create_course/add_course.php' }) }}">
<a class="btn btn-light btn-create-two btn-sm" href="{{ url('legacy_main', { 'name' : 'create_course/add_course.php' }) }}">
<i class="fa fa-plus fa-lg" aria-hidden="true"></i>
{{ "AddCourse"|trans }}
</a>
@ -132,171 +132,22 @@
</a>
</li>
<li class="notifications dropdown">
<li class="notifications">
<span class="counter bgc-red">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="#" class="no-after" >
<i class="far fa-bell"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-bell pR-10"></i>
<span class="fsz-sm fw-600 c-grey-900">Notifications</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">John Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">post</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">5 mins ago</small>
</p>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Moo Doe</span>
<span class="c-grey-600">liked your <span class="text-dark">cover image</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">7 mins ago</small>
</p>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<span>
<span class="fw-500">Lee Doe</span>
<span class="c-grey-600">commented on your <span class="text-dark">video</span>
</span>
</span>
<p class="m-0">
<small class="fsz-xs">10 mins ago</small>
</p>
</div>
</a>
</li>
</ul>
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="" class="c-grey-600 cH-blue fsz-sm td-n">View All Notifications <i class="ti-angle-right fsz-xs mL-10"></i></a>
</span>
</li>
</ul>
</li>
<li class="notifications dropdown">
<li class="notifications">
<span class="counter bgc-blue">3</span>
<a href="" class="dropdown-toggle no-after" data-toggle="dropdown">
<a href="" class="no-after">
<i class="far fa-envelope"></i>
</a>
<ul class="dropdown-menu">
<li class="pX-20 pY-15 bdB">
<i class="ti-email pR-10"></i>
<span class="fsz-sm fw-600">Emails</span>
</li>
<li>
<ul class="ovY-a pos-r scrollable lis-n p-0 m-0 fsz-sm">
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">John Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">5 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/2.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Moo Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">15 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
<li>
<a href="" class='peers fxw-nw td-n p-20 bdB c-grey-800 cH-blue bgcH-grey-100'>
<div class="peer mR-15">
<img class="w-3r bdrs-50p" src="https://randomuser.me/api/portraits/men/3.jpg" alt="">
</div>
<div class="peer peer-greed">
<div>
<div class="peers jc-sb fxw-nw mB-5">
<div class="peer">
<p class="fw-500 mB-0">Lee Doe</p>
</div>
<div class="peer">
<small class="fsz-xs">25 mins ago</small>
</div>
</div>
<span class="c-grey-600 fsz-sm">
Want to create your own customized data generator for your app...
</span>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="pX-20 pY-15 ta-c bdT">
<span>
<a href="email.html" class="c-grey-600 cH-blue fsz-sm td-n">View All Email <i class="fs-xs ti-angle-right mL-10"></i></a>
</span>
</li>
</ul>
</li>
<li class="dropdown">
<a href="" class="dropdown-toggle no-after peers fxw-nw ai-c lh-1" data-toggle="dropdown">
<div class="peer mR-10">
<img class="w-2r bdrs-50p" src="{{ asset(app.user.avatarOrAnonymous(32)) }}" alt="{{ app.user.completeName }}">
<img class="rounded-circle" src="{{ asset(app.user.avatarOrAnonymous(32)) }}" alt="{{ app.user.completeName }}">
</div>
<div class="peer">
<span class="fsz-sm">{{ app.user.completeName }}</span>

@ -154,7 +154,7 @@
{% macro panel(header, content, title, footer, subtitle, top_image) %}
{% autoescape false %}
<div class="card" style="width: 20rem;">
<div class="card" >
{% if header %}
<div class="card-header"> {{ header }} </div>
{% endif %}

Loading…
Cancel
Save