Recherche via Elasticsearch

.travis.yml

@@ -8,6 +8,7 @@ addons:
     - mysql-client-5.6
     - language-pack-fr
     - unzip
+    - oracle-java8-set-default
 
 git:
   depth: 1
@@ -21,7 +22,7 @@ env:
   global:
     - secure: "azmDZZQZzf88zpbkYpLpxI66vpEVyv+kniW0QdWAt4qlys8P5OcO3VJBR5YT85vlvnjN9b6raWQAL1ymee0WmVdTmzXed8XjZv7t9QXVw7pfezxMKlEftVp/4Cu4wtvbew0ViZXNWV2hNXHzEqlhgnoIOq94i0UzZ7grMrI0xm0="
   matrix:
-    - TEST_APP="-e back_mysql -- zds.member zds.mp zds.utils zds.forum zds.gallery zds.pages zds.search zds.featured zds.notification"
+    - TEST_APP="-e back_mysql -- zds.member zds.mp zds.utils zds.forum zds.gallery zds.pages zds.featured zds.notification zds.searchv2"
     - TEST_APP="-e back_mysql -- zds.tutorialv2"
     - TEST_APP="-e front"
 
@@ -45,6 +46,10 @@ cache:
     - $HOME/.texlive
     - $HOME/bin
 
+before_install:
+  # see https://docs.travis-ci.com/user/database-setup/#Installing-specific-versions-of-ElasticSearch
+  - curl -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.2.0.deb && sudo dpkg -i --force-confnew elasticsearch-5.2.0.deb && sudo service elasticsearch start
+
 before_script:
   # MySQL config
   - sudo sed -i'' 's/\[client\]/\[client\]\ndefault-character-set=utf8mb4/' /etc/mysql/my.cnf

Gulpfile.js

@@ -61,7 +61,6 @@ gulp.task('js', () =>
         'assets/js/dropdown-menu.js',
         'assets/js/editor.js',
         'assets/js/featured-resource-preview.js',
-        'assets/js/find-solved-topics.js',
         'assets/js/form-email-username.js',
         'assets/js/gallery.js',
         'assets/js/jquery-tabbable.js',

Makefile

@@ -34,6 +34,13 @@ reset:
 shell:
 	python manage.py shell
 
+index-all:
+	python manage.py es_manager index_all
+
+index-flagged:
+	python manage.py es_manager index_flagged
+
+
 ## back-utils
 clean-back:
 	find . -name '*.pyc' -exec rm {} \;
@@ -89,6 +96,8 @@ help:
 	@echo "  doc               to generate the html documentation"
 	@echo "  fixtures          to load every fixtures"
 	@echo "  generate-pdf      to regenerate all PDFs"
+	@echo "  index-all         to setup and (re)index all things for search"
+	@echo "  index-flagged     to index flagged things for search"
 	@echo "  help              to get this help"
 	@echo "  install-back      to install backend dependencies"
 	@echo "  install-front     to install frontend dependencies"

assets/scss/components/_search-box.scss

@@ -0,0 +1,147 @@
+.search-box {
+    background: white;
+    position: relative;
+    margin: 30px auto 0;
+    max-width: 820px;
+
+    form {
+        display: flex;
+    }
+
+    label, input {
+        box-sizing: border-box;
+        display: inline-block;
+        line-height: 50px;
+        height: 50px;
+    }
+
+    label {
+        text-align: right;
+        padding: 0 5px;
+        font-size: 2rem;
+        font-weight: 300;
+        margin-left: 50px;
+    }
+
+    input {
+        font-size: 2rem;
+        border: none;
+        font-weight: 300;
+        flex: 1;
+    }
+
+    button[type=submit] {
+        background-color: #FFF !important;
+        width: 50px;
+        height: 50px;
+
+        &:hover, &:focus {
+            background-color: #CCC !important;
+        }
+
+        &:after {
+            margin: 16px !important;
+            @include sprite-position($search);
+            @include sprite-width($search);
+            @include sprite-height($search);
+        }
+    }
+
+    &:before {
+        content: '';
+        position: absolute;
+        bottom: -6px;
+        left: -28px;
+
+        background: url('../images/home-clem.png');
+        background-size: 100%;
+        width: 68px;
+        height: 134px;
+
+        @at-root {
+            body.vc-clem-christmas.home .search-box::before {
+                background-image: url('../images/home-clem-christmas.png');
+            }
+
+            body.vc-clem-halloween.home .search-box::before {
+                background-image: url('../images/home-clem-halloween.png');
+                width: 160px;
+                left: -80px;
+            }
+        }
+    }
+
+    .control-group {
+        display: inline-flex;
+        width: 100%;
+
+        .controls {
+            width: 100%;
+        }
+
+        input {
+            padding: 0;
+            width: 100% !important;
+        }
+    }
+}
+
+.search-results {
+    .content-item {
+        margin-left: 0;
+    }
+}
+
+.search-filters {
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 820px;
+    padding-left: 0;
+    text-align: center;
+    list-style: none;
+
+    li {
+        display: inline-flex;
+        padding-right: 16px;
+
+        input[type=checkbox] {
+            margin-top: 8px;
+        }
+    }
+
+    label {
+        color: white;
+    }
+}
+
+@media only screen and #{$media-mobile} {
+    .search-box {
+        margin: 30px 0 0!important;
+
+        padding-left: 40px;
+
+        label {
+            display: none;
+        }
+
+        &:before {
+            left: -46px;
+        }
+    }
+
+    .search-filters {
+        text-align: left;
+        padding-left: 10px;
+
+        li {
+            display: list-item;
+        }
+    }
+}
+
+@media only screen and #{$media-mobile-tablet} {
+    .search-box {
+        margin: 30px 40px 0;
+    }
+}
+

