Ver código fonte

add css display list course BT#11017

Alex Aragon 9 anos atrás
pai
commit
5abe41e727

+ 100 - 6
app/Resources/public/css/base.css

@@ -4856,6 +4856,106 @@ div#chat-remote-video video {
   width: 100px;
   height: 100px;
 }
+/* list my course user*/
+
+.grid-courses .items{
+    /* position: relative; */
+    vertical-align: top;
+    white-space: normal;
+    margin: 0px 5px 15px 0px;
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
+    text-align: left;
+    background-color: #fff;
+    min-height: 235px;
+    border: 1px solid #DFDFDF;
+    border-radius: 5px;
+}
+.grid-courses .items .title{
+    line-height: 1.4;
+    font-size: 13px;
+    min-height: 40px;
+    padding: 0px;
+    margin: 5px;
+}
+.grid-courses .items .image{
+    position: relative;
+}
+.grid-courses .items .image .black_shadow{
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    padding-top: 40px;
+    opacity: 0;
+    box-sizing: border-box;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.7) none repeat scroll 0% 0%;
+    padding: 10px;
+}
+.grid-courses .items .image .hovered_course{
+    opacity: 1;
+    transition: all 0.3s ease 0s;
+}
+.grid-courses .items .notifications{
+    margin-top: 5px;
+    text-align: center;
+}
+.grid-courses .items .admin-actions{
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+}
+.grid-courses .items .admin-actions .btn-sm{
+    border-radius: 0;
+    border: none;
+}
+.grid-courses .items .category{
+    position: absolute;
+    bottom: 0px;
+    right: -10px;
+    background-color: #35DF86;
+    color: #fff;
+    padding: 5px 10px;
+    font-size: 11px;
+    text-transform: uppercase;
+    z-index: 2;
+}
+.grid-courses .items .cribbon{
+    width: 0;
+    height: 0;
+    border-top: 10px solid #19BF69;
+    border-right: 10px solid transparent;
+    position: absolute;
+    bottom: -10px;
+    right: -10px;
+}
+.grid-courses .items .description{
+    padding: 5px 10px;
+}
+.grid-courses .items .author-card{
+    display: flex;
+    margin-top: 5px;
+    margin-left: 5px;
+}
+.grid-courses .items .author-card img{
+    border: 2px solid #fff;
+}
+.grid-courses .items .author-card .teachers-details{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.grid-courses .items .author-card .teachers-details h5{
+    font-size: 10px;
+    font-weight: bold;
+    margin: 0px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+.grid-courses .items .author-card .teachers-details h5 a{
+    color: #fff;
+}
 /* Catalog session */
 #session-list .col-md-4:nth-child(3n+1) {
   clear: left;
@@ -5120,8 +5220,6 @@ div#chat-remote-video video {
 .ui-tabs .ui-widget-content a.btn-success{
     color: #fff;
 }
-
-
 .ui-priority-secondary,
 .ui-widget-content .ui-priority-secondary,
 .ui-widget-header .ui-priority-secondary{
@@ -5159,7 +5257,6 @@ div#chat-remote-video video {
 .ui-dialog .ui-dialog-buttonpane{
   border-top: 1px solid #DDD;
 }
-
 .ui-button.ui-widget.ui-state-default {
   background-color:#f5f5f5;
   background-image:-moz-linear-gradient(top,#fff,#e6e6e6);
@@ -5185,9 +5282,6 @@ div#chat-remote-video video {
   font-weight:normal;
   color:#333333;
 }
-
-
-
 .select2-container .select2-selection--single{
   height: 32px !important;
   border-color: #CCCCCC !important;

+ 6 - 2
main/inc/lib/course.lib.php

@@ -1892,12 +1892,15 @@ class CourseManager
         $teachers = array();
         $count = 0;
         while ($teacher = Database::fetch_array($rs)) {
+            $userPicture = UserManager::getUserPicture($teacher['user_id'], USER_IMAGE_SIZE_SMALL);
             $teachers['id'] = $teacher['user_id'];
             $teachers['lastname'] = $teacher['lastname'];
             $teachers['firstname'] = $teacher['firstname'];
             $teachers['email'] = $teacher['email'];
             $teachers['username'] = $teacher['username'];
             $teachers['status'] = $teacher['status'];
+            $teachers['avatar'] = $userPicture;
+            $teachers['url'] = api_get_path(WEB_AJAX_PATH) . 'user_manager.ajax.php?a=get_user_popup&user_id=' . $teacher['user_id'];
             $count++;
             $listTeachers[$count]=$teachers;
         }
@@ -3734,9 +3737,9 @@ class CourseManager
             } else {
                 $course_list[] = $course_info['real_id'];
             }
-
+            
             $courseCount++;
-
+            
             // For each course, get if there is any notification icon to show
             // (something that would have changed since the user's last visit).
             $showNotification = Display::show_notification($course_info);
@@ -3905,6 +3908,7 @@ class CourseManager
             $params['thumbnails'] = $thumbnails;
             $params['image'] = $image;
             $params['title'] = $course_info['title'];
+            $params['category'] = $course_info['categoryName'];
             $params['teachers'] = $teachers;
 
             if ($course_info['visibility'] != COURSE_VISIBILITY_CLOSED) {

+ 5 - 0
main/template/default/layout/header.js.tpl

@@ -211,6 +211,11 @@ $(document).ready(function(){
             });
         });
     };
+    $(".black_shadow").mouseenter(function() {
+        $(this).addClass('hovered_course');
+    }).mouseleave(function() {
+         $(this).removeClass('hovered_course');
+    });
 });
 
 $(window).resize(function() {

+ 34 - 14
main/template/default/user_portal/main_courses.tpl

@@ -1,28 +1,48 @@
 
 {% for course in courses %}
-    <div class="row">
+<div class="grid-courses">
+<div class="row">
     {% for item in course %}
-    <div class="col-md-4">
+    <div class="col-md-4 col-sm-4 col-xs-6">
         <div class="items">
             <div class="image">
                 <img src="{{ item.image }}" class="img-responsive">
-            </div>
-            <h4 class="title"><a href="{{ item.link }}">{{ item.title }}</a></h4>
-            <div class="teachers">
-                <ul>
+                {% if item.category != '' %}
+                <span class="category">{{ item.category }}</span>
+                <div class="cribbon"></div>
+                {% endif %}
+                <div class="black_shadow">
+                    <div class="author-card">  
                     {% for teacher in item.teachers %}
-                        <li>{{ teacher.email }}</li>
-                    {% endfor %}    
-                </ul>
+                        {% set counter = counter + 1 %}
+                        {% if counter <= 5 %}
+                        <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>       
+                        {% endif %}
+                    {% endfor %}
+                    </div>
+                </div>
+                {% if item.edit_actions != '' %}
+                    <div class="admin-actions"><a class="btn btn-default btn-sm" href="{{ item.edit_actions }}"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>
+                {% endif %}
+            </div>
+            <div class="description">
+                <h4 class="title"><a href="{{ item.link }}">{{ item.title }}</a></h4>
+                <div class="notifications">{{ item.notifications }}</div>
+                
             </div>
         </div>
     </div>
     {% endfor %}
     </div>
+</div>
 {% endfor %}
 
-
-<pre>
-    {{ courses | var_dump }}
-</pre>
-