Permalink
Browse files

added styles

  • Loading branch information...
1 parent 83b12f0 commit c529dd2f1a4171113bbca0f75b72416cac598120 @qoobaa committed Aug 25, 2011
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -0,0 +1,54 @@
+@charset "UTF-8";
+
+/* ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+ •• Wyngle ••
+ •• Reset stylesheet ••
+ •• Updated: August 2011 ••
+ ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
+
+----------------------------------------------------------------------- */
+
+a, abbr, address, article, aside, audio, b, blockquote, body, canvas,
+caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset,
+figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup,
+html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
+object, ol, p, pre, q, samp, section, small, span, strong, sub, summary,
+sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font-weight: inherit;
+ font-style: inherit;
+ vertical-align: baseline;
+}
+
+article, aside, canvas, details, figcaption, figure, footer, header,
+hgroup, menu, nav, section, summary {
+ display: block;
+}
+
+mark {
+ background-color: transparent;
+}
+
+a, ins, del {
+ text-decoration: none;
+}
+
+ul, ol {
+ list-style: none;
+}
+
+table {
+ border-spacing: 0;
+ border-collapse: collapse;
+}
+
+caption, th {
+ text-align: left;
+}
+
+q:after, q:before {
+ content: "";
+}
View
@@ -1,29 +1,112 @@
-<html>
+<!DOCTYPE html>
+<html lang="en" class="transform3d">
<head>
- <link rel="stylesheet" href="assets/bpm_styles.css" type="text/css" media="screen" charset="utf-8" />
- <title>Ficha</title>
+ <meta charset="UTF-8">
+ <title>Flashcards</title>
+ <link rel="stylesheet" href="css/main.css">
</head>
<body>
- <h1>Ficha</h1>
+ <div class="wrap">
- <script id="card" type="text/x-handlebars">
- <p>
- {{view Ficha.SideView valueBinding="Ficha.newCardController.front" placeholder="Front side"}}
- </p>
- <p>
- {{view Ficha.SideView valueBinding="Ficha.newCardController.back" placeholder="Back side"}}
- </p>
- </script>
+ <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>
- <script type="text/x-handlebars">
- {{view Ficha.CardView}}
+ <div class="main">
- {{#collection contentBinding="Ficha.cardsController" tagName="ul"}}
- {{content.front}} {{content.back}}
- {{#view SC.Button contentBinding="parentView.content" target="Ficha.cardsController" action="deleteCard"}}Delete{{/view}}
- {{/collection}}
- </script>
+ <div class="deck-divider">
+ <span class="deck-count">4 cards</span>
+ </div>
+
+ <ul class="cards">
+ <li class="card card-editing">
+ <div class="card-sides">
+ <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
+ <div class="card-side card-front">
+ <a class="card-delete">X</a>
+ <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
+ <textarea name="" rows="2" cols="12">flibbertigibbet</textarea>
+ <!--
+ <script type="text/javascript">
+ // Line breaks can be added only programatically
+ document.getElementById('t').value = '\n' + document.getElementById('t').value;
+ </script>
+ -->
+ </div>
+ <div class="card-side card-back">
+ <a class="card-delete">X</a>
+ <textarea name="" rows="2" 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>
+ </li>
+ <li class="card">
+ <div class="card-sides">
+ <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
+ <div class="card-side card-front">
+ <a class="card-delete">X</a>
+ <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
+ <textarea name="" rows="2" cols="12">surreptitious</textarea>
+ </div>
+ <div class="card-side card-back">
+ <a class="card-delete">X</a>
+ <textarea name="" rows="2" 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>
+ </li>
+ <li class="card">
+ <div class="card-sides">
+ <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
+ <div class="card-side card-front">
+ <a class="card-delete">X</a>
+ <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
+ <textarea name="" rows="2" cols="12">abstruse</textarea>
+ </div>
+ <div class="card-side card-back">
+ <a class="card-delete">X</a>
+ <textarea name="" rows="2" 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>
+ </li>
+ <li class="card">
+ <div class="card-sides">
+ <a class="card-edit-layer" href=""><span><span>Click to edit</span></span></a>
+ <div class="card-side card-front">
+ <a class="card-delete">X</a>
+ <div class="card-button card-edit-flip"><a class="button" href="">Edit back of the card</a></div>
+ <textarea name="" rows="2" cols="12">obstreperous</textarea>
+ </div>
+ <div class="card-side card-back">
+ <a class="card-delete">X</a>
+ <textarea name="" rows="2" cols="12">noisy and difficult to control</textarea>
+ <div class="card-button card-edit-flip-back"><a class="button button-confirm" href="">Done editing</a></div>
+ </div>
+ </div>
+ </li>
+ <li class="card card-new">
+ <a href="">Add a card</a>
+ </li>
+ </ul>
+ </div>
+
+ </div>
</body>
- <script type="text/javascript" src="assets/bpm_libs.js"></script>
- <script>spade.require("ficha");</script>
</html>
View
@@ -7,23 +7,31 @@ Ficha = SC.Application.create({
Ficha.store.commitRecordsAutomatically = true;
-Ficha.FixturesDataSource = SC.FixturesDataSource.extend({
- // simulateRemoteResponse: true,
- // latency: 250
-});
+Ficha.FixturesDataSource = SC.FixturesDataSource.extend();
Ficha.Card = SC.Record.extend({
primaryKey: "id",
front: SC.Record.attr(String),
- back: SC.Record.attr(String)
+ back: SC.Record.attr(String),
+
+ category: SC.Record.toOne("Ficha.Category", {
+ inverse: "cards",
+ isMaster: true,
+ key: "category_id"
+ })
});
-Ficha.Card.FIXTURES = [
- { id: "1", front: "a", back: "b" },
- { id: "2", front: "c", back: "d" },
- { id: "3", front: "e", back: "f" }
-];
+Ficha.Category = SC.Record.extend({
+ primaryKey: "id",
+
+ name: SC.Record.attr(String),
+
+ cards: SC.Record.toMany("Ficha.Card", {
+ inverse: "group",
+ isMaster: false
+ })
+});
Ficha.categoriesController = SC.ArrayController.create({

0 comments on commit c529dd2

Please sign in to comment.