assets/scss/components/_topic-list.scss

@@ -192,7 +192,9 @@
     }
 
     .highlighted {
-        background-color: rgba(255, 255, 100, 0.5);
+        background-color: rgba(255, 255, 100, 0.4);
+        padding: 0 3px;
+        border-radius: 2px;
     }
 }
 

assets/scss/main.scss

@@ -62,12 +62,12 @@
 @import "components/content-item";
 @import "components/editor";
 @import "components/featured-item";
-@import "components/home-search-box";
 @import "components/markdown-help";
 @import "components/mobile-menu";
 @import "components/modals";
 @import "components/pagination";
 @import "components/pygments";
+@import "components/search-box";
 @import "components/tags";
 @import "components/tooltips";
 @import "components/topic-list";
@@ -78,9 +78,11 @@
 /*------------------------
 9. Pages
 ------------------------*/
+@import "pages/flexpage";
 @import "pages/home";
 @import "pages/gallery";
 @import "pages/api";
+@import "pages/search";
 @import "pages/tutorial-help";
 @import "pages/tutorial-history";
 

assets/scss/pages/_flexpage.scss

@@ -0,0 +1,38 @@
+$content-width: 1145px;
+
+.flexpage {
+    .main {
+        display: block;
+        height: auto;
+        width: auto;
+        margin: 0;
+        padding: 0;
+    }
+
+    #content {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+    }
+
+    .sub-header{
+        display: none;
+    }
+
+    .flexpage-wrapper {
+        max-width: $content-width;
+        margin: 0 auto;
+    }
+
+    .flexpage-header {
+        border-bottom: solid 1px white;
+        background-color: #19516b; // fallback for older browser
+        background: #19516b radial-gradient(at top, rgba(255,255,255,0.1),rgba(0,0,0,0) 60%);
+    }
+}
+
+@media only screen and #{$media-mobile-tablet} {
+    .flexpage-wrapper {
+        padding: 20px 10px;
+    }
+}