Add template for "New Exercise" UI

- Add template - Refactor some duplicate CSS into a mixin
jasonrudolph · Aug 8, 2012 · 13339d1 · 13339d1
1 parent 8dc9345
commit 13339d1
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 42 deletions.
diff --git a/public/css/screen.css b/public/css/screen.css
@@ -217,26 +217,26 @@ button, .button {
   box-sizing: border-box;
 }
 
-/* line 3, ../../src/sass/partials/_base.scss */
+/* line 5, ../../src/sass/partials/_base.scss */
 body {
   background: #efefef;
   font-size: 14px;
 }
 
-/* line 8, ../../src/sass/partials/_base.scss */
+/* line 10, ../../src/sass/partials/_base.scss */
 a, a:hover, a:active, a:visited {
   text-decoration: none;
 }
 
-/* line 10, ../../src/sass/partials/_base.scss */
+/* line 12, ../../src/sass/partials/_base.scss */
 #header {
   background: #555555;
   margin: 0 0 12px 0;
   width: 100%;
   position: relative;
 }
 
-/* line 17, ../../src/sass/partials/_base.scss */
+/* line 19, ../../src/sass/partials/_base.scss */
 #header h1 {
   text-align: center;
   font-size: 16px;
@@ -246,62 +246,61 @@ a, a:hover, a:active, a:visited {
   margin: 0;
 }
 
-/* line 27, ../../src/sass/partials/_base.scss */
+/* line 29, ../../src/sass/partials/_base.scss */
 .header-buttons.right, .header-buttons.left {
   position: absolute;
   top: 4px;
 }
-/* line 28, ../../src/sass/partials/_base.scss */
+/* line 30, ../../src/sass/partials/_base.scss */
 .header-buttons.right {
   right: 2px;
 }
-/* line 29, ../../src/sass/partials/_base.scss */
+/* line 31, ../../src/sass/partials/_base.scss */
 .header-buttons.left {
   left: 2px;
 }
-/* line 31, ../../src/sass/partials/_base.scss */
+/* line 33, ../../src/sass/partials/_base.scss */
 .header-buttons button {
   font-size: 14px;
   padding: 0 10px;
   height: 32px;
 }
 
-/* line 38, ../../src/sass/partials/_base.scss */
+/* line 40, ../../src/sass/partials/_base.scss */
 .more-info {
   display: none;
 }
 
-/* line 46, ../../src/sass/partials/_base.scss */
+/* line 48, ../../src/sass/partials/_base.scss */
 #dev-links {
   border-top: 1px solid #999999;
   margin-top: 50px;
   padding-top: 5px;
   text-align: center;
 }
-/* line 52, ../../src/sass/partials/_base.scss */
+/* line 54, ../../src/sass/partials/_base.scss */
 #dev-links ul li {
   display: inline;
 }
 
-/* line 61, ../../src/sass/partials/_base.scss */
+/* line 63, ../../src/sass/partials/_base.scss */
 #datastore-configuration {
-  margin-left: 6px;
-  margin-right: 6px;
+  margin: 0 6px 12px;
 }
 
-/* line 63, ../../src/sass/partials/_base.scss */
+/* line 65, ../../src/sass/partials/_base.scss */
 #datastore-configuration-form-button {
   display: block;
   width: 100%;
 }
 
-/* line 68, ../../src/sass/partials/_base.scss */
+/* line 70, ../../src/sass/partials/_base.scss */
 .how-it-works ol li {
   list-style-type: decimal;
   margin-left: 24px;
 }
 
