Search form implementation

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index a55e5d1bbd4daf43ac40205571658f6628409280..9fa74ec31954158347489d5f17e6565c85913b21 100644 (file)
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -2,8 +2,16 @@
 // Require all the modules
 //
 var LangSelector = require('./modules/lang-selector');
+var OpenButton = require('./modules/open-button');
+var CloseButton = require('./modules/close-button');
+var CloseEscape = require('./modules/close-escape');
+var Search = require('./modules/search');
 
 //
 // Init all the modules
 //
 window[LangSelector] = new LangSelector();
+window[OpenButton] = new OpenButton();
+window[CloseButton] = new CloseButton();
+window[CloseEscape] = new CloseEscape();
+window[Search] = new Search();

diff --git a/app/static/src/js/modules/close-button.js b/app/static/src/js/modules/close-button.js
new file mode 100644 (file)
index 0000000..c4e81df
--- /dev/null
+++ b/app/static/src/js/modules/close-button.js
@@ -0,0 +1,35 @@
+var OpenButton = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+OpenButton.prototype.init = function() {
+
+    var that = this;
+
+    $('[data-close-button]').click(that.open);
+
+};
+
+OpenButton.prototype.open = function(e) {
+
+    e.preventDefault();
+
+    var target = $(this).attr('data-close-button'),
+        $target = $('[data-close-button-target="'+target+'"]');
+
+    if($target.length > 0) {
+
+        $target.removeClass('open');
+
+    }
+
+    return false;
+
+}
+
+module.exports = OpenButton;

