Permalink
Browse files

updated design

  • Loading branch information...
1 parent db34148 commit 2afb91e0569df4db8a45bd0222a92cf12f0a46e3 @qoobaa committed Aug 29, 2011
Showing with 41 additions and 61 deletions.
  1. +1 −1 ficha.json
  2. +10 −31 index.html
  3. +11 −27 index.static.html
  4. +19 −2 lib/main.js
View
@@ -19,4 +19,4 @@
"spade": ">= 0",
"sproutcore-datastore": ">= 0-pre"
}
-}
+}
View
@@ -8,55 +8,34 @@
<body>
<script type="text/x-handlebars">
<div class="wrap">
-
- <header class="deck-header columns columns-opposite">
- <div class="first">
- <div class="dropdown"> <!-- Open: <div class="dropdown dropdown-open"> -->
- <a class="button button-dropdown" href=""><span>English vocabulary</span></a>
- <ul>
- <li class="selected"><a href="">English vocabulary</a></li>
- <li><a href="">Very long label goes here let’s see how it’s gonna look like</a></li>
- <li><a href="">One more</a></li>
- <li><a href="">Second deck name</a></li>
- <li class="new-deck"><a href="">New deck…</a></li>
- </ul>
- </div>
- </div>
- <div class="last">
- <div class="play-deck">
- <a class="button button-confirm button-play" href="">Play this deck</a>
- </div>
- </div>
- </header>
-
<div class="main">
-
<div class="deck-divider">
- <span class="deck-count">4 cards</span>
+ {{view Ficha.DeckCountView}}
</div>
-
{{collection Ficha.CardsView class="cards"}}
+ <ul class="cards">
+ {{view Ficha.NewCardView}}
+ </ul>
</div>
-
</div>
</script>
</body>
<script type="text/x-handlebars" data-template-name="card-new">
- <a href="">Add a card</a>
+ <a href=""><img src="content/icon.png" width="66" height="65" alt="Add a card"></a>
</script>
<script type="text/x-handlebars" data-template-name="card">
<div class="card-sides">
- <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
+ <a class="card-edit-layer" href=""></a>
<div class="card-side card-front">
- <a class="card-delete">X</a>
+ <a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
<div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- {{view Ficha.CardSideTextArea valueBinding="card.front"}}
+ {{view Ficha.CardSideTextAreaView valueBinding="card.front"}}
</div>
<div class="card-side card-back">
- <a class="card-delete">X</a>
- {{view Ficha.CardSideTextArea valueBinding="card.back"}}
+ <a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
+ {{view Ficha.CardSideTextAreaView valueBinding="card.back"}}
<div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
</div>
</div>
View
@@ -3,17 +3,13 @@
<head>
<meta charset="UTF-8">
<title>Flashcards</title>
- <link rel="stylesheet" href="styles/main.css">
- <script src="scripts/assets/jquery-1.6.2.min.js"></script>
- <script src="scripts/glue.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- <div class="wrap"> -->
<div class="wrap">
-
<header class="deck-header columns columns-opposite">
<div class="first">
-
<div class="dropdown"> <!-- Open: <div class="dropdown dropdown-open"> -->
<a class="button button-large button-dropdown" href=""><span>English vocabulary</span></a>
<ul class="dropdown-list">
@@ -23,19 +19,13 @@
<li><a href="">Second deck name</a></li>
<li class="new-deck"><a href="">New deck…</a></li>
</ul>
-
<div class="deck-rename">
<a href=""><span>Rename</span></a>
</div>
-
<div class="deck-edit">
<input type="text" name="" value="">
</div>
</div>
-
-
-
-
</div>
<div class="last">
<div class="play-deck">
@@ -48,24 +38,21 @@
<div class="last play-score-incorrect play-score-none"><b>0</b> wrong</p>
</div>
</div>
- </div>
+ </div>
</header>
-
<div class="main">
-
<div class="heading deck-divider">
<span class="heading-inner">4 cards</span>
<!-- <span class="heading-inner">1 / 6</span> -->
</div>
-
<ul class="cards">
<li class="card">
<div class="card-sides">
<a class="card-edit-layer" href=""></a>
<div class="card-side card-front">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
<div class="card-button card-edit-flip"><a class="button" href="">Flip the card</a></div>
- <textarea class="card-text" name="" rows="5" cols="40">flibbertigibbet</textarea>
+ <textarea class="card-text" name="" rows="5" cols="12">flibbertigibbet</textarea>
<!--
<script type="text/javascript">
// Line breaks can be added only programatically
@@ -75,7 +62,7 @@
</div>
<div class="card-side card-back">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
- <textarea class="card-text" name="" rows="5" cols="40">a flighty or whimsical person, usually a young woman</textarea>
+ <textarea class="card-text" name="" rows="5" cols="12">a flighty or whimsical person, usually a young woman</textarea>
<div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
</div>
</div>
@@ -86,11 +73,11 @@
<div class="card-side card-front">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
<div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- <textarea class="card-text" name="" rows="5" cols="40">surreptitious</textarea>
+ <textarea class="card-text" name="" rows="5" cols="12">surreptitious</textarea>
</div>
<div class="card-side card-back">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
- <textarea class="card-text" name="" rows="5" cols="40">kept secret, esp. because it would not be approved of</textarea>
+ <textarea class="card-text" name="" rows="5" cols="12">kept secret, esp. because it would not be approved of</textarea>
<div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
</div>
</div>
@@ -101,11 +88,11 @@
<div class="card-side card-front">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
<div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- <textarea class="card-text" name="" rows="5" cols="40">abstruse</textarea>
+ <textarea class="card-text" name="" rows="5" cols="12">abstruse</textarea>
</div>
<div class="card-side card-back">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
- <textarea class="card-text" name="" rows="5" cols="40">difficult to understand; obscure</textarea>
+ <textarea class="card-text" name="" rows="5" cols="12">difficult to understand; obscure</textarea>
<div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
</div>
</div>
@@ -116,11 +103,11 @@
<div class="card-side card-front">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
<div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
- <textarea class="card-text" name="" rows="5" cols="40"></textarea>
+ <textarea class="card-text" name="" rows="5" cols="12"></textarea>
</div>
<div class="card-side card-back">
<a class="card-delete" href=""><img src="content/icon.png" width="24" height="24" alt="Delete"></a>
- <textarea class="card-text" name="" rows="5" cols="40"></textarea>
+ <textarea class="card-text" name="" rows="5" cols="12"></textarea>
<div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
</div>
</div>
@@ -129,7 +116,6 @@
<a href=""><img src="content/icon.png" width="66" height="65" alt="Add a card"></a>
</li>
</ul>
-
<div class="play">
<div class="card">
<div class="card-sides">
@@ -151,9 +137,7 @@
</div>
</div>
</div>
-
</div>
-
</div>
</body>
-</html>
+</html>
View
@@ -49,13 +49,30 @@ Ficha.CardsView = SC.CollectionView.extend({
Ficha.NewCardView = SC.View.extend({
tagName: "li",
- templateName: "card-new"
+ templateName: "card-new",
+ classNames: ["card-new", "card"]
});
-Ficha.CardSideTextArea = SC.TextArea.extend({
+Ficha.CardSideTextAreaView = SC.TextArea.extend({
+ classNames: ["card-text"],
attributeBindings: ["rows", "cols"],
rows: "2",
cols: "12"
});
+Ficha.DeckCountView = SC.View.extend({
+ tagName: "span",
+ classNames: ["deck-count"],
+ countBinding: "Ficha.cardsController.content.length",
+ template: SC.Handlebars.compile("{{displayCount}}"),
+
+ displayCount: function () {
+ var count = this.get("count");
+
+ return count + (count === 1 ? " card" : " cards");
+ }.property("count").cacheable()
+});
+
+// rest
+
Ficha.cardsController.set("content", Ficha.store.find(Ficha.Card));

0 comments on commit 2afb91e

Please sign in to comment.