ont avatar ont committed 22708e6

(m) basic split of main view + routing

Comments (0)

Files changed (10)

 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
-  <title>Foundation 4</title>
+  <title>MtG deck lib</title>
 
-  
+
   <link rel="stylesheet" href="css/foundation.css">
   <link rel="stylesheet" href="css/mtg.css">
-  
+
 
   <script src="js/peg-0.7.0.min.js"></script>
   <script src="js/lodash.min.js"></script>
   <script src="js/angular.min.js"></script>
+  <script src="js/angular-route.js"></script>
   <script src="js/http-auth-interceptor.js"></script>
   <script src="js/restangular.js"></script>
   <script src="js/directives.js"></script>
   <script src="js/vendor/custom.modernizr.js"></script>
 
 </head>
-<body class="mtg-body" ng-controller="MainCtrl">
-    <div ng-class="{'mtg-visible' : dlg_login}" class="reveal-modal-bg"></div>
-    <div ng-controller="LoginCtrl" ng-class="{'mtg-visible' : dlg_login}" class="reveal-modal open">
-        <h2>Login</h2>
-        <div class="row">
-            <div class="small-8">
-                <div class="row">
-                    <div class="small-3 columns">
-                        <label for="email" class="right inline">Email</label>
-                    </div>
-                    <div class="small-9 columns">
-                        <input ng-model="post.login" type="text" id="email" placeholder="Inline Text Input">
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="small-3 columns">
-                        <label for="password" class="right inline">Password</label>
-                    </div>
-                    <div class="small-9 columns">
-                        <input ng-model="post.passw" type="password" id="password" placeholder="Inline Text Input">
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="large-offset-3 small-9 columns">
-                        <a ng-click="login()" class="button success" href="#">Try to login</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <a ng-click="dlg_login_hide()" class="close-reveal-modal">×</a>
-    </div>
+<body class="mtg-body">
+    <div ng-view></div>
 
