Nice styling for sitemap pages

This commit is contained in:
Ben Hollis 2013-04-13 18:01:58 -07:00
parent b4f131d615
commit 310eae255e
6 changed files with 677 additions and 16 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View file

@ -1,5 +1,7 @@
summary { summary {
display: block; display: block;
font-family: "Arvo","andale mono","lucida console",monospace;
color: #002B36;
} }
details > details { details > details {
@ -7,9 +9,627 @@ details > details {
} }
details.resource > summary { details.resource > summary {
font-weight: bold;
} }
.resource-details { .resource-details {
margin-left: 15px; margin-left: 15px;
} }
summary > i {
margin-right: 4px;
}
.resource-details table {
margin-left: 1em;
font-size: .85em;
}
.resource-details th, .resource-details td {
padding: 0;
}
.resource-details th {
width: .1em;
white-space: nowrap;
padding-right: 1em;
text-decoration: none;
}
.resource-details td {
font-family: "Arvo","andale mono","lucida console",monospace;
}
details > summary:before {
content: "" !important;
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
line-height: 14px;
margin-right: 4px;
vertical-align: text-top;
background-image: url("glyphicons-halflings.png");
background-repeat: no-repeat;
background-position: -456px -72px;
}
details.open > summary:before {
background-position: -313px -119px;
}
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
.icon-glass {
background-position: 0 0;
}
.icon-music {
background-position: -24px 0;
}
.icon-search {
background-position: -48px 0;
}
.icon-envelope {
background-position: -72px 0;
}
.icon-heart {
background-position: -96px 0;
}
.icon-star {
background-position: -120px 0;
}
.icon-star-empty {
background-position: -144px 0;
}
.icon-user {
background-position: -168px 0;
}
.icon-film {
background-position: -192px 0;
}
.icon-th-large {
background-position: -216px 0;
}
.icon-th {
background-position: -240px 0;
}
.icon-th-list {
background-position: -264px 0;
}
.icon-ok {
background-position: -288px 0;
}
.icon-remove {
background-position: -312px 0;
}
.icon-zoom-in {
background-position: -336px 0;
}
.icon-zoom-out {
background-position: -360px 0;
}
.icon-off {
background-position: -384px 0;
}
.icon-signal {
background-position: -408px 0;
}
.icon-cog {
background-position: -432px 0;
}
.icon-trash {
background-position: -456px 0;
}
.icon-home {
background-position: 0 -24px;
}
.icon-file {
background-position: -24px -24px;
}
.icon-time {
background-position: -48px -24px;
}
.icon-road {
background-position: -72px -24px;
}
.icon-download-alt {
background-position: -96px -24px;
}
.icon-download {
background-position: -120px -24px;
}
.icon-upload {
background-position: -144px -24px;
}
.icon-inbox {
background-position: -168px -24px;
}
.icon-play-circle {
background-position: -192px -24px;
}
.icon-repeat {
background-position: -216px -24px;
}
.icon-refresh {
background-position: -240px -24px;
}
.icon-list-alt {
background-position: -264px -24px;
}
.icon-lock {
background-position: -287px -24px;
}
.icon-flag {
background-position: -312px -24px;
}
.icon-headphones {
background-position: -336px -24px;
}
.icon-volume-off {
background-position: -360px -24px;
}
.icon-volume-down {
background-position: -384px -24px;
}
.icon-volume-up {
background-position: -408px -24px;
}
.icon-qrcode {
background-position: -432px -24px;
}
.icon-barcode {
background-position: -456px -24px;
}
.icon-tag {
background-position: 0 -48px;
}
.icon-tags {
background-position: -25px -48px;
}
.icon-book {
background-position: -48px -48px;
}
.icon-bookmark {
background-position: -72px -48px;
}
.icon-print {
background-position: -96px -48px;
}
.icon-camera {
background-position: -120px -48px;
}
.icon-font {
background-position: -144px -48px;
}
.icon-bold {
background-position: -167px -48px;
}
.icon-italic {
background-position: -192px -48px;
}
.icon-text-height {
background-position: -216px -48px;
}
.icon-text-width {
background-position: -240px -48px;
}
.icon-align-left {
background-position: -264px -48px;
}
.icon-align-center {
background-position: -288px -48px;
}
.icon-align-right {
background-position: -312px -48px;
}
.icon-align-justify {
background-position: -336px -48px;
}
.icon-list {
background-position: -360px -48px;
}
.icon-indent-left {
background-position: -384px -48px;
}
.icon-indent-right {
background-position: -408px -48px;
}
.icon-facetime-video {
background-position: -432px -48px;
}
.icon-picture {
background-position: -456px -48px;
}
.icon-pencil {
background-position: 0 -72px;
}
.icon-map-marker {
background-position: -24px -72px;
}
.icon-adjust {
background-position: -48px -72px;
}
.icon-tint {
background-position: -72px -72px;
}
.icon-edit {
background-position: -96px -72px;
}
.icon-share {
background-position: -120px -72px;
}
.icon-check {
background-position: -144px -72px;
}
.icon-move {
background-position: -168px -72px;
}
.icon-step-backward {
background-position: -192px -72px;
}
.icon-fast-backward {
background-position: -216px -72px;
}
.icon-backward {
background-position: -240px -72px;
}
.icon-play {
background-position: -264px -72px;
}
.icon-pause {
background-position: -288px -72px;
}
.icon-stop {
background-position: -312px -72px;
}
.icon-forward {
background-position: -336px -72px;
}
.icon-fast-forward {
background-position: -360px -72px;
}
.icon-step-forward {
background-position: -384px -72px;
}
.icon-eject {
background-position: -408px -72px;
}
.icon-chevron-left {
background-position: -432px -72px;
}
.icon-chevron-right {
background-position: -456px -72px;
}
.icon-plus-sign {
background-position: 0 -96px;
}
.icon-minus-sign {
background-position: -24px -96px;
}
.icon-remove-sign {
background-position: -48px -96px;
}
.icon-ok-sign {
background-position: -72px -96px;
}
.icon-question-sign {
background-position: -96px -96px;
}
.icon-info-sign {
background-position: -120px -96px;
}
.icon-screenshot {
background-position: -144px -96px;
}
.icon-remove-circle {
background-position: -168px -96px;
}
.icon-ok-circle {
background-position: -192px -96px;
}
.icon-ban-circle {
background-position: -216px -96px;
}
.icon-arrow-left {
background-position: -240px -96px;
}
.icon-arrow-right {
background-position: -264px -96px;
}
.icon-arrow-up {
background-position: -289px -96px;
}
.icon-arrow-down {
background-position: -312px -96px;
}
.icon-share-alt {
background-position: -336px -96px;
}
.icon-resize-full {
background-position: -360px -96px;
}
.icon-resize-small {
background-position: -384px -96px;
}
.icon-plus {
background-position: -408px -96px;
}
.icon-minus {
background-position: -433px -96px;
}
.icon-asterisk {
background-position: -456px -96px;
}
.icon-exclamation-sign {
background-position: 0 -120px;
}
.icon-gift {
background-position: -24px -120px;
}
.icon-leaf {
background-position: -48px -120px;
}
.icon-fire {
background-position: -72px -120px;
}
.icon-eye-open {
background-position: -96px -120px;
}
.icon-eye-close {
background-position: -120px -120px;
}
.icon-warning-sign {
background-position: -144px -120px;
}
.icon-plane {
background-position: -168px -120px;
}
.icon-calendar {
background-position: -192px -120px;
}
.icon-random {
width: 16px;
background-position: -216px -120px;
}
.icon-comment {
background-position: -240px -120px;
}
.icon-magnet {
background-position: -264px -120px;
}
.icon-chevron-up {
background-position: -288px -120px;
}
.icon-chevron-down {
background-position: -313px -119px;
}
.icon-retweet {
background-position: -336px -120px;
}
.icon-shopping-cart {
background-position: -360px -120px;
}
.icon-folder-close {
width: 16px;
background-position: -384px -120px;
}
.icon-folder-open {
width: 16px;
background-position: -408px -120px;
}
.icon-resize-vertical {
background-position: -432px -119px;
}
.icon-resize-horizontal {
background-position: -456px -118px;
}
.icon-hdd {
background-position: 0 -144px;
}
.icon-bullhorn {
background-position: -24px -144px;
}
.icon-bell {
background-position: -48px -144px;
}
.icon-certificate {
background-position: -72px -144px;
}
.icon-thumbs-up {
background-position: -96px -144px;
}
.icon-thumbs-down {
background-position: -120px -144px;
}
.icon-hand-right {
background-position: -144px -144px;
}
.icon-hand-left {
background-position: -168px -144px;
}
.icon-hand-up {
background-position: -192px -144px;
}
.icon-hand-down {
background-position: -216px -144px;
}
.icon-circle-arrow-right {
background-position: -240px -144px;
}
.icon-circle-arrow-left {
background-position: -264px -144px;
}
.icon-circle-arrow-up {
background-position: -288px -144px;
}
.icon-circle-arrow-down {
background-position: -312px -144px;
}
.icon-globe {
background-position: -336px -144px;
}
.icon-wrench {
background-position: -360px -144px;
}
.icon-tasks {
background-position: -384px -144px;
}
.icon-filter {
background-position: -408px -144px;
}
.icon-briefcase {
background-position: -432px -144px;
}
.icon-fullscreen {
background-position: -456px -144px;
}

View file

@ -11,11 +11,15 @@ module Middleman
def render def render
content_tag :div, :class => 'resource-details' do content_tag :div, :class => 'resource-details' do
content_tag :dl do content_tag :table do
content = "" content = ""
resource_properties.each do |label, value| resource_properties.each do |label, value|
content << content_tag(:dt, label) content << content_tag(:tr) do
content << content_tag(:dd, value) row_content = ""
row_content << content_tag(:th, label)
row_content << content_tag(:td, value)
row_content
end
end end
content content
end end
@ -24,13 +28,20 @@ module Middleman
# A hash of label to value for all the properties we want to display # A hash of label to value for all the properties we want to display
def resource_properties def resource_properties
{ props = {
'Path' => @resource.path, 'Path' => @resource.path,
'Output Path' => File.join(@resource.app.build_dir, @resource.destination_path), 'Build Path' => @resource.destination_path,
'Url' => content_tag(:a, @resource.url, :href => @resource.url), 'URL' => content_tag(:a, @resource.url, :href => @resource.url),
#'Metadata' => @resource.metadata, 'Template' => @resource.source_file,
'Source' => @resource.source_file
} }
data = @resource.data
props['Data'] = data unless data.empty?
options = @resource.metadata[:options]
props['Options'] = options unless options.empty?
props
end end
def css_classes def css_classes

View file

@ -14,10 +14,30 @@ module Middleman
def render def render
content = "" content = ""
@children.keys.sort_by(&:downcase).each do |path_part| @children.keys.sort do |a,b|
a_subtree = @children[a]
b_subtree = @children[b]
if a_subtree.is_a? SitemapResource
if b_subtree.is_a? SitemapResource
a.downcase <=> b.downcase
else
1
end
elsif b_subtree.is_a? SitemapResource
if a_subtree.is_a? SitemapResource
b.downcase <=> a.downcase
else
-1
end
else
a.downcase <=> b.downcase
end
end.each do |path_part|
subtree = @children[path_part] subtree = @children[path_part]
content << "<details class='#{subtree.css_classes.join(' ')}'>" content << "<details class='#{subtree.css_classes.join(' ')}'>"
content << "<summary>#{path_part}</summary>" content << "<summary>"
content << "<i class='icon-folder-open'></i>" unless subtree.is_a? SitemapResource
content << "#{path_part}</summary>"
content << subtree.render content << subtree.render
content << "</details>" content << "</details>"
end end

View file

@ -13,10 +13,11 @@
<a href="../">&laquo; back</a> <a href="../">&laquo; back</a>
<h1>Middleman Configuration</h1> <h1>Middleman Configuration</h1>
<p>This page shows the current configuration of your Middleman application.</p>
<p> <p>
<a href="#core">Core configuration</a> <a href="#core">Core configuration</a>
| <a href="#extensions">Extensions</a> | <a href="#extensions">Extensions</a>
| <a href="http://middlemanapp.com">Middleman Guides</a>
</p> </p>
<h2 id="core">Core Configuration</h2> <h2 id="core">Core Configuration</h2>

View file

@ -5,6 +5,7 @@
<title>Middleman Sitemap</title> <title>Middleman Sitemap</title>
<link type="text/css" rel="stylesheet" href="../assets/meta.css"> <link type="text/css" rel="stylesheet" href="../assets/meta.css">
<link type="text/css" rel="stylesheet" href="../assets/sitemap.css"> <link type="text/css" rel="stylesheet" href="../assets/sitemap.css">
<script src="../assets/jquery-1.8.2.min.js"></script> <script src="../assets/jquery-1.8.2.min.js"></script>
@ -13,10 +14,18 @@
</head> </head>
<body> <body>
<div class="container">
<article id="main">
<a href="../">&laquo; back</a>
<h1>Middleman Sitemap</h1> <h1>Middleman Sitemap</h1>
<a href="../">More meta pages</a>
<p>This page shows all of the pages in
the <a href="http://middlemanapp.com/advanced/sitemap/">sitemap</a>,
Middleman's view of your site.</p>
<%= sitemap_tree.render %> <%= sitemap_tree.render %>
</article>
</div>
</body> </body>
</html> </html>