diff options
| author | Bharat Mediratta <bharat@menalto.com> | 2009-06-20 12:09:49 -0700 |
|---|---|---|
| committer | Bharat Mediratta <bharat@menalto.com> | 2009-06-20 12:09:49 -0700 |
| commit | ef7f1d07b246c0d58fd5322cfcdd8fb0cfbee2f3 (patch) | |
| tree | a713f3c5f8c633e4907dbd1fc0f1d7f05c56e22c | |
| parent | acd54fefdabf9eabd16f04bb76cf128c479b0291 (diff) | |
Center the "all done" dialog. Use Jquery and externalize the CSS (I was being
too conservative before). Fixes ticket #413.
| -rw-r--r-- | modules/gallery/css/upgrader.css | 117 | ||||
| -rw-r--r-- | modules/gallery/views/upgrader.html.php | 108 |
2 files changed, 126 insertions, 99 deletions
diff --git a/modules/gallery/css/upgrader.css b/modules/gallery/css/upgrader.css new file mode 100644 index 00000000..6bd16064 --- /dev/null +++ b/modules/gallery/css/upgrader.css @@ -0,0 +1,117 @@ +body { + background: #eee; + font-family: Trebuchet MS; + font-size: 1.1em; +} + +h1 { + font-size: 1.4em; +} + +div#outer { + width: 650px; + background: white; + border: 1px solid #999; + margin: 0 auto; + padding: -10px; +} + +div#inner { + padding: 0 1em 0 1em; + margin: 0px; +} + +div#footer { + border-top: 1px solid #ccc; + margin: 1em; +} + +td.name { + text-align: left; + padding-left: 30px; +} + +td { + text-align: center; + border-bottom: 1px solid #eee; +} + +tr.current td { + color: #999; + font-style: italic; +} + +tr.current td.gallery { + color: #00d; +} + +tr.upgradeable td { + font-weight: bold; +} + +tr.upgradeable td.gallery { + color: #00d; +} + +table { + width: 600px; + margin-bottom: 10px; +} + +p { + font-size: .9em; +} + +ul { + font-size: .9em; + list-style: none; +} + +li { + display: inline; +} + +li:before { + content: "\00BB \0020"; +} + +div.button { + margin: 0 auto; + width: 120px; + text-align: center; + border: 1px solid #999; + background: #eee; +} + +div.button a { + text-decoration: none; +} + +div.button:hover { + background: #ccc; +} + +div#confirmation { + position: absolute; + background: blue; + z-index: 1000; + margin: 10px; + text-align: center; +} + +div#confirmation div { + margin: 2px; + padding: 20px; + border: 2px solid #999; + background: #eee; +} + +.gray_on_done { + opacity: <?= $done ? "0.5" : "1" ?>; +} + +pre { + display: inline; + margin: 0px; + padding: 0px; +} diff --git a/modules/gallery/views/upgrader.html.php b/modules/gallery/views/upgrader.html.php index fa21e196..07792322 100644 --- a/modules/gallery/views/upgrader.html.php +++ b/modules/gallery/views/upgrader.html.php @@ -2,106 +2,10 @@ <html> <head> <title><?= t("Gallery3 Upgrader") ?></title> + <link rel="stylesheet" type="text/css" href="<?= url::file("modules/gallery/css/upgrader.css") ?>" + media="screen,print,projection" /> + <script src="<?= url::file("lib/jquery.js") ?>" type="text/javascript"></script> </head> - <style> - body { - background: #eee; - font-family: Trebuchet MS; - font-size: 1.1em; - } - h1 { - font-size: 1.4em; - } - div#outer { - width: 650px; - background: white; - border: 1px solid #999; - margin: 0 auto; - padding: -10px; - } - div#inner { - padding: 0 1em 0 1em; - margin: 0px; - } - div#footer { - border-top: 1px solid #ccc; - margin: 1em; - } - td.name { - text-align: left; - padding-left: 30px; - } - td { - text-align: center; - border-bottom: 1px solid #eee; - } - tr.current td { - color: #999; - font-style: italic; - } - tr.current td.gallery { - color: #00d; - } - tr.upgradeable td { - font-weight: bold; - } - tr.upgradeable td.gallery { - color: #00d; - } - table { - width: 600px; - margin-bottom: 10px; - } - p { - font-size: .9em; - } - ul { - font-size: .9em; - list-style: none; - } - li { - display: inline; - } - li:before { - content: "\00BB \0020"; - } - div.button { - margin: 0 auto; - width: 120px; - text-align: center; - border: 1px solid #999; - background: #eee; - } - div.button a { - text-decoration: none; - } - div.button:hover { - background: #ccc; - } - div#confirmation { - position: fixed; - top: 400px; - left: 325px; - background: blue; - z-index: 1000; - margin: 10px; - text-align: center; - } - div#confirmation div { - margin: 2px; - padding: 20px; - border: 2px solid #999; - background: white; - } - .gray_on_done { - opacity: <?= $done ? "0.5" : "1" ?>; - } - pre { - display: inline; - margin: 0px; - padding: 0px; - } - </style> <body> <div id="outer"> <img src="<?= url::file("modules/gallery/images/gallery.png") ?>" /> @@ -117,6 +21,12 @@ </p> </div> </div> + <script type="text/javascript"> + $(document).ready(function() { + $("#confirmation").css("left", Math.round(($(window).width() - $("#confirmation").width()) / 2)); + $("#confirmation").css("top", Math.round(($(window).height() - $("#confirmation").height()) / 2)); + }); + </script> <? endif ?> <p class="gray_on_done"> <?= t("Welcome to the Gallery upgrader. One click and you're done!") ?> |