Skip to content

Commit 505e2e0

Browse files
MouqMouq
committed
Start getting handling in place for updated header
This includes setting up the menu and sub-menus, though it currently only displays a selection on the top menu
1 parent aab3b69 commit 505e2e0

File tree

4 files changed

+151
-22
lines changed

4 files changed

+151
-22
lines changed

‎app.pl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
get '(*dir)/' => sub {
1515
my $self = shift;
1616
my $dir = $self->param('dir');
17-
return $self->redirect_to("/$dir/index.html");
17+
return $self->redirect_to("/$dir.html");
1818
};
1919

2020
get '/' => sub {

‎html/css/style.css

Lines changed: 92 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,17 @@ img {
2828
max-width: 100%;
2929
}
3030

31+
tr:nth-child(odd) {
32+
background-color: #F5EF7B;
33+
}
34+
tr:nth-child(even) {
35+
background-color: none;
36+
}
37+
38+
td {
39+
padding: 0.4em;
40+
}
41+
3142
.pretty-box {
3243
border: 0.2em solid;
3344
background-style: solid;
@@ -46,6 +57,16 @@ img {
4657
background-color: #C0E472;
4758
}
4859

60+
.dark-green {
61+
border-color: #8BC313;
62+
background-color: #A0CE3D;
63+
}
64+
65+
.darker-green {
66+
border-color: #8BC313;
67+
background-color: #8BC313;
68+
}
69+
4970
.blue {
5071
border-color: #63A4FF;
5172
background-color: #80B5FF;
@@ -61,16 +82,17 @@ img {
6182
font-weight: bold;
6283
border-radius: 0 0 4em 4em;
6384
margin: -2em auto 0; /*extra top padding and negative margin preserves bleed-off illusion for shadow*/
64-
padding: 3em 3em 1em;
85+
padding: 3em 0em 0em 0em;
6586
line-height: 2em;
6687
overflow: hidden;
6788
border-top: none;
6889
}
6990

70-
#header a {
91+
#header > a {
7192
color: #000000;
7293
text-decoration: none;
7394
font-size: 2em;
95+
margin-left: 1.5em;
7496
}
7597

7698
#logo {
@@ -82,8 +104,10 @@ img {
82104

83105
#search {
84106
float: right;
85-
width: 42%;
86-
min-width: 18em;
107+
margin-right: 1.5em;
108+
margin-bottom: 0.5em;
109+
width: 32%;
110+
min-width: 9em;
87111
max-width: 35em;
88112
visibility: hidden; /*visibility is set to visible in search.js if javascript is supported*/
89113
}
@@ -109,16 +133,79 @@ img {
109133
padding: 0;
110134
width: 100%;
111135
background: none;
136+
color: #777777;
137+
}
138+
139+
#query:focus {
140+
color: #000000;
141+
}
142+
143+
.menu {
144+
border: none;
145+
text-align: center;
146+
display: block;
147+
font-weight: normal;
112148
}
113149

150+
.menu-items {
151+
display: inline-block;
152+
margin-right: auto;
153+
margin-left: auto;
154+
width: 100%;
155+
line-height: 2.5em;
156+
}
157+
158+
.menu-item {
159+
display: inline-block;
160+
padding-right: 0.3em;
161+
font-size: 1.1em;
162+
margin-top: 0.3em;
163+
min-width: 4em;
164+
}
165+
166+
.menu-item+.menu-item {
167+
border-left: 0.15em dotted #FFFFFF;
168+
padding-left: 0.45em;
169+
}
170+
.menu-item.selected+.menu-item {
171+
border-left: none;
172+
}
173+
174+
.menu-item.selected {
175+
border-radius: 1em 1em 0 0;
176+
box-shadow: 0.5em 0.5em 1em #888888;
177+
display: inline-block;
178+
border-left: none;
179+
border-bottom: solid inherit;
180+
}
181+
182+
#formalities { font-style: italic; }
183+
114184
#content {
115185
margin: 2em auto;
116186
overflow: hidden;
117187
max-width: 800px;
118188
background: #FFFFFF;
119189
background-image: url(/images/camelia-faded.png);
120190
background-repeat: no-repeat;
121-
background-position: right 1em top 1em;
191+
background-position: right 2em top 2em;
192+
}
193+
194+
#content h3 {
195+
margin-bottom: 0;
196+
}
197+
198+
#content hr {
199+
border: none;
200+
border-top: dashed #F2C100 0.15em;
201+
padding: 0;
202+
padding-bottom: 0.5em;
203+
margin-bottom: -1em;
204+
}
205+
206+
#content desc {
207+
padding-left: 1.5em;
208+
display: block;
122209
}
123210

124211
#footer {

‎htmlify.p6

Lines changed: 54 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,6 @@ my $*DEBUG = False;
1616

1717
my $tg;
1818
my %methods-by-type;
19-
my $footer = footer-html;
20-
my $head = slurp 'template/head.html';
21-
my $header = slurp 'template/header.html';
2219

