Visual Identity

logos and other images were added in other to represent the visual identity of the project.

biomixer_interface/back_end/static/css/dropzone_show_hide.css

@@ -0,0 +1,38 @@
+.d-container {
+    position: relative;
+    width: 50%;
+}
+
+.d-image {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.d-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: #008CBA;
+    overflow: hidden;
+    width: 0;
+    height: 100%;
+    transition: .5s ease;
+}
+
+.d-container:hover .d-overlay {
+    width: 100%;
+}
+
+.d-text {
+    white-space: nowrap;
+    color: white;
+    font-size: 20px;
+    position: absolute;
+    overflow: hidden;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+}

biomixer_interface/back_end/static/css/modifiers.css

@@ -1,7 +1,9 @@
 .hidden_element {
     visibility: hidden;
+    display: none;
 }
 
 .visible_element {
     visibility: visible;
+    display: inline;
 }

biomixer_interface/back_end/static/dropzone/myDzone.js

@@ -5,6 +5,7 @@ const myDropzone = new Dropzone("#my-dropzone", {
     acceptedFiles: '.csv',
     autoProcessQueue: false,
     addRemoveLinks: true,
+    display: true
 })
 
 function process() {

biomixer_interface/back_end/static/js/extraFunctions.js

@@ -123,4 +123,9 @@ function linearToggleProgressbar(){
         toggleProgressBarItem("m4");
         toggleProgressBarItem("m5");
     }
+}
+
+const d_zone = {
+    state : [ 'hidden_element', 'visible_element'],
+    current : 0
 }

biomixer_interface/back_end/templates/home.html

@@ -1,11 +1,10 @@
 {% extends 'base.html' %}
-{% load static %}
 
 {% block HEAD %}
     <title> Bio Mixer</title>
-    <link rel="stylesheet" href="{% static 'css/modifiers.css' %}">
-    <link rel="stylesheet" href="{% static 'dropzone/dist/basic.css' %}">
-    <link rel="stylesheet" href="{% static 'dropzone/dist/dropzone.css' %}">
+    <link rel="stylesheet" href="../static/css/modifiers.css">
+    <link rel="stylesheet" href="../static/dropzone/dist/basic.css">
+    <link rel="stylesheet" href="../static/dropzone/dist/dropzone.css">
 {% endblock %}
 {%  block body%}
 
@@ -21,6 +20,13 @@ <h1 class="display-2">Bio Mixe<span class="vim-caret">r</span></h1>
                     </div>
                     <!-- Title -->
                     <div class="lead mb-3 text-mono text-success">Bio Mixer interface 1.1</div>
+                    <!-- Description -->
+                    <div class="text-darkgrey text-mono my-2">Welcome to Bio Mixer. A new experience in Material Fabrication</div>
+                    <!-- Client -->
+                    <p class="text-grey text-spacey">
+                        FabLab Uchile Prototype
+                    </p>
+
                     <div class="text-mono">
                         <!-- Button 1 -->
                         <a href="{% url 'back_end:library' %}"
@@ -35,22 +41,29 @@ <h1 class="display-2">Bio Mixe<span class="vim-caret">r</span></h1>
                         </a>
 
                         <!-- Button 3 -->
-                        <a id="new_library" onclick=""
+                        <a id="new_library" onclick="makeVisible('dropzone')"
                            class="btn btn-fab-purple btn-shadow px-3 my-2 ml-0 ml-sm-1 text-left">
                             Import a Recipe
                         </a>
                     </div>
-
-                    <!-- Description -->
-                    <div class="text-darkgrey text-mono my-2">Welcome to Bio Mixer. A new experience in Material Fabrication</div>
-                    <!-- Client -->
-                    <p class="mt-5 text-grey text-spacey">
-                        FabLab Uchile Prototype
-                    </p>
                 </div>
                 <div class="col-xl-4">
-                    <div class="container">
-                        <div id="dropzone" class="hidden_element"></div>
+                    <div id="dropzone" class="container hidden_element">
+                        <h1>Upload Zone</h1>
+                        <p>Upload your file here, you can drag an drop it!</p>
+                        <!-- DROP ZONE-->
+                        <form   action="/file-upload"
+                                class="dropzone"
+                                id="my-dropzone">
+
+                            <div class="fallback">
+                                <input name="file" type="file" multiple/>
+                            </div>
+                            {% csrf_token %}
+                        </form>
+                        <br>
+                        <span style="height: 6em"></span>
+                        <span id="dzone-submit" class="button btn-success p-2 m-4 rounded-pill" onclick="process()">Subir Archivos</span>
                     </div>
                 </div>
             </div>
@@ -70,24 +83,7 @@ <h1></h1>
 {% endblock %}
 
 {% block JS %}
-    <script src="{% static 'js/jquery.js' %}"></script>
-    <script>
-        var clicked = false;
-        $(document).ready(function(){
-                $("#new_library").click(function(){
-                    if (!clicked) {
-                        $("#dropzone").load("{% url 'back_end:dzone' %}")
-                        $("#dropzone").removeClass('hidden_element');
-                        $("#dropzone").addClass('visible_element');
-                        clicked = true;
-                    }
-                    else{
-                        $("#dropzone").load("")
-                        $("#dropzone").removeClass('visible_element');
-                        $("#dropzone").addClass('hidden_element');
-                        clicked = false;
-                    }
-                });
-        });
-    </script>
-{% endblock %}
+    <script src="../static/dropzone/dist/dropzone.js"></script>
+    <script src="../static/dropzone/myDzone.js"></script>
+    <script src="../static/js/extraFunctions.js"></script>
+{% endblock %}

biomixer_interface/back_end/templates/preparing.html

@@ -40,7 +40,6 @@ <h3 class="mb-5"> Preparing the Mix </h3>
                         <div class="mb-1">
                             <p id="validate" style="display: none">hello</p>
                         </div>
-                        <span class="btn btn-primary" onclick="validateInputs('proportion')"> Validate </span>
                         <input id="send" class="btn btn-fab-purple align-self-end" type="submit" value="Mix">
                     </li>
                 </ul>