From e314c354c0ae20a4563fee28168d5517c1bf507c Mon Sep 17 00:00:00 2001
From: Nicolas Ronvel <gulix33xp@yahoo.fr>
Date: Sat, 11 Jul 2015 14:58:25 +0200
Subject: [PATCH] Show / Hide details on the Selected Supremes Better style on
 the buttons

---
 builder/builder.html                    | 23 +++++++++++++++++++++++
 builder/css/style.css                   | 17 ++++++++++++-----
 builder/mustache/supremes.mst           |  4 ++--
 builder/mustache/supremes_selection.mst | 16 +++++++++++++---
 4 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/builder/builder.html b/builder/builder.html
index 182e127..6acbacf 100644
--- a/builder/builder.html
+++ b/builder/builder.html
@@ -210,6 +210,9 @@ <h2>A team builder for <b>Pulp City</b></h2>
           $(".supreme-selection").each(function() { $( this ).hide(); });
           // Click on Buttons
           $(".btn-unselect-supreme").click(function() { unselect_supreme(getSupremeId("btn-unselect-supreme-", $(this).attr('id')), true); });
+		  $('#btnHideSelectionFooter').click(function() { hide_selection_footer(); });
+          $('#btnShowSelectionFooter').click(function() { show_selection_footer(); });
+		  $(".supreme-selection").click(function() { toggle_selection_footer(getSupremeId("supreme-selection-", $(this).attr('id'))); });
         },
       dataType: "text"
     });
@@ -374,6 +377,24 @@ <h2>A team builder for <b>Pulp City</b></h2>
   $supremes.detach().appendTo($supreme_list);
 }
 
+function hide_selection_footer()
+{
+  $('.supreme-selected-list-element .supreme-role').slideUp(300);
+  $('.supreme-selected-list-element .bottom-footer').slideUp(300);
+}
+
+function show_selection_footer()
+{
+  $('.supreme-selected-list-element .supreme-role').slideDown(300);
+  $('.supreme-selected-list-element .bottom-footer').slideDown(300);
+}
+
+function toggle_selection_footer(id)
+{
+  $('#supreme-selection-' + id +' .supreme-role').slideToggle(300);
+  $('#supreme-selection-' + id +' .bottom-footer').slideToggle(300);
+}
+
 /*****************/
 /*** The Roles ***/
 /*****************/
@@ -739,6 +760,8 @@ <h2>A team builder for <b>Pulp City</b></h2>
   update_summary();
   check_honorary_member();
    
+  
+   
   // Events on the Affiliation
   changeAffiliation();
   $('#selTeamAffiliation').change(confirmAffiliationChange);
diff --git a/builder/css/style.css b/builder/css/style.css
index 4e97145..41fd1da 100644
--- a/builder/css/style.css
+++ b/builder/css/style.css
@@ -77,11 +77,18 @@ img.supreme-freelance {
 
 /* Selected supremes */
 .supremes-selected-list {
-    background-color: #222222;
-    border-width: 4px;
-    border-style: inset;
-    border-color: #CCCCCC;
-    color: #CCCCCC;
+    background-color: #EEEEEE;
+}
+
+.supremes-selected-list .section-title {
+	text-align: center;
+	font-size: 18;
+	font-weight: bold;
+}
+
+.supremes-selected-list .btn-toolbar {
+	margin-top: 2px;
+	margin-bottom: 3px;
 }
 
 .supreme-selected-list-element {
diff --git a/builder/mustache/supremes.mst b/builder/mustache/supremes.mst
index cef2773..0b58c44 100644
--- a/builder/mustache/supremes.mst
+++ b/builder/mustache/supremes.mst
@@ -17,10 +17,10 @@
     <div class='bottom-footer'>
       <img src="img/supremes/01_thumb.jpg" width="45px" />
 	  <div class='footer-buttons'>
-        <button type="button" class="btn btn-sm" title='Show details' data-toggle="modal" data-target="#supreme-modal-{{id}}">
+        <button type="button" class="btn btn-sm btn-default" title='Show details' data-toggle="modal" data-target="#supreme-modal-{{id}}">
           <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
 	    </button>
-        <button type="button" class="btn btn-sm btn-select-supreme" title='Add Supreme to your Team Selection' id="btn-select-supreme-{{id}}">
+        <button type="button" class="btn btn-sm btn-default btn-select-supreme" title='Add Supreme to your Team Selection' id="btn-select-supreme-{{id}}">
 		  <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
 		</button>    
 	  </div>
diff --git a/builder/mustache/supremes_selection.mst b/builder/mustache/supremes_selection.mst
index 1f423b5..ee17fb7 100644
--- a/builder/mustache/supremes_selection.mst
+++ b/builder/mustache/supremes_selection.mst
@@ -1,4 +1,14 @@
-<h4><u>Selected Supremes</u></h4>
+<div class='section-title'>Selected Supremes</div>
+<div class="btn-toolbar" >
+  <div class="btn-group">
+    <button type="button" class="btn btn-sm btn-default" title='Show footer' id='btnShowSelectionFooter'>
+      <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
+	</button>
+    <button type="button" class="btn btn-sm btn-default" title='Hide footer' id='btnHideSelectionFooter'>
+	  <span class="glyphicon glyphicon-resize-small" aria-hidden="true"></span>
+	</button>    
+  </div>
+</div>
 {{#supremes}}
 <div class="supreme-selection supreme-selected-list-element" id="supreme-selection-{{id}}">
   <div class='header'>
@@ -10,10 +20,10 @@
     <div class='footer-icon supreme-origin-{{origin}}' />
 	<div class='footer-icon hero-villain-{{is_hero}}{{is_villain}}'/>
     <div class='footer-buttons'>
-      <button type="button" class="btn btn-sm" title='Show details' data-toggle="modal" data-target="#supreme-modal-{{id}}">
+      <button type="button" class="btn btn-sm btn-default" title='Show details' data-toggle="modal" data-target="#supreme-modal-{{id}}">
 	    <span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
 	  </button>
-      <button type="button" class="btn btn-sm btn-unselect-supreme" title='Remove from selection' id="btn-unselect-supreme-{{id}}">
+      <button type="button" class="btn btn-sm btn-default btn-unselect-supreme" title='Remove from selection' id="btn-unselect-supreme-{{id}}">
 	    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
 	  </button>
     </div>