update notifications css (#56)

This commit is contained in:
Lynn 2017-04-11 15:01:14 -07:00 committed by GitHub
parent 6b99dc541e
commit 1047a26f15
3 changed files with 29 additions and 17 deletions

View File

@ -22,10 +22,9 @@ function setStyle(config) {
// Default style
setStyleOnDomElement(config.defaultStyleContainer, container)
// Size and radius
let style = {
height: config.height - 2 * config.borderRadius - 2 * config.defaultStyleContainer.padding,
width: config.width - 2 * config.borderRadius - 2 * config.defaultStyleContainer.padding,
height: config.height,
width: config.width,
borderRadius: config.borderRadius + 'px'
}
setStyleOnDomElement(style, container)

View File

@ -1,13 +1,18 @@
<html>
<head></head>
<body style='overflow: hidden; -webkit-user-select: none;'>
<body style='margin:0; overflow: hidden; -webkit-user-select: none;'>
<div id="container">
<div id="header">
<img src="" id="image" />
<span id="title"></span>
</div>
<p id="message"></p>
<div id="close">X</div>
<div id="close">
<svg fill="#000000" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg">
<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
<path d="M0 0h24v24H0z" fill="none"/>
</svg>
</div>
</div>
</body>
</html>

View File

@ -48,8 +48,7 @@ let config = {
startCorner: 'upper-right',
width: 300,
height: 80,
padding: 4,
borderRadius: 5,
borderRadius: 2,
displayTime: 5000,
animationSteps: 5,
animationStepMs: 5,
@ -62,10 +61,10 @@ let config = {
flexDirection: 'column',
backgroundColor: '#f0f0f0',
overflow: 'hidden',
padding: 4,
border: '1px solid #CCC',
padding: 10,
position: 'relative',
lineHeight: '15px'
lineHeight: '15px',
boxSizing: 'border-box'
},
defaultStyleHeader: {
flex: '0 0 auto',
@ -82,14 +81,19 @@ let config = {
},
defaultStyleClose: {
position: 'absolute',
top: 12,
right: 12,
top: 8,
right: 8,
width: 16,
height: 16,
opacity: 0.54,
fontSize: 12,
color: '#CCC'
},
defaultStyleTitle: {
fontFamily: 'Arial',
fontSize: 13,
fontSize: 14,
fontWeight: 700,
opacity: 0.87,
marginRight: 10,
alignSelf: 'center',
overflow: 'hidden',
@ -100,9 +104,11 @@ let config = {
defaultStyleText: {
flex: '0 0 auto',
fontFamily: 'Calibri',
fontSize: 12,
fontSize: 14,
fontWeight: 400,
opacity: 0.87,
margin: 0,
marginTop: 3,
marginTop: 4,
overflow: 'hidden',
display: '-webkit-box',
webkitLineClamp: 2,
@ -159,9 +165,11 @@ function getTemplatePath() {
}
function calcDimensions() {
const vertSpaceBetweenNotf = 8;
// Calc totalHeight & totalWidth
config.totalHeight = config.height + config.padding
config.totalWidth = config.width + config.padding
config.totalHeight = config.height + vertSpaceBetweenNotf;
config.totalWidth = config.width
let firstPosX, firstPosY;
switch (config.startCorner) {