From 8d9349224f019d5656550ac7995a4ab673c350d1 Mon Sep 17 00:00:00 2001
From: Andrew Buss <abuss@ucsd.edu>
Date: Wed, 3 Jun 2015 05:43:07 -0700
Subject: [PATCH] restyle study settings somewhat

---
 scripts/FlashcardFactory.js |  2 --
 templates/deck.html         | 53 ++++++++++++++++++++++++++--
 templates/study.html        | 86 +++++++++++++++++++++++++--------------------
 3 files changed, 99 insertions(+), 42 deletions(-)

diff --git a/scripts/FlashcardFactory.js b/scripts/FlashcardFactory.js
index 8ae4ac9..47fafb1 100644
--- a/scripts/FlashcardFactory.js
+++ b/scripts/FlashcardFactory.js
@@ -81,8 +81,6 @@ angular.module('flashy.FlashcardFactory', ['ui.router']).
           });
 
         };
-      
-        
 
         Flashcard.prototype.refreshEditCardInput = function () {
 
diff --git a/templates/deck.html b/templates/deck.html
index 22e5a2f..a6ab6bf 100644
--- a/templates/deck.html
+++ b/templates/deck.html
@@ -1,5 +1,54 @@
-<div class="row">
-  <h2 ng-cloak ng-show="cards.length == 0">This is your deck, but it's blank! Add a card from the feed to see it here!</h2>
+<div id="editModal" class="modal row" style="max-height:none;">
+  <form id="edit-card-form">
+    <div class="modal-content col">
+      <div class="row" style="margin-bottom:0">
+        <div class="card  cyan-text text-darken-2"
+             style="width:300px; height:180px; margin-bottom:0; font-size:120%;">
+          <div class="valign-wrapper">
+            <div id="edit-card-input" ng-model="newCardFormattedText" style="outline:0px solid transparent;"
+                 class="card-content valign center-align"
+                 contenteditable select-non-editable="true" ng-change="flashcard.refreshEditCardInput()">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col">
+      <div class="row">
+      </div>
+      <div class="row">
+        <button class="btn modal-close tooltipped" type="submit" ng-click="flashcard.pushCard()"
+                data-position="left"
+                data-delay="50" ng-class="flashcard.submit_enabled?{}:'disabled'"
+                data-tooltip="Enter">
+          Edit
+          <i class="mdi-hardware-keyboard-return right"></i>
+        </button>
+      </div>
+      <div class="row">
+        <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
+                data-tooltip="Ctrl-B">
+          Blank Selected Text
+        </button>
+      </div>
+      <div class="row" ng-show="flashcard.editCardText"
+           ng-style="(flashcard.editCardText.length>160)?{color:'red'}:{}">
+        {{flashcard.editCardText.length}}/160 characters
+      </div>
+      <div class="row" ng-show="flashcard.editCardText.length < 5">
+        Please write a little more!
+      </div>
+      <div class="row" ng-show="flashcard.editCardText.length > 140">
+        Good flashcards have a<br>
+        single atomic fact
+      </div>
+    </div>
+  </form>
+</div>
+
+<div class="row">
+  <h2 ng-cloak ng-show="cards.length == 0">This is your deck, but it's blank! Add a card from the feed to see it
+    here!</h2>
 
   <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
     <div class="indeterminate"></div>
diff --git a/templates/study.html b/templates/study.html
index 3a6ef4d..cb3e0f0 100644
--- a/templates/study.html
+++ b/templates/study.html
@@ -15,53 +15,61 @@
 
         <!-- Default: all classes button -->
         <!-- Button for classes -->
-        <div class="card">
-          <!-- Default: all classes button -->
-          <a class="waves-effect waves-light btn toggley"
-              ng-init="sectionToStudy = null"
-              ng-click="toggleSectionToStudy(null)"
-              ng-class="{'pink white-text': sectionToStudy == null}">
-              All classes</a>
+        <div class="row">
+          <div class="card-panel">
+            <div class="row">
+              <!-- Default: all classes button -->
+              <a class="waves-effect waves-light btn toggley"
+                 ng-init="sectionToStudy = null"
+                 ng-click="toggleSectionToStudy(null)"
+                 ng-class="{'pink white-text': sectionToStudy == null}">
+                All classes</a>
 
-          <!-- Buttons of rest of classes -->
-          <div ng-repeat="section in UserService.getUserData().sections">
-            <a class="waves-effect waves-light btn toggley"
-                ng-click="toggleSectionToStudy(section.id)"
-                ng-class="{'pink white-text': sectionToStudy == section.id}">
-                {{section.short_name}}
-            </a>
+              <!-- Buttons of rest of classes -->
+              <div ng-repeat="section in UserService.getUserData().sections">
+                <a class="waves-effect waves-light btn toggley"
+                   ng-click="toggleSectionToStudy(section.id)"
+                   ng-class="{'pink white-text': sectionToStudy == section.id}">
+                  {{section.short_name}}
+                </a>
+              </div>
+            </div>
           </div>
-        </div> <!-- end of buttons for classes -->
+        </div>
+        <!-- end of buttons for classes -->
         <div class="row">
-          <div class="card">
-            <h3>Choose Date</h3>
-            <input id="start-date" type="date" class="" placeholder="Start Date"/>
-            <input id="end-date" type="date" class="" placeholder="End Date"/>
+          <div class="card-panel">
+            <div class="row">
+              <h3>Choose Date</h3>
+              <input id="start-date" type="date" class="" placeholder="Start Date"/>
+              <input id="end-date" type="date" class="" placeholder="End Date"/>
 
 
-            <!-- JQUERY RANGE SLIDER -->
-            <!--
-            <p>
-              <label for="amount">Price range:</label>
-              <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
-            </p>
-            <div id="slider-range"></div>
-            -->
+              <!-- JQUERY RANGE SLIDER -->
+              <!--
+              <p>
+                <label for="amount">Price range:</label>
+                <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
+              </p>
+              <div id="slider-range"></div>
+              -->
 
+            </div>
           </div>
         </div>
 
-      </div> <!-- end of #content-x -->
+      </div>
+      <!-- end of #content-x -->
     </li>
   </ul>
 
   <div class="row">
-      <div class="card-action">
-        <button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()">
-          Fetch!
-          <i class="mdi-content-send right"></i>
-        </button>
-      </div>
+    <div class="card-action">
+      <button class="btn waves-effect waves-light fetch" ng-click="fetchQuiz()">
+        Fetch!
+        <i class="mdi-content-send right"></i>
+      </button>
+    </div>
   </div>
 </div> <!-- End of .container-->
 
@@ -72,12 +80,13 @@
   <form>
     <div class="modal-content">
       <h4>Card #{{cardCount}}</h4>
+
       <p ng-if="!hasBlanks" style="font-size: 12pt"><i>This card has no blanks, but please read over it.</i></p>
 
       <p>{{text0}}
-      <input id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
-          ng-model="answer"></input>
-      {{text1}}</p>
+        <input id="answer" class="answer" type="text" placeholder="ANSWER" ng-init="answer=''"
+               ng-model="answer"></input>
+        {{text1}}</p>
     </div>
     <div class="modal-footer">
       <!-- Card has blanks button -->
@@ -105,12 +114,13 @@
   <form>
     <div class="modal-content">
       <h4>The answer</h4>
+
       <div>
         {{text0}} <u><b>{{textblank}}</b></u> {{text1}}
       </div>
       <hr>
       <h4>Your response</h4>
-        {{text0}} <u><b>{{answer}}</b></u> {{text1}}
+      {{text0}} <u><b>{{answer}}</b></u> {{text1}}
     </div>
     <div class="modal-footer">
       Is your response correct?
-- 
1.9.1