diff --git a/assets/css/base.css b/assets/css/base.css
index ad677d884f..b555ea554a 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -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;
diff --git a/assets/css/scss/_base.scss b/assets/css/scss/_base.scss
index 5521840576..e217dc5ecd 100644
--- a/assets/css/scss/_base.scss
+++ b/assets/css/scss/_base.scss
@@ -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;
diff --git a/assets/css/scss/_variables.scss b/assets/css/scss/_variables.scss
index 8aaaa2cf0e..b67b3cda7b 100644
--- a/assets/css/scss/_variables.scss
+++ b/assets/css/scss/_variables.scss
@@ -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
// ---------------------------------------------------------
diff --git a/main/template/default/user_portal/classic_courses_with_category.html.twig b/main/template/default/user_portal/classic_courses_with_category.html.twig
index d9fc2d7e4f..1ae33f51dd 100644
--- a/main/template/default/user_portal/classic_courses_with_category.html.twig
+++ b/main/template/default/user_portal/classic_courses_with_category.html.twig
@@ -1,4 +1,5 @@
{% autoescape false %}
+
{% if not categories is empty %}
<div class="classic-courses">
{% for category in categories %}
diff --git a/main/template/default/user_portal/classic_courses_without_category.html.twig b/main/template/default/user_portal/classic_courses_without_category.html.twig
index 8e7fe89733..2d9d045b42 100644
--- a/main/template/default/user_portal/classic_courses_without_category.html.twig
+++ b/main/template/default/user_portal/classic_courses_without_category.html.twig
@@ -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 %}
diff --git a/main/template/default/user_portal/course_categories.html.twig b/main/template/default/user_portal/course_categories.html.twig
index 6eefd6d496..5d778be400 100644
--- a/main/template/default/user_portal/course_categories.html.twig
+++ b/main/template/default/user_portal/course_categories.html.twig
@@ -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>
diff --git a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
index 068f1109b4..7e8d15d48f 100644
--- a/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
+++ b/src/ThemeBundle/Resources/views/Layout/base-layout.html.twig
@@ -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 %}
diff --git a/src/ThemeBundle/Resources/views/Macros/box.html.twig b/src/ThemeBundle/Resources/views/Macros/box.html.twig
index 18b8e7b9ff..4d03f3b2e8 100644
--- a/src/ThemeBundle/Resources/views/Macros/box.html.twig
+++ b/src/ThemeBundle/Resources/views/Macros/box.html.twig
@@ -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 %}
\ No newline at end of file