diff --git a/Assistant/Threads/WebApp.hs b/Assistant/Threads/WebApp.hs index 71ce317583..5407ed1954 100644 --- a/Assistant/Threads/WebApp.hs +++ b/Assistant/Threads/WebApp.hs @@ -61,6 +61,7 @@ instance Yesod WebApp where page <- widgetToPageContent $ do addStylesheet $ StaticR css_bootstrap_css addStylesheet $ StaticR css_bootstrap_responsive_css + addStylesheet $ StaticR css_webapp_css addScript $ StaticR jquery_full_js addScript $ StaticR js_bootstrap_dropdown_js addScript $ StaticR js_bootstrap_alert_js diff --git a/static/css/webapp.css b/static/css/webapp.css new file mode 100644 index 0000000000..ba309effa6 --- /dev/null +++ b/static/css/webapp.css @@ -0,0 +1,7 @@ +body { + padding-top: 60px; + padding-bottom: 40px; +} +.sidebar-nav { + padding: 9px 0; +} diff --git a/templates/bootstrap.hamlet b/templates/bootstrap.hamlet index 6697283b4f..360b3d686d 100644 --- a/templates/bootstrap.hamlet +++ b/templates/bootstrap.hamlet @@ -4,52 +4,44 @@ $doctype 5 #{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="#"> + <div .navbar .navbar-fixed-top> + <div .navbar-inner> + <div .container> + <a .brand href="#"> git-annex - <ul class="nav"> - <li class="active"> + <ul .nav> + <li .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"> + <ul .nav .pull-right> + <li .dropdown #menu1> + <a .dropdown-toggle data-toggle="dropdown" href="#menu1"> Current Repository: #{baseTitle webapp} - <b class="caret"></b> - <ul class="dropdown-menu"> + <b .caret></b> + <ul .dropdown-menu> <li><a href="#">#{baseTitle webapp}</a></li> - <li class="divider"></li> + <li .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"> - <a class="close" data-dismiss="alert" href="#">×</a> + <div .container-fluid> + <div .row-fluid> + <div .span3> + <div .sidebar-nav> + <div .alert .alert-info> + <a .close data-dismiss="alert" href="#">×</a> <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"> - <a class="close" data-dismiss="alert" href="#">×</a> + <div .alert .alert-success> + <a .close data-dismiss="alert" href="#">×</a> <b>Well done!</b> You successfully read this important alert message. - <div class="alert alert-error"> - <a class="close" data-dismiss="alert" href="#">×</a> + <div .alert .alert-error> + <a .close data-dismiss="alert" href="#">×</a> <b>Whoops!</b> Unable to connect to blah blah.. - <div class="span9"> + <div .span9> ^{pageBody page} diff --git a/templates/status.hamlet b/templates/status.hamlet index 9b9b0f7d18..2ccea1f1af 100644 --- a/templates/status.hamlet +++ b/templates/status.hamlet @@ -1,12 +1,12 @@ -<span id="#{updating}"> - <div class="span9"> +<span ##{updating}> + <div .span9> $if null transfers <h2>No current transfers $else <h2>Transfers $forall (transfer, info) <- transfers $with percent <- maybe "unknown" (showPercentage 0) $ percentComplete transfer info - <div class="row-fluid"> + <div .row-fluid> <h3> $maybe file <- associatedFile info #{file} @@ -20,11 +20,11 @@ <small>#{maybe "unknown" Remote.name $ transferRemote info}</small> $with size <- maybe "unknown" (roughSize dataUnits True) $ keySize $ transferKey transfer $if isJust $ startedTime info - <small class="pull-right"><b>#{percent} of #{size}</b></small> + <small .pull-right><b>#{percent} of #{size}</b></small> $else - <small class="pull-right">queued (#{size})</small> - <div class="progress progress-striped"> - <div class="bar" style="width: #{percent};"> + <small .pull-right>queued (#{size})</small> + <div .progress .progress-striped> + <div .bar style="width: #{percent};"> <footer> <span> polled at #{time}