update course list classic - refs #2681

pull/2715/head
Alex Aragón 6 years ago
parent 53a70c3eca
commit df08d0c58f
  1. 24
      assets/css/base.css
  2. 70
      assets/css/scss/_base.scss
  3. 3
      assets/css/scss/_variables.scss
  4. 1
      main/template/default/user_portal/classic_courses_with_category.html.twig
  5. 181
      main/template/default/user_portal/classic_courses_without_category.html.twig
  6. 2
      main/template/default/user_portal/course_categories.html.twig
  7. 2
      src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
  8. 21
      src/ThemeBundle/Resources/views/Macros/box.html.twig

@ -7386,31 +7386,7 @@ ul#toolnavbox-two li a.btn {
margin-bottom: 5px;
}
.select2-container .select2-selection--single {
height: 32px !important;
border-color: #CCCCCC !important;
}
.select2-container--default .select2-selection--multiple {
background-color: #FFF !important;
border: 1px solid #CCC !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.select2-container .select2-search--inline .select2-search__field {
margin-top: 6px !important;
margin-bottom: 4px !important;
}
.select2-dropdown {
background-color: #FFF !important;
border: 1px solid #CCC !important;
border-top: none !important;
}
.page-blank {
padding: 20px 30px;

@ -17,6 +17,7 @@ body {
line-height: 1.5;
letter-spacing: 0.2px;
overflow-x: hidden;
background: $page-background;
}
h1,
@ -81,11 +82,7 @@ a {
hr {
border-top: 1px solid $border-color;
}
.btn-select{
color: #4e718f;
background-color: white;
border-color: #88b6df;
}
.btn-create-one{
border-color: #b8daff;
background-color: #cce5ff;
@ -224,8 +221,44 @@ hr {
}
.footer{
padding: 18px;
background-color: $default-white;
border-top: 1px solid #dee2e6;
}
/** SELECT */
.btn-select{
color: #495057;
background-color: white;
border-color: $select-color;
&.bs-placeholder{
color: $select-color !important;
}
}
.select2-container--default{
.select2-selection--single {
background-color: #fff;
border: 1px solid $select-color;
border-radius: 4px;
height: 40px !important;
line-height: 40px;
.select2-selection__rendered{
line-height: 40px;
}
.select2-selection__arrow{
height: 40px;
b{
border-color: #495057 transparent transparent transparent;
border-width: 6px 5px 0 5px;
left: 20%;
}
}
}
}
.help-block{
font-size: 12px;
margin-bottom: 0;
}
// ---------------------------------------------------------
// PAGE CONTAINER
// ---------------------------------------------------------
@ -393,6 +426,33 @@ footer {
padding: 1.88rem 1.81rem;
}
}
/* COURSE CLASSIC */
.course-list{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
grid-row-gap: 16px;
}
.card-course-classic{
border: 1px solid #dee2e6;
border-bottom-width: 5px;
display: grid;
grid-template-columns: auto;
grid-gap: 10px;
align-items: center;
.card-body{
padding: 1rem 1.2rem;
.title{
font-size: 16px;
a{
color: $grey-800;
}
}
}
}
/* COURSE GRID */
.card-course{
transform: perspective(1px) translateZ(0);
transition-property: box-shadow;

@ -44,7 +44,7 @@ $default-link : rgb(0, 153, 255);
// COLORS PAGE
// ---------------------------------------------------------
$page-background : #f2f8f9;
$page-background : #ffffff;
$menu-background :linear-gradient(120deg, #00a5e4, #4a71d0);
$sidebar-link : #54667A;
$sidebar-bg : #FFFFFF;
@ -52,6 +52,7 @@ $sidebar-focus : rgba(0, 0, 0, 0.07);
$header-link : #FFFFFF;
$header-hover : #eddf0e;
$breadcrumb-color : #d2f1ff;
$select-color : #ced4da;
// ---------------------------------------------------------
// OTHERS
// ---------------------------------------------------------

@ -1,4 +1,5 @@
{% autoescape false %}
{% if not categories is empty %}
<div class="classic-courses">
{% for category in categories %}

@ -1,99 +1,108 @@
{% import '@ChamiloTheme/Macros/box.html.twig' as macro %}
{% autoescape false %}
{% if not courses is empty %}
<div class="classic-courses">
<div class="course-list">
{% for item in courses %}
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-2">
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
<span class="thumbnail">
{% if item.thumbnails != '' %}
<img src="{{ item.thumbnails }}" title="{{ item.title }}"
alt="{{ item.title }}"/>
{% else %}
{{ 'blackboard.png' | img(48, item.title ) }}
{% endif %}
</span>
{% else %}
<a href="{{ item.link }}" class="thumbnail">
{% if item.thumbnails != '' %}
<img src="{{ item.thumbnails }}" title="{{ item.title }}"
alt="{{ item.title }}"/>
{% else %}
{{ 'blackboard.png' | img(48, item.title ) }}
{% endif %}
{% set image %}
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
<span class="thumbnail">
{% if item.thumbnails != '' %}
<img src="{{ item.thumbnails }}" title="{{ item.title }}"
alt="{{ item.title }}"/>
{% else %}
{{ 'blackboard.png' | img(48, item.title ) }}
{% endif %}
</span>
{% else %}
<a href="{{ item.link }}" class="thumbnail">
{% if item.thumbnails != '' %}
<img src="{{ item.thumbnails }}" title="{{ item.title }}"
alt="{{ item.title }}"/>
{% else %}
{{ 'blackboard.png' | img(48, item.title ) }}
{% endif %}
</a>
{% endif %}
{% endset %}
{% set title %}
{% if item.edit_actions != '' %}
<div class="float-right">
{% if item.document == '' %}
<a class="btn btn-outline-secondary btn-sm" href="{{ item.edit_actions }}">
<i class="fas fa-pencil-alt"></i>
</a>
{% else %}
<div class="btn-group" role="group">
<a class="btn btn-outline-secondary btn-sm" href="{{ item.edit_actions }}">
<i class="fas fa-pencil-alt"></i>
</a>
{% endif %}
</div>
<div class="col-md-10">
{% if item.edit_actions != '' %}
<div class="pull-right">
{% if item.document == '' %}
<a class="btn btn-default btn-sm" href="{{ item.edit_actions }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
{% else %}
<div class="btn-group" role="group">
<a class="btn btn-default btn-sm" href="{{ item.edit_actions }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
{{ item.document }}
</div>
{% endif %}
</div>
{% endif %}
<h4 class="course-items-title">
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
{{ item.title }} {{ item.code_course }}
{% else %}
<a href="{{ item.link }}">
{{ item.title }} {{ item.code_course }}
</a>
{{ item.notifications }}
{% if item.is_special_course %}
{{ 'klipper.png' | img(22, 'CourseAutoRegister'|get_lang ) }}
{% endif %}
{% endif %}
</h4>
<div class="course-items-session">
<div class="list-teachers">
{% if item.teachers|length > 0 %}
{{ 'teacher.png' | img(16, 'Professor'|get_lang ) }}
{% for teacher in item.teachers %}
{% set counter = counter + 1 %}
{% if counter > 1 %} | {% endif %}
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
{{ teacher.firstname }} {{ teacher.lastname }}
</a>
{% endfor %}
{{ item.document }}
</div>
{% endif %}
</div>
{% endif %}
<h5 class="title">
{% if item.visibility == constant('COURSE_VISIBILITY_CLOSED') and not item.current_user_is_teacher %}
{{ item.title }} {{ item.code_course }}
{% else %}
<a href="{{ item.link }}">
{{ item.title }} {{ item.code_course }}
</a>
{{ item.notifications }}
{% if item.is_special_course %}
{{ 'klipper.png' | img(22, 'CourseAutoRegister'|get_lang ) }}
{% endif %}
{% endif %}
</h5>
{% endset %}
{% set content %}
<div class="list-teachers">
{% if item.teachers|length > 0 %}
{{ 'teacher.png' | img(16, 'Professor'|get_lang ) }}
{% for teacher in item.teachers %}
{% set counter = counter + 1 %}
{% if counter > 1 %} | {% endif %}
<a href="{{ teacher.url }}" class="ajax"
data-title="{{ teacher.firstname }} {{ teacher.lastname }}">
{{ teacher.firstname }} {{ teacher.lastname }}
</a>
{% endfor %}
{% endif %}
</div>
<div class="student-progress">
{% if item.student_info %}
{% if (item.student_info.progress is not null) and (item.student_info.score is not null) %}
<div class="course-student-info">
<div class="student-info">
{% if (item.student_info.progress is not null) %}
{{ "StudentCourseProgressX" | get_lang | format(item.student_info.progress) }}
{% endif %}
</div>
{% if item.student_info %}
{% if (item.student_info.progress is not null) and (item.student_info.score is not null) %}
<div class="course-student-info">
<div class="student-info">
{% if (item.student_info.progress is not null) %}
{{ "StudentCourseProgressX" | get_lang | format(item.student_info.progress) }}
{% endif %}
{% if (item.student_info.score is not null) %}
{{ "StudentCourseScoreX" | get_lang | format(item.student_info.score) }}
{% endif %}
{% if (item.student_info.score is not null) %}
{{ "StudentCourseScoreX" | get_lang | format(item.student_info.score) }}
{% endif %}
{% if (item.student_info.certificate is not null) %}
{{ "StudentCourseCertificateX" | get_lang | format(item.student_info.certificate) }}
{% endif %}
</div>
</div>
{% if (item.student_info.certificate is not null) %}
{{ "StudentCourseCertificateX" | get_lang | format(item.student_info.certificate) }}
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>
{% endset %}
{{ macro.box_course_classic(item.course_id, title, content, image) }}
{% endfor %}
</div>
{% endif %}

@ -36,7 +36,7 @@
</div>
{% endset %}
{{ macro.panel_row('category', title, subtitle, content, image) }}
{{ macro.box_category_course('category', title, subtitle, content, image) }}
{% endif %}
</div>

@ -95,7 +95,7 @@
<!-- MAIN CONTENT -->
{% autoescape false %}
<main class='main-content bg-content'>
<div class="container box-body">
<div class="container-fluid box-body">
<div class="pt-1 pb-1">
{% block page_content %}

@ -214,7 +214,7 @@
{% endautoescape %}
{% endmacro %}
{% macro panel_row(id, title, subtitle, content, image) %}
{% macro box_category_course(id, title, subtitle, content, image) %}
{% autoescape false %}
<div class="card card-{{ id }} p-3 mt-3 mb-3">
<div class="card-body pb-3">
@ -245,3 +245,22 @@
</div>
{% endautoescape %}
{% endmacro %}
{% macro box_course_classic(id, title, content, image) %}
{% autoescape false %}
{% set values = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']%}
<div id="course-{{ id }}" class="card card-course-classic" style="border-bottom-color: {{ '#' ~ random(values)~ random(values)~ random(values)~ random(values)~ random(values)~ random(values)~'50' }}">
<div class="card-body">
<div class="row">
<div class="col-md-3">
{{ image }}
</div>
<div class="col-md-9">
{{ title }}
{{ content }}
</div>
</div>
</div>
</div>
{% endautoescape %}
{% endmacro %}
Loading…
Cancel
Save