3 files changed, 958 insertions, 0 deletions

diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
new file mode 100755
index 00000000..2cc2e8a0
--- /dev/null
+++ b/app/Resources/static/themes/material/css/main.css
@@ -0,0 +1,782 @@
+/* ==========================================================================
+   Sommaire
+
+   0 = Common
+   1 = Nav
+   2 = Side-nav
+   3 = Filters slider
+   4 = Cards
+   5 = Article
+   6 = Media queries
+   7 = Font
+   8 = Others
+
+   ========================================================================== */
+
+/* ==========================================================================
+   0 = Common
+   ========================================================================== */
+
+@font-face {
+  font-family: icomoon;
+  src: url("../fonts/IcoMoon-Free.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(../fonts/MaterialIcons-Regular.eot);
+
+  /* For IE6-8 */
+  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
+}
+
+.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';
+}
+
+[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;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  -o-font-feature-settings: "liga";
+  font-feature-settings: "liga";
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-image {
+  background-size: 16px;
+  background-repeat: no-repeat;
+  padding-right: 1em !important;
+  padding-left: 1em !important;
+}
+
+.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";
+}
+
+/* Carrot (http://carrot.org) */
+.icon-image--carrot {
+  background-image: url("../../_global/img/icons/carrot-icon--black.png");
+}
+
+/* Diaspora */
+.icon-image--diaspora {
+  background-image: url("../../_global/img/icons/diaspora-icon--black.png");
+}
+
+/* Shaarli */
+.icon-image--shaarli {
+  background-image: url("../../_global/img/icons/shaarli.png");
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background: #f0f0f0;
+}
+
+body.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;
+}
+
+.results {
+  height: 1em;
+  line-height: 30px;
+}
+
+.results .nb-results,
+.results .pagination {
+  margin: 15px;
+  margin-bottom: 0;
+}
+
+.pagination {
+  float: right;
+}
+
+.pagination ul {
+  margin: 0 !important;
+}
+
+.pagination li {
+  padding: 0;
+}
+
+.pagination a {
+  padding: 0 10px;
+  height: 30px;
+  display: block;
+}
+
+.pagination .disabled {
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+div.pagination ul .prev.disabled,
+div.pagination ul .next.disabled {
+  display: none;
+}
+
+.pagination li.active span {
+  padding: 0 10px;
+  height: 30px;
+  display: block;
+  color: #fff;
+}
+
+.page-footer .footer-copyright p {
+  display: inline;
+}
+
+.hidden {
+  display: none;
+}
+
+.picker__date-display {
+  display: none;
+}
+
+footer.page-footer {
+  margin-top: 10px;
+  padding-top: 0;
+}
+
+footer .row {
+  margin-bottom: 10px;
+}
+
+/* ==========================================================================
+   1 = Nav
+   ========================================================================== */
+
+nav input {
+  color: #aaa;
+}
+
+.nav-wrapper .button-collapse {
+  padding: 0 15px;
+}
+
+.nav-input {
+  display: none;
+}
+
+.nav-panels {
+  overflow: hidden;
+}
+
+.nav-panel-buttom li {
+  max-height: 64px;
+}
+
+.nav-panels {
+  transition: background 0.2s ease;
+}
+
+.nav-panel-add .add,
+.nav-panel-search .search,
+.nav-panels .close {
+  color: #444 !important;
+}
+
+.nav-panels .action {
+  padding-left: 0.75rem;
+  font-size: 2.1rem;
+  white-space: nowrap;
+}
+
+.nav-panels .input-field input {
+  display: block;
+  line-height: inherit;
+  padding-left: 4rem !important;
+  width: calc(100% - 8rem);
+}
+
+.nav-panels .input-field input:focus {
+  background-color: #fff;
+  border: 0;
+  box-shadow: none;
+  color: #444;
+}
+
+.input-field.nav-panel-add label {
+  left: 1rem;
+}
+
+.input-field.nav-panel-add .close {
+  position: absolute;
+  top: 0;
+  right: 1rem;
+  color: transparent;
+  cursor: pointer;
+  font-size: 2rem;
+  transition: 0.3s color;
+}
+
+#button_filters {
+  display: none;
+}
+
+#button_export {
+  display: none;
+}
+
+.input-field.nav-panel-add,
+.input-field.nav-panel-add form {
+  height: 100%;
+}
+
+/* ==========================================================================
+   2 = Side-nav
+   ========================================================================== */
+
+.side-nav.fixed a {
+  font-size: 13px;
+  line-height: 44px;
+  height: 44px;
+}
+
+.side-nav .collapsible-header,
+.side-nav.fixed .collapsible-header {
+  height: 45px;
+  line-height: 44px;
+  padding: 0 20px;
+}
+
+.bold > a {
+  font-weight: bold;
+}
+
+.side-nav > li.logo {
+  line-height: 0;
+  text-align: center;
+}
+
+#main .logo a {
+  height: 100pt;
+}
+
+#main .logo img {
+  height: 100pt;
+  width: 100pt;
+}
+
+#main .logo:hover {
+  background: transparent;
+}
+
+.side-nav li {
+  padding: 0;
+}
+
+.side-nav a {
+  margin: 0 1rem;
+}
+
+span.numberItems {
+  float: right;
+}
+
+nav ul a:hover {
+  background-color: initial;
+}
+
+/* ==========================================================================
+ * 3 = Filters slider
+ * ========================================================================== */
+
+#filters button {
+  padding: 0;
+  width: 100%;
+}
+
+.side-nav.fixed.right-aligned {
+  right: -250px;
+  left: auto !important;
+  overflow-y: visible;
+}
+
+#filters div.with-checkbox {
+  height: 3rem;
+  margin-top: 0;
+}
+
+/* ==========================================================================
+   4 = Cards
+   ========================================================================== */
+
+main #content {
+  padding: 0 0.5rem;
+}
+
+main ul.row {
+  padding: 0 0.75rem;
+}
+
+.data .card .card-body {
+  height: 22em;
+  overflow: hidden;
+}
+
+.card .card-content .card-title {
+  line-height: 32px;
+  max-height: 64px;
+}
+
+.card .card-content i.right,
+.card .card-reveal i.right {
+  margin-left: 0;
+}
+
+.card .card-entry-labels {
+  position: absolute;
+  top: 10px;
+  z-index: 90;
+  max-width: 50%;
+}
+
+.card .card-entry-labels li,
+.card-tag-labels li {
+  margin: 10px 10px 10px auto;
+  padding: 5px 12px 5px 16px !important;
+  background-color: rgba(0, 151, 167, 0.85);
+  border-radius: 0 3px 3px 0;
+  color: #fff;
+  cursor: default;
+  max-height: 2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.card .card-entry-labels-hidden {
+  margin-top: 5px;
+}
+
+.card .card-entry-labels-hidden li {
+  display: inline-block;
+  background-color: rgba(0, 151, 167, 0.85);
+  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-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 .card-content .estimatedTime {
+  margin-bottom: 10px;
+}
+
+.card .card-action .original {
+  line-height: 24px;
+}
+
+.card .card-action ul.links {
+  margin: 0;
+  font-size: 24px;
+  line-height: 24px;
+}
+
+.card .card-action a {
+  color: #fff;
+  margin: 0;
+}
+
+.card .card-action a:hover {
+  color: #fff;
+}
+
+.quickstart .card .card-action a,
+.quickstart .card .card-action a:hover {
+  color: #fff !important;
+}
+
+.settings .div_tabs {
+  padding-bottom: 15px;
+}
+
+.card.sw {
+  max-width: 370px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.card .card-image {
+  height: 14em;
+}
+
+.card .card-image .preview {
+  height: 14em;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: 50%;
+}
+
+/* ==========================================================================
+   5 = Article
+   ========================================================================== */
+
+#article {
+  font-size: 20px;
+  margin: 0 auto;
+  max-width: 40em;
+}
+
+#article img,
+#article figure {
+  max-width: 100%;
+  height: auto;
+}
+
+#article > header > h1 {
+  font-size: 1.6em;
+}
+
+.reader-mode {
+  width: 95px !important;
+  transition: width 0.2s ease;
+}
+
+.reader-mode:hover {
+  width: 240px !important;
+}
+
+.reader-mode .collapsible-body {
+  height: 0;
+  overflow: hidden;
+}
+
+.reader-mode:hover .collapsible-body {
+  height: auto;
+}
+
+.reader-mode span {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.reader-mode:hover span {
+  opacity: 1;
+}
+
+.progress {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 3px;
+  margin: 0;
+  z-index: 9999;
+}
+
+#article aside .link {
+  color: #000;
+  font-size: 0.8em;
+  text-decoration: none;
+}
+
+#article aside #list {
+  float: right;
+  margin: 0 15px 10px;
+}
+
+#article aside .chip {
+  background-color: rgba(0, 151, 167, 0.85);
+  color: #fff;
+  padding: 0 15px 0 10px;
+}
+
+#article aside .chip i {
+  color: #fff;
+}
+
+/* ==========================================================================
+   6 = Media queries
+   ========================================================================== */
+
+@media only screen and (max-width: 992px) {
+  header,
+  main,
+  footer {
+    padding-left: 0;
+  }
+
+  nav,
+  main,
+  footer {
+    padding-left: 0;
+  }
+
+  .pagination {
+    width: auto;
+  }
+
+  #article {
+    padding: 15px;
+    max-width: 35em;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 18px;
+  }
+
+  #article > header > h1 {
+    font-size: 1.33em;
+  }
+
+  .reader-mode {
+    width: 240px !important;
+  }
+
+  .reader-mode span {
+    opacity: 1;
+  }
+
+  .tabs {
+    display: inline-block;
+    height: auto;
+  }
+
+  .tab {
+    min-width: 100%;
+  }
+
+  .indicator {
+    display: none;
+  }
+
+  .pagination li.prev,
+  .pagination li.next {
+    width: auto;
+  }
+}
+
+@media only screen and (min-width: 400px) {
+  .nav-panel-buttom {
+    float: right;
+  }
+}
+
+@media only screen and (min-width: 993px) and (max-width: 1180px) {
+  .row .col.l1 {
+    width: 25%;
+    margin-left: 0;
+  }
+
+  .row .col.l2 {
+    width: 33.33333%;
+    margin-left: 0;
+  }
+
+  .row .col.l3 {
+    width: 41.66667%;
+    margin-left: 0;
+  }
+
+  .row .col.l4 {
+    width: 50%;
+    margin-left: 0;
+  }
+
+  .row .col.l5 {
+    width: 58.33333%;
+    margin-left: 0;
+  }
+
+  .row .col.l6 {
+    width: 66.66667%;
+    margin-left: 0;
+  }
+
+  .row .col.l7 {
+    width: 75%;
+    margin-left: 0;
+  }
+
+  .row .col.l8 {
+    width: 83.33333%;
+    margin-left: 0;
+  }
+
+  .row .col.l9 {
+    width: 91.66667%;
+    margin-left: 0;
+  }
+
+  .row .col.l10 {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+
+@media only screen and (max-width: 350px) {
+  .nb-results {
+    display: none;
+  }
+}
+
+/* ==========================================================================
+   7 = Font
+   ========================================================================== */
+
+.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);
+}
+
+/* ==========================================================================
+   8 = Others
+   ========================================================================== */
+
+/* force height on non-input field in the settings page */
+div.settings div.input-field div,
+div.settings div.input-field ul {
+  margin-top: 40px;
+}
+
+/* but avoid to kill all file input */
+div.settings div.file-field 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/css/print.css b/app/Resources/static/themes/material/css/print.css
new file mode 100755
index 00000000..98505aae
--- /dev/null
+++ b/app/Resources/static/themes/material/css/print.css
@@ -0,0 +1,77 @@
+@media print {
+  /* ### Layout ### */
+
+  body {
+    font-family: Serif;
+    background-color: #fff;
+  }
+
+  @page {
+    margin: 1cm;
+  }
+
+  img {
+    max-width: 100% !important;
+  }
+
+  /* ### Content ### */
+
+  /* Hide useless blocks */
+  body > header,
+  #article_toolbar,
+  #links,
+  #sort,
+  body > footer,
+  .top_link,
+  div.tools,
+  header div,
+  .messages,
+  .entry + .results,
+  #slide-out,
+  .progress,
+  .hide-on-large-only,
+  #article > aside,
+  #article .mbm a {
+    display: none !important;
+  }
+
+  main {
+    padding-left: 0 !important;
+  }
+
+  #article {
+    margin: inherit !important;
+  }
+
+  article {
+    border: none !important;
+  }
+
+  /* Add URL after links */
+  .vieworiginal a::after {
+    content: " (" attr(href) ")";
+  }
+
+  /* Add explanation after abbr */
+  abbr[title]::after {
+    content: " (" attr(title) ")";
+  }
+
+  /* Change border on current pager item */
+  .pagination span.current {
+    border-style: dashed;
+  }
+
+  #main {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    margin-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+
+  #article {
+    width: 100%;
+  }
+}
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js
new file mode 100755
index 00000000..a68269e0
--- /dev/null
+++ b/app/Resources/static/themes/material/js/init.js
@@ -0,0 +1,99 @@
+import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools';
+
+const $ = require('jquery');
+
+global.jQuery = $;
+require('materialize'); // eslint-disable-line
+const annotator = require('annotator');
+
+$(document).ready(() => {
+  // sideNav
+  $('.button-collapse').sideNav();
+  $('select').material_select();
+  $('.collapsible').collapsible({
+    accordion: false,
+  });
+  $('.datepicker').pickadate({
+    selectMonths: true,
+    selectYears: 15,
+    formatSubmit: 'dd/mm/yyyy',
+    hiddenName: true,
+    format: 'dd/mm/yyyy',
+  });
+  initFilters();
+  initExport();
+
+  $('#nav-btn-add-tag').on('click', () => {
+    $('.nav-panel-add-tag').toggle(100);
+    $('.nav-panel-menu').addClass('hidden');
+    $('#tag_label').focus();
+    return false;
+  });
+  $('#nav-btn-add').on('click', () => {
+    $('.nav-panel-buttom').hide(100);
+    $('.nav-panel-add').show(100);
+    $('.nav-panels .action').hide(100);
+    $('.nav-panel-menu').addClass('hidden');
+    $('.nav-panels').css('background', 'white');
+    $('#entry_url').focus();
+    return false;
+  });
+  $('#nav-btn-search').on('click', () => {
+    $('.nav-panel-buttom').hide(100);
+    $('.nav-panel-search').show(100);
+    $('.nav-panels .action').hide(100);
+    $('.nav-panel-menu').addClass('hidden');
+    $('.nav-panels').css('background', 'white');
+    $('#searchfield').focus();
+    return false;
+  });
+  $('.close').on('click', () => {
+    $('.nav-panel-add').hide(100);
+    $('.nav-panel-search').hide(100);
+    $('.nav-panel-buttom').show(100);
+    $('.nav-panels .action').show(100);
+    $('.nav-panel-menu').removeClass('hidden');
+    $('.nav-panels').css('background', 'transparent');
+    return false;
+  });
+  $(window).scroll(() => {
+    const s = $(window).scrollTop();
+    const d = $(document).height();
+    const c = $(window).height();
+    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);
+    });
+  }
+});