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.
2016-12-07 23:04:35 +01:00 · 2016-12-07 23:04:35 +01:00 · fb7b265826
commit fb7b265826
parent 77fdfd558f
9 changed files with 122 additions and 71 deletions
--- 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",
--- 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')));
 });
--- 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'}"
+          <i class="fa fa-ban" ng-style="{'visibility': item.is_hidden ? 'visible' : 'hidden'}"
            title="{{ 'Internal item' | translate }}"></i>
-          </strong>
        </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>
          </div>
          <!-- hover menu -->
          <div os-perms="agenda.can_see" ng-class="{'hiddenDiv': !item.hover}">
--- 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})">
+            <a class="title" ui-sref="assignments.assignment.detail({id: assignment.id})">
              {{ assignment.title }}
            </a>
-            </strong>
            <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,
--- 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;
+    }
 }


--- 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;
 }
--- 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>
        </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}">
--- 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">
--- 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>
        </div>
        <div>
          <div> <!-- vertical block -->
-            <strong>
            <a ui-sref="users.user.detail({id: user.id})" class="title">{{ user.get_short_name() }}</a>
-            </strong>
          </div>
          <div os-perms="users.can_manage"> <!-- user number -->
            <div ng-if="user.number" editable-text="user.number" onaftersave="save(user)">