template cleanup

use julius's nice #id and .class things
This commit is contained in:
Joey Hess 2012-07-27 20:25:28 -04:00
parent 7717501fee
commit ecd63e2981
4 changed files with 38 additions and 38 deletions

View file

@ -61,6 +61,7 @@ instance Yesod WebApp where
page <- widgetToPageContent $ do page <- widgetToPageContent $ do
addStylesheet $ StaticR css_bootstrap_css addStylesheet $ StaticR css_bootstrap_css
addStylesheet $ StaticR css_bootstrap_responsive_css addStylesheet $ StaticR css_bootstrap_responsive_css
addStylesheet $ StaticR css_webapp_css
addScript $ StaticR jquery_full_js addScript $ StaticR jquery_full_js
addScript $ StaticR js_bootstrap_dropdown_js addScript $ StaticR js_bootstrap_dropdown_js
addScript $ StaticR js_bootstrap_alert_js addScript $ StaticR js_bootstrap_alert_js

7
static/css/webapp.css Normal file
View file

@ -0,0 +1,7 @@
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}

View file

@ -4,52 +4,44 @@ $doctype 5
<title>#{baseTitle webapp} #{pageTitle page} <title>#{baseTitle webapp} #{pageTitle page}
<link rel="icon" href=@{StaticR favicon_ico} type="image/x-icon"> <link rel="icon" href=@{StaticR favicon_ico} type="image/x-icon">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <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} ^{pageHead page}
<body> <body>
<div class="navbar navbar-fixed-top"> <div .navbar .navbar-fixed-top>
<div class="navbar-inner"> <div .navbar-inner>
<div class="container"> <div .container>
<a class="brand" href="#"> <a .brand href="#">
git-annex git-annex
<ul class="nav"> <ul .nav>
<li class="active"> <li .active>
<a href="#">Dashboard</a> <a href="#">Dashboard</a>
<li> <li>
<a href="@{ConfigR}">Config</a> <a href="@{ConfigR}">Config</a>
<ul class="nav pull-right"> <ul .nav .pull-right>
<li class="dropdown" id="menu1"> <li .dropdown #menu1>
<a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> <a .dropdown-toggle data-toggle="dropdown" href="#menu1">
Current Repository: #{baseTitle webapp} Current Repository: #{baseTitle webapp}
<b class="caret"></b> <b .caret></b>
<ul class="dropdown-menu"> <ul .dropdown-menu>
<li><a href="#">#{baseTitle webapp}</a></li> <li><a href="#">#{baseTitle webapp}</a></li>
<li class="divider"></li> <li .divider></li>
<li><a href="#">Add new repository</a></li> <li><a href="#">Add new repository</a></li>
<div class="container-fluid"> <div .container-fluid>
<div class="row-fluid"> <div .row-fluid>
<div class="span3"> <div .span3>
<div class="sidebar-nav"> <div .sidebar-nav>
<div class="alert alert-info"> <div .alert .alert-info>
<a class="close" data-dismiss="alert" href="#">&times;</a> <a .close data-dismiss="alert" href="#">&times;</a>
<b>This is just a demo.</b> If this were not just a demo, <b>This is just a demo.</b> If this were not just a demo,
I'd not be filling this sidebar with silly alerts. I'd not be filling this sidebar with silly alerts.
<div class="alert alert-success"> <div .alert .alert-success>
<a class="close" data-dismiss="alert" href="#">&times;</a> <a .close data-dismiss="alert" href="#">&times;</a>
<b>Well done!</b> <b>Well done!</b>
You successfully read this important alert message. You successfully read this important alert message.
<div class="alert alert-error"> <div .alert .alert-error>
<a class="close" data-dismiss="alert" href="#">&times;</a> <a .close data-dismiss="alert" href="#">&times;</a>
<b>Whoops!</b> <b>Whoops!</b>
Unable to connect to blah blah.. Unable to connect to blah blah..
<div class="span9"> <div .span9>
^{pageBody page} ^{pageBody page}

View file

@ -1,12 +1,12 @@
<span id="#{updating}"> <span ##{updating}>
<div class="span9"> <div .span9>
$if null transfers $if null transfers
<h2>No current transfers <h2>No current transfers
$else $else
<h2>Transfers <h2>Transfers
$forall (transfer, info) <- transfers $forall (transfer, info) <- transfers
$with percent <- maybe "unknown" (showPercentage 0) $ percentComplete transfer info $with percent <- maybe "unknown" (showPercentage 0) $ percentComplete transfer info
<div class="row-fluid"> <div .row-fluid>
<h3> <h3>
$maybe file <- associatedFile info $maybe file <- associatedFile info
#{file} #{file}
@ -20,11 +20,11 @@
<small>#{maybe "unknown" Remote.name $ transferRemote info}</small> <small>#{maybe "unknown" Remote.name $ transferRemote info}</small>
$with size <- maybe "unknown" (roughSize dataUnits True) $ keySize $ transferKey transfer $with size <- maybe "unknown" (roughSize dataUnits True) $ keySize $ transferKey transfer
$if isJust $ startedTime info $if isJust $ startedTime info
<small class="pull-right"><b>#{percent} of #{size}</b></small> <small .pull-right><b>#{percent} of #{size}</b></small>
$else $else
<small class="pull-right">queued (#{size})</small> <small .pull-right>queued (#{size})</small>
<div class="progress progress-striped"> <div .progress .progress-striped>
<div class="bar" style="width: #{percent};"> <div .bar style="width: #{percent};">
<footer> <footer>
<span> <span>
polled at #{time} polled at #{time}