* improve UI of program list and cards view.

module/program/view/browsebygrid.html.php

@@ -1,4 +1,3 @@
-<style>#mainMenu{padding-left: 10px; padding-right: 10px;}</style>
 <div class='row cell' id='cards'>
   <?php foreach ($programs as $programID => $program):?>
   <div class='col' data-id='<?php echo $programID?>'>
@@ -83,3 +82,82 @@
     <?php $pager->show('right', 'pagerjs');?>
   </div>
 </div>
+<style>
+#mainMenu {padding-left: 10px; padding-right: 10px;}
+
+#cards {margin: 0 10px;}
+#cards > .col {width: 20%;}
+#cards .panel {margin: 10px 0; border: 1px solid #DCDCDC; border-radius: 2px; box-shadow: none; height: 146px; cursor: pointer;}
+#cards .panel:hover {border-color: #006AF1; box-shadow: 0 0 10px 0 rgba(0,0,100,.25);}
+#cards .panel-heading {padding: 12px 24px 10px 16px;}
+#cards .panel-body {padding: 0 16px 16px;}
+#cards .panel-actions {padding: 7px 0;}
+#cards .panel-actions .dropdown-menu > li > a {padding-left: 5px; text-align: left;}
+#cards .panel-actions .dropdown-menu > li > a > i {opacity: .5; display: inline-block; margin-right: 4px; width: 18px; text-align: center;}
+#cards .panel-actions .dropdown-menu > li > a:hover > i {opacity: 1;}
+#cards .program-type-label {padding: 1px 2px;}
+#cards .program-name {font-size: 16px; font-weight: normal; display: inline-block; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;}
+#cards .program-infos {font-size: 12px;}
+#cards .program-infos > span {display: inline-block; line-height: 12px;}
+#cards .program-infos > span > .icon {font-size: 12px; display: inline-block; position: relative; top: -1px}
+#cards .program-infos > span + span {margin-left: 15px;}
+#cards .program-detail {position: absolute; bottom: 16px; left: 16px; right: 16px; font-size: 12px;}
+#cards .program-detail > p {margin-bottom: 8px;}
+#cards .program-detail .progress {height: 4px;}
+#cards .program-detail .progress-text-left .progress-text {width: 50px; left: -50px;}
+#cards .pager {margin: 0; float: right;}
+#cards .pager .btn {border: none}
+#cards .program-stages-container {margin: 0 -16px -16px -16px; padding: 0 4px; height: 46px; overflow-x: auto; position: relative;}
+#cards .program-stages:after {content: ' '; width: 30px; display: block; right: -16px; top: 16px; bottom: -6px; z-index: 1; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); position: absolute;}
+#cards .program-stages-row {position: relative; height: 30px; z-index: 0;}
+#cards .program-stage-item {white-space: nowrap; position: absolute; top: 0; min-width: 48px; padding-top: 13px; color: #838A9D;}
+#cards .program-stage-item > div {white-space: nowrap; overflow: visible; text-align: center; text-overflow: ellipsis;}
+#cards .program-stage-item:before {content: ' '; display: block; width: 8px; height: 8px; border-radius: 50%; background: #D1D1D1; position: absolute; left: 50%; margin-left: -4px; top: 0; z-index: 1;}
+#cards .program-stage-item + .program-stage-item:after {content: ' '; display: block; left: -50%; right: 50%; height: 2px; background-color: #D1D1D1; top: 3px; position: absolute; z-index: 0;}
+#cards .program-stage-item.is-going {color: #333;}
+#cards .program-stage-item.is-going::before {background-color: #0C64EB;}
+</style>
+<script>
+$(function()
+{
+    /* Auto resize cards size */
+    var minCardWidth = 280;
+    var $cards = $('#cards');
+    var resizeCards = function()
+    {
+        var cardsWidth = $cards.width();
+        var bestColsSize = 1;
+        while((cardsWidth / (bestColsSize + 1)) > minCardWidth)
+        {
+            bestColsSize++;
+        }
+        $cards.children('.col').css('width', (100 / bestColsSize) + '%');
+    };
+    resizeCards();
+    $(window).on('resize', resizeCards);
+
+    /* Auto resize stages */
+    $cards.find('.program-stages-container').each(function()
+    {
+        var $container = $(this);
+        var $row = $container.children();
+        var totalWidth = 0;
+        $row.children().each(function()
+        {
+            var $item = $(this);
+            $item.css('left', totalWidth);
+            totalWidth += $item.width();
+        });
+        $row.css('minWidth', totalWidth);
+    });
+
+    /* Make cards clickable */
+    $cards.on('click', '.panel', function(e)
+    {
+        if(!$(e.target).closest('.panel-actions').length)
+        {
+            window.location.href = $(this).data('url');
+        }
+    });
+});
+</script>

module/program/view/browsebylist.html.php

@@ -20,11 +20,11 @@
         <?php endif;?>
       </tr>
     </thead>
-    <tbody class='sortable' id='programTableList'>
+    <tbody id='programTableList'>
       <?php foreach($programs as $program):?>
       <?php
       $trClass = '';
-      $trAttrs = "data-id='$program->id' data-order=$program->order";
+      $trAttrs = "data-id='$program->id' data-order='$program->order' data-parent='$program->parent'";
       if($program->isCat)
       {
           $trAttrs .= " data-nested='true'";
@@ -67,7 +67,7 @@
           <?php if(common::hasPriv('program', 'delete')) echo html::a($this->createLink("program", "delete", "programID=$program->id"), "<i class='icon-trash'></i>", 'hiddenwin', "class='btn' title='{$lang->delete}'");?>
         </td>
         <?php if($canOrder):?>
-        <td class='sort-handler'><i class="icon icon-move"></i></td>
+        <td class='sort-handler text-center'><i class="icon icon-move"></i></td>
         <?php endif;?>
       </tr>
       <?php endforeach;?>
@@ -77,3 +77,47 @@
     <?php $pager->show('right', 'pagerjs');?>
   </div>
 </form>
+<style>
+.w-240px {width:240px;}
+#programTableList.sortable-sorting > tr {opacity: 0.7}
+#programTableList.sortable-sorting > tr.drag-row {opacity: 1;}
+#programTableList > tr.drop-not-allowed {opacity: 0.1!important}
+</style>
+<script>
+$(function()
+{
+    var $list = $('#programTableList');
+    $list.addClass('sortable').sortable(
+    {
+        reverse: orderBy === 'order_desc',
+        selector: 'tr',
+        dragCssClass: 'drag-row',
+        trigger: $list.find('.sort-handler').length ? '.sort-handler' : null,
+        canMoveHere: function($ele, $target)
+        {
+            return $ele.data('parent') === $target.data('parent');
+        },
+        start: function(e)
+        {
+            e.targets.filter('[data-parent!="' + e.element.attr('data-parent') + '"]').addClass('drop-not-allowed');
+        },
+        finish: function(e)
+        {
+            var orders = {};
+            e.list.each(function()
+            {
+                orders[$(this.item).data('id')] = this.order;
+            });
+            $.post(createLink('project', 'updateOrder'), {'projects' : orders, 'orderBy' : orderBy});
+
+            var $thead = $list.closest('table').children('thead');
+            $thead.find('.headerSortDown, .headerSortUp').removeClass('headerSortDown headerSortUp').addClass('header');
+            $thead.find('th.sort-default .header').removeClass('header').addClass('headerSortDown');
+
+            e.element.addClass('drop-success');
+            setTimeout(function(){e.element.removeClass('drop-success');}, 800);
+            $list.children('.drop-not-allowed').removeClass('drop-not-allowed');
+        }
+    });
+});
+</script>