Enhancement of the Modal view

Gulix · Jul 30, 2015 · 021ba14 · 021ba14
1 parent 037e0cd
commit 021ba14
Show file tree

Hide file tree

Showing 15 changed files with 149 additions and 9 deletions.
diff --git a/builder/css/style.css b/builder/css/style.css
@@ -62,6 +62,77 @@ img.supreme-freelance {
 	float: left;
 }
 
+/* Header on the modal view */
+.modal-header {
+    background:  linear-gradient(#BBBBBB, #DDDDDD 45%, #FFFFFF 90%);    
+}
+
+.header-modal .supreme-name {
+    float: none; 
+    width: auto;
+	overflow: hidden;
+    height: 50px;
+    margin-left: 3px;
+    font-size: 28;
+    font-weight: bold;
+    text-align: center;
+}
+
+.header-modal .supreme-thumbnail {
+	width: 60px;
+	float: left;
+}
+
+/* Elements from the Modal view */
+.modal-body .info-icons {
+    width: 27px;
+	float: right;
+}
+
+.table-traits {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.traits-value {
+    text-align: center;
+    font-size: 23;
+    padding: 0px 7px;
+}
+
+.traits-separator {
+    background: #000000;
+}
+
+.traits-trump-1 {
+    background: #DE0F0F;
+    color: #DADADA;
+}
+
+.informations-left-modal {
+    float: left;
+}
+
+.exclusive-minion-name {
+    font-weight: bold;
+}
+
+.supreme-description {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 5px;
+    padding: 10px;
+    background-color: #D5D5D5;
+    border: 1px solid #7F7F7F;
+    font-style: italic;
+    text-align: center;
+}
+
+.supreme-links {
+	margin-top: 10px;
+}
+
+/* Icons */
 .info-icon {
     height: 25px; 
     width: 25px; 
@@ -75,6 +146,12 @@ img.supreme-freelance {
     background-origin: content-box;
 }
 
+.icon-element {
+    height: 20px; 
+    width: 20px; 
+    margin-left: 6px;
+}
+
 /* Selected supremes */
 .supremes-selected-list {
     background-color: #EEEEEE;
@@ -206,4 +283,8 @@ img.supreme-freelance {
 }
 .faction-ulthar{
 	color: #2090FF;
+}
+
+.clear-both {
+    clear: both;
 }
diff --git a/builder/img/element_air.png b/builder/img/element_air.png
diff --git a/builder/img/element_darkness.png b/builder/img/element_darkness.png
diff --git a/builder/img/element_earth.png b/builder/img/element_earth.png
diff --git a/builder/img/element_fire.png b/builder/img/element_fire.png
diff --git a/builder/img/element_light.png b/builder/img/element_light.png
diff --git a/builder/img/element_water.png b/builder/img/element_water.png
diff --git a/builder/img/traits_agility.png b/builder/img/traits_agility.png
diff --git a/builder/img/traits_defense.png b/builder/img/traits_defense.png
diff --git a/builder/img/traits_energy.png b/builder/img/traits_energy.png
diff --git a/builder/img/traits_mind.png b/builder/img/traits_mind.png
diff --git a/builder/img/traits_spirit.png b/builder/img/traits_spirit.png
diff --git a/builder/img/traits_strength.png b/builder/img/traits_strength.png
diff --git a/builder/json/supremes.json b/builder/json/supremes.json
@@ -62,7 +62,12 @@
 "exclusive_minions": "",
 "elements": [   ],
 "ap_limit": 3,
-"supreme_types": [  "mechanical" ]
+"supreme_types": [  "mechanical" ],
+"description": "Today she is one of the most respected and powerful women in Pulp City – Androida has come a really long way in her personal journey.",
+"links": [
+    { "link": "http://pulp-city.com/heroes-and-villains/hero-androida/", "description": "Background story" },
+    { "link": "http://newstore.pulp-city.com/index.php?route=product/product&path=59&product_id=75&sort=pd.name&order=ASC", "description": "Buy / View card on Pulp City Store" }
+]
 },{
 "id": 2,
 "name": "Arquero",

diff --git a/builder/mustache/supremes_modal.mst b/builder/mustache/supremes_modal.mst
@@ -4,18 +4,72 @@
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title" id="myModalLabel">{{name}}</h4>
+        <div class="header-modal">
+          <img src="img/supremes/01_thumb.jpg" class='supreme-thumbnail' width="40px" />
+		  <div class='supreme-name'>{{name}}</div>
+        </div>
       </div>
       <div class="modal-body">
-        <h4>{{name}}</h4>
-        <p class='text-left'><strong>{{role}} lvl.{{level}}</strong></p>
-        <p class='text-left'>AP+ : {{ap_granted}}</p>
-        <p class='text-left'>Minions+ : {{minions_granted}}</p>
+        <div>
+          <div class='info-icons'>
+		    <div class='info-icon supreme-origin-{{origin}}' />
+		    <div class='info-icon hero-villain-{{is_hero}}{{is_villain}}'/>
+		  </div>
+          <div class='informations-left-modal'>
+            <p class='text-left'><strong>{{role}} lvl.{{level}}</strong></p>
+            <p class='text-left'>AP+ : {{ap_granted}}
+              <br />AP limit : {{ap_limit}}
+              <br />Minions+ : {{minions_granted}}<br />{{#exclusive_minions}}<span class='exclusive-minion-name' title='Exclusive Minion'>{{.}}</span>{{/exclusive_minions}}
+            </p>
+          </div>
+          <table class='table-bordered table-traits'>
+            <thead>
+              <tr>
+                <th class='traits-value traits-trump-{{strength_trump}}'><img src='img/traits_strength.png' title='Strength'/></th>
+                <th class='traits-value traits-trump-{{defense_trump}}'><img src='img/traits_defense.png' title='Defense'/></th>
+                <th class='traits-value traits-trump-{{agility_trump}}'><img src='img/traits_agility.png' title='Agility'/></th>
+                <th class='traits-value traits-trump-{{energy_trump}}'><img src='img/traits_energy.png' title='Energy'/></th>
+                <th class='traits-value traits-trump-{{mind_trump}}'><img src='img/traits_mind.png' title='Mind'/></th>
+                <th class='traits-value traits-trump-{{spirit_trump}}'><img src='img/traits_spirit.png' title='Spirit'/></th>
+                <th class='traits-separator'>&nbsp;</th>
+                <th class='traits-value'>HP</th>
+                <th class='traits-value'>Mvt</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class='traits-value traits-trump-{{strength_trump}}'>{{strength_value}}</td>
+                <td class='traits-value traits-trump-{{defense_trump}}'>{{defense_value}}</td>
+                <td class='traits-value traits-trump-{{agility_trump}}'>{{agility_value}}</td>
+                <td class='traits-value traits-trump-{{energy_trump}}'>{{energy_value}}</td>
+                <td class='traits-value traits-trump-{{mind_trump}}'>{{mind_value}}</td>
+                <td class='traits-value traits-trump-{{spirit_trump}}'>{{spirit_value}}</td>
+                <th class='traits-separator'>&nbsp;</td>
+                <td class='traits-value'>{{hp_value}}</td>
+                <td class='traits-value'>{{mvt_value}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class='clear-both'>
+            <p class='text-left'>
+              <strong>Factions :</strong> <span class='supreme-factions'>{{factions}}</span><span class='supreme-freelance-{{is_freelance}}' />
+              <br /><strong>Type :</strong>{{#supreme_types}} {{.}} {{/supreme_types}} {{#elements}} <img src='img/element_{{.}}.png' class='icon-element' /> {{/elements}}
+            </p>
+        </div>
+        {{#description}}<div class='supreme-description'>{{.}}</div>{{/description}}
+        <ul class='supreme-links'>{{#links}}<li class='supreme-link'><a href='{{link}}' target='_blank'>{{description}}</a></li>{{/links}}</ul>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary btn-select-supreme-modal" data-dismiss="modal" id="btn-select-supreme-modal-{{id}}">Add to selection</button>
-        <button type="button" class="btn btn-primary btn-unselect-supreme-modal" data-dismiss="modal" id="btn-unselect-supreme-modal-{{id}}">Remove from selection</button>
+        <button type="button" class="btn btn-sm btn-default" title='Close details' data-dismiss="modal">
+	      <span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
+	    </button>
+        <button type="button" class="btn btn-sm btn-default btn-unselect-supreme-modal" title='Remove from selection' id="btn-unselect-supreme-modal-{{id}}">
+	      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+	    </button>
+        <button type="button" class="btn btn-sm btn-default btn-select-supreme-modal" title='Add Supreme to your Team Selection' id="btn-select-supreme-modal-{{id}}">
+	      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
+	    </button>
       </div>
     </div>
   </div>