Some animation wankery.

diff --git a/app/animations.css b/app/animations.css
new file mode 100644 (file)
index 0000000..abe4cfd
--- /dev/null
+++ b/app/animations.css
@@ -0,0 +1,37 @@
+#message-box {
+    -webkit-transition: 1s linear;
+    -moz-transition: 1s linear;
+    -o-transition: 1s linear;
+    transition: 1s linear;
+}
+
+.collapse {
+  display: none;
+  visibility: hidden;
+}
+
+.collapse.in {
+  display: block;
+  visibility: visible;
+}
+tr.collapse.in {
+  display: table-row;
+}
+tbody.collapse.in {
+  display: table-row-group;
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  -webkit-transition-timing-function: ease;
+       -o-transition-timing-function: ease;
+          transition-timing-function: ease;
+  -webkit-transition-duration: .35s;
+       -o-transition-duration: .35s;
+          transition-duration: .35s;
+  -webkit-transition-property: height, visibility;
+       -o-transition-property: height, visibility;
+          transition-property: height, visibility;
+}
\ No newline at end of file

diff --git a/app/components/messages/messagebox-controller.js b/app/components/messages/messagebox-controller.js
index 1f5e991..5f899af 100644 (file)
--- a/app/components/messages/messagebox-controller.js
+++ b/app/components/messages/messagebox-controller.js
@@ -1,14 +1,14 @@
 'use strict';
 
