From fb7b26582624f5a5df9b4dfcca47d59eac2dbb62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emanuel=20Sch=C3=BCtze?= <emanuel@intevation.de>
Date: Wed, 7 Dec 2016 23:04:35 +0100
Subject: [PATCH] Use Roboto font in all templates.

- Only install needed font files for Roboto and Roboto Condensed
  which strongly reduced the directory size of 'static/font'.
- Make it easier to adjust custom font by using global css font definition
  in app.css and projector.css.
- Remove Open Sans font.
---
 bower.json                                    | 11 ++-
 gulpfile.js                                   |  2 +-
 .../static/templates/agenda/item-list.html    | 20 ++---
 .../assignments/assignment-list.html          |  8 +-
 openslides/core/static/css/app.css            | 77 ++++++++++++++-----
 openslides/core/static/css/projector.css      | 49 ++++++++----
 .../templates/mediafiles/mediafile-list.html  | 10 +--
 .../static/templates/motions/motion-list.html |  2 -
 .../static/templates/users/user-list.html     | 14 ++--
 9 files changed, 122 insertions(+), 71 deletions(-)

diff --git a/bower.json b/bower.json
index 86ef6470d..fe26c3a5e 100644
--- a/bower.json
+++ b/bower.json
@@ -35,8 +35,7 @@
     "ngstorage": "~0.3.11",
     "ngBootbox": "~0.1.3",
     "pdfmake-dist": "~0.1.27",
-    "open-sans-fontface": "https://github.com/OpenSlides/open-sans.git#1.4.2.post1",
-    "roboto-condensed": "~0.3.0",
+    "roboto-fontface": "~0.6.0",
     "tinymce": "~4.4.3",
     "tinymce-i18n": "OpenSlides/tinymce-i18n#a186ad61e0aa30fdf657e88f405f966d790f0805"
   },
@@ -50,6 +49,14 @@
     "pdfjs-dist": {
       "main": "build/pdf.combined.js"
     },
