Skip to content

Commit 8bce899

Browse files
fsteegfsteeg
committed
Extract header and footer to sub-components, reuse for /visual
See #427
1 parent 2b87ca3 commit 8bce899

File tree

6 files changed

+273
-194
lines changed

6 files changed

+273
-194
lines changed

‎gatsby/lobid/src/components/footer.html.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from "react"
2+
3+
import wappenPng from "./images/wappen.png";
4+
5+
export default class Footer extends React.Component {
6+
render() {
7+
return (
8+
<div className="panel panel-default footer">
9+
<div className="panel-body">
10+
<span className="pull-left">
11+
<img src={wappenPng} alt="NRW-Wappen" /> &nbsp; lobid |
12+
LOD-Dienste des{" "}
13+
<a href="https://www.hbz-nrw.de/produkte/linked-open-data">
14+
hbz — Hochschulbibliothekszentrum des Landes NRW
15+
</a>
16+
</span>
17+
<span className="pull-right">
18+
<a href="https://www.hbz-nrw.de/impressum">
19+
{this.props.companyDetails}
20+
</a>
21+
{" | "}
22+
<a href="https://github.com/hbz/lobid/blob/master/conf/Datenschutzerklaerung_lobid.textile">
23+
{this.props.privacy}
24+
</a>
25+
{" | "}
26+
<a
27+
href="https://twitter.com/lobidorg"
28+
style={{ marginRight: "12px" }}
29+
>
30+
<i className="fa fa-twitter" aria-hidden="true"></i> Twitter
31+
</a>
32+
<a
33+
href="https://github.com/hbz/lobid"
34+
style={{ marginRight: "12px" }}
35+
>
36+
<i className="fa fa-github" aria-hidden="true"></i> GitHub
37+
</a>
38+
<a href="http://blog.lobid.org" style={{ marginRight: "12px" }}>
39+
<i className="fa fa-pencil" aria-hidden="true"></i> Blog
40+
</a>
41+
</span>
42+
</div>
43+
</div>
44+
)
45+
}
46+
}

‎gatsby/lobid/src/components/header.html.js

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import React from "react"
2+
3+
import {
4+
UncontrolledDropdown,
5+
DropdownToggle,
6+
DropdownMenu,
7+
DropdownItem
8+
} from "reactstrap";
9+
10+
import lobidLogoPng from "./images/lobid.png";
11+
12+
export default class Header extends React.Component {
13+
render() {
14+
return (
15+
<div className="navbar navbar-default" role="navigation">
16+
<div className="container-fluid" id="header">
17+
<div className="navbar-header">
18+
<button
19+
type="button"
20+
className="navbar-toggle collapsed"
21+
data-toggle="collapse"
22+
data-target="#lobid-nav"
23+
>
24+
<span className="sr-only">Navigation ein/ausblenden</span>
25+
<span className="icon-bar"></span>
26+
<span className="icon-bar"></span>
27+
<span className="icon-bar"></span>
28+
</button>
29+
<a className="navbar-brand" href="/">
30+
<span>
31+
<img id="butterfly" src={lobidLogoPng} alt="lobid-logo" />
32+
</span>
33+
</a>
34+
</div>
35+
<div className="navbar-collapse " id="lobid-nav">
36+
<ul className="nav navbar-nav">
37+
<li>
38+
<a href="/resources">resources</a>
39+
</li>
40+
<li>
41+
<a href="/organisations">organisations</a>
42+
</li>
43+
<li>
44+
<a href="/gnd">gnd</a>
45+
</li>
46+
</ul>
47+
<div style={{ marginRight: "-6px" }}>
48+
<ul className="nav navbar-nav navbar-right ">
49+
<li>
50+
<UncontrolledDropdown>
51+
<DropdownToggle
52+
style={{
53+
padding: "9px",
54+
background: "transparent",
55+
marginTop: "0px",
56+
lineHeight: "30px"
57+
}}
58+
>
59+
{this.props.publications}
60+
<b
61+
className="caret"
62+
style={{
63+
marginLeft: "2px"
64+
}}
65+
></b>
66+
</DropdownToggle>
67+
<DropdownMenu right>
68+
<DropdownItem
69+
tag="a"
70+
href="http://blog.lobid.org/"
71+
style={{
72+
paddingLeft: "6px",
73+
color: "black",
74+
textDecoration: "none",
75+
lineHeight: "30px"
76+
}}
77+
>
78+
Blog
79+
</DropdownItem>
80+
<DropdownItem divider />
81+
<DropdownItem
82+
as="a"
83+
href="http://slides.lobid.org/"
84+
style={{
85+
paddingLeft: "6px",
86+
color: "black",
87+
textDecoration: "none"
88+
}}
89+
>
90+
Slides
91+
</DropdownItem>
92+
</DropdownMenu>
93+
</UncontrolledDropdown>
94+
</li>
95+
96+
<li>
97+
<a
98+
href={this.props.languageLink}
99+
title={this.props.languageTooltip}
100+
>
101+
<span className="glyphicon glyphicon-globe"></span>
102+
&nbsp;
103+
{this.props.language}
104+
</a>
105+
</li>
106+
107+
<li>
108+
<UncontrolledDropdown>
109+
<DropdownToggle
110+
className="glyphicon glyphicon-info-sign"
111+
style={{
112+
padding: "11px",
113+
background: "transparent",
114+
marginTop: "-3px",
115+
lineHeight: "27px"
116+
}}
117+
>
118+
<b
119+
className="caret"
120+
style={{
121+
marginTop: "-4px",
122+
marginLeft: "2px"
123+
}}
124+
></b>
125+
</DropdownToggle>
126+
<DropdownMenu right>
127+
<DropdownItem
128+
tag="a"
129+
href={this.props.teamLink}
130+
style={{
131+
paddingLeft: "6px",
132+
color: "black",
133+
textDecoration: "none",
134+
lineHeight: "30px"
135+
}}
136+
>
137+
Team
138+
</DropdownItem>
139+
<DropdownItem divider />
140+
<DropdownItem
141+
as="a"
142+
href={
143+
this.props.contactPointId +
144+
"?subject=Feedback%20zu%20lobid.org"
145+
}
146+
style={{
147+
paddingLeft: "6px",
148+
color: "black",
149+
textDecoration: "none"
150+
}}
151+
>
152+
Feedback
153+
</DropdownItem>
154+
</DropdownMenu>
155+
</UncontrolledDropdown>
156+
</li>
157+
</ul>
158+
</div>
159+
</div>
160+
</div>
161+
</div>)
162+
}
163+
}
164+

0 commit comments

Comments
 (0)