-    <div class="contain-to-grid sticky fixed">
-        <nav class="top-bar">
-            <ul class="title-area">
-                <li class="name">
-                    <h1><a href="#">MtG deck lib</a></h1>
-                </li>
-            </ul>
-            <ul class="right">
-                <li>
-                    <a ng-click="dlg_login_show()" class="button">Login</a>
-                </li>
-            </ul>
-        </nav>
-    </div>
-    <hr/>
-    
-	<div class="row">
-		<div class="large-12 columns">
-            <div class="row collapse">
-                <div class="large-1 columns">
-                    <span class="prefix">cmd&gt;&gt;</span>
-                </div>
-                <div class="large-11 columns">
-                    <input cmd-line="cmd_line( xxx )" cmd-tab="xxx" cmd-tab-src="cmd_tab" ng-model="xxx" type="text" placeholder="Enter command...">
-                </div>
-            </div>
-		</div>
-	</div>
-
-	<div class="mtg-right-numpad" ng-controller="RightNumpadCtrl">
-        <input type="checkbox" ng-model="m.join" ng-change="owns_process()"/> join cards
-        <span ng-repeat="field in fields">
-            <ul class="button-group">
-                <li><a class="tiny button mtg-nano disabled secondary">{{field}}</a></li>
-                <li><a ng-click="field_set(field,0)" class="tiny button mtg-nano" ng-class="field_css(field,0)">G</a></li>
-                <li><a ng-click="field_set(field,1)" class="tiny button mtg-nano" ng-class="field_css(field,1)">1</a></li>
-                <li><a ng-click="field_set(field,2)" class="tiny button mtg-nano" ng-class="field_css(field,2)">2</a></li>
-            </ul>
-        </span>
-	</div>
-
-    <div class="row" ng-repeat="(key,grp) in owns_m">
-        <div class="large-12 columns">
-            <div ng-switch="dmode" class="panel mtg-box">
-                <div ng-show="show_labels()" class="label radius mtg-side-info-90">
-                    {{key}}<sup>{{m.sort[0]}}</sup>
-                </div>
-                <ul ng-switch-when="short" class="large-block-grid-3 mtg-cards-grid">
-                    <li ng-repeat="own in grp | orderBy:get_sorters()">
-                        {{own.card.name}} [{{own.card.power}} / {{own.card.tough}}]
-                    </li>
-                </ul>
-                <ul ng-switch-when="thumb" class="large-block-grid-6 mtg-cards-grid">
-                    <li ng-repeat="own in grp | orderBy:get_sorters()">
-                        <span ng-show="own.cnt > 1" class="secondary label mtg-card-cnt">{{own.cnt}}</span>
-                        <span class="mtg-zoom">
-                            <img ng-src="{{own.card.pict}}"/>
-                            <img ng-src="{{own.card.pict}}"/> 
-                        </span>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-	<div class="row">
-		<div class="large-12 columns">
-
-			<!-- Grid Example -->
-			<div class="row">
-				<div class="large-12 columns">
-					<div class="panel">
-						<p>This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="large-6 columns">
-					<div class="panel">
-						<p>Six columns</p>
-					</div>
-				</div>
-				<div class="large-6 columns">
-					<div class="panel">
-						<p>Six columns</p>
-					</div>
-				</div>
-			</div>
-			<div class="row">
-				<div class="large-4 columns">
-					<div class="panel">
-						<p>Four columns</p>
-					</div>
-				</div>
-				<div class="large-4 columns">
-					<div class="panel">
-						<p>Four columns</p>
-					</div>
-				</div>
-				<div class="large-4 columns">
-					<div class="panel">
-						<p>Four columns</p>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-  <script>
-  document.write('<script src=' +
-  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
-  '.js><\/script>')
-  </script>
-  
-  <!--
-  <script src="js/foundation.min.js"></script>
-  
-  <script src="js/foundation/foundation.js"></script>
-  
-  <script src="js/foundation/foundation.alerts.js"></script>
-  
-  <script src="js/foundation/foundation.clearing.js"></script>
-  
-  <script src="js/foundation/foundation.cookie.js"></script>
-  
-  <script src="js/foundation/foundation.dropdown.js"></script>
-  
-  <script src="js/foundation/foundation.forms.js"></script>
-  
-  <script src="js/foundation/foundation.joyride.js"></script>
-  
-  <script src="js/foundation/foundation.magellan.js"></script>
-  
-  <script src="js/foundation/foundation.orbit.js"></script>
-  
-  <script src="js/foundation/foundation.reveal.js"></script>
-  
-  <script src="js/foundation/foundation.section.js"></script>
-  
-  <script src="js/foundation/foundation.tooltips.js"></script>
-  
-  <script src="js/foundation/foundation.topbar.js"></script>
-  
-  <script src="js/foundation/foundation.interchange.js"></script>
-  
-  <script src="js/foundation/foundation.placeholder.js"></script>
-  
-  <script src="js/foundation/foundation.abide.js"></script>
-  
-  -->
-  
-  <script>
-    //$(document).foundation();
-  </script>
+    <script>
+    document.write('<script src=' +
+    ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
+    '.js><\/script>')
+    </script>
 </body>
 </html>

js/controllers.js

