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
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

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}
<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="#">&times;</a>
<div .container-fluid>
<div .row-fluid>
<div .span3>
<div .sidebar-nav>
<div .alert .alert-info>
<a .close data-dismiss="alert" href="#">&times;</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="#">&times;</a>
<div .alert .alert-success>
<a .close data-dismiss="alert" href="#">&times;</a>
<b>Well done!</b>
You successfully read this important alert message.
<div class="alert alert-error">
<a class="close" data-dismiss="alert" href="#">&times;</a>
<div .alert .alert-error>
<a .close data-dismiss="alert" href="#">&times;</a>
<b>Whoops!</b>
Unable to connect to blah blah..
<div class="span9">
<div .span9>
^{pageBody page}

View file

@ -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}