finis sort projects

app/assets/javascripts/main.js

@@ -21,6 +21,8 @@ jQuery(document).ready(function($){
   //mobilePartners();
   // initTip();
   // initMap();
+  initBookmarkAnimation();
+  initLoadMore();
   initSlider();
   topTip();
   // initTooltipster();
@@ -30,11 +32,42 @@ jQuery(document).ready(function($){
 
   // $('[data-toggle="popover"]').popover({title: "<span class=\"usr_surname\">Фондар</span><span class=\"usr_name\">Вікторія Тараневська <a href=\"#\" class=\"round_link\"><i class=\"icon icon_fb\"></i></span>", content: "<div class=\"usr_contributions\">Внесків 3</div><div class=\"usr_funds\"><div class=\"usr_funds_value\">на суму:  14 200 UAH</div></div><div class=\"usr_volunteering\">Волонтерство 2</div>", html: true, placement: "top"});
 })
+
+function initBookmarkAnimation(){
+  let anchorlinks = document.querySelectorAll('a[href^="#"]')
+
+    for (let item of anchorlinks) { // relitere 
+        item.addEventListener('click', (e)=> {
+            let hashval = item.getAttribute('href')
+            let target = document.querySelector(hashval)
+            target.scrollIntoView({
+                behavior: 'smooth'
+            })
+            history.pushState(null, null, hashval)
+            e.preventDefault()
+        })
+    }
+}
+
+function initLoadMore(){
+  $(document).ready(function(){
+    $(".project_item_content").slice(0, 4).show();
+    $("#loadMore").on("click", function(e){
+      e.preventDefault();
+      $(".project_item_content:hidden").slice(0, 4).slideDown();
+      if($(".project_item_content:hidden").length == 0) {
+        $("#loadMore").text("No Content").addClass("noContent");
+      }
+    });
+  })
+}
+
 function initSlider(){
   $(document).ready(function(){
     $('.slider').bxSlider();
   });
 }
+
 function scrollToTop() {
   $(window).scroll(function(){
     if ($(this).scrollTop() > 1000) {

app/assets/stylesheets/application.css

 /*
 *=require_self
 */
-
+@import url("loadMore.css");
 @import url("normalize.css");
 @import url("outdatedBrowser.min.css");
 @import url("main.css");

app/controllers/home_controller.rb

 class HomeController < ApplicationController
-  STATUSES = %i[in_progress implemented]
-  
   def index
-  	status_order = params[:q]&.key?(:s) ? params[:q][:s] : 'status asc' 
-    @q = Project.where(status: STATUSES).ransack(params[:q])
-    @projects = @q.result.order_by_status(status_order)
+  	@q = Project.ransack(params[:q])
+  	@projects = @q.result(distinct: true)
   end
 end

app/models/project.rb

 class Project < ApplicationRecord
-  enum status: [:in_progress, :implemented]
-  STATUS_ASC_ORDERS = [1, 0].freeze
-  STATUS_DESC_ORDERS = STATUS_ASC_ORDERS.reverse.freeze
-  STATUSES_ORDER_MAP = { "status asc" => STATUS_ASC_ORDERS, "status desc" => STATUS_DESC_ORDERS}
-
-  scope :order_by_status, -> (status_order) {
-    order_by = ['CASE']
-    STATUSES_ORDER_MAP[status_order].each_with_index do |status, index|
-      order_by << "WHEN status=#{status} THEN #{index}"
-    end
-    order_by << 'END'
-    order(order_by.join(' '))
-    }
-    
-  def self.ransortable_attributes(auth_object = nil)
-    ransackable_attributes(auth_object) + %w(
-      order_by_status
-    )
-  end
 
   include AASM
 
@@ -48,7 +29,7 @@ class Project < ApplicationRecord
   mount_uploader :footer_photo, AvatarUploader
 
   enum types: [:program, :project]
-  # enum status: [:in_progress, :implemented]
+  enum status: [:in_progress, :implemented]
   has_many :project_partials, -> { order(position: :asc) }, dependent: :destroy
   has_many :project_galeries, inverse_of: :project, dependent: :destroy
   has_many :project_qoutes, inverse_of: :project, dependent: :destroy

app/views/home/_projects.html.haml

+.container_lg
+  .project_wrap.clearfix.content
+    - @projects.each do |project|
+      = link_to project_path(id: project.id), remote: true, class: 'project_item' do
+        %span.project_item_top
+          = image_tag(project.photo_preview_url(:thumb_small))
+          %span.item_label
+            = t "#{project.types}"
+          %span.btn.btn_default.btn_round.btn_bordered{"data-original-title" => "підтримай проект", "data-placement" => "top", "data-toggle" => "tooltip"}
+            %i.icon.icon_plus
+        %span.project_item_middle
+          %span.project_item_title #{project.title}
+          %span.project_item_subtitle= t "#{project.status}"
+          %span.project_item_text= raw project.short_description
+        %span.project_item_bot
+          %span.progress
+            %span.progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "20", :role => "progressbar", :style => "width:20%"}
+              %span.progress_value= t ('collected_money') 
+          %span.progress_details.clearfix
+            %span.progress_details_item
+              = t ('collected_money')
+              %strong 14 200 UAH
+            %span.progress_details_item
+              = t ('joined_people')
+              %strong 214
+    %a.btn.btn_default.btn_bordered.btn_more{:href => "#"}= t ('more')

app/views/home/index.html.haml

+/ .container
+/   .flex
+/     .project_item_content Box 1
+/     .project_item_content Box 2
+/     .project_item_content Box 3
+/     .project_item_content Box 4
+/     .project_item_content Box 5
+/     .project_item_content Box 1
+/     .project_item_content Box 2
+/     .project_item_content Box 3
+/     .project_item_content Box 4
+/     .project_item_content Box 5
+/     .project_item_content Box 2
+/     .project_item_content Box 3
+/     .project_item_content Box 4
+/     .project_item_content Box 5
+/   %a#loadMore{:href => "#"} Load More
 .wrapper
   .content
     .main_head
@@ -163,7 +180,7 @@
           .info_tip_title= t ('bank_of_ideas')
           .info_tip_text
             = t ('info_tip_text')
-    .section.section_project
+    .section.section_project#projects
       .container
         .row
           .col-sm-4
@@ -171,36 +188,10 @@
               = t ('projects')
           .col-sm-8
             .btn-group.btn-group_styled
-              / %button.btn{type: "button"}= t ('all')
-              
-              %button.btn{type: "button"}= sort_link(@q, 'status asc', "#{t ('in_progress')}"), remote: true
-              %button.btn{type: "button"}= sort_link(@q, 'status desc', "#{t ('implemented')}")
-      .container_lg
-        .project_wrap.clearfix
-          - @projects.each do |project|
-            = link_to project_path(id: project.id), remote: true, class: 'project_item' do
-              %span.project_item_top
-                = image_tag(project.photo_preview_url(:thumb_small))
-                %span.item_label
-                  = t "#{project.types}"
-                %span.btn.btn_default.btn_round.btn_bordered{"data-original-title" => "підтримай проект", "data-placement" => "top", "data-toggle" => "tooltip"}
-                  %i.icon.icon_plus
-              %span.project_item_middle
-                %span.project_item_title #{project.title}
-                %span.project_item_subtitle= t "#{project.status}"
-                %span.project_item_text= raw project.short_description
-              %span.project_item_bot
-                %span.progress
-                  %span.progress-bar{"aria-valuemax" => "100", "aria-valuemin" => "0", "aria-valuenow" => "20", :role => "progressbar", :style => "width:20%"}
-                    %span.progress_value= t ('collected_money') 
-                %span.progress_details.clearfix
-                  %span.progress_details_item
-                    = t ('collected_money')
-                    %strong 14 200 UAH
-                  %span.progress_details_item
-                    = t ('joined_people')
-                    %strong 214
-          %a.btn.btn_default.btn_bordered.btn_more.disabled{:href => "#"}= t ('more')
+              = link_to "#{t ('all')}", '?q%5Bs%5D=created_at+desc', class: "btn", remote: true
+              = link_to "#{t ('implemented')}", '?q%5Bs%5D=status+desc', class: "btn", remote: true
+              = link_to "#{t ('in_progress')}", '?q%5Bs%5D=status+asc', class: "btn", remote: true
+      #projects_list
     .section.section_advert
     .container
       .row

app/views/home/index.js.haml

+$("#projects_list").html("#{ j(render 'projects') }");
\ No newline at end of file

app/views/partials/_black_header.html.haml

@@ -17,7 +17,7 @@
                 %li
                   %a{:href => "#"}= t ("header.grants")
                 %li
-                  %a{:href => "#"}= t ("header.projects")
+                  %a{:href => "#projects"}= t ("header.projects")
                 %li
                   %a{:href => "#"}= t ("header.partners")
                 %li