Show / Hide details on the Selected Supremes

Better style on the buttons
Gulix · Jul 11, 2015 · e314c35 · e314c35
1 parent ae649fe
commit e314c35
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>