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 box card courses - refs #2681

Browse Source
pull/2715/head
Alex Aragón 7 years ago
parent 62567d09f8
commit 8b0cdf9413
11 changed files with 162 additions and 287 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. 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

25
assets/css/base.css
Unescape View File

@ -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;

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

@ -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;
}
}
}
}

8
assets/css/scss/_sidebar.scss
Unescape View File

@ -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;

7
assets/css/scss/_variables.scss
Unescape View File

@ -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;

13
assets/css/themes/chamilo/default.css
Unescape View File

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

155
main/template/default/user_portal/grid_courses_without_category.html.twig
Unescape View File

@ -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 %}

BIN
public/img/session_default.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 905 B

37
src/CoreBundle/Resources/views/default/layout/hot_course_item.html.twig
Unescape View File

@ -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 %}

6
src/CoreBundle/Resources/views/default/layout/hot_courses.html.twig
Unescape View File

@ -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 %}

161
src/ThemeBundle/Resources/views/Layout/topbar.html.twig
Unescape View File

@ -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>

2
src/ThemeBundle/Resources/views/Macros/box.html.twig
Unescape View File

@ -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 %}

Write Preview
Loading…
Cancel
Save