3 files changed, 791 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..473b0308
--- /dev/null
+++ b/app/Resources/static/themes/material/css/main.css
@@ -0,0 +1,611 @@
+/* ==========================================================================
+   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.eot");
+  src:
+    url("../fonts/icomoon.eot#iefix") format("embedded-opentype"),
+    url("../fonts/icomoon.ttf") format("truetype"),
+    url("../fonts/icomoon.woff") format("woff"),
+    url("../fonts/icomoon.svg#icomoon") format("svg");
+  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-"],
+[class*=" icon-"] {
+  font-family: icomoon;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  background: #f0f0f0;
+}
+
+body.login main {
+  padding: 0;
+}
+
+.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: 0px 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: 10px;
+}
+
+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;
+}
+
+/* ==========================================================================
+   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;
+}
+
+/* ==========================================================================
+ * 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;
+}
+
+.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;
+}
+
+.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 {
+  max-width: 100%;
+  height: auto;
+}
+
+.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-right: 15px;
+}
+
+#article aside .chip {
+  background-color: #039be5;
+  color: #fff;
+}
+
+#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;
+    }
+  .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: "\ea91";
+}
+
+.icon-apple::before {
+  content: "\eabf";
+}
+
+.icon-android::before {
+  content: "\eac1";
+}
+
+.icon-chrome::before {
+  content: "\eae5";
+}
+
+.icon-firefox::before {
+  content: "\eae6";
+}
+
+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;
+}
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..a16be71e
--- /dev/null
+++ b/app/Resources/static/themes/material/css/print.css
@@ -0,0 +1,64 @@
+@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 {
+    display: none !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..33019d3d
--- /dev/null
+++ b/app/Resources/static/themes/material/js/init.js
@@ -0,0 +1,116 @@
+var $ = require("jquery"),
+materialize = require("materialize");
+var annotator = require('annotator');
+
+function init_filters() {
+    // no display if filters not aviable
+    if ($("div").is("#filters")) {
+        $('#button_filters').show();
+        $('.button-collapse-right').sideNav({ edge: 'right' });
+        $('#clear_form_filters').on('click', function(){
+            $('#filters input').val('');
+            $('#filters :checked').removeAttr('checked');
+            return false;
+        });
+    }
+}
+
+function init_export() {
+    // no display if export not aviable
+    if ($("div").is("#export")) {
+        $('#button_export').show();
+        $('.button-collapse-right').sideNav({ edge: 'right' });
+    }
+}
+
+$(document).ready(function(){
+    // 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',
+    });
+    init_filters();
+    init_export();
+
+    $('#nav-btn-add-tag').on('click', function(){
+       $(".nav-panel-add-tag").toggle(100);
+       $(".nav-panel-menu").addClass('hidden');
+       $("#tag_label").focus();
+       return false;
+    });
+    $('#nav-btn-add').on('click', function(){
+       $(".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', function(){
+        $(".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', function(){
+        $(".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(function () {
+        var s = $(window).scrollTop(),
+        d = $(document).height(),
+        c = $(window).height();
+        var scrollPercent = (s / (d-c)) * 100;
+        $(".progress .determinate").css('width', scrollPercent+'%');
+    });
+
+  /* ==========================================================================
+     Annotations & Remember position
+     ========================================================================== */
+
+    if ($("article").length) {
+        var app = new annotator.App();
+
+        app.include(annotator.ui.main, {
+            element: document.querySelector('article')
+        });
+
+        var x = JSON.parse($('#annotationroutes').html());
+        app.include(annotator.storage.http, x);
+
+        app.start().then(function () {
+             app.annotations.load({entry: x.entryId});
+        });
+
+        $(window).scroll(function(e){
+            var scrollTop = $(window).scrollTop();
+            var docHeight = $(document).height();
+            var scrollPercent = (scrollTop) / (docHeight);
+            var scrollPercentRounded = Math.round(scrollPercent*100)/100;
+            savePercent(x.entryId, scrollPercentRounded);
+        });
+
+        retrievePercent(x.entryId);
+
+        $(window).resize(function(){
+            retrievePercent(x.entryId);
+        });
+    }
+});