Added popovers for effect and flavor buttons

Cardshifter · Aug 23, 2015 · 723e713 · 723e713
1 parent 1700630
commit 723e713
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 21 deletions.
diff --git a/src/card_model/card_model.css b/src/card_model/card_model.css
@@ -0,0 +1,6 @@
+.card-outer {
+    border-style: dotted;
+    border-width: 1px;
+    border-color: red;
+    float: left;
+}
diff --git a/src/card_model/card_model.html b/src/card_model/card_model.html
@@ -42,7 +42,7 @@
         - data-fittext-max="12pt" : Maximum font size allowed
   -->
 
-<div style="width: 160px;">
+<div class="card-outer" style="width: 160px;">
     <div>
         <div>
             Jade Emperor

diff --git a/src/deck_builder/template.html b/src/deck_builder/template.html
@@ -1,6 +1,6 @@
 <div>
     <div data-ng-hide="doneLoading">
-        <h1>Loading...</h1>
+        <h1>Loading Deck Builder...</h1>
     </div>
     <div data-ng-show="doneLoading">
         <!-- DECK HEADER -->
@@ -25,11 +25,7 @@ <h2>{{getTotalSelected()}} / {{maxCards}}</h2>
                 <input data-ng-click="deleteDeck(deck.name)" type="button" value="Delete" class="btn btn-xs btn-danger"/>
             </li>
         </ul>
-        <!--
-             Card info
-             Displayed upon clicking the card name link from the list of cards.
-             TODO: Add more fields of card information to be shown.
-          -->
+
         <ul>
             <li data-ng-repeat="(name, value) in cardInfo" data-ng-show="value">
                 <b>{{name}}</b>: {{value}}
@@ -55,13 +51,9 @@ <h2>{{getTotalSelected()}} / {{maxCards}}</h2>
             <tr>
                 <th>Type</th>
                 <th>Name</th>
-                <!--<th>-</th>-->
                 <th>Count</th>
-                <!--<th>+</th>-->
                 <th>Mana</th>
                 <th>A / H</th>
-                <!--<th>Atk</th>
-                <th>Hlth</th>-->
                 <th>Sick</th>
                 <th>Akt?</th>
                 <th>FX</th>
@@ -94,14 +86,14 @@ <h2>{{getTotalSelected()}} / {{maxCards}}</h2>
                     <span ng-show="card.properties.ATTACK_AVAILABLE" style="font-size: 0.8em; color: green;">Yes</span>
                     <span ng-hide="card.properties.ATTACK_AVAILABLE" style="font-size: 0.8em; color: red;">No</span>
                 </td>
-                <td style="text-align: center;"><!-- effect tooltip -->
-                    <button type="button" class="btn btn-xs btn-default"
-                            data-toggle="tooltip" data-placement="top" title="{{card.properties.effect}}"
+                <td style="text-align: center;"><!-- effect popover -->
+                    <button type="button" class="btn btn-xs btn-default" popover-placement="top"
+                            popover="{{card.properties.effect}}" popover-title="{{card.properties.name}}"
                             ng-show="card.properties.effect">FX</button>
                 </td>
                 <td style="text-align: center;"><!-- flavor tooltip -->
-                    <button type="button" class="btn btn-xs btn-default"
-                            data-toggle="tooltip" data-placement="top" title="{{card.properties.flavor}}"
+                    <button type="button" class="btn btn-xs btn-default" popover-placement="right"
+                            popover="{{card.properties.flavor}}"
                             ng-show="card.properties.flavor">?</button>
                 </td>
             </tr>
@@ -120,8 +112,3 @@ <h2>{{getTotalSelected()}} / {{maxCards}}</h2>
         <input ng-hide="enteringGame" ng-click="goBack()" type="button" value="Go back to lobby" />
     </div>
 </div>
-<script>
-$(function () {
-    $('[data-toggle="tooltip"]').tooltip()
-})
-</script>