Adds Webpack support and removes the use for Grunt

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

use scss

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

fix build, add babel, fix annotations

fixes (and improvements !) for baggy

add live reload & environments & eslint & theme fixes

16 files changed, 1089 insertions, 48 deletions

diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
new file mode 100644
index 00000000..7d0bdac7
--- /dev/null
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -0,0 +1,174 @@
+/* ==========================================================================
+   Article
+   ========================================================================== */
+
+#article {
+  font-size: 20px;
+  margin: 0 auto;
+  max-width: 45em;
+
+  article {
+    color: #424242;
+    font-size: 18px;
+    line-height: 1.7em;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: #212121;
+
+      strong {
+        font-weight: 500;
+      }
+    }
+
+    h6 {
+      font-size: 1.2rem;
+    }
+
+    h5 {
+      font-size: 1.6rem;
+    }
+
+    h4 {
+      font-size: 1.9rem;
+    }
+
+    h3 {
+      font-size: 2.2rem;
+    }
+
+    h2 {
+      font-size: 2.5rem;
+    }
+
+    h1 {
+      font-size: 2.7rem;
+    }
+
+    a {
+      border-bottom: 1px dotted #03a9f4;
+      text-decoration: none;
+    }
+
+    a:hover {
+      border-bottom-style: solid;
+    }
+
+    ul {
+      padding-left: 30px;
+    }
+
+    ul,
+    ul li {
+      list-style-type: disc;
+    }
+
+    blockquote {
+      font-style: italic;
+    }
+
+    strong {
+      font-weight: bold;
+    }
+  }
+
+  img,
+  figure {
+    max-width: 100%;
+    height: auto;
+  }
+
+  pre {
+    box-sizing: border-box;
+    margin: 0 0 1.75em;
+    border: #e3f2fd 1px solid;
+    width: 100%;
+    padding: 10px;
+    font-family: monospace;
+    font-size: 0.8em;
+    white-space: pre;
+    overflow: auto;
+    background: #f5f5f5;
+    border-radius: 3px;
+  }
+
+  > header > h1 {
+    font-size: 2em;
+    margin: 2.1rem 0 0.68rem;
+  }
+
+  aside {
+    .tools {
+      font-size: 0.8em;
+      display: flex;
+      flex-flow: row wrap;
+      margin: 0 auto;
+
+      li {
+        display: inline-flex;
+        vertical-align: middle;
+      }
+
+      a {
+        color: #000;
+        text-decoration: none;
+      }
+    }
+
+    #list {
+      float: right;
+      margin: 0 15px 10px;
+    }
+
+    .chip {
+      background-color: $blueAccentColor;
+      padding: 0 15px 0 10px;
+      margin: auto 2px;
+
+      a,
+      i {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.reader-mode {
+  width: 95px !important;
+  transition: width 0.2s ease;
+
+  .collapsible-body {
+    height: 0;
+    overflow: hidden;
+  }
+
+  span {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+}
+
+.reader-mode:hover {
+  width: 240px !important;
+
+  .collapsible-body {
+    height: auto;
+  }
+
+  span {
+    opacity: 1;
+  }
+}
+
+.progress {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 3px;
+  margin: 0;
+  z-index: 9999;
+}
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
new file mode 100644
index 00000000..18ef6e60
--- /dev/null
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -0,0 +1,186 @@
+/* ==========================================================================
+   Cards
+   ========================================================================== */
+
+main {
+  #content {
+    padding: 0 0.5rem;
+  }
+
+  ul.row {
+    padding: 0 0.75rem;
+  }
+}
+
+.data .card .card-body {
+  height: 19em;
+  overflow: hidden;
+}
+
+.card {
+  .card-content .card-title,
+  .card-reveal .card-title {
+    line-height: 22.8px;
+    max-height: 80px;
+    font-size: 19px;
+    font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #313131;
+  }
+
+  .card-content .activator,
+  .card-reveal .activator {
+    cursor: pointer;
+    font-family: "Material Icons";
+  }
+
+  .card-content i.right,
+  .card-reveal i.right {
+    margin-left: 0;
+  }
+
+  .card-content .original {
+    line-height: 24px;
+    font-size: 15px;
+  }
+
+  .card-entry-labels {
+    position: absolute;
+    top: 10px;
+    z-index: 90;
+    max-width: 50%;
+  }
+
+  .card-entry-labels-hidden {
+    margin: 2.5px auto;
+  }
+
+  .card-entry-labels-hidden li {
+    display: inline-block;
+    background-color: $blueAccentColor;
+    margin: 0 5px;
+    padding: 5px 12px;
+    border-radius: 3px;
+    color: #fff;
+    max-height: 2em;
+    max-width: calc(100% - 15px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .card-entry-labels-hidden li {
+    display: inline-block;
+    background-color: $blueAccentColor;
+    margin: 0 5px;
+    padding: 5px 12px;
+    border-radius: 3px;
+    color: #fff;
+    max-height: 2em;
+    max-width: calc(100% - 15px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .card-content .estimatedTime {
+    margin-bottom: 10px;
+  }
+
+  .card-action {
+    padding: 10px 5px 10px 15px;
+
+    ul.links {
+      margin: 0;
+      font-size: 24px;
+      line-height: 24px;
+    }
+
+    a {
+      color: #fff;
+      margin: 0;
+    }
+
+    a:hover {
+      color: #fff;
+    }
+
+    ul.tools li a.tool {
+      margin-right: 5px !important;
+    }
+
+    .reading-time {
+      display: inline-flex;
+      vertical-align: middle;
+    }
+  }
+
+  .card-entry-labels li,
+  .card-tag-labels li {
+    margin: 10px 10px 10px auto;
+    padding: 5px 12px 5px 16px !important;
+    background-color: $blueAccentColor;
+    border-radius: 0 3px 3px 0;
+    color: #fff;
+    cursor: default;
+    max-height: 2em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .card-image {
+    height: 10em;
+  }
+
+  .card-fullimage {
+    height: 13.5em;
+  }
+
+  .card-image .preview,
+  .card-fullimage .preview {
+    height: 14em;
+    background: no-repeat 50%/cover;
+  }
+
+  &.sw {
+    max-width: 370px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+a.original {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+}
+
+.card-entry-tags a,
+.card-entry-labels a,
+.card-tag-labels a,
+.card-entry-labels-hidden a,
+#list .chip a {
+  text-decoration: none;
+  font-weight: normal;
+  color: #fff;
+}
+
+.card-stacked {
+  &:hover ul.tools-list {
+    display: block;
+  }
+
+  ul.tools-list {
+    display: none;
+  }
+}
+
+.quickstart .card .card-action a,
+.quickstart .card .card-action a:hover {
+  color: #fff !important;
+}
+
+.settings .div_tabs {
+  padding-bottom: 15px;
+}
diff --git a/app/Resources/static/themes/material/css/entries.scss b/app/Resources/static/themes/material/css/entries.scss
new file mode 100644
index 00000000..b6a46a9e
--- /dev/null
+++ b/app/Resources/static/themes/material/css/entries.scss
@@ -0,0 +1,87 @@
+/* ==========================================================================
+ * Entries
+ * ========================================================================== */
+
+.results {
+  height: 1em;
+
+  .nb-results,
+  .pagination {
+    margin: 15px 15px 0;
+  }
+
+  .nb-results {
+    display: inline-flex;
+  }
+
+  a {
+    color: #444;
+  }
+}
+
+.pagination {
+  float: right;
+
+  ul {
+    margin: 0 !important;
+
+    .prev.disabled,
+    .next.disabled {
+      display: none;
+    }
+  }
+
+  li {
+    padding: 0;
+  }
+
+  a {
+    padding: 0 10px;
+    height: 30px;
+    display: block;
+  }
+
+  .disabled {
+    margin-right: 10px;
+    margin-left: 10px;
+  }
+
+  li.active span {
+    padding: 0 10px;
+    height: 30px;
+    display: block;
+    color: #fff;
+  }
+}
+
+.page-footer .footer-copyright {
+  min-width: 50px;
+  height: auto !important;
+  line-height: 1em !important;
+
+  p {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.picker__date-display {
+  display: none;
+}
+
+footer {
+  &.page-footer {
+    margin-top: 10px;
+    padding-top: 0;
+  }
+
+  .row {
+    margin-bottom: 10px;
+  }
+}
diff --git a/app/Resources/static/themes/material/css/filters.scss b/app/Resources/static/themes/material/css/filters.scss
new file mode 100644
index 00000000..299dad3d
--- /dev/null
+++ b/app/Resources/static/themes/material/css/filters.scss
@@ -0,0 +1,15 @@
+/* ==========================================================================
+ * Filters slider
+ * ========================================================================== */
+
+#filters {
+  button {
+    padding: 0;
+    width: 100%;
+  }
+
+  div.with-checkbox {
+    height: 3rem;
+    margin-top: 0;
+  }
+}
diff --git a/app/Resources/static/themes/material/css/fonts.scss b/app/Resources/static/themes/material/css/fonts.scss
new file mode 100644
index 00000000..743f1a84
--- /dev/null
+++ b/app/Resources/static/themes/material/css/fonts.scss
@@ -0,0 +1,13 @@
+/* ==========================================================================
+ * Fonts
+ * ========================================================================== */
+
+/**
+ * Icomoon
+ */
+@font-face {
+  font-family: icomoon;
+  src: url("~icomoon-free-npm/Font/IcoMoon-Free.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/app/Resources/static/themes/material/css/icons.scss b/app/Resources/static/themes/material/css/icons.scss
new file mode 100644
index 00000000..268e6dca
--- /dev/null
+++ b/app/Resources/static/themes/material/css/icons.scss
@@ -0,0 +1,185 @@
+/* ==========================================================================
+ * Icons
+ * ========================================================================== */
+
+/**
+ *
+ * Material icons
+ *
+ */
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+
+  .md-18 {
+    font-size: 18px;
+  }
+
+  .md-24 {
+    font-size: 24px;
+  }
+
+  .md-36 {
+    font-size: 36px;
+  }
+
+  .md-48 {
+    font-size: 48px;
+  }
+
+  .md-dark {
+    color: rgba(0, 0, 0, 0.54);
+
+    .md-inactive {
+      color: rgba(0, 0, 0, 0.26);
+    }
+  }
+
+  .md-light {
+    color: rgba(255, 255, 255, 1);
+
+    .md-inactive {
+      color: rgba(255, 255, 255, 0.3);
+    }
+  }
+}
+
+/**
+ *
+ * Icomoon icons
+ *
+ */
+[class^="icon-"]::before,
+[class*=" icon-"]::before {
+  font-family: icomoon;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  background-size: 24px;
+
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  font-feature-settings: "liga";
+}
+
+.icon-eye::before {
+  content: "\e9ce";
+}
+
+.icon-no-eye::before {
+  content: "\e9d1";
+}
+
+.icon-calendar::before {
+  content: "\e953";
+}
+
+.icon-mail::before {
+  content: "\ea86";
+}
+
+.icon-time::before {
+  content: "\e952";
+}
+
+a.icon-image {
+  background-repeat: no-repeat;
+  padding-right: 0.4em !important;
+  padding-left: 1em !important;
+  margin-left: 25px;
+
+  &::before {
+    content: "";
+    display: block;
+    width: 24px;
+    height: 24px;
+    float: left;
+    margin: 0 6px 0 0;
+  }
+
+  &.carrot::before {
+    background: url("../../_global/img/icons/carrot-icon--black.png") no-repeat center/90%;
+  }
+
+  &.diaspora::before {
+    background: url("../../_global/img/icons/diaspora-icon--black.png") no-repeat center/80%;
+  }
+
+  &.unmark::before {
+    background: url("../../_global/img/icons/unmark-icon--black.png") no-repeat center/80%;
+  }
+
+  &.shaarli::before {
+    background: url("../../_global/img/icons/shaarli.png") no-repeat center/80%;
+  }
+}
+
+.icon-google-plus2::before {
+  content: "\ea89";
+}
+
+.icon-facebook2::before {
+  content: "\ea8d";
+}
+
+.icon-twitter::before {
+  content: "\ea96";
+}
+
+.icon-apple::before {
+  content: "\eabf";
+}
+
+.icon-android::before {
+  content: "\eac1";
+}
+
+.icon-chrome::before {
+  content: "\eae5";
+}
+
+.icon-firefox::before {
+  content: "\eae6";
+}
+
+.icon-link::before {
+  content: "\e9cb";
+}
+
+footer [class^="icon-"],
+footer [class*=" icon-"] {
+  font-size: 2em;
+  transition: text-shadow 0.2s ease;
+  padding-right: 10px;
+}
+
+footer [class^="icon-"]:hover,
+footer [class*=" icon-"]:hover {
+  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
diff --git a/app/Resources/static/themes/material/css/index.scss b/app/Resources/static/themes/material/css/index.scss
new file mode 100644
index 00000000..285a6504
--- /dev/null
+++ b/app/Resources/static/themes/material/css/index.scss
@@ -0,0 +1,17 @@
+@import 'variables';
+
+/* Style */
+@import 'article';
+@import 'cards';
+@import 'entries';
+@import 'filters';
+@import 'layout';
+@import 'nav';
+@import 'sidenav';
+@import 'various';
+
+/* Tools */
+@import 'fonts';
+@import 'icons';
+@import 'print';
+@import 'media_queries';
diff --git a/app/Resources/static/themes/material/css/layout.scss b/app/Resources/static/themes/material/css/layout.scss
new file mode 100755
index 00000000..8b8b06e6
--- /dev/null
+++ b/app/Resources/static/themes/material/css/layout.scss
@@ -0,0 +1,50 @@
+/* ==========================================================================
+   Layout
+   ========================================================================== */
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background: #fafafa;
+
+  &.login main {
+    padding: 0;
+    min-height: 100vh;
+  }
+}
+
+.border-bottom {
+  border-bottom: 1px solid #ddd;
+}
+
+nav,
+main,
+footer {
+  padding-left: 240px;
+}
+
+main,
+#content,
+.valign-wrapper {
+  height: 100%;
+}
+
+#main {
+  flex: 1 0 auto;
+
+  .logo {
+    a {
+      height: 100pt;
+    }
+
+    img {
+      height: 100pt;
+      width: 100pt;
+    }
+
+    &:hover {
+      background: transparent;
+    }
+  }
+}
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss
new file mode 100644
index 00000000..96f34494
--- /dev/null
+++ b/app/Resources/static/themes/material/css/media_queries.scss
@@ -0,0 +1,149 @@
+/* ==========================================================================
+   Media queries
+   ========================================================================== */
+
+@media only screen and (max-width: 992px) {
+  header,
+  main,
+  footer {
+    padding-left: 0;
+  }
+
+  nav,
+  main,
+  footer {
+    padding-left: 0;
+  }
+
+  .pagination {
+    width: auto;
+  }
+
+  .nav-panels .action {
+    padding-right: 0.75rem;
+  }
+
+  .nav-panel-buttom {
+    justify-content: space-around;
+  }
+
+  #article {
+    max-width: 35em;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 18px;
+
+    > header > h1 {
+      font-size: 1.33em;
+    }
+  }
+
+  .reader-mode {
+    width: 240px !important;
+
+    span {
+      opacity: 1;
+    }
+  }
+
+  .tabs {
+    display: inline-block;
+    height: auto;
+  }
+
+  .tab {
+    min-width: 100%;
+  }
+
+  .indicator {
+    display: none;
+  }
+
+  .pagination li.prev,
+  .pagination li.next {
+    width: auto;
+  }
+
+  .drag-target + .drag-target {
+    height: 50%;
+  }
+
+  .drag-target + .drag-target + .drag-target {
+    top: 50%;
+  }
+}
+
+@media only screen and (min-width: 1200px) and (max-width: 1650px) {
+  .row .col.l3 {
+    width: 33.33333%;
+    margin-left: 0;
+  }
+}
+
+@media only screen and (min-width: 993px) and (max-width: 1200px) {
+  .row {
+    .col.l1 {
+      width: 25%;
+      margin-left: 0;
+    }
+
+    .col.l2 {
+      width: 33.33333%;
+      margin-left: 0;
+    }
+
+    .col.l3 {
+      width: 41.66667%;
+      margin-left: 0;
+    }
+
+    .col.l4 {
+      width: 50%;
+      margin-left: 0;
+    }
+
+    .col.l5 {
+      width: 58.33333%;
+      margin-left: 0;
+    }
+
+    .col.l6 {
+      width: 66.66667%;
+      margin-left: 0;
+    }
+
+    .col.l7 {
+      width: 75%;
+      margin-left: 0;
+    }
+
+    .col.l8 {
+      width: 83.33333%;
+      margin-left: 0;
+    }
+
+    .col.l9 {
+      width: 91.66667%;
+      margin-left: 0;
+    }
+
+    .col.l10 {
+      width: 100%;
+      margin-left: 0;
+    }
+  }
+}
+
+@media only screen and (max-width: 350px) {
+  .nb-results {
+    display: none;
+  }
+
+  main ul.row {
+    padding: 0;
+  }
+
+  .row .col {
+    padding: 0;
+  }
+}
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
new file mode 100644
index 00000000..1a25a5be
--- /dev/null
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -0,0 +1,106 @@
+
+/* ==========================================================================
+   Nav
+   ========================================================================== */
+
+nav {
+  height: auto;
+
+  input {
+    color: #aaa;
+  }
+
+  ul a:hover {
+    background-color: initial;
+  }
+}
+
+.nav-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  min-height: 64px;
+
+  .button-collapse {
+    padding: 0 15px;
+  }
+}
+
+.nav-input {
+  display: none;
+}
+
+.nav-panel-buttom {
+  display: flex;
+  flex-grow: 1;
+  justify-content: flex-end;
+
+  li {
+    max-height: 64px;
+  }
+}
+
+.nav-panel-add .add,
+.nav-panel-search .search,
+.nav-panels .close {
+  color: #444 !important;
+}
+
+.nav-panels {
+  transition: background 0.2s ease;
+
+  .action {
+    padding-left: 0.75rem;
+    font-size: 2.1rem;
+    white-space: nowrap;
+  }
+
+  .input-field input {
+    display: block;
+    line-height: inherit;
+    padding-left: 4rem !important;
+    width: calc(100% - 8rem);
+    height: 4.1rem;
+  }
+
+  .input-field input:focus {
+    background-color: #fff;
+    border: 0;
+    box-shadow: none;
+    color: #444;
+  }
+}
+
+.input-field {
+  &.nav-panel-add label,
+  &.nav-panel-search label {
+    left: 1rem;
+  }
+
+  &.nav-panel-add .close,
+  &.nav-panel-search .close {
+    position: absolute;
+    top: 0;
+    right: 1rem;
+    color: transparent;
+    cursor: pointer;
+    font-size: 2rem;
+    transition: 0.3s color;
+  }
+
+  &.nav-panel-add,
+  &.nav-panel-add form,
+  &.nav-panel-search,
+  &.nav-panel-search form {
+    display: flex;
+    flex: 1;
+  }
+}
+
+#button_filters {
+  display: none;
+}
+
+#button_export {
+  display: none;
+}
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.scss
index 98505aae..967a8c2b 100755
--- a/app/Resources/static/themes/material/css/print.css
+++ b/app/Resources/static/themes/material/css/print.scss
@@ -64,11 +64,8 @@
 
   #main {
     width: 100%;
-    padding: 0;
     margin: 0;
-    margin-left: 0;
-    padding-right: 0;
-    padding-bottom: 0;
+    padding: 0;
   }
 
   #article {
diff --git a/app/Resources/static/themes/material/css/sidenav.scss b/app/Resources/static/themes/material/css/sidenav.scss
new file mode 100644
index 00000000..b430077e
--- /dev/null
+++ b/app/Resources/static/themes/material/css/sidenav.scss
@@ -0,0 +1,41 @@
+/* ==========================================================================
+   Side-nav
+   ========================================================================== */
+
+.side-nav {
+  width: 240px;
+
+  li {
+    padding: 0;
+  }
+
+  a {
+    margin: 0 1rem;
+  }
+
+  &.fixed a {
+    font-size: 13px;
+    line-height: 44px;
+    height: 44px;
+  }
+
+  .collapsible-header,
+  &.fixed .collapsible-header {
+    height: 45px;
+    line-height: 44px;
+    padding: 0 20px;
+  }
+
+  > li.logo {
+    line-height: 0;
+    text-align: center;
+  }
+}
+
+.bold > a {
+  font-weight: bold;
+}
+
+span.numberItems {
+  float: right;
+}
diff --git a/app/Resources/static/themes/material/css/variables.scss b/app/Resources/static/themes/material/css/variables.scss
new file mode 100644
index 00000000..25e22aca
--- /dev/null
+++ b/app/Resources/static/themes/material/css/variables.scss
@@ -0,0 +1,5 @@
+/* ==========================================================================
+   Variables
+   ========================================================================== */
+
+$blueAccentColor: rgba(0, 151, 167, 0.85);
diff --git a/app/Resources/static/themes/material/css/various.scss b/app/Resources/static/themes/material/css/various.scss
new file mode 100644
index 00000000..6a6f52f9
--- /dev/null
+++ b/app/Resources/static/themes/material/css/various.scss
@@ -0,0 +1,24 @@
+/* ==========================================================================
+ * Various
+ * ========================================================================== */
+
+div.settings div.file-field {
+  /* force height on non-input field in the settings page */
+  div,
+  ul {
+    margin-top: 40px;
+  }
+
+  /* but avoid to kill all file input */
+  div {
+    margin-top: inherit;
+  }
+}
+
+.input-field label.active {
+  font-size: 1rem;
+}
+
+nav .input-field input {
+  margin: 0;
+}
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/index.js
index 0b2832c0..d6afbb8a 100755
--- a/app/Resources/static/themes/material/js/init.js
+++ b/app/Resources/static/themes/material/index.js
@@ -1,21 +1,21 @@
-/* jQuery */
 import $ from 'jquery';
 
-/* Annotations */
-import annotator from 'annotator';
+/* Materialize imports */
+import 'materialize-css/dist/css/materialize.css';
+import 'materialize-css/dist/js/materialize';
+
+/* Global imports */
+import '../_global/index';
 
 /* Tools */
-import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools';
+import { initExport, initFilters } from './js/tools';
 
 /* Import shortcuts */
-import './shortcuts/main';
-import './shortcuts/entry';
-import '../../_global/js/shortcuts/main';
-import '../../_global/js/shortcuts/entry';
-
-require('materialize'); // eslint-disable-line
+import './js/shortcuts/main';
+import './js/shortcuts/entry';
 
-global.jQuery = $;
+/* Theme style */
+import './css/index.scss';
 
 $(document).ready(() => {
   // sideNav
@@ -30,6 +30,7 @@ $(document).ready(() => {
     formatSubmit: 'dd/mm/yyyy',
     hiddenName: true,
     format: 'dd/mm/yyyy',
+    container: 'body',
   });
   initFilters();
   initExport();
@@ -74,37 +75,4 @@ $(document).ready(() => {
     const scrollPercent = (s / (d - c)) * 100;
     $('.progress .determinate').css('width', `${scrollPercent}%`);
   });
-
-/* ==========================================================================
-   Annotations & Remember position
-   ========================================================================== */
-
-  if ($('article').length) {
-    const app = new annotator.App();
-    const x = JSON.parse($('#annotationroutes').html());
-
-    app.include(annotator.ui.main, {
-      element: document.querySelector('article'),
-    });
-
-    app.include(annotator.storage.http, x);
-
-    app.start().then(() => {
-      app.annotations.load({ entry: x.entryId });
-    });
-
-    $(window).scroll(() => {
-      const scrollTop = $(window).scrollTop();
-      const docHeight = $(document).height();
-      const scrollPercent = (scrollTop) / (docHeight);
-      const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
-      savePercent(x.entryId, scrollPercentRounded);
-    });
-
-    retrievePercent(x.entryId);
-
-    $(window).resize(() => {
-      retrievePercent(x.entryId);
-    });
-  }
 });
diff --git a/app/Resources/static/themes/material/js/tools.js b/app/Resources/static/themes/material/js/tools.js
new file mode 100644
index 00000000..39398fd8
--- /dev/null
+++ b/app/Resources/static/themes/material/js/tools.js
@@ -0,0 +1,24 @@
+import $ from 'jquery';
+
+function initFilters() {
+  // no display if filters not available
+  if ($('div').is('#filters')) {
+    $('#button_filters').show();
+    $('.js-filters-action').sideNav({ edge: 'right' });
+    $('#clear_form_filters').on('click', () => {
+      $('#filters input').val('');
+      $('#filters :checked').removeAttr('checked');
+      return false;
+    });
+  }
+}
+
+function initExport() {
+  // no display if export not available
+  if ($('div').is('#export')) {
+    $('#button_export').show();
+    $('.js-export-action').sideNav({ edge: 'right' });
+  }
+}
+
+export { initExport, initFilters };