UI improvement

app/assets/stylesheets/public/need.scss

@@ -15,6 +15,38 @@
   .info{
     color:rgb(163, 159, 159);
   }
+  .state{
+    position:absolute;
+    top:0px;
+    right:0px;
+    color:white;
+    padding:4px;
+    padding-left:8px;
+    padding-right:8px;
+  }
+
+  .state-success{
+    background-color:#5cb85c;
+  }
+  .state-danger{
+    background-color:#d9534f;
+  }
+  .state-info{
+    background-color:#428bca;
+  }
+  .state-warning{
+    background-color:#f0ad4e;
+  }
+  .offer{
+    display:block;
+    background: #eeeded;
+    padding:10px;
+    margin-bottom:5px;
+    .price{
+      font-size:25px;
+      font-weight:bold;
+    }
+  }
 
   p.description{
     margin-bottom:30px;
@@ -23,7 +55,10 @@
   .message-item{
     background: #eeeded;
   }
-
+  .content{
+    position:relative;
+    padding-bottom:50px;
+  }
   .counters{
     position:absolute;
     left:0px;

app/views/public/needs/show.html.haml

@@ -1,52 +1,85 @@
-.center.white
+.center.white.show-need
-  .show-need
+  .top-left-info
-    %h1= @need.title.upcase
+    -if @need.verified?
+      %span.state.state-info.pull-right
+        =@need.human_state
+    -elsif @need.negociating?
+      %span.state.state-warning.pull-right
+        =@need.human_state
+    -elsif @need.failed?
+      %span.state.state-danger.pull-right
+        =@need.human_state
+    -elsif @need.negociated?
+      %span.state.state-success.pull-right
+        -offers = @need.offers.order(price: :asc)
+        -if offers.size > 1
+          Négocié à partir de
+          %strong="#{number_to_currency(offers.first.price, locale: :fr)}"
+        -elsif offers.size == 1
+          Négocié à
+          %strong="#{number_to_currency(offers.first.price, locale: :fr)}"
+        -else
+          Négocié
+    .content
+      %h1= @need.title.upcase
 
-  -if @need.author
+      -if @need.author
-    %p.info
+        %p.info
-      =i(:"clock-o") + " Proposé par "
+          =i(:"clock-o") + " Proposé par "
-      %strong=@need.author.anonyme_nick
+          %strong=@need.author.anonyme_nick
-      ="il y a #{time_ago_in_words(@need.created_at)}"
+          ="il y a #{time_ago_in_words(@need.created_at)}"
-  -else
+      -else
-    %p.info=i(:"clock-o") + " Ajouté il y a #{time_ago_in_words(@need.created_at)}"
+        %p.info=i(:"clock-o") + " Ajouté il y a #{time_ago_in_words(@need.created_at)}"
 
 
-  -if @need.category
+      -if @need.category
-    %p.info=i(:"tag") + " " + @need.category_path
+        %p.info=i(:"tag") + " " + @need.category_path
-  -else
+      -else
-    %p.info=i(:"tag") + " Non catégorisé"
+        %p.info=i(:"tag") + " Non catégorisé"
 
-  %p.description= @need.description
+      %p.description= @need.description
 
-  .clear
+      .clear
-  .counters
+      .counters
-    -if(@need.wishes.length > 0)
+        -if(@need.wishes.length > 0)
-      .item=i(:"hand-paper-o") + " " + " #{pluralize(@need.wishes.length, 'utilisateur')} #{"intéressé".pluralize(@need.wishes.length)} par ce besoin"
+          .item=i(:"hand-paper-o") + " " + " #{pluralize(@need.wishes.length, 'utilisateur')} #{"intéressé".pluralize(@need.wishes.length)} par ce besoin"
-    -else
+        -else
-      .item=i(:"hand-paper-o") + " Aucun utilisateur n'est intéressé par ce besoin"
+          .item=i(:"hand-paper-o") + " Aucun utilisateur n'est intéressé par ce besoin"
 
-  -if @need.verified? or @need.negociating?
+    -if @need.verified? or @need.negociating?
-    -if(@need.customers.include?(current_customer))
+      -if(@need.customers.include?(current_customer))
-      =link_to i(:"check") + " Intéressé", wish_public_need_path(@need) , :class => "btn btn-square btn-lg btn-success pull-right"
+        =link_to i(:"check") + " Intéressé", wish_public_need_path(@need) , :class => "btn btn-square btn-lg btn-success pull-right"
-    -else
+      -else
-      =link_to i(:"hand-paper-o") + " Ça m'intéresse !", wish_public_need_path(@need) , :class => "btn btn-square btn-lg btn-primary pull-right"
+        =link_to i(:"hand-paper-o") + " Ça m'intéresse !", wish_public_need_path(@need) , :class => "btn btn-square btn-lg btn-primary pull-right"
-  -elsif @need.negociated
+    -elsif @need.negociated?
+      -if @need.offers.length > 0
+        %h2 Les offres négociées
+        -@need.offers.each do |offer|
+          .offer
+            .supplier
+              Négocié avec le fournisseur
+              %strong= offer.supplier
+            .price
+              =number_to_currency(offer.price, locale: :fr)
+              =link_to "Acheter", "", class: "btn btn-success pull-right"
 
-  .clear
 
-  %hr
-  = semantic_form_for [:public, @need, @comment ], :html => {id: :message_form, :method => :post } do |f|
-    %h4 Poster un commentaire
-    = f.inputs do
-      = f.input :content, as: :text, label: false, rows: 5, :input_html => {:style => "height:100px;"}
 
-    =f.submit "Envoyer", :class => "btn btn-square btn-primary pull-right"
     .clear
 
+    %hr
+    = semantic_form_for [:public, @need, @comment ], :html => {id: :message_form, :method => :post } do |f|
+      %h4 Poster un commentaire
+      = f.inputs do
+        = f.input :content, as: :text, label: false, rows: 5, :input_html => {:style => "height:100px;"}
+
+      =f.submit "Envoyer", :class => "btn btn-square btn-primary pull-right"
+      .clear
 
 
-  %h4= i(:"comment-o") + " #{pluralize(@need.messages.count, 'Commentaire')} pour ce besoin"
 
-  =render collection: @comments, partial: 'message'
+    %h4= i(:"comment-o") + " #{pluralize(@need.messages.count, 'Commentaire')} pour ce besoin"
 
-  .pagination= paginate @comments
+    =render collection: @comments, partial: 'message'
+
+    .pagination= paginate @comments