-angular.module("DivinElegy.components.messages", ['ngSanitize'])
+angular.module("DivinElegy.components.messages", [])
 
 .controller("MessageBoxController", ['$scope', function($scope)
 {
     //message types are info, success, warning, error
     
-    $scope.message = 'duh herro <a ng-click="willThisWork()">asdf</a>';
+    $scope.message = '';
     $scope.messageType = 'info';
-    $scope.hidden = false;
+    $scope.hidden = true;
         
     $scope.hide = function()
     {

diff --git a/app/divinelegy.css b/app/divinelegy.css
index d0170df..f7a53d2 100644 (file)
--- a/app/divinelegy.css
+++ b/app/divinelegy.css
@@ -74,7 +74,7 @@ body {
 }
 
 #message-box.hidden {
-    visibility: hidden;
+    opacity: 0;
 }
 
 #message-box.info {
@@ -103,11 +103,11 @@ body {
 .simfileListing {
     background: rgba(0,0,0,0.25);
     border: 2px solid rgba(0,0,0,0.3);
-    margin: 2px;
+    margin: 5px 2px 2px 2px;
     border-radius: 5px;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
-    padding: 5px;
+    padding: 10px 10px 10px 10px;
 }
 
 .simfileListing img {
@@ -121,6 +121,10 @@ body {
     margin-right:5px;
 }
 
+.simfileListing table {
+    text-align: left;
+}
+
 a {
     font-weight: bold;
     color: #FFB122;

diff --git a/app/divinelegy.js b/app/divinelegy.js
index c4861e2..fc5124d 100644 (file)
--- a/app/divinelegy.js
+++ b/app/divinelegy.js
@@ -3,6 +3,7 @@
 // Declare app level module which depends on views, and components
 angular.module('DivinElegy', [
   'ngRoute',
+  'ngAnimate',
   //'DivinElegy.components.hello',
   'DivinElegy.components.menu',
   'DivinElegy.components.userMenu',

diff --git a/app/images/Targets.png b/app/images/Targets.png
new file mode 100644 (file)
index 0000000..bb53ad2
Binary files /dev/null and b/app/images/Targets.png differ

diff --git a/app/index.html b/app/index.html
index 0567668..17a9188 100644 (file)
--- a/app/index.html
+++ b/app/index.html
@@ -8,6 +8,7 @@
         <!-- Styles -->
         <link rel="stylesheet" href="reset.css"/>
         <link rel="stylesheet" href="grid.css"/>
+        <link rel="stylesheet" href="animations.css"/>
         <link rel="stylesheet" href="divinelegy.css"/>
         <!-- end -->
         
@@ -17,8 +18,10 @@
         <script src="bower_components/angular/angular.js"></script>
         <script src="bower_components/angular-route/angular-route.js"></script>
         <script src="bower_components/angular-file-upload/angular-file-upload.js"></script>
-        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
-        <script class="pre" src="bower_components/hello/dist/hello.all.js"></script>
+        <script src="bower_components/angular-animate/angular-animate.js"></script>
+        <script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
+        <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+        <script src="bower_components/hello/dist/hello.all.js"></script>
 
         <!-- components -->
         <script src="components/config/rockEndpoint-value.js"></script>

diff --git a/app/pages/packs/packs.html b/app/pages/packs/packs.html
index 1928892..fa37d35 100644 (file)
--- a/app/pages/packs/packs.html
+++ b/app/pages/packs/packs.html
@@ -15,62 +15,61 @@ FG changes: <input type="checkbox" ng-model="fgChangesFilterKeyword">
 BG changes: <input type="checkbox" ng-model="bgChangesFilterKeyword">\r
 BPM changes: <input type="checkbox" ng-model="bpmChangesFilterKeyword">\r
 \r
-<ul class="simfileList">\r
-    <li class="simfileListing" ng-class="{active: isListingActive($index)}" ng-repeat="pack in packList | filter: packTitleFilter\r
-                                                                                                        | filter: artistFilter\r
-                                                                                                        | filter: songTitleFilter\r
-                                                                                                        | filter: stepsFilter\r
-                                                                                                        | filter: fgChangesFilter\r
-                                                                                                        | filter: bgChangesFilter\r
-                                                                                                        | filter: bpmChangesFilter\r
-    " ng-init="contributors=getContributors(pack.contributors)">\r
-        <a ng-click="openListing($index)">{{pack.title}}</a>\r
-        <div class="content" ng-show="isListingActive($index)">\r
-            <img ng-src="{{rockEndpoint}}{{pack.banner}}" alt="swage" />\r
-            <table>\r
-                <tr>\r
-                    <th>Title:</th>\r
-                    <td>{{pack.title}}</td>\r
-                </tr>\r
-                <tr>\r
-                    <th>Contributors:</th>\r
-                    <td>{{contributors}}</td>\r
-                </tr>\r
-                <tr ng-if="pack.size">\r
-                    <th>Size:</th>\r
-                    <td>{{pack.size}}</td>\r
-                </tr>\r
-                <tr ng-if="pack.mirrors">\r
-                    <th>Downloads:</th>\r
-                    <td>\r
-                        <ul>\r
-                            <li class="mirrorListing" ng-repeat="mirror in pack.mirrors">\r
-                                <a ng-if="mirror.source == 'DivinElegy'" ng-click="downloadFromDe(pack)" class="de-link">{{mirror.source}}</a>\r
-                                <a ng-if="mirror.source != 'DivinElegy'" href="{{mirror.uri}}">{{mirror.source}}</a>\r
-                            </li>\r
-                        </ul>\r
-                    </td>\r
-                </tr>\r
-            </table>\r
-            <div class="clearfix"></div>\r
-            <h1>Charts</h1>\r
-            <ul>\r
-                <li class="simfileListing" ng-repeat="simfile in pack.simfiles" ng-class="{active: isListingActive(getSimfileListingIndex(pack.title,$index))}">\r
-                    <a ng-click="openListing(getSimfileListingIndex(pack.title,$index))">{{simfile.title}}</a>\r
-                    <div class="content" ng-show="isListingActive(getSimfileListingIndex(pack.title,$index))">\r
-                        <simfile rock-endpoint="rockEndpoint"\r
-                                 simfile="simfile"\r
-                                 banner="simfile.banner"\r
-                                 title="simfile.title"\r
-                                 artist="simfile.artist"\r
-                                 steps="simfile.steps"\r
-                                 bpm-changes="simfile.bpmChanges"\r
-                                 bg-changes="simfile.bgChanges"\r
-                                 fg-changes="simfile.fgChanges"\r
-                        />\r
-                    </div>\r
-                </li>\r
-            </ul>\r
-        </div>\r
-    </li>\r
-</ul>
\ No newline at end of file
+<accordion close-others="false">\r
+    <accordion-group class     = "simfileListing"\r
+                     is-open   = "isOpen"\r
+                     ng-class  = "{active: isOpen}"\r
+                     heading   = "{{pack.title}}"\r
+                     ng-init   = "contributors=getContributors(pack.contributors)"\r
+                     ng-repeat = "pack in packList | filter: packTitleFilter\r
+                                                   | filter: artistFilter\r
+                                                   | filter: songTitleFilter\r
+                                                   | filter: stepsFilter\r
+                                                   | filter: fgChangesFilter\r
+                                                   | filter: bgChangesFilter\r
+                                                   | filter: bpmChangesFilter"\r
+    >\r
+        <img ng-src="{{rockEndpoint}}{{pack.banner}}" alt="swage" />\r
+        <table>\r
+            <tr>\r
+                <th>Title:</th>\r
+                <td>{{pack.title}}</td>\r
+            </tr>\r
+            <tr>\r
+                <th>Contributors:</th>\r
+                <td>{{contributors}}</td>\r
+            </tr>\r
+            <tr ng-if="pack.size">\r
+                <th>Size:</th>\r
+                <td>{{pack.size}}</td>\r
+            </tr>\r
+            <tr ng-if="pack.mirrors">\r
+                <th>Downloads:</th>\r
+                <td>\r
+                    <ul>\r
+                        <li class="mirrorListing" ng-repeat="mirror in pack.mirrors">\r
+                            <a ng-if="mirror.source == 'DivinElegy'" ng-click="downloadFromDe(pack)" class="de-link">{{mirror.source}}</a>\r
+                            <a ng-if="mirror.source != 'DivinElegy'" href="{{mirror.uri}}">{{mirror.source}}</a>\r
+                        </li>\r
+                    </ul>\r
+                </td>\r
+            </tr>\r
+        </table>\r
+        <div class="clearfix"></div>\r
+        <h1>Charts</h1>\r
+        <accordion>\r
+            <accordion-group class="simfileListing" is-open="isOpen" ng-class="{active: isOpen}" heading="{{simfile.title}}" ng-repeat="simfile in pack.simfiles">\r
+                <simfile rock-endpoint="rockEndpoint"\r
+                         simfile="simfile"\r
+                         banner="simfile.banner"\r
+                         title="simfile.title"\r
+                         artist="simfile.artist"\r
+                         steps="simfile.steps"\r
+                         bpm-changes="simfile.bpmChanges"\r
+                         bg-changes="simfile.bgChanges"\r
+                         fg-changes="simfile.fgChanges"\r
+                />\r
+            </accordion-group>\r
+        </accordion>\r
+    </accordion-group>\r
+</accordion>
\ No newline at end of file

diff --git a/app/pages/packs/packs.js b/app/pages/packs/packs.js
index db2c771..99e096f 100644 (file)
--- a/app/pages/packs/packs.js
+++ b/app/pages/packs/packs.js
@@ -1,11 +1,10 @@
 'use strict';
 
-angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","DivinElegy.components.user","DivinElegy.components.config"])
+angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","DivinElegy.components.user","DivinElegy.components.config", "ui.bootstrap"])
 
 .controller("PackController", ['$scope', '$rootScope', 'rockEndpoint', 'SimfileService', 'UserService', 'HelloService', function($scope, $rootScope, rockEndpoint, SimfileService, UserService, HelloService)
 {
     $scope.rockEndpoint = rockEndpoint;
-    $scope.activeListings = [];
     $scope.packTitleFilterKeyword = null;
     $scope.artistFilterKeyword = null;
     $scope.songTitleFilterKeyword = null;
@@ -72,36 +71,16 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
             UserService.updateCache();
         },1000);
     };
-        
-    $scope.openListing = function(listing)
-    {
-        if($scope.isListingActive(listing))
-        {
-            $scope.activeListings.splice($scope.activeListings.indexOf(listing), 1);
-        } else {
-            $scope.activeListings.push(listing);
-        }
-    };
-    
-    $scope.isListingActive = function(listing)
-    {
-        if($scope.activeListings.indexOf(listing) > -1)
-        {
-            return true;
-        } else {
-            return false;
-        }
-    };
-    
+
     $scope.getContributors = function(contribs)
     {
         return contribs.join(', ');
-    }
+    };
     
     $scope.getSimfileListingIndex = function(packName, index)
     {
         return packName + "" + index;
-    }
+    };
     
     $scope.packTitleFilter = function (pack)
     {

diff --git a/app/pages/simfiles/simfiles.html b/app/pages/simfiles/simfiles.html
index 5632fc4..53ddaa8 100644 (file)
--- a/app/pages/simfiles/simfiles.html
+++ b/app/pages/simfiles/simfiles.html
@@ -14,28 +14,29 @@ FG changes: <input type="checkbox" ng-model="fgChangesFilterKeyword">
 BG changes: <input type="checkbox" ng-model="bgChangesFilterKeyword">\r
 BPM changes: <input type="checkbox" ng-model="bpmChangesFilterKeyword">\r
 \r
-<ul class="simfileList">\r
-    <li class="simfileListing" ng-class="{active: isListingActive($index)}" ng-repeat="simfile in simfileList | filter: artistFilter\r
-                                                                                                              | filter: titleFilter\r
-                                                                                                              | filter: stepsFilter\r
-                                                                                                              | filter: fgChangesFilter\r
-                                                                                                              | filter: bgChangesFilter\r
-                                                                                                              | filter: bpmChangesFilter\r
-    ">\r
-        <a ng-click="openListing($index)">{{simfile.title}}</a>\r
-        <div class="content" ng-show="isListingActive($index)">\r
-            <simfile rock-endpoint="rockEndpoint"\r
-                     simfile="simfile"\r
-                     banner="simfile.banner"\r
-                     title="simfile.title"\r
-                     artist="simfile.artist"\r
-                     steps="simfile.steps"\r
-                     bpm-changes="simfile.bpmChanges"\r
-                     bg-changes="simfile.bgChanges"\r
-                     fg-changes="simfile.fgChanges",\r
-                     size="simfile.size",\r
-                     download="simfile.download"\r
-            />\r
-        </div>\r
-    </li>\r
-</ul>
\ No newline at end of file
+<accordion close-others="false">\r
+    <accordion-group class     = "simfileListing"\r
+                     is-open   = "isOpen"\r
+                     ng-class  = "{active: isOpen}"\r
+                     heading   = "{{simfile.title}}"\r
+                     ng-repeat = "simfile in simfileList | filter: artistFilter\r
+                                                         | filter: titleFilter\r
+                                                         | filter: stepsFilter\r
+                                                         | filter: fgChangesFilter\r
+                                                         | filter: bgChangesFilter\r
+                                                         | filter: bpmChangesFilter"\r
+    >\r
+        <simfile rock-endpoint="rockEndpoint"\r
+                 simfile="simfile"\r
+                 banner="simfile.banner"\r
+                 title="simfile.title"\r
+                 artist="simfile.artist"\r
+                 steps="simfile.steps"\r
+                 bpm-changes="simfile.bpmChanges"\r
+                 bg-changes="simfile.bgChanges"\r
+                 fg-changes="simfile.fgChanges",\r
+                 size="simfile.size",\r
+                 download="simfile.download"\r
+        />\r
+    </accordion-group>\r
+</accordion>
\ No newline at end of file

diff --git a/app/pages/simfiles/simfiles.js b/app/pages/simfiles/simfiles.js
index ee80983..baa13e4 100644 (file)
--- a/app/pages/simfiles/simfiles.js
+++ b/app/pages/simfiles/simfiles.js
@@ -1,11 +1,10 @@
 'use strict';
 
-angular.module("DivinElegy.pages.simfiles", ["DivinElegy.components.simfiles","DivinElegy.components.config"])
+angular.module("DivinElegy.pages.simfiles", ["DivinElegy.components.simfiles","DivinElegy.components.config", "ui.bootstrap"])
 
 .controller("SimfileController", ['$scope', 'rockEndpoint', 'SimfileService', function($scope, rockEndpoint, SimfileService)
 {
     $scope.rockEndpoint = rockEndpoint;
-    $scope.activeListings = [];
     $scope.artistFilterKeyword = null;
     $scope.titleFilterKeyword = null;
     $scope.difficultyFilterKeyword = 'Any';
@@ -15,26 +14,6 @@ angular.module("DivinElegy.pages.simfiles", ["DivinElegy.components.simfiles","D
     $scope.bgChangesFilterKeyword = null;
     $scope.bpmChangesFilterKeyword = null;
     $scope.simfileList = [];
-        
-    $scope.openListing = function(listing)
-    {
-        if($scope.isListingActive(listing))
-        {
-            $scope.activeListings.splice($scope.activeListings.indexOf(listing), 1);
-        } else {
-            $scope.activeListings.push(listing);
-        }
-    };
-    
-    $scope.isListingActive = function(listing)
-    {
-        if($scope.activeListings.indexOf(listing) > -1)
-        {
-            return true;
-        } else {
-            return false;
-        }
-    };
     
     $scope.artistFilter = function (simfile)
     {

diff --git a/bower.json b/bower.json
index d39bc71..899594c 100644 (file)
--- a/bower.json
+++ b/bower.json
@@ -13,6 +13,10 @@
     "html5-boilerplate": "~4.3.0",
     "angular-file-upload": "1.1.1",
     "hello": "1.2.1",
-    "angular-sanitize": "1.3.x"
+    "angular-animate": "1.3.x",
+    "angular-bootstrap": "0.12.x"
+  },
+  "resolutions": {
+    "angular": "1.3.5"
   }
 }