-function MainCtrl($scope, $http, Restangular, mtg) {
+function CardsListCtrl($scope, $http, Restangular, mtg) {
     var prs = null;
     var cards = Restangular.all('cards');
 
-var main = angular.module('MainApp', ['http-auth-interceptor', 'widgets', 'restangular', 'services']);
+var main = angular.module('MainApp', ['ngRoute', 'http-auth-interceptor', 'widgets', 'restangular', 'services']);
 
+main.config( function($routeProvider) {
+    $routeProvider.
+        when('/main', {
+            templateUrl: 'tpl/cards_my.html',
+            controller: 'CardsListCtrl'
+        }).
+        /*
+        when('/user/:user_id/cards/all', {
+            templateUrl: 'tpl/cards_user.html',
+            controller: 'CardsListCtrl'
+        }).
+        when('/user/:user_id/cards/exchange', {
+            templateUrl: 'tpl/cards_user.html',
+            controller: 'CardsListCtrl'
+        }).
+        */
+        /*
+        when('/user/:user_id/info', {
+            templateUrl: 'tpl/cards_user.html',
+            controller: 'UserInfoCtrl'
+        }).
+        */
+        otherwise({
+            redirectTo: '/main'
+        });
+});
+
+/*
+ * Application specific services.
+ */
 var services = angular.module('services', []);
 
 /*

tpl/_cards_cmdline.html

+<div class="row">
+    <div class="large-12 columns">
+        <div class="row collapse">
+            <div class="large-1 columns">
+                <span class="prefix">cmd&gt;&gt;</span>
+            </div>
+            <div class="large-11 columns">
+                <input cmd-line="cmd_line( xxx )" cmd-tab="xxx" cmd-tab-src="cmd_tab" ng-model="xxx" type="text" placeholder="Enter command...">
+            </div>
+        </div>
+    </div>
+</div>

tpl/_cards_list.html

+<div class="row" ng-repeat="(key,grp) in owns_m">
+    <div class="large-12 columns">
+        <div ng-switch="dmode" class="panel mtg-box">
+            <div ng-show="show_labels()" class="label radius mtg-side-info-90">
+                {{key}}<sup>{{m.sort[0]}}</sup>
+            </div>
+            <ul ng-switch-when="short" class="large-block-grid-3 mtg-cards-grid">
+                <li ng-repeat="own in grp | orderBy:get_sorters()">
+                    {{own.card.name}} [{{own.card.power}} / {{own.card.tough}}]
+                </li>
+            </ul>
+            <ul ng-switch-when="thumb" class="large-block-grid-6 mtg-cards-grid">
+                <li ng-repeat="own in grp | orderBy:get_sorters()">
+                    <span ng-show="own.cnt > 1" class="secondary label mtg-card-cnt">{{own.cnt}}</span>
+                    <span class="mtg-zoom">
+                        <img ng-src="{{own.card.pict}}"/>
+                        <img ng-src="{{own.card.pict}}"/>
+                    </span>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+

tpl/_cards_numpad.html

+<div class="mtg-right-numpad" ng-controller="RightNumpadCtrl">
+    <input type="checkbox" ng-model="m.join" ng-change="owns_process()"/> join cards
+    <span ng-repeat="field in fields">
+        <ul class="button-group">
+            <li><a class="tiny button mtg-nano disabled secondary">{{field}}</a></li>
+            <li><a ng-click="field_set(field,0)" class="tiny button mtg-nano" ng-class="field_css(field,0)">G</a></li>
+            <li><a ng-click="field_set(field,1)" class="tiny button mtg-nano" ng-class="field_css(field,1)">1</a></li>
+            <li><a ng-click="field_set(field,2)" class="tiny button mtg-nano" ng-class="field_css(field,2)">2</a></li>
+        </ul>
+    </span>
+</div>

tpl/_popup_login.html

+<div ng-class="{'mtg-visible' : dlg_login}" class="reveal-modal-bg"></div>
+<div ng-controller="LoginCtrl" ng-class="{'mtg-visible' : dlg_login}" class="reveal-modal open">
+    <h2>Login</h2>
+    <div class="row">
+        <div class="small-8">
+            <div class="row">
+                <div class="small-3 columns">
+                    <label for="email" class="right inline">Email</label>
+                </div>
+                <div class="small-9 columns">
+                    <input ng-model="post.login" type="text" id="email" placeholder="Inline Text Input">
+                </div>
+            </div>
+            <div class="row">
+                <div class="small-3 columns">
+                    <label for="password" class="right inline">Password</label>
+                </div>
+                <div class="small-9 columns">
+                    <input ng-model="post.passw" type="password" id="password" placeholder="Inline Text Input">
+                </div>
+            </div>
+            <div class="row">
+                <div class="large-offset-3 small-9 columns">
+                    <a ng-click="login()" class="button success" href="#">Try to login</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <a ng-click="dlg_login_hide()" class="close-reveal-modal">×</a>
+</div>
+
+<div class="contain-to-grid sticky fixed">
+    <nav class="top-bar">
+        <ul class="title-area">
+            <li class="name">
+                <h1><a href="#">MtG deck lib</a></h1>
+            </li>
+        </ul>
+        <ul class="right">
+            <li>
+                <a ng-click="dlg_login_show()" class="button">Login</a>
+            </li>
+        </ul>
+    </nav>
+</div>

tpl/cards_my.html

+<div>
+    <div ng-include="'tpl/_popup_login.html'"></div>
+    <div ng-include="'tpl/_topbar.html'"></div>
+
+    <hr/>
+
+    <div ng-include="'tpl/_cards_cmdline.html'"></div>
+    <div ng-include="'tpl/_cards_numpad.html'"></div>
+    <div ng-include="'tpl/_cards_list.html'"></div>
+</div>
+<div>
+    xxxxz zz z z z
+</div>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.