use material icons for wagon order display

7 files changed, 46 insertions, 9 deletions

diff --git a/public/static/fonts/MaterialIcons-Regular.eot b/public/static/fonts/MaterialIcons-Regular.eot
new file mode 100644
index 0000000..70508eb
--- /dev/null
+++ b/public/static/fonts/MaterialIcons-Regular.eot
diff --git a/public/static/fonts/MaterialIcons-Regular.ttf b/public/static/fonts/MaterialIcons-Regular.ttf
new file mode 100644
index 0000000..7015564
--- /dev/null
+++ b/public/static/fonts/MaterialIcons-Regular.ttf
diff --git a/public/static/fonts/MaterialIcons-Regular.woff b/public/static/fonts/MaterialIcons-Regular.woff
new file mode 100644
index 0000000..b648a3e
--- /dev/null
+++ b/public/static/fonts/MaterialIcons-Regular.woff
diff --git a/public/static/fonts/MaterialIcons-Regular.woff2 b/public/static/fonts/MaterialIcons-Regular.woff2
new file mode 100644
index 0000000..9fa2112
--- /dev/null
+++ b/public/static/fonts/MaterialIcons-Regular.woff2
diff --git a/public/static/material-icons.css b/public/static/material-icons.css
new file mode 100644
index 0000000..7b120b3
--- /dev/null
+++ b/public/static/material-icons.css
@@ -0,0 +1,36 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(/static/v15/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'),
+       local('MaterialIcons-Regular'),
+       url(/static/v15/fonts/MaterialIcons-Regular.woff2) format('woff2'),
+       url(/static/v15/fonts/MaterialIcons-Regular.woff) format('woff'),
+       url(/static/v15/fonts/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 20px;  /* Preferred icon size */
+  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';
+}
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 2c59b82..7b689be 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -19,6 +19,7 @@
 
 	% my $av = 'v15'; # asset version
 	%= stylesheet "/static/${av}/default.css"
+	%= stylesheet "/static/${av}/material-icons.css"
 	%= stylesheet "/static/${av}/jquery-ui.min.css"
 % my $force_mobile = param('force_mobile') // stash('force_mobile');
 % if ($force_mobile) {
diff --git a/templates/wagenreihung.html.ep b/templates/wagenreihung.html.ep
index fc00968..3d47466 100644
--- a/templates/wagenreihung.html.ep
+++ b/templates/wagenreihung.html.ep
@@ -31,7 +31,7 @@
     </div>
 %   }
   <div class="container">
-    <div style="position: relative; width: 100%; height: 60ex;">
+    <div style="position: relative; width: 100%; height: 70ex;">
 %     if (not $wr->has_bad_wagons) {
 %       for my $section ($wr->sections) {
           <div style="position: absolute; left: 1em; width: 2em;
@@ -79,28 +79,28 @@
             <span style="display: inline-block; width: 0.8em; text-align: center; color: #666666; border: 1px solid #666666;">2</span>
 %         }
 %         if ($wagon->has_accessibility) {
-            ♿
+            <i class="material-icons">accessible</i>
 %         }
 %         if ($wagon->has_bistro) {
-            🍴
+            <i class="material-icons">restaurant</i>
 %         }
 %         if ($wagon->has_compartments) {
-            🚪
+            <!--<i class="material-icons">folder</i>-->
 %         }
 %         if ($wagon->has_quiet_area) {
-            🔇
+            <i class="material-icons">volume_off</i>
 %         }
 %         if ($wagon->has_phone_area) {
-            📱
+            <i class="material-icons">smartphone</i>
 %         }
 %         if ($wagon->has_family_area) {
-            👪
+            <i class="material-icons">people</i>
 %         }
 %         if ($wagon->has_bahn_comfort) {
-            bahn.comfort
+            <i class="material-icons">star</i>
 %         }
 %         if ($wagon->is_interregio) {
-            Interregio
+            
 %         }
           <span style="color: #999999;">
 %=          $wagon->type