Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixing fonts

This commit is contained in:
Tom Gallacher 2017-01-13 17:57:42 +00:00
parent 1af66477d3
commit 4953ae36ea
8 changed files with 108 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/webpack/base.js
View File

@ -71,6 +71,15 @@ module.exports = {
loader: [
'url-loader'
]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
exclude: /node_modules/,
loader: 'file-loader',
include: [
FRONTEND,
UI
]
}]
}
};

17
ui/src/components/base/global.js
View File

@ -1,10 +1,27 @@
const Styled = require('styled-components');
const fncs = require('../../shared/functions');
const {
generateFonts
} = fncs;
const {
css
} = Styled;
// The name that will be used in the 'font-family' property
const fontFamilies = [
'LibreFranklin'
];
// The name the font file without the extension
const fontFilenames = [
'librefranklin-webfont'
];
module.exports = css`
${generateFonts(fontFamilies, fontFilenames)}
html, body {
font-size: 16px;
margin: 0;

16
ui/src/components/base/index.js
View File

@ -15,25 +15,11 @@ const {
} = Styled;
const {
generateFonts,
remcalc
} = fncs;
// The name that will be used in the 'font-family' property
const fontFamilies = [
'LibreFranklin'
];
// The name the font file without the extension
const fontFilenames = [
'librefranklin-webfont'
];
module.exports = styled.div`
${generateFonts(fontFamilies, fontFilenames)};
font-family: 'LibreFranklin', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-family: 'LibreFranklin', sans-serif;
font-size: 1rem;
line-height: 1.5;
color: ${colors.fonts.regular};

19
ui/src/components/horizontal-list/li.js
View File

@ -1,23 +1,34 @@
const fns = require('../../shared/functions');
const constants = require('../../shared/constants');
const Styled = require('styled-components');
const {
remcalc
} = fns;
const {
colors
} = constants;
const {
default: styled
} = Styled;
module.exports = styled.li`
display: inline-block;
margin-right: ${remcalc(10)};
margin-right: ${remcalc(64)};
padding-top: ${remcalc(10)};
padding-bottom: ${remcalc(10)};
& a.active {
cursor: default;
color: #373A3C;
& a {
color: ${colors.fonts.regular};
text-decoration: none;
}
& a.active {
cursor: default;
color: ${colors.brandPrimaryLink};
border-bottom: 2px solid ${colors.brandPrimaryLinkUnderline};
padding-bottom: ${remcalc(6)};
}
`;

38
ui/src/components/horizontal-list/story.js Normal file
View File

@ -0,0 +1,38 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Base= require('../base');
const Li = require('./li');
const Ul = require('./ul');
storiesOf('Unordered List', module)
.add('Default', () => (
<Base>
<Ul>
<Li>
<a className="active" href="">
<span>
One
</span>
</a>
</Li>
<Li>
<a href="">
<span>
Two
</span>
</a>
</Li>
<Li>
<a href="">
<span>
Three
</span>
</a>
</Li>
</Ul>
</Base>
));

10
ui/src/components/topology/index.js
View File

@ -81,7 +81,7 @@ const StyledSVGContainer = styled.svg`
}
.health, .health_warn {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: bold;
font-style: normal;
@ -94,7 +94,7 @@ const StyledSVGContainer = styled.svg`
}
.stat {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@ -103,7 +103,7 @@ const StyledSVGContainer = styled.svg`
}
.node_statistics {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@ -117,7 +117,7 @@ const StyledSVGContainer = styled.svg`
}
.primary, .secondary {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(12)};
font-weight: normal;
font-style: normal;
@ -126,7 +126,7 @@ const StyledSVGContainer = styled.svg`
}
.info_text {
font-family: "Libre Franklin";
font-family: "LibreFranklin";
font-size: ${remcalc(16)};
font-weight: 600;
font-style: normal;

6
ui/src/shared/constants/colors.js
View File

@ -11,7 +11,8 @@ const brandPrimary = {
borderPrimaryDark: '#2531BC',
borderPrimaryDarkest: '#062BA0',
brandPrimaryColor: '#FFFFFF',
brandPrimaryLink: '#364acd'
brandPrimaryLink: '#364ACD',
brandPrimaryLinkUnderline: '#3B47CC'
};
const brandSecondary = {
@ -22,7 +23,8 @@ const brandSecondary = {
borderSecondaryDark: '#D8D8D8',
borderSecondaryDarkest: '#D8D8D8',
brandSecondaryColor: '#464646',
brandSecondaryLink: '#ffffff'
brandSecondaryLink: '#FFFFFF',
brandSecondaryLinkUnderline: '#FFFFFF'
};
const brandInactive = {

33
ui/src/shared/functions.js
View File

@ -15,26 +15,31 @@ const rndId = (_code) => {
};
const generateFonts = (fontFamilies, fontFilenames) => {
const pathToFont = '../../shared/fonts/';
const pathToFont = './fonts/';
let fontCSS = '';
fontFamilies.forEach( (fontFamily, i) => {
const eot = require(`${pathToFont + fontFilenames[i]}.eot`);
const woff = require(`${pathToFont + fontFilenames[i]}.woff`);
const woff2 = require(`${pathToFont + fontFilenames[i]}.woff2`);
const ttf = require(`${pathToFont + fontFilenames[i]}.ttf`);
const svg = require(`${pathToFont + fontFilenames[i]}.svg`);
fontCSS += `
@font-face {
font-family: ${fontFamily};
src: url(${pathToFont + fontFilenames[i]}.eot);
src: url(${pathToFont + fontFilenames[i]}.eot?#iefix)
format('embedded-opentype');
src: url(${pathToFont + fontFilenames[i]}.woff)
format('woff');
src: url(${pathToFont + fontFilenames[i]}.woff2)
format('woff2');
src: url(${pathToFont + fontFilenames[i]}.ttf)
format('truetype');
src: url(${pathToFont + fontFilenames[i]}.svg#${fontFamily})
format('svg');
font-family: '${fontFamily}';
src: url('${eot}'),
url('${eot}?#iefix')
format('embedded-opentype'),
url('${woff}')
format('woff'),
url('${woff2}')
format('woff2'),
url('${ttf}')
format('truetype'),
url('${svg}#${fontFamily}')
format('svg')
font-weight: normal;
font-style: normal;
font-style: normal;
}
`;
});