diff --git a/app/static/src/js/modules/close-escape.js b/app/static/src/js/modules/close-escape.js
new file mode 100644 (file)
index 0000000..b906889
--- /dev/null
+++ b/app/static/src/js/modules/close-escape.js
@@ -0,0 +1,28 @@
+var CloseEscape = function() {
+
+    this.$elements = $('[data-close-escape]');
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+CloseEscape.prototype.init = function() {
+
+    var that = this;
+
+    $(document).keyup(function(e) {
+
+        if(e.keyCode === 27) {
+
+            that.$elements.removeClass('open');
+
+        }
+
+    });
+
+};
+
+module.exports = CloseEscape;

diff --git a/app/static/src/js/modules/open-button.js b/app/static/src/js/modules/open-button.js
new file mode 100644 (file)
index 0000000..5a3f49e
--- /dev/null
+++ b/app/static/src/js/modules/open-button.js
@@ -0,0 +1,35 @@
+var CloseButton = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+CloseButton.prototype.init = function() {
+
+    var that = this;
+
+    $('[data-open-button]').click(that.close);
+
+};
+
+CloseButton.prototype.close = function(e) {
+
+    e.preventDefault();
+
+    var target = $(this).attr('data-open-button'),
+        $target = $('[data-open-button-target="'+target+'"]');
+
+    if($target.length > 0) {
+
+        $target.addClass('open');
+
+    }
+
+    return false;
+
+}
+
+module.exports = CloseButton;

diff --git a/app/static/src/js/modules/search.js b/app/static/src/js/modules/search.js
new file mode 100644 (file)
index 0000000..644fffb
--- /dev/null
+++ b/app/static/src/js/modules/search.js
@@ -0,0 +1,35 @@
+var Search = function() {
+
+    this.$element = $('#searchBtn');
+    this.$search = $('#search');
+    this.$searchInput = this.$search.find('input[type="text"]');
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+Search.prototype.init = function() {
+
+    var that = this;
+
+    that.$element = $('#searchBtn');
+    that.$search = $('#search');
+
+
+    that.$element.click(function(e) {
+
+        e.preventDefault();
+
+        that.$searchInput.focus();
+
+        return false;
+
+    });
+
+
+};
+
+module.exports = Search;

diff --git a/app/static/src/sass/modules/_all.scss b/app/static/src/sass/modules/_all.scss
index d52ffebd14ae8e89310f8612f8141e500d7d4b01..be9c2c5530836f0944e1f0b87e19267f1eacae5b 100755 (executable)
--- a/app/static/src/sass/modules/_all.scss
+++ b/app/static/src/sass/modules/_all.scss
@@ -4,6 +4,7 @@
 @import "navs/nav-footer";
 
 @import 'breadcrumb';
+@import 'search';
 @import 'lang-switcher';
 @import 'dashed';
 @import 'dotted';

diff --git a/app/static/src/sass/modules/_search.scss b/app/static/src/sass/modules/_search.scss
new file mode 100644 (file)
index 0000000..9f1578e
--- /dev/null
+++ b/app/static/src/sass/modules/_search.scss
@@ -0,0 +1,88 @@
+$module: ".search";
+
+#{$module} {
+
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    background: rgba(255,255,255, .95);
+
+    display: block;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+
+    @include transition(opacity .5s ease-in-out, height 0s .5s);
+
+    &.open {
+
+        height: 100%;
+        display: table;
+        opacity: 1;
+        @include transition(opacity .5s ease-in-out, height 0s);
+
+    }
+
+    &__close {
+
+        position: absolute;
+        top: 1rem;
+        right: 1rem;
+        z-index: 2;
+
+    }
+
+    &__container {
+
+        display: table;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 1;
+
+    }
+
+    &__content {
+
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+
+    }
+
+    input[type="text"] {
+
+        border: 0;
+        outline: none;
+        background: none;
+        border-bottom: 1px solid $color-black;
+
+        padding: 1rem 3rem 1rem 0;
+        width: 100%;
+
+        @include font-size(xxl);
+        @include typeface(serif);
+        font-weight: weight(regular);
+
+    }
+
+    button[type="submit"] {
+
+        position: absolute;
+        right: 1rem;
+        top: 1rem;
+
+        border: 0;
+        background: none;
+        outline: 0;
+        cursor: pointer;
+
+        @include font-size(xxl);
+
+    }
+
+}

diff --git a/app/templates/includes/search_form.html b/app/templates/includes/search_form.html
index 37b0011e0a73f7bbdffdbb88a7389f613155d0a8..97960fe0f4f4ff8f1ef80090e2f1fb8520a5ef37 100644 (file)
--- a/app/templates/includes/search_form.html
+++ b/app/templates/includes/search_form.html
@@ -1,24 +1,21 @@
 {% load mezzanine_tags i18n %}
-<form action="{% url "search" %}" role="search">
-    <div class="sticked-form">
-        <input class="form-control" placeholder="{% trans "Search" %}" type="text" name="q" value="{{ request.REQUEST.q }}">
-        {% if search_model_choices %}
-            {% if search_model_choices|length == 1 %}
-            <input type="hidden" name="type" value="{{ search_model_choices.0.1 }}">
-            {% else %}
-            <div class="select  search__form__select">
-                <select class="select" name="type">
-                    <option value="">{% trans "Everything" %}</option>
-                    {% for verbose_name, model in search_model_choices %}
-                    <option value="{{ model }}"
-                        {% if model == request.REQUEST.type  %}selected{% endif %}>
-                        {{ verbose_name }}
-                    </option>
-                    {% endfor %}
-                </select>
+<div class="search" id="search" data-open-button-target="search" data-close-button-target="search" data-close-escape>
+    <div class="search__close">
+        <a href="#" data-close-button="search" aria-hidden="true"><i class="fa fa-close"></i></a>
+    </div>
+    <div class="search__container">
+        <div class="search__content">
+            <div class="container">
+                <div class="col-md-10 col-md-push-1">
+                    <form action="{% url "search" %}" role="search">
+                        <input class="form-control" placeholder="{% trans "Type something" %}" type="text" name="q" value="{{ request.GET.q }}">
+                        <button type="submit">
+                            <i class="fa fa-search" aria-hidden="true"></i>
+                        </button>
+                    </form>
+                </div>
+
             </div>
-            {% endif %}
-        {% endif %}
-        <input type="submit" class="btn" value="{% trans "Go" %}">
+        </div>
     </div>
-</form>
+</div>

diff --git a/app/templates/pages/menus/header.html b/app/templates/pages/menus/header.html
index 648614624fafb2da380c02a4f8ee9d98b17c4a06..db5ad011fb740de9df6d1a149ef83624910fd33e 100644 (file)
--- a/app/templates/pages/menus/header.html
+++ b/app/templates/pages/menus/header.html
@@ -30,7 +30,7 @@
                     <a href="http://manifeste.ircam.fr" target="_blank" title="{% trans 'Manifest' %}"><img src="{% static "img/logo-manifest.png" %}" width="83" height="65" /></a>
                 </li>
                 <li class="nav-header__item nav-header__item--special nav-header__item--centered">
-                    <a href="" class="fsxl"><i class="fa fa-search" aria-hidden="true"></i></a>
+                    <a href="#" class="fsxl" data-open-button="search" id="searchBtn"><i class="fa fa-search" aria-hidden="true"></i></a>
                 </li>
             </ul>
             {% endif %}