gistfile1.haml

%div.large-12.columns(ng-controller="IndexController")
.section-container.auto{"data-section" => ""}
  %section
    %p.title{"data-section-title" => ""}
      %a{:href => "#panel1"} Показать списком
    .content{"data-section-content" => ""}
      .row
        .large-12.columns
          %h5.subheader
            =  @category.title if @category.present?
        .row.hide-for-small
          %ul.large-block-grid-4
            %li(ng-repeat="advert in adverts | orderBy:predicate:reverse" )
              %p
                %a{href: '/adverts/{{advert.id}}'}
                  %img.th.radius(ng-src="{{advert.image.image.medium.url}}")
                %a{href: '/adverts/{{advert.id}}'}
                  %table{:style=>"width: 100%"}
                    %tbody
                      %tr
                        %td
                          {{advert.operation_type.title}}:
                        %td
                          {{advert.category.title}}
                      %tr
                        %td
                          Цена:
                        %td
                          {{advert.price | currency}}
                      %tr
                        %td
                          Площадь:
                        %td
                          {{advert.area}}
  %section
    %p.title{"data-section-title" => ""}
      %a{:href => "#panel2"} Показать на карте
    .content{"data-section-content" => ""}
      %p Content of section 2.

%div.large-12.columns


%div.large-12.columns(ng-controller="IndexController")


  .row.hide-for-small
    %fieldset
      %legend
        Сортировка
      .large-1.columns

        %a.small.tiny.sort_button(ng-click="predicate = 'price'; reverse=!reverse"){href: ""} Цена
      .large-1.columns
        %a.small.tiny.sort_button(ng-click="predicate = 'area'; reverse=!reverse"){href: ""} Площадь
      .large-10.columns.pagination-centered

        = will_paginate @adverts, :class =>'digg_pagination'


  .row.small-block
    %fieldset
      %legend
        Сортировка
      .small-12.columns

        .dorohouse_switch.switch
          %input#x{:checked => "", :name => "switch-x", :type => "radio"}/
          %label(ng-click="predicate = 'price'; reverse=!reverse"){:for => "x", :onclick => "predicate = 'price'; reverse=!reverse"} Цена по возрастанию
          %input#x1{:name => "switch-x", :type => "radio"}/
          %label{:for => "x1", :onclick => ""} Цена по убыванию
          %span
      .small-12.columns

        .dorohouse_switch
          %input#x{:checked => "", :name => "switch-y", :type => "radio"}/
          %label(ng-click="predicate = 'price'; reverse=!reverse"){:for => "y", :onclick => "predicate = 'price'; reverse=!reverse"} Площадь по возрастанию
          %input#x1{:name => "switch-y", :type => "radio"}/
          %label{:for => "y1", :onclick => ""} Площадь по убыванию
          %span
      .small-6.columns
        %a.small.tiny.button(ng-click="predicate = 'price'; reverse=!reverse"){href: ""} Цена
      .small-6.columns
        %a.small.tiny.button(ng-click="predicate = 'area'; reverse=!reverse"){href: ""} Площадь


  .row
    .large-12.columns
      %h5.subheader
        =  @category.title if @category.present?
  .row.hide-for-small
    %ul.large-block-grid-4
      %li(ng-repeat="advert in adverts | orderBy:predicate:reverse" )
        %p
          %a{href: '/adverts/{{advert.id}}'}
            %img.th.radius(ng-src="{{advert.image.image.medium.url}}")
          %a{href: '/adverts/{{advert.id}}'}
            %table{:style=>"width: 100%"}
              %tbody
                %tr
                  %td
                    {{advert.operation_type.title}}:
                  %td
                    {{advert.category.title}}
                %tr
                  %td
                    Цена:
                  %td
                    {{advert.price | currency}}
                %tr
                  %td
                    Площадь:
                  %td
                    {{advert.area}}


  .row.hide-for-medium.hide-for-large
    %ul.small-block-grid-2(ng-repeat="advert in adverts | orderBy:predicate:reverse" )
      %li
        %img.th.radius(ng-src="{{advert.image.small.url}}")
      %li
        %ul.vcard
          %li.fn Gaius Baltar
          %li.street-address 123 Colonial Ave.
          %li.locality Caprica City
          %li
            %span.state> Caprica
            ,
            %span.zip 12345
          %li.email
            %a{:href => "#"} [email protected]