+    "roboto-fontface": {
+      "main": [
+        "fonts/Roboto/Roboto-Regular.woff",
+        "fonts/Roboto/Roboto-Medium.woff",
+        "fonts/Roboto-Condensed/Roboto-Condensed-Regular.woff",
+        "fonts/Roboto-Condensed/Roboto-Condensed-Light.woff"
+      ]
+    },
     "tinymce": {
       "main": [
         "tinymce.js",
diff --git a/gulpfile.js b/gulpfile.js
index 3b9ba6c7c..ef19964d1 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -97,7 +97,7 @@ gulp.task('css-libs', function () {
 // Catches all font files from all bower components.
 gulp.task('fonts-libs', function() {
     return gulp.src(mainBowerFiles({
-            filter: /\.(eot)|(svg)|(ttf)|(woff)|(woff2)$/
+            filter: /\.woff$/
         }))
         .pipe(gulp.dest(path.join(output_directory, 'fonts')));
 });
diff --git a/openslides/agenda/static/templates/agenda/item-list.html b/openslides/agenda/static/templates/agenda/item-list.html
index fd6dec768..16db1cb84 100644
--- a/openslides/agenda/static/templates/agenda/item-list.html
+++ b/openslides/agenda/static/templates/agenda/item-list.html
@@ -260,22 +260,18 @@
       <!-- main content column -->
       <div class="col-xs-6 content" style="padding-left: calc({{ item.parentCount }}*15px)">
         <div class="spacer-right">
-          <strong>
-            <i class="fa fa-ban fa-lg" ng-style="{'visibility': item.is_hidden ? 'visible' : 'hidden'}"
-              title="{{ 'Internal item' | translate }}"></i>
-          </strong>
+          <i class="fa fa-ban" ng-style="{'visibility': item.is_hidden ? 'visible' : 'hidden'}"
+            title="{{ 'Internal item' | translate }}"></i>
         </div>
         <div>
           <!-- ID and title -->
           <div>
-            <strong>
-              <a class="title" ui-sref="{{ getUpdateStatePrefix(item) }}.detail({id: item.content_object.id})" ng-show="isAllowedToSeeOpenLink(item)">
-                {{ item.getListViewTitle() }}
-              </a>
-              <span class="title" ng-hide="isAllowedToSeeOpenLink(item)">
-                {{ item.getListViewTitle() }}
-              </span>
-            </strong>
+            <a class="title" ui-sref="{{ getUpdateStatePrefix(item) }}.detail({id: item.content_object.id})" ng-show="isAllowedToSeeOpenLink(item)">
+              {{ item.getListViewTitle() }}
+            </a>
+            <span class="title" ng-hide="isAllowedToSeeOpenLink(item)">
+              {{ item.getListViewTitle() }}
+            </span>
           </div>
           <!-- hover menu -->
           <div os-perms="agenda.can_see" ng-class="{'hiddenDiv': !item.hover}">
diff --git a/openslides/assignments/static/templates/assignments/assignment-list.html b/openslides/assignments/static/templates/assignments/assignment-list.html
index 8438a9221..9e5617596 100644
--- a/openslides/assignments/static/templates/assignments/assignment-list.html
+++ b/openslides/assignments/static/templates/assignments/assignment-list.html
@@ -224,11 +224,9 @@
         <div class="title-col">
           <!-- title and phase -->
           <div>
-            <strong>
-              <a ui-sref="assignments.assignment.detail({id: assignment.id})">
-                {{ assignment.title }}
-              </a>
-            </strong>
+            <a class="title" ui-sref="assignments.assignment.detail({id: assignment.id})">
+              {{ assignment.title }}
+            </a>
             <span style="padding: 5px;" ng-mouseover="assignment.phaseHover=true" ng-mouseleave="assignment.phaseHover=false">
               <span class="label" ng-class="{'label-primary': assignment.phase == 0,
                                              'label-warning': assignment.phase == 1,
diff --git a/openslides/core/static/css/app.css b/openslides/core/static/css/app.css
index 3deb12a93..2c2fb31e0 100644
--- a/openslides/core/static/css/app.css
+++ b/openslides/core/static/css/app.css
@@ -1,7 +1,55 @@
 /*
- * OpenSlides template styles of web interface
+ * Font definitions for OpenSlides site
  */
 
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('../fonts/Roboto-Condensed-Regular.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto Condensed Light';
+    src: url('../fonts/Roboto-Condensed-Light.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto Medium';
+  src: url('../fonts/Roboto-Medium.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+    font-family: "Roboto", sans-serif;
+}
+strong, b, .os-table .title {
+    font-family: "Roboto Medium";
+    font-family: "Roboto Medium", sans-serif;
+    font-weight: normal;
+}
+h1, h2, h3, h4, h5, h6, #header .title {
+    font-family: "Roboto Condensed", sans-serif;
+    font-weight: 400;
+}
+#content .col2 h4 {
+    font-family: 'Roboto Condensed Light';
+    font-weight: 300;
+}
+#content .col1 .meta .heading .drop-down-name, #content .col1 .meta h3 {
+    font-family: 'Roboto Condensed Light';
+}
+
+/*
+ * Template styles for OpenSlides site
+ */
 
 * { /* set margin/padding for all (block) elements to null */
     margin: 0;
@@ -9,8 +57,6 @@
 }
 
 body {
-    font-family: "Open Sans",Helvetica,Arial,sans-serif;
-    font-weight: 400;
     font-size: 14px;
     line-height: 1.5;
     color: #222;
@@ -18,7 +64,6 @@ body {
     background: #e8eaed;
 }
 
-
 div {
     text-align: left;
 }
@@ -28,8 +73,6 @@ blockquote {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
-    font-weight: 400;
     line-height: 1.1;
 }
 
@@ -114,8 +157,6 @@ img {
 #header .title {
     float: left;
     margin: 2px 0 0 -5px;
-    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
-    font-weight: 400;
     color: #fff;
 }
 
@@ -425,11 +466,10 @@ img {
     content: attr(data-line-number);
     position: absolute;
     left: 20px;
-    top: 12px;
+    top: 10px;
     vertical-align: top;
     color: gray;
-    font-family: Courier, serif;
-    font-size: 13px;
+    font-size: 12px;
     font-weight: normal;
 }
 
@@ -443,10 +483,9 @@ img {
     display: inline-block;
     content: attr(data-line-number);
     vertical-align: top;
-    font-size: 11px;
+    font-size: 10px;
     font-weight: normal;
     color: gray;
-    font-family: Courier, serif;
     margin-top: -3px;
     margin-left: 0;
     margin-right: 0;
@@ -678,8 +717,6 @@ img {
 #content .col2 h4 {
     font-size: 22px;
     line-height: 24px;
-    font-family: 'Roboto Condensed Light';
-    font-weight: 300;
     color: #444;
 }
 #content .col1 .meta .heading, #content .col1 .meta h3 {
@@ -691,9 +728,6 @@ img {
     margin-top: 20px;
     margin-bottom: 5px;
 }
-#content .col1 .meta .heading .drop-down-name, #content .col1 .meta h3 {
-    font-family: 'Roboto Condensed Light';
-}
 
 #content .col2 a:hover h4 {
     text-decoration: none;
@@ -1404,7 +1438,7 @@ img {
 /* override booststrap's label class to fix linebreak and add spacing */
 .label {
     display: inline-block;
-    padding: .3em .6em;
+    padding: .4em .6em;
     margin-right: .2em;
 }
 
@@ -1523,6 +1557,11 @@ tr.selected td {
         float: left;
         width: 50%;
     }
+
+    .motion-text.line-numbers-outside .os-line-number:after {
+        font-size: 10px;
+        top: 9px;
+    }
 }
 
 
diff --git a/openslides/core/static/css/projector.css b/openslides/core/static/css/projector.css
index 8e75272d9..2e2fb2ed3 100644
--- a/openslides/core/static/css/projector.css
+++ b/openslides/core/static/css/projector.css
@@ -1,5 +1,39 @@
 /*
- * OpenSlides default projector styles
+ * Font definitions for OpenSlides projector
+ */
+
+@font-face {
+  font-family: 'Roboto Condensed';
+  src: url('../fonts/Roboto-Condensed-Regular.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto Condensed Light';
+    src: url('../fonts/Roboto-Condensed-Light.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+body {
+    font-family: "Roboto", sans-serif;
+}
+h1, h2, h3, h4, h5, h6, .countdown, .message {
+    font-family: "Roboto Condensed", sans-serif;
+    font-weight: normal;
+}
+#header, #currentTime, #footer {
+    font-family: 'Roboto Condensed Light';
+}
+
+/*
+ * Template styles for OpenSlides projector
  *
  */
 
@@ -11,7 +45,6 @@ body {
     font-size: 20px !important;
     line-height: 24px !important;
     overflow: hidden;
-    font-family: "Open Sans",Helvetica,Arial,sans-serif;
     color: #222;
 }
 
@@ -64,7 +97,6 @@ body {
     box-shadow: 0 0 7px rgba(0,0,0,0.6);
     height: 70px;
     margin-bottom: 20px;
-    font-family: 'Roboto Condensed Light';
 }
 #logo {
     position: relative;
@@ -94,7 +126,6 @@ body {
     opacity: 0.8;
 }
 #currentTime {
-    font-family: 'Roboto Condensed Light';
     border: 0 solid #000000;
     font-size: 24px;
     position: absolute;
@@ -104,7 +135,6 @@ body {
     padding-left: 30px;
 }
 #footer {
-    font-family: 'Roboto Condensed Light';
     position: fixed;
     bottom: 0;
     height: 35px;
@@ -151,11 +181,6 @@ body {
     display: block !important;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
-    font-weight: normal;
-}
-
 h1 {
     font-size: 2.25em;
     line-height: 1.1em;
@@ -261,7 +286,6 @@ hr {
     text-align: right;
     border-radius: 7px 7px 7px 7px;
     z-index: 320;
-    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
 }
 .countdown .description {
     font-weight: normal;
@@ -287,7 +311,6 @@ hr {
     z-index: 300;
 }
 .message {
-    font-family: "Roboto Condensed",Helvetica,Arial,sans-serif;
     font-weight: normal;
     position: fixed;
     top: 35%;
@@ -426,7 +449,6 @@ tr.elected td {
     left: -25px;
     vertical-align: top;
     color: gray;
-    font-family: Courier, serif;
     font-size: 13px;
     font-weight: normal;
 }
@@ -444,7 +466,6 @@ tr.elected td {
     font-size: 0.75em;
     font-weight: normal;
     color: gray;
-    font-family: Courier, serif;
     margin-top: -5px;
     margin-left: 0;
 }
diff --git a/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html b/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
index 9c43937ab..403c888ab 100644
--- a/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
+++ b/openslides/mediafiles/static/templates/mediafiles/mediafile-list.html
@@ -279,16 +279,12 @@
       <!-- main content column -->
       <div class="col-xs-6 content">
         <div class="spacer-right"> <!-- horizontal block -->
-            <strong>
-              <i ng-style="{'visibility': mediafile.private ? 'visible' : 'hidden'}" class="fa fa-lock fa-lg"
-                title="{{ 'Is private' | translate }}"></i>
-            </strong>
+          <i ng-style="{'visibility': mediafile.private ? 'visible' : 'hidden'}" class="fa fa-lock fa-lg"
+              title="{{ 'Is private' | translate }}"></i>
         </div>
         <div>
           <div> <!-- vertical block -->
-            <strong>
-              <a ng-href="{{ mediafile.mediafileUrl }}" target="_blank">{{ mediafile.title_or_filename }}</a>
-            </strong>
+            <a ng-href="{{ mediafile.mediafileUrl }}" class="title" target="_blank">{{ mediafile.title_or_filename }}</a>
           </div>
           <div><small>{{ mediafile.uploader.get_full_name() }}</small></div>
           <div os-perms="mediafiles.can_manage" ng-class="{'hiddenDiv': !mediafile.hover}">
diff --git a/openslides/motions/static/templates/motions/motion-list.html b/openslides/motions/static/templates/motions/motion-list.html
index c170f45b6..c74347255 100644
--- a/openslides/motions/static/templates/motions/motion-list.html
+++ b/openslides/motions/static/templates/motions/motion-list.html
@@ -343,9 +343,7 @@
         <div>
           <!-- ID and title -->
           <div>
-            <strong>
               <a class="title" ui-sref="motions.motion.detail({id: motion.id})">{{ motion.getTitle() }}</a>
-            </strong>
             <i class="fa fa-paperclip" ng-if="motion.attachments_id.length > 0"></i>
             <span style="padding: 5px;" ng-mouseover="motion.stateHover=true" ng-mouseleave="motion.stateHover=false">
               <span class="label" ng-class="'label-'+motion.state.css_class">
diff --git a/openslides/users/static/templates/users/user-list.html b/openslides/users/static/templates/users/user-list.html
index 124145798..27afd4f82 100644
--- a/openslides/users/static/templates/users/user-list.html
+++ b/openslides/users/static/templates/users/user-list.html
@@ -277,18 +277,14 @@
       <!-- main content column -->
       <div class="col-xs-6 content">
         <div class="spacer-right"> <!-- horizontal block -->
-            <strong>
-              <i ng-style="{'visibility': user.is_active === false ? 'visible' : 'hidden'}" class="fa fa-ban"
-                title="{{ 'Is inactive' | translate }}"></i>
-              <i ng-style="{'visibility': user.is_committee ? 'visible' : 'hidden'}" class="fa fa-university"
-                title="{{ 'Is a committee' | translate }}"></i>
-            </strong>
+          <i ng-style="{'visibility': user.is_active === false ? 'visible' : 'hidden'}" class="fa fa-ban"
+            title="{{ 'Is inactive' | translate }}"></i>
+          <i ng-style="{'visibility': user.is_committee ? 'visible' : 'hidden'}" class="fa fa-university"
+            title="{{ 'Is a committee' | translate }}"></i>
         </div>
         <div>
           <div> <!-- vertical block -->
-            <strong>
-              <a ui-sref="users.user.detail({id: user.id})" class="title">{{ user.get_short_name() }}</a>
-            </strong>
+            <a ui-sref="users.user.detail({id: user.id})" class="title">{{ user.get_short_name() }}</a>
           </div>
           <div os-perms="users.can_manage"> <!-- user number -->
             <div ng-if="user.number" editable-text="user.number" onaftersave="save(user)">