webpyapp: support de bootstrapcss
|
@ -44,20 +44,50 @@ def jscss(href, min=False):
|
|||
BPSUPPL_CSS = "bpsuppl.css"
|
||||
def blueprintcss(prefix=None, suppl=True):
|
||||
if prefix is None:
|
||||
prefix = ""
|
||||
bpsuppl = BPSUPPL_CSS
|
||||
prefix = "/static/blueprint/"
|
||||
bpsuppl = "/static/%s" % BPSUPPL_CSS
|
||||
else:
|
||||
pprefix = path.split(prefix)[0]
|
||||
bpsuppl = path.join(pprefix, BPSUPPL_CSS)
|
||||
if not prefix.endswith("/"): prefix = prefix + "/"
|
||||
lines = [
|
||||
css("%sscreen.css" % prefix, "screen, projection"),
|
||||
css("%sprint.css" % prefix, "print"),
|
||||
u"<!--[if lt IE 8]>",
|
||||
css("%sie.css" % prefix, "screen, projection"),
|
||||
u"<![endif]-->",
|
||||
]
|
||||
if suppl:
|
||||
lines.extend([
|
||||
css(bpsuppl),
|
||||
])
|
||||
return u"\n".join(lines)
|
||||
|
||||
def bootstrapcss(prefix=None, icons=True, charset="utf-8"):
|
||||
if prefix is None: prefix = "/static/bootstrap/"
|
||||
elif not prefix.endswith("/"): prefix = prefix + "/"
|
||||
lines = [
|
||||
'<meta charset="%s" />' % charset,
|
||||
'<meta http-equiv="X-UA-Compatible" content="IE=edge" />',
|
||||
'<meta name="viewport" content="width=device-width, initial-scale=1.0" />',
|
||||
]
|
||||
if icons:
|
||||
lines.extend([
|
||||
'<link rel="shortcut" href="%sfavicon.ico" />' % prefix,
|
||||
'<link rel="icon apple-touch-icon" href="%sicon.png" />' % prefix,
|
||||
])
|
||||
lines.extend([
|
||||
css("%sbootstrap/css/bootstrap.min.css" % prefix),
|
||||
css("%sbslocal.css" % prefix),
|
||||
js("%sjquery.min.js" % prefix),
|
||||
js("%sbootstrap/js/bootstrap.min.js" % prefix),
|
||||
u"<!--[if lt IE 9]>",
|
||||
js("%shtml5shiv/html5shiv.js" % prefix),
|
||||
js("%srespond/respond.min.js" % prefix),
|
||||
u"<![endif]-->",
|
||||
])
|
||||
return u"\n".join(lines)
|
||||
|
||||
return u"\n".join([css("%sscreen.css" % prefix, "screen, projection"),
|
||||
css("%sprint.css" % prefix, "print"),
|
||||
u"<!--[if lt IE 8]>",
|
||||
css("%sie.css" % prefix, "screen, projection"),
|
||||
u"<![endif]-->",
|
||||
css(bpsuppl),
|
||||
])
|
||||
DEFAULT_TEMPLATE_GLOBALS = {'_u': _u,
|
||||
'checked': checked,
|
||||
'selected': selected,
|
||||
|
@ -66,6 +96,7 @@ DEFAULT_TEMPLATE_GLOBALS = {'_u': _u,
|
|||
'js': js,
|
||||
'jscss': jscss,
|
||||
'blueprintcss': blueprintcss,
|
||||
'bootstrapcss': bootstrapcss,
|
||||
'plural': plural,
|
||||
}
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<link rel="icon" href="./icon.png" />
|
||||
<link rel="apple-touch-icon" href="./icon.png" />
|
||||
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./bootstrap/bslocal.css" rel="stylesheet"/>
|
||||
<script src="./jquery.min.js" type="text/javascript"></script>
|
||||
<script src="./bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 9]>
|
|
@ -9,6 +9,7 @@
|
|||
<link rel="icon" href="./icon.png" />
|
||||
<link rel="apple-touch-icon" href="./icon.png" />
|
||||
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="./bootstrap/bslocal.css" rel="stylesheet"/>
|
||||
<script src="./jquery.min.js" type="text/javascript"></script>
|
||||
<script src="./bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 9]>
|
|
@ -0,0 +1,54 @@
|
|||
/* -*- coding: utf-8 -*- vim:sw=4:sts=4:et:ai:si:sta:fenc=utf-8
|
||||
*/@CHARSET "utf-8";
|
||||
|
||||
/* Icones ------------------------------------------------------------------- */
|
||||
.bperror, .bpwarning, .bpdone, .bpinfo, .bpquestion, .bphelp, .bpplus, .bpminus {
|
||||
padding-left: 18px; min-height: 16px; background-repeat: no-repeat;
|
||||
}
|
||||
.bperror { background-image: url(icons/error.png); }
|
||||
.bpwarning { background-image: url(icons/warning.png); }
|
||||
.bpdone { background-image: url(icons/done.png); }
|
||||
.bpinfo { background-image: url(icons/info.png); }
|
||||
.bpquestion { background-image: url(icons/question.png); }
|
||||
.bphelp { background-image: url(icons/help.png); }
|
||||
.bpplus { background-image: url(icons/plus.png); }
|
||||
.bpminus { background-image: url(icons/minus.png); }
|
||||
.bperrorm, .bpwarningm, .bpdonem, .bpinfom, .bpneutralm {
|
||||
margin: 0.67em 0; padding: 0.33em 0 0.67em 42px; min-height: 4em; border: 2px solid #ddd;
|
||||
background-repeat: no-repeat; background-position: 5px 1em;
|
||||
}
|
||||
.bperrorm.bpm-nobg, .bpwarningm.bpm-nobg, .bpdonem.bpm-nobg, .bpinfom.bpm-nobg, .bpneutralm.bpm-nobg {
|
||||
background-color: inherit; color: inherit;
|
||||
}
|
||||
.bperrorm { background-image: url(icons/lerror.png); background-color: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
|
||||
.bpwarningm { background-image: url(icons/lwarning.png); background-color: #FFF6BF; color: #514721; border-color: #FFD324; }
|
||||
.bpdonem { background-image: url(icons/ldone.png); background-color: #E6EFC2; color: #264409; border-color: #C6D880; }
|
||||
.bpinfom { background-image: url(icons/linfo.png); border-color: #5566CC; }
|
||||
.bpneutralm { background-image: url(icons/lneutral.png); }
|
||||
|
||||
/* Divers ------------------------------------------------------------------- */
|
||||
|
||||
.auto { width: auto; }
|
||||
.table-auto { width: auto; }
|
||||
|
||||
/* <div class="col-div"><span>header</span>content</div> */
|
||||
.col-div { margin-left: 10em; position: relative; }
|
||||
.col-div span:first-child { font-weight: bold; display: inline-block; position: absolute; left: -10em; }
|
||||
/* <div><span class="col-span">header</span>content</div> */
|
||||
.col-span { font-weight: bold; width: 10em; display: inline-block; }
|
||||
|
||||
/* <div class="vcontainer" style="height: 300px;"><div class="valign">vertical aligned content</div></div> */
|
||||
.vcontainer:before { content:""; display:inline-block; height:100%; vertical-align:middle; }
|
||||
.valign { display:inline-block; }
|
||||
|
||||
/* <div class="logo-container"><div class="bglogo"></div>content</div> */
|
||||
.bglogo {
|
||||
background-image: url(images/logoUR-bg.jpg);
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
width: 316px;
|
||||
height: 286px;
|
||||
z-index: -3000;
|
||||
}
|
||||
.logo-container { position: relative; }
|
||||
.logo-container .bglogo { right: 0px; top: 0px; }
|
After Width: | Height: | Size: 724 B |
After Width: | Height: | Size: 625 B |
After Width: | Height: | Size: 717 B |
After Width: | Height: | Size: 744 B |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.3 KiB |
After Width: | Height: | Size: 2.2 KiB |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 655 B |
After Width: | Height: | Size: 711 B |
After Width: | Height: | Size: 766 B |
After Width: | Height: | Size: 654 B |
|
@ -0,0 +1,13 @@
|
|||
$def with ()
|
||||
<!DOCTYPE html><!-- -*- coding: utf-8 mode: html -*- vim:sw=4:sts=4:et:ai:si:sta:fenc=utf-8
|
||||
--><html lang="fr">
|
||||
<head>
|
||||
$:bootstrapcss()
|
||||
<title>Template</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Template</h1>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
|
@ -2,18 +2,7 @@ $def with ()
|
|||
<!DOCTYPE html><!-- -*- coding: utf-8 mode: html -*- vim:sw=4:sts=4:et:ai:si:sta:fenc=utf-8
|
||||
--><html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="shortcut" href="/static/bootstrap/favicon.ico" />
|
||||
<link rel="icon apple-touch-icon" href="/static/bootstrap/icon.png" />
|
||||
<link href="/static/bootstrap/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
|
||||
<script src="/static/bootstrap/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="/static/bootstrap/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/static/bootstrap/html5shiv/html5shiv.js"></script>
|
||||
<script src="/static/bootstrap/respond/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
$:bootstrapcss()
|
||||
<title>index</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|