diff options
| author |  Joey Hess <joey@kitenet.net> | 2012-07-27 04:48:50 -0400 |
|---|---|---|
| committer | Joey Hess <joey@kitenet.net> | 2012-07-27 04:48:50 -0400 |
| commit | 7e3c1e008d6b2eff10d412993df293fce2156151 (patch) | |
| tree | bd1d1395c452df84573e7a8acb560e623e4ad063 /templates | |
| parent | 1192e305c7fa7ba0b6572cc8c450127d6458b0af (diff) | |
webapp now uses twitter bootstrap
mocked up the main screen, and am actually pretty happy with it!
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/bootstrap.hamlet | 52 | ||||
| -rw-r--r-- | templates/default-layout.hamlet | 13 | ||||
| -rw-r--r-- | templates/longpolling.julius | 4 | ||||
| -rw-r--r-- | templates/status.hamlet | 28 |
4 files changed, 83 insertions, 14 deletions
diff --git a/templates/bootstrap.hamlet b/templates/bootstrap.hamlet new file mode 100644 index 000000000..c03c459a6 --- /dev/null +++ b/templates/bootstrap.hamlet @@ -0,0 +1,52 @@ +$doctype 5 +<html> + <head> + <title>#{baseTitle webapp} #{pageTitle page} + <link rel="icon" href=@{StaticR favicon_ico} type="image/x-icon"> + <meta name="viewport" content="width=device-width,initial-scale=1.0"> + <style type="text/css"> + body { + padding-top: 60px; + padding-bottom: 40px; + } + .sidebar-nav { + padding: 9px 0; + } + ^{pageHead page} + <body> + + <div class="navbar navbar-fixed-top"> + <div class="navbar-inner"> + <div class="container"> + <a class="brand" href="#"> + git-annex + <ul class="nav"> + <li class="active"> + <a href="#">Dashboard</a> + <li> + <a href="@{ConfigR}">Config</a> + <ul class="nav pull-right"> + <li class="dropdown" id="menu1"> + <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> + Current Repository: #{baseTitle webapp} + <b class="caret"></b> + <ul class="dropdown-menu"> + <li><a href="#">#{baseTitle webapp}</a></li> + <li class="divider"></li> + <li><a href="#">Add new repository</a></li> + + <div class="container-fluid"> + <div class="row-fluid"> + <div class="span3"> + <div class="sidebar-nav"> + <div class="alert alert-info"> + <b>This is just a demo.</b> If this were not just a demo, + I'd not be filling this sidebar with silly alerts. + <div class="alert alert-success"> + <b>Well done!</b> + You successfully read this important alert message. + <div class="alert alert-error"> + <b>Whoops!</b> + Unable to connect to blah blah.. + <div class="span9"> + ^{pageBody page} diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet index bd16969f9..3701e3c42 100644 --- a/templates/default-layout.hamlet +++ b/templates/default-layout.hamlet @@ -1,10 +1,3 @@ -$doctype 5 -<html> - <head> - <title>#{baseTitle webapp} #{pageTitle page} - <link rel="icon" href=@{StaticR favicon_ico} type="image/x-icon"> - ^{pageHead page} - <body> - $maybe msg <- mmsg - <div #message>#{msg} - ^{pageBody page} +$maybe msg <- mmsg + <div #message>#{msg} +^{widget} diff --git a/templates/longpolling.julius b/templates/longpolling.julius index 351f2f8c6..eff8d3f44 100644 --- a/templates/longpolling.julius +++ b/templates/longpolling.julius @@ -1,5 +1,5 @@ -// Uses long-polling to update a div with id=#{poll} +// Uses long-polling to update a div with id=#{updating} // The gethtml route should return a new div, with the same id. // // Maximum update frequency is controlled by #{startdelay} @@ -16,7 +16,7 @@ $.LongPoll = (function() { 'url': '@{gethtml}', 'dataType': 'html', 'success': function(data, status, jqxhr) { - $('##{poll}').replaceWith(data); + $('##{updating}').replaceWith(data); setTimeout($.LongPoll.send, #{delay}); numerrs=0; }, diff --git a/templates/status.hamlet b/templates/status.hamlet index 1f975b35f..1da189d1f 100644 --- a/templates/status.hamlet +++ b/templates/status.hamlet @@ -1,2 +1,26 @@ -<div id="#{poll}"> - polled at #{time} +<span id="#{updating}"> + <div class="hero-unit"> + <div class="row-fluid"> + <h3> + foo ← + <small>usb drive</small> + <small class="pull-right">40% of 10 mb</small> + <div class="progress progress-striped"> + <div class="bar" style="width: 40%;"> + <div class="row-fluid"> + <h3> + some_filenames_are_long_and_ugly_like_this_one.mp3 → + <small>Amazon S3</small> + <small class="pull-right">10% of 50 mb</small> + <div class="progress progress-striped"> + <div class="bar" style="width: 10%;"> + <div class="row-fluid"> + <h3> + bigfile ← + <small>usb drive</small> + <small class="pull-right">0% of 512 mb</small> + <div class="progress progress-striped"> + <div class="bar" style="width: 0%;"> + <footer> + <span> + polled at #{time} |