Restructure some css

web/app/static/css/materialize_fixes.css

+/* Fix material icon vertical alignment when nested in various elements */
+h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons,
+.tab .nopaque-icons, .tab .material-icons {
+  line-height: inherit;
+}
+
+.parallax-container .parallax {
+  z-index: 0;
+}

web/app/static/css/nopaque.css

-/* Fix material icon vertical alignment when nested in various elements */
-h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons,
-.tab .nopaque-icons, .tab .material-icons {
-  line-height: inherit;
-}
-
-main {
-  margin-top: 48px;
-}
-
-/*
- * Force the footer to always stay on the bottom of the page regardless of how
- * little content is on the page.
- */
-body {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-main {
-  flex: 1 0 auto;
-}
-
-
-table.ressource-list tr {
-  cursor: pointer;
-}
-
-.parallax-container .parallax {
-  z-index: 0;
+/* Change navbar height bacause an extended and fixed navbar is used */
+.navbar-fixed {
+  height: 112px;
 }
 
 /* add custom bold class */
-.bold {
-  font-weight: bold;
-}
+.bold {font-weight: bold;}
 
 /* Change placholdertext color of file uplaod fields */
-::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+::placeholder {
   color: #9e9e9e;
-  opacity: 1; /* Firefox */
+  opacity: 1;
 }
 
 /* preloader circle in the size of a button icon */
@@ -114,15 +84,6 @@ indicator will show up how the column is sorted right now.; */
   right:-5px;
 }
 
-/* Sticy side elements */
-.sticky {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 80px;
-  padding: 50px;
-  z-index: 999; /* tmp fix */
-}
-
 .show-if-only-child:not(:only-child) {
   display: none !important;
 }
@@ -145,6 +106,4 @@ indicator will show up how the column is sorted right now.; */
 .nopaque-icons.service-icon[data-service="nlp"]:empty:before {content: "G";}
 .nopaque-icons.service-icon[data-service="ocr"]:empty:before {content: "F";}
 
-.status-text[data-status]:before {
-  content: attr(data-status);
-}
+.status-text[data-status]:empty:before {content: attr(data-status);}

web/app/static/css/sticky_footer.css

+/*
+ * Sticky Footer: https://materializecss.com/footer.html#sticky-footer
+ * A sticky footer always stays on the bottom of the page regardless of how
+ * little content is on the page. However, this footer will be pushed down if
+ * there is a lot of content, so it is different from a fixed footer.
+ *
+ * Note: This may cause issues in Internet Explorer which has weak support for
+ *       flexbox.
+ */
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1 0 auto;
+}

web/app/templates/_styles.html.j2

@@ -4,6 +4,8 @@
 <link href="{{ url_for('static', filename='css/sidenav_fixed.css') }}" media="screen,projection" rel="stylesheet">
 {% endif %}
 <link href="{{ url_for('static', filename='css/nopaque_icons.css') }}" media="screen,projection" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/sticky_footer.css') }}" media="screen,projection" rel="stylesheet">
+<link href="{{ url_for('static', filename='css/materialize_fixes.css') }}" media="screen,projection" rel="stylesheet">
 <link href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection" rel="stylesheet">
 <style>
   .primary-color {background-color: {{ colors['primary'] }} !important;}