Логика выставления отступов при перегруппировке пар

src/public/css/styles-main.css

@@ -30,6 +30,7 @@
     cursor: pointer;
     }
     
+    
     .b-list_folders-item b
         {
         position: absolute;
@@ -46,7 +47,6 @@
         {
         font-weight: bold;
         color: #333 !important;
-        /*opacity: 1 !important;*/
         }
         
         .b-list_folders-item.active b
@@ -58,7 +58,6 @@
     .b-list_folders-item.viewed 
         {
         color: #9FA0A0;
-        /*opacity: 0.45;*/
         }
 
 .b-preview
@@ -113,21 +112,34 @@
     padding: 0;
     }
     
+    .b-foto-double.pair.last-pair
+        {
+        margin-right: 50px;
+        }
+        
+    .b-foto-double:last-child
+        {
+        margin-right: 50px;
+        }
+        
+    .b-foto-double.last-pair
+        {
+        margin-right: 0;
+        }
+    
 .b-foto {
     padding: 4px;
 }
 
-        
-
     .b-foto_inner {
         position: relative;
-        border: 1px solid #8D9094;
+        /*border: 1px solid #8D9094;*/
         border-radius: 4px;
         overflow: hidden;
         cursor: pointer;
     }
         .b-foto_inner.selected {
-            border-width: 4px;
+            /*border-width: 4px;*/
         }
         
         .b-folder-content.has-selected .b-foto_inner.paired {
@@ -139,11 +151,26 @@
             width: 100%;
         }
         
+        .b-foto_border
+            {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            border: 1px solid #8D9094;
+            border-radius: 4px;
+            }
+            
+            .b-foto_inner.selected .b-foto_border
+                {
+                border-width: 4px;
+                }
+        
         .b-foto_number {
             display: none;
             position: absolute;
-            top: 2px;
-            left: 2px;
+            top: 6px;
+            left: 6px;
             height: 20px;
             width: 20px;
             color: #FFF;

src/public/js/script-main.js

@@ -72,6 +72,7 @@ $(document).ready(function(){
                 '       <div class="b-foto" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
                 '           <div class="b-foto_inner" data-foto="<%= item %>" data-num="">' +
                 '               <img class="b-foto_img" src="<%= folder %>/<%= item %>" >' +
+                '               <div class="b-foto_border"></div>' +
                 '               <div class="b-foto_number"></div>' +
                 '           </div>' +
                 '       </div>' +
@@ -90,6 +91,7 @@ $(document).ready(function(){
                 '       <div class="b-foto" data-id="<%= item %>" data-ind="<%= ind+1 %>">' +
                 '           <div class="b-foto_inner" data-foto="<%= item %>" data-num="">' +
                 '               <img class="b-foto_img" src="<%= folder %>/<%= item %>" >' +
+                '               <div class="b-foto_border"></div>' +
                 '               <div class="b-foto_number"></div>' +
                 '           </div>' +
                 '       </div>' +
@@ -171,7 +173,7 @@ $(document).ready(function(){
     
     function CreatePair($currentFolderWrap, $pairedFoto, $this)
     {
-        console.log('AAA CreatePair ', $currentFolderWrap);
+        //console.log('AAA CreatePair ', $currentFolderWrap);
         $pairedFoto.addClass('paired');
         $this.addClass('paired');
         
@@ -197,15 +199,14 @@ $(document).ready(function(){
             $divDoublePair2.prependTo($currentFolderWrap);
             $divDoublePair1.prependTo($currentFolderWrap);
             
-            
             RegroupRemainingFotos($currentFolderWrap);
-            
             return false;
         }
          
         
         var
             $divDoublePair = $('<div class="b-foto-double col pair">'),
+            $doublePaired = $('.b-foto-double.pair', $currentFolderWrap),
             $fotoPair = $pairedFoto.parent('.b-foto'),
             $fotoThis = $this.parent('.b-foto'),
             foto1 = $fotoPair.remove(),
@@ -214,8 +215,6 @@ $(document).ready(function(){
         foto1.appendTo($divDoublePair);
         foto2.appendTo($divDoublePair);
         
-        var $doublePaired = $('.b-foto-double.pair', $currentFolderWrap);
-        
         if ($doublePaired.length > 0) {
             $divDoublePair.insertAfter($doublePaired.last());
         } else {
@@ -236,10 +235,10 @@ $(document).ready(function(){
         }
 
         if (countFotosInFolder == 3) {
+            SetLastPairClasses($currentFolderWrap);
             return false;
         }
         
-        
         RegroupRemainingFotos($currentFolderWrap);
     }
     
@@ -249,20 +248,16 @@ $(document).ready(function(){
         var
             $remainingFotos = $('.b-foto-double:not(.pair) .b-foto', $currentFolderWrap);
         
-        console.log('AAA $remainingFotos ', $remainingFotos.length);
         
         $remainingFotos.remove();
         $('.b-foto-double:not(.pair)', $currentFolderWrap).remove();
         
-        
         if ($remainingFotos.length>0) {
             var
                 $divDoublePair = $('<div class="b-foto-double col">');
                 
             $remainingFotos.each(function(ind){
-                //console.log('AAA $remainingFotos ', ind);
                 $(this).appendTo($divDoublePair);
-
                 if (((ind % 2) != 0) && (ind<$remainingFotos.length-1)) {
                     $divDoublePair.appendTo($currentFolderWrap);
                     $divDoublePair = $('<div class="b-foto-double col">');
@@ -270,6 +265,22 @@ $(document).ready(function(){
             });
             $divDoublePair.appendTo($currentFolderWrap);
         }
+        
+        SetLastPairClasses($currentFolderWrap);
+    }
+    
+    function SetLastPairClasses($currentFolderWrap)
+    {
+        var
+            $pairs = $('.b-foto-double.pair', $currentFolderWrap),
+            $doubles = $('.b-foto-double', $currentFolderWrap);
+        if ($pairs.length>0) {
+            $pairs.removeClass('last-pair');
+            $pairs.last().addClass('last-pair');
+            $doubles.last().addClass('last-pair');
+        } else {
+            $doubles.last().removeClass('last-pair');
+        }
     }
     
     function ShowFoldersNew()
@@ -364,8 +375,8 @@ $(document).ready(function(){
             }
             
             $('.b-foto_number', $this).text(num);
+            $('.b-foto_border', $this).css('border-color', colorsActive[num]);
             $this.attr('data-num', num);
-            $this.css('border-color', colorsActive[num]);
             $this.addClass('selected');
             
             // Если осталось одно неразмеченное фото, то выбираем и его автоматически:
@@ -400,10 +411,10 @@ $(document).ready(function(){
             }
             
             $('.b-foto_number', $pairedFotos).text('');
+            $('.b-foto_border', $pairedFotos).css('border-color', '#8D9094');
             $pairedFotos.attr('data-num', '')
                         .removeClass('paired')
-                        .removeClass('selected')
-                        .css('border-color', '#8D9094');
+                        .removeClass('selected');
             
             hasSelectedFoto[folderName] = false;
             $currentFolderWrap.removeClass('has-selected');