2320
sub url-munge($_) {
2421
return $_ if m{^ <[a..z]>+ '://'};
@@ -31,8 +28,53 @@ sub url-munge($_) {
3128
return $_;
3229
}
3330

34-
sub p2h($pod) {
35-
pod2html($pod, :url(&url-munge), :$head, :$header, :$footer);
31+
# TODO: Generate menulist automatically
32+
my @menu =
33+
('language','' ) => (),
34+
('type', 'Types' ) => <basic composite domain-specific exception>,
35+
('routine', 'Routines' ) => <sub method term operator>,
36+
('module', 'Modules' ) => (),
37+
('formalities','' ) => ();
38+
39+
sub header-html ($current-selection = 'nothing selected') {
40+
state $header = slurp 'template/header.html';
41+
42+
my $menu-items = [~]
43+
q[<div class="menu-items dark-green">],
44+
@menu>>.key.map({qq[
45+
<a class="menu-item {.[0] eq $current-selection ?? "selected darker-green" !! ""}"
46+
href="/{.[0]}">
47+
{ .[1] || .[0].wordcase }
48+
</a>
49+
]}), #"
50+
q[</div>];
51+
52+
my $sub-menu-items = '';
53+
state %sub-menus = @menu>>.key>>[0] Z=> @menu>>.value;
54+
if %sub-menus{$current-selection} -> $_ {
55+
$sub-menu-items = [~]
56+
q[<div class="menu-items darker-green">],
57+
.map({qq[
58+
<a class="menu-item" href="/$current-selection\-$_">
59+
{.wordcase}
60+
</a>
61+
]}),
62+
q[</div>]
63+
}
64+
65+
$header.subst('MENU', qq[
66+
<div class="menu">
67+
$menu-items
68+
$sub-menu-items
69+
</div>
70+
])
71+
72+
}
73+
74+
sub p2h($pod, $selection = 'nothing selected') {
75+
state $head = slurp 'template/head.html';
76+
state $footer = footer-html;
77+
pod2html($pod, :url(&url-munge), :$head, :header(header-html $selection), :$footer);
3678
}
3779

3880
sub pod-gist(Pod::Block $pod, $level = 0) {
@@ -150,7 +192,7 @@ sub MAIN(Bool :$debug, Bool :$typegraph = False) {
150192
}
151193

152194
sub write-language-file(:$dr, :$what, :$pod, :$podname) {
153-
spurt "html/$what/$podname.html", p2h($pod);
195+
spurt "html/$what/$podname.html", p2h($pod, $what);
154196
if $podname eq 'operators' {
155197
my @chunks = chunks-grep($pod.content,
156198
:from({ $_ ~~ Pod::Heading and .level == 2}),
@@ -298,7 +340,7 @@ sub write-type-file(:$dr, :$what, :$pod, :$podname) {
298340
}
299341
}
300342

301-
spurt "html/$what/$podname.html", p2h($pod);
343+
spurt "html/$what/$podname.html", p2h($pod, $what);
302344
}
303345

304346
sub chunks-grep(:$from!, :&to!, *@elems) {
@@ -504,7 +546,7 @@ sub write-disambiguation-files($dr) {
504546
}
505547
});
506548
}
507-
my $html = p2h($pod);
549+
my $html = p2h($pod, 'routine');
508550
spurt "html/$name.html", $html;
509551
if all($p>>.kind) eq 'operator' {
510552
spurt "html/op/$name.html", $html;
@@ -552,7 +594,7 @@ sub write-op-disambiguation-files($dr) {
552594
}
553595
});
554596
}
555-
my $html = p2h($pod);
597+
my $html = p2h($pod, 'routine');
556598
spurt "html/$name.html", $html;
557599
}
558600

@@ -571,7 +613,7 @@ sub write-operator-files($dr) {
571613
),
572614
@($doc.pod),
573615
);
574-
spurt "html/op/$what/$op.html", p2h($pod);
616+
spurt "html/op/$what/$op.html", p2h($pod, $what);
575617
}
576618
}
577619

@@ -582,7 +624,6 @@ sub write-index-file($dr) {
582624
Pod::Block::Para.new(
583625
content => ['Official Perl 6 documentation'],
584626
),
585-
# TODO: add more
586627
pod-heading("Language Documentation"),
587628
$dr.lookup('language', :by<kind>).sort(*.name).map({
588629
pod-item( pod-link(.name, .url) )
@@ -625,7 +666,7 @@ sub write-routine-file($dr, $name) {
625666
.pod.list,
626667
})
627668
);
628-
spurt "html/routine/$name.html", p2h($pod);
669+
spurt "html/routine/$name.html", p2h($pod, 'routine');
629670
}
630671

631672
sub write-qualified-method-call(:$name!, :$pod!, :$type!) {
@@ -634,7 +675,7 @@ sub write-qualified-method-call(:$name!, :$pod!, :$type!) {
634675
pod-block('From ', pod-link($type, "/type/{$type}#$name")),
635676
@$pod,
636677
);
637-
spurt "html/{$type}.{$name}.html", p2h($p);
678+
spurt "html/{$type}.{$name}.html", p2h($p, 'routine');
638679
}
639680

640681
sub footer-html() {

‎template/header.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<div id="header" class="pretty-box blue">
1+
<div id="header" class="pretty-box green">
22
<a href="/"
33
><img src="/images/camelia-small.png" alt="Camelia" id="logo"
44
>&nbsp;Perl 6 Documentation</a
55
>
66
<div id="search" class="ui-widget">
77
<label for="query">Search&nbsp;</label>
8-
<div class="blue"><input id="query" title="Enter Perl 6 document to search for"></div>
8+
<div class="green"><input id="query" title="Enter Perl 6 document to search for"></div>
99
</div>
10+
MENU
1011
</div>
11-
<div id="content" class="pretty-box green">
12+
<div id="content" class="pretty-box yellow">

0 commit comments

Comments
 (0)