-/* line 73, ../../src/sass/partials/_base.scss */
+/* line 75, ../../src/sass/partials/_base.scss */
 .tell-me-more {
   display: -moz-inline-stack;
   display: inline-block;
@@ -321,7 +320,7 @@ a, a:hover, a:active, a:visited {
   color: white;
   padding: 0 5px 0 0;
 }
-/* line 79, ../../src/sass/partials/_base.scss */
+/* line 81, ../../src/sass/partials/_base.scss */
 .tell-me-more:before {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
@@ -334,12 +333,12 @@ a, a:hover, a:active, a:visited {
   margin-right: 5px;
 }
 
-/* line 89, ../../src/sass/partials/_base.scss */
+/* line 91, ../../src/sass/partials/_base.scss */
 .progress-list li {
   color: #555555;
   margin-left: 10px;
 }
-/* line 93, ../../src/sass/partials/_base.scss */
+/* line 95, ../../src/sass/partials/_base.scss */
 .progress-list li[data-status=pending] {
   color: #999999;
 }
@@ -367,7 +366,7 @@ a, a:hover, a:active, a:visited {
   color: #00ae68;
   padding: 0 5px 0 0;
 }
-/* line 96, ../../src/sass/partials/_base.scss */
+/* line 98, ../../src/sass/partials/_base.scss */
 .progress-list li[data-status=failure] {
   color: red;
 }
@@ -380,13 +379,13 @@ a, a:hover, a:active, a:visited {
   padding: 0 5px 0 0;
 }
 
-/* line 103, ../../src/sass/partials/_base.scss */
+/* line 105, ../../src/sass/partials/_base.scss */
 #exercise-list {
   font-size: 16px;
   font-weight: bold;
 }
 
-/* line 108, ../../src/sass/partials/_base.scss */
+/* line 110, ../../src/sass/partials/_base.scss */
 #exercise-list li {
   -webkit-box-shadow: inset 0 1px 0 white;
   -moz-box-shadow: inset 0 1px 0 white;
@@ -399,29 +398,34 @@ a, a:hover, a:active, a:visited {
   padding: 10px 12px;
   position: relative;
 }
-/* line 118, ../../src/sass/partials/_base.scss */
+/* line 120, ../../src/sass/partials/_base.scss */
 #exercise-list li:first-child {
   border-top: 1px solid #cccccc;
 }
-/* line 120, ../../src/sass/partials/_base.scss */
+/* line 122, ../../src/sass/partials/_base.scss */
 #exercise-list li div {
   position: absolute;
   right: 0;
   top: 6px;
   font-size: 18px;
 }
 
-/* line 128, ../../src/sass/partials/_base.scss */
+/* line 130, ../../src/sass/partials/_base.scss */
 #search-bar {
   margin: 0 12px 6px;
 }
 
-/* line 136, ../../src/sass/partials/_base.scss */
+/* line 138, ../../src/sass/partials/_base.scss */
+#new-exercise-form {
+  margin: 0 6px 12px;
+}
+
+/* line 144, ../../src/sass/partials/_base.scss */
 #new-set-form, #recent-sets-by-day {
   margin: 0 6px 12px;
 }
 
-/* line 138, ../../src/sass/partials/_base.scss */
+/* line 146, ../../src/sass/partials/_base.scss */
 #weight-input-label, #reps-input-label {
   display: -moz-inline-stack;
   display: inline-block;
@@ -435,12 +439,12 @@ a, a:hover, a:active, a:visited {
   position: absolute;
 }
 
-/* line 147, ../../src/sass/partials/_base.scss */
+/* line 155, ../../src/sass/partials/_base.scss */
 #weight-input, #reps-input {
   margin: 0;
 }
 
