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.
This commit is contained in:
Emanuel Schütze 2016-12-07 23:04:35 +01:00
parent 77fdfd558f
commit fb7b265826
9 changed files with 122 additions and 71 deletions

View File

@ -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",

View File

@ -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')));
});

View File

@ -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}">

View File

@ -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,

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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}">

View File

@ -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">

View File

@ -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)">