Added cvs import & advanced controls

Author: LMelaia

css/index.css

@@ -44,7 +44,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 }
 
 .basic-cs {
-   background-color: lightsteelblue;
+   background-color: lightgreen;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    margin-left: -16px;
@@ -54,7 +54,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 }
 
 .advanced-cs {
-   background-color: lightgrey;
+   background-color: lightblue;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    margin-left: -16px;

index.html

@@ -75,7 +75,22 @@
 
                     <!--                    Basic Controls                  -->
                     <div id="basic-controls">
-                        
+                        <form>
+                            <div class="form-group">
+                                <label for="upload">Select .csv files:</label>
+                                <input class="btn btn-default" id="upload" type=file accept=".csv" name="files[]" size=30 multiple="multiple">
+                            </div>
+                            <div class="form-group">
+                                <label for="first-row-header">Make first row column headers:</label>
+                                <input id="first-row-header" type="checkbox" name="fr-headers"><br>
+                            </div>
+                            <div class="form-group">
+                                <label for="first-row-include">Include first row along with colum headers:</label>
+                                <input id="first-row-include" type="checkbox" name="fr-include"><br>
+                            </div>
+                        </form>
+                        <button id="go" class="btn btn-primary">Go!</button>
+                        <br/><br/>
                     </div>
                 </div>
                 <div class="col-md-3 text-center controls">
@@ -88,7 +103,29 @@
 
                     <!--                  Advanced Controls                 -->
                     <div id="advanced-controls">
-                        
+                        <form>
+                            <div class="form-group">
+                                <label for="encoding">Encoding:</label>
+                                <select id="encoding" name="encoding">
+                                    <option value="utf-8">UTF-8</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="column-separator">Column separator</label>
+                                <select id="column-separator" name="column-separator">
+                                    <option value="comma">Comma (,)</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="max-rows">Max rows:</label>
+                                <input id="max-rows" type="number" name="max-rows" min="1">
+                            </div>
+                            <div class="form-group">
+                                <label for="quotes">Treat quoted text as a single cell:</label>
+                                <input id="quotes" type="checkbox" name="quotes"><br>
+                            </div>
+                            <br/><br/>
+                        </form>
                     </div>
                 </div>
             </div>

js/index.js

@@ -15,11 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+/* Semi constant values */
+SM_SCREEN_SIZE = 768;
+
 /**
  * Basic controls toggle button callback.
  */
 $("#basic-controls-toggle").click(function() {
-  toggleBasic();
+    if(isSM())
+        toggleBasic();
 });
 
 /**
@@ -53,7 +57,8 @@ function toggleBasic(){
  * Advanced controls toggle button callback.
  */
 $("#advanced-controls-toggle").click(function() {
-  toggleAdvanced();
+    if(isSM())
+        toggleAdvanced();
 });
 
 /**
@@ -81,4 +86,8 @@ function toggleAdvanced(){
     } else {
         showAdvanced();
     }
+}
+
+function isSM(){
+    return $(window).width() < SM_SCREEN_SIZE;
 }

nbproject/customs.json

@@ -3,6 +3,12 @@
     "attributes": {
         "integrity": {
             "context": "link"
+        },
+        "size": {
+            "context": "input"
+        },
+        "for": {
+            "context": "input"
         }
     }
 }