-/* line 151, ../../src/sass/partials/_base.scss */
+/* line 159, ../../src/sass/partials/_base.scss */
 .trailer {
   display: -webkit-box;
   display: -moz-box;
@@ -450,7 +454,7 @@ a, a:hover, a:active, a:visited {
   *zoom: 1;
   width: 100%;
 }
-/* line 155, ../../src/sass/partials/_base.scss */
+/* line 163, ../../src/sass/partials/_base.scss */
 .trailer li {
   -webkit-box-flex: 50;
   -moz-box-flex: 50;
@@ -459,7 +463,7 @@ a, a:hover, a:active, a:visited {
   margin-right: 5px;
   position: relative;
 }
-/* line 161, ../../src/sass/partials/_base.scss */
+/* line 169, ../../src/sass/partials/_base.scss */
 .trailer li:last-child {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
@@ -468,7 +472,7 @@ a, a:hover, a:active, a:visited {
   margin: 0;
 }
 
-/* line 171, ../../src/sass/partials/_base.scss */
+/* line 179, ../../src/sass/partials/_base.scss */
 .set-history {
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
@@ -480,7 +484,7 @@ a, a:hover, a:active, a:visited {
   color: #666666;
   margin-bottom: 6px;
 }
-/* line 178, ../../src/sass/partials/_base.scss */
+/* line 186, ../../src/sass/partials/_base.scss */
 .set-history h1 {
   -webkit-border-radius: 4px 4px 0 0;
   -moz-border-radius: 4px 4px 0 0;
@@ -493,7 +497,7 @@ a, a:hover, a:active, a:visited {
   padding: 6px 10px;
   margin: 0;
 }
-/* line 187, ../../src/sass/partials/_base.scss */
+/* line 195, ../../src/sass/partials/_base.scss */
 .set-history h3, .set-history p {
   display: -moz-inline-stack;
   display: inline-block;
@@ -502,25 +506,25 @@ a, a:hover, a:active, a:visited {
   zoom: 1;
   *display: inline;
 }
-/* line 188, ../../src/sass/partials/_base.scss */
+/* line 196, ../../src/sass/partials/_base.scss */
 .set-history p {
   color: #999999;
   font-size: 13px;
   margin-bottom: 2px;
 }
-/* line 194, ../../src/sass/partials/_base.scss */
+/* line 202, ../../src/sass/partials/_base.scss */
 .set-history div {
   margin-bottom: 2px;
 }
-/* line 195, ../../src/sass/partials/_base.scss */
+/* line 203, ../../src/sass/partials/_base.scss */
 .set-history .right {
   float: right;
 }
-/* line 197, ../../src/sass/partials/_base.scss */
+/* line 205, ../../src/sass/partials/_base.scss */
 .set-history li:first-child {
   border-top: 0 none;
 }
-/* line 198, ../../src/sass/partials/_base.scss */
+/* line 206, ../../src/sass/partials/_base.scss */
 .set-history li {
   overflow: hidden;
   *zoom: 1;

diff --git a/public/design.html b/public/design.html
@@ -13,6 +13,7 @@ <h1>Design!</h1>
     <ul>
       <li><a href="/design/datastore_configuration.html">Datastore Configuration</a></li>
       <li><a href="/design/exercises.html">Exercises</a></li>
+      <li><a href="/design/new_exercise.html">New Exercise</a></li>
       <li><a href="/design/new_set.html">New Set</a></li>
     </ul>
   </div>

diff --git a/src/sass/partials/_base.scss b/src/sass/partials/_base.scss
@@ -1,5 +1,7 @@
 * { @include box-sizing(border-box); }
 
+@mixin inset-component { margin: 0 6px 12px; }
+
 body {
   background: #efefef;
   font-size: 14px;
@@ -58,7 +60,7 @@ a, a:hover, a:active, a:visited { text-decoration: none; }
 // Datastore configuration
 ////////////////////////////////////////////////////////////////////////////////
 
-#datastore-configuration { margin-left: 6px; margin-right: 6px; }
+#datastore-configuration { @include inset-component };
 
 #datastore-configuration-form-button {
   display: block;
@@ -129,11 +131,17 @@ a, a:hover, a:active, a:visited { text-decoration: none; }
   margin: 0 12px 6px;
 }
 
+////////////////////////////////////////////////////////////////////////////////
+// New Exercise Form
+////////////////////////////////////////////////////////////////////////////////
+
+#new-exercise-form { @include inset-component };
+
 ////////////////////////////////////////////////////////////////////////////////
 // New Set Form
 ////////////////////////////////////////////////////////////////////////////////
 
-#new-set-form, #recent-sets-by-day { margin: 0 6px 12px; }
+#new-set-form, #recent-sets-by-day { @include inset-component };
 
 #weight-input-label, #reps-input-label {
   @include inline-block;

diff --git a/templates/new_exercise.html b/templates/new_exercise.html
@@ -0,0 +1,18 @@
+<_within file="application.html">
+
+<div id="header">
+  <h1>New Exercise</h1>
+  <div class="header-buttons left">
+    <button type="button" id="back-button" class="button-left">Back</button>
+  </div>
+</div>
+
+<div id="content">
+  <div id="new-exercise-form">
+    <input id="exercise-name-input" type="text" placeholder="Exercise Name" required />
+
+    <button id="new-exercise-form-button">Add Exercise</button>
+  </div>
+</div>
+
+</_within>