Skip to content

Commit

Permalink
Merge pull request #844 from technologiestiftung/staging
Browse files Browse the repository at this point in the history 
Feat/change logo position (#843)
  • Loading branch information
@aeschi
aeschi authored Apr 18, 2024
2 parents 9398fac + d33d413 commit 3d82780
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 70 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
"semantic-release": "23.0.2",
"tailwindcss": "3.4.1",
"typescript": "5.3.3",
"vite": "5.1.4",
"vite": "5.1.7",
"vitest": "1.3.1"
}
}
20 changes: 14 additions & 6 deletions src/components/info/credits.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ const logoBerlin =
export const Credits: React.FC = () => {
const i18n = useI18nStore().i18n();
return (
<div className="w-full flex flex-row gap-4 md:gap-10 px-4 py-4 text-xs">
<div className="w-[30%] flex flex-col gap-4 justify-center">
<div className="w-full flex flex-row gap-4 md:gap-10 text-xs">
<div className="w-[28%] flex flex-col gap-4 justify-center">
<div className="w-full"></div>
<a
target="_blank"
Expand All @@ -20,26 +20,34 @@ export const Credits: React.FC = () => {
<img src={logoCitylab} alt="Logo Citylab" />
</a>
</div>
<div className="w-[30%] flex flex-col gap-4">
<div className="w-[26%] flex flex-col gap-4">
<div>{i18n.info.credits.projectBy}</div>
<div>
<a
target="_blank"
rel="noopener noreferrer"
href="https://technologiestiftung-berlin.de/"
>
<img src={logoTSB} alt="Logo Technologiestiftung Berlin" />
<img
className="-translate-y-0.5"
src={logoTSB}
alt="Logo Technologiestiftung Berlin"
/>
</a>
</div>
</div>
<div className="w-[30%] flex flex-col gap-4">
<div className="w-[46%] flex flex-col gap-4">
<div>{i18n.info.credits.fundedBy}</div>
<a
target="_blank"
rel="noopener noreferrer"
href="https://www.berlin.de/senatskanzlei/"
>
<img src={logoBerlin} alt="Logo Berlin" />
<img
className="-translate-y-0.5"
src={logoBerlin}
alt="Logo Berlin"
/>
</a>
</div>
</div>
Expand Down
52 changes: 41 additions & 11 deletions src/components/info/info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@ export const Info: React.FC = () => {
<div className="lg:hidden absolute top-6 md:top-14 mt-1 right-0 pr-5">
<LanguageToggle />
</div>
<h1 className="px-4 md:px-0 text-4xl font-semibold pb-2 md:pb-4">
{i18n.info.infoTitel}
</h1>
<div className="flex flex-row">
<h1 className="px-4 md:px-0 text-4xl font-semibold pb-2 md:pb-4">
{i18n.info.infoTitel}
</h1>
</div>
<div className="flex flex-col rounded-lg px-4 pb-4 md:border-2 md:p-8">
<div>
<QaEntry
Expand All @@ -30,7 +32,41 @@ export const Info: React.FC = () => {
isLast={false}
isInitiallyExpanded={true}
>
<div className="py-2">
<div className="py-2 pr-2 md:pr-6">
<Markdown
className={"[&>p]:pt-1 pt-4 text-2xl font-semibold"}
>
{i18n.info.about.head.aboutUsTitle}
</Markdown>
<Markdown
// @ts-expect-error typing too complex
components={{ a: ExternalAnchorLink }}
className={"[&>p]:pt-1 pt-2 "}
>
{i18n.info.about.head.aboutUsAnswer}
</Markdown>
<Markdown
// @ts-expect-error typing too complex
components={{ a: ExternalAnchorLink }}
className={"[&>p]:pt-2 py-2"}
>
{i18n.info.about.head.press}
</Markdown>
<div className="w-full 2xl:w-[640px] pt-4 pb-4">
<Credits />
</div>
<Markdown
className={"[&>p]:pt-1 pt-4 text-2xl font-semibold"}
>
{i18n.info.about.head.communityTitle}
</Markdown>
<Markdown
// @ts-expect-error typing too complex
components={{ a: ExternalAnchorLink }}
className={"[&>p]:pt-1 pt-2 pb-2"}
>
{i18n.info.about.head.communityAnswer}
</Markdown>
<PrimaryButton
label={i18n.info.about.head.slackButton}
onClick={() => {
Expand Down Expand Up @@ -60,13 +96,7 @@ export const Info: React.FC = () => {
key={`info-about-item-${idx}`}
isLast={idx === i18n.info.about.qa.length - 1}
isInitiallyExpanded={false}
>
{idx === 1 && (
<div className="p-4">
<Credits />
</div>
)}
</QaEntry>
></QaEntry>
</React.Fragment>
))}
<div className={`text-2xl font-semibold w-full pt-6 border-t-2`}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/info/qa-entry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const QaEntry: React.FC<QaEntryProps> = ({
<Markdown
// @ts-expect-error typing too complex
components={{ a: ExternalAnchorLink }}
className="text-gdk-gray mt-4 grid gap-4 pr-6"
className="text-gdk-gray mt-4 grid gap-4 pr-2 md:pr-6"
>
{answer}
</Markdown>
Expand Down
42 changes: 24 additions & 18 deletions src/components/splash/splash.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,28 +79,37 @@ export const Splash: React.FC<SplashProps> = ({ onClose }) => {
>
<CloseIcon />
</button>
<div className="flex flex-row w-full justify-between items-center mb-4 lg:mb-5">
<div className="text-2xl font-bold flex-row flex gap-1">
<span>Gieß den</span>{" "}
<span className="text-gdk-neon-green"> Kiez</span>
<div className="-translate-y-4">
<SplashTreeIcon />
<div className="flex flex-row w-full justify-between items-center pb-0 lg:pb-2 mb-2 lg:mb-5">
<div className="flex flex-col lg:flex-row justify-between w-full">
<div className="flex flex-row justify-between">
<div className="text-3xl font-bold flex-row flex gap-1 lg:translate-y-5">
<span>Gieß den</span>{" "}
<span className="text-gdk-neon-green"> Kiez</span>
<div className="-translate-y-3">
<SplashTreeIcon />
</div>
</div>
<div className="flex self-end lg:hidden pb-2 -translate-y-2">
<LanguageToggle />
</div>
</div>
<div className="hidden w-full sm:w-3/5 lg:w-7/12 lg:flex flex-row justify-end mr-8 mb-4 mt-6 lg:my-0 lg:px-4">
<Credits />
</div>
</div>

<div>
<button
className="hidden lg:flex hover:text-gdk-light-gray self-start"
className="hidden lg:flex hover:text-gdk-light-gray self-start "
onClick={onClose}
>
<CloseIcon />
</button>
<div className="flex -translate-y-1">
<div className="hidden lg:flex justify-start -translate-y-1">
<LanguageToggle />
</div>
</div>
</div>
<div className="flex flex-row w-full justify-between items-top pb-8">
<div className="flex flex-col lg:flex-row w-full justify-between items-top pb-8">
<div className="flex flex-col gap-2 pr-6 w-full lg:max-w-[70%]">
<Markdown className="sm:text-xl xl:text-2xl 2xl:text-3xl font-semibold">
{i18n.splash.headline}
Expand All @@ -115,6 +124,9 @@ export const Splash: React.FC<SplashProps> = ({ onClose }) => {
<div className="hidden lg:flex pr-8 max-h-[150px] 2xl:scale-[1.2]">
<img src="/images/icon-water-large.svg" alt="" />
</div>
<div className="lg:hidden w-full sm:w-3/5 lg:w-7/12 flex flex-row justify-end mt-8 pr-1 lg:my-0 lg:px-4">
<Credits />
</div>
</div>

<div className="flex flex-row gap-4 justify-between flex-wrap lg:flex-nowrap">
Expand Down Expand Up @@ -144,15 +156,15 @@ export const Splash: React.FC<SplashProps> = ({ onClose }) => {
</div>
</div>

<div className="flex flex-col lg:grid lg:grid-cols-1 lg:grid-rows-1 w-full bg-[#F3FDF9] border-y-2">
<div className="flex flex-col lg:grid lg:grid-cols-1 lg:grid-rows-1 w-full bg-[#F3FDF9] border-t-2">
<div className="lg:col-start-1 lg:row-start-1 flex flex-row justify-end w-full items-end">
<img
className="pt-8 w-full lg:w-[60%]"
src="images/city-skyline.svg"
alt=""
/>
</div>
<div className="lg:col-start-1 lg:row-start-1 flex flex-col gap-2 px-8 lg:w-[65%] w-full py-4">
<div className="lg:col-start-1 lg:row-start-1 flex flex-col gap-2 px-8 lg:w-[65%] w-full py-4 ">
<div className="text-lg font-bold">
{i18n.splash.questionHeadline}
</div>
Expand All @@ -165,12 +177,6 @@ export const Splash: React.FC<SplashProps> = ({ onClose }) => {
</div>
</div>
</div>

<div className="w-full flex flex-row justify-center">
<div className="w-full md:w-[80%] lg:w-[60%] xl:w-[50%]">
<Credits />
</div>
</div>
</div>
);
};
5 changes: 5 additions & 0 deletions src/i18n/content-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,11 @@ interface QuestionAnswer {
interface QuestionAnswerHead {
question: string;
answer: string;
aboutUsTitle: string;
aboutUsAnswer: string;
press: string;
communityTitle: string;
communityAnswer: string;
slackButton: string;
feedback: string;
}
Expand Down
23 changes: 9 additions & 14 deletions src/i18n/de.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,18 @@ export const de: Content = {
about: {
head: {
question: "Über das Projekt",
answer: `Die Folgen des Klimawandels, insbesondere die trockenen und heißen Sommer, belasten das Berliner Ökosystem. Unsere Stadtbäume vertrocknen und tragen langfristige Schäden davon: In den letzten Jahren mussten immer mehr Bäume gefällt werden und ihre Lebensdauer sinkt. Inzwischen wird die Bevölkerung regelmäßig zur Unterstützung aufgerufen, allerdings weitgehend unkoordiniert. Dies möchten wir ändern und mit diesem Projekt eine koordinierte Bürger*innenbeteiligung bei der Bewässerung städtischen Grüns ermöglichen.
Du möchtest Dich über das Gießen von Bäumen informieren, Pumpen melden und Dich mit anderen aktiven Nutzer:innen austauschen? Dann tritt unserem Slack-Chat bei!`,
answer: `Die Folgen des Klimawandels, insbesondere die trockenen und heißen Sommer, belasten das Berliner Ökosystem. Unsere Stadtbäume vertrocknen und tragen langfristige Schäden davon: In den letzten Jahren mussten immer mehr Bäume gefällt werden und ihre Lebensdauer sinkt. Inzwischen wird die Bevölkerung regelmäßig zur Unterstützung aufgerufen, allerdings weitgehend unkoordiniert. Dies möchten wir ändern und mit diesem Projekt eine koordinierte Bürger*innenbeteiligung bei der Bewässerung städtischen Grüns ermöglichen.`,

aboutUsTitle: "Über uns",
aboutUsAnswer: `„Gieß den Kiez” ist ein Projekt des [CityLAB Berlin](https://www.citylab-berlin.org/). Das CityLAB ist ein öffentliches Innovationslabor für die Stadt der Zukunft im ehemaligen Flughafen Berlin-Tempelhof. Gemeinsam mit einem großen Netzwerk aus Verwaltung, Zivilgesellschaft, Wissenschaft und Start-ups arbeiten wir hier an Ideen für ein lebenswertes Berlin. Das CityLAB ist ein Projekt der Technologiestiftung Berlin und wird gefördert durch die Berliner Senatskanzlei.`,
press: `Presseanfragen gehen am besten an [Anna Hantelmann](mailto:[email protected]?subject=giessdenkiez.de%20Presseanfrage">[email protected]).`,
communityTitle: "Community",
communityAnswer:
"Du möchtest Dich über das Gießen von Bäumen informieren, Pumpen melden oder Dich mit anderen aktiven Nutzer:innen austauschen? Dann tritt unserem Slack-Chat bei!",
slackButton: "Zur Slack Community",
feedback: `Du hast Feedback zu Gieß den Kiez?
[Beantworte uns gerne ein paar Fragen](https://citylabberlin.typeform.com/to/kCdnCgvC#product_id=GdK)`,
slackButton: "Zur Slack Community",
},
qa: [
{
Expand All @@ -150,16 +155,6 @@ Du möchtest Dich über das Gießen von Bäumen informieren, Pumpen melden und D
[Stadtbäume - Bedeutung und Herausforderungen in Zeiten des Klimawandels](https://www.hcu-hamburg.de/fileadmin/documents/REAP/files/Bildungsmaterial_Stadtbaeume_im_Klimawandel_2017.pdf)
[BUND - Funktionen von Stadtbäumen](https://www.bund-naturschutz.de/natur-und-landschaft/stadt-als-lebensraum/stadtbaeume/funktionen-von-stadtbaeumen.html)`,
},
{
question: "Über uns",
answer: `„Gieß den Kiez” ist ein Projekt des [CityLAB Berlin](https://www.citylab-berlin.org/). Das CityLAB ist ein öffentliches Innovationslabor für die Stadt der Zukunft im ehemaligen Flughafen Berlin-Tempelhof. Gemeinsam mit einem großen Netzwerk aus Verwaltung, Zivilgesellschaft, Wissenschaft und Start-ups arbeiten wir an neuen Ideen für ein lebenswertes Berlin. Das CityLAB ist ein offener Ort zum Mitmachen! Wenn ihr mehr wissen wollt, schaut euch auf unserer Webseite um oder kommt einfach mal vorbei!
Das CityLAB ist ein Projekt der Technologiestiftung Berlin und wird gefördert durch die Berliner Senatskanzlei.
Tausche Dich mit unserer Gieß-Community aus! Wir würden uns sehr darüber freuen, in unserem dafür eingerichteten [Slack-Chat](https://join.slack.com/t/giessdenkiez/shared_invite/zt-e3et281u-xON4UmBZpKavzDRkw5HmCQ) von Dir zu hören.
Presseanfragen gehen am besten an: [Anna Hantelmann](mailto:[email protected]?subject=giessdenkiez.de%20Presseanfrage">[email protected]), Tel.: +49 151 18457 242`,
},
{
question: "Datenquellen",
Expand Down
25 changes: 10 additions & 15 deletions src/i18n/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,13 +123,19 @@ export const en: Content = {
about: {
head: {
question: "About the project",
answer: `The consequences of climate change, especially the dry and hot summers, are putting a strain on Berlin's ecosystem. Our urban trees are drying out and suffering long-term damage: In recent years, more and more trees had to be felled and their lifespan is decreasing. The public is now regularly called upon for support, but in an so far uncoordinated manner. Through this project we want to change this and enable coordinated citizen participation in the watering of urban green spaces.
answer: `The consequences of climate change, especially the dry and hot summers, are putting a strain on Berlin's ecosystem. Our urban trees are drying out and suffering long-term damage: In recent years, more and more trees had to be felled and their lifespan is decreasing. The public is now regularly called upon for support, but in a so far uncoordinated manner. Through this project we want to improve this and enable coordinated citizen participation in the watering of urban green spaces.`,

Would you like to find out more about watering trees, report pumps or exchange ideas with other active users? Then join our slack chat!`,
aboutUsTitle: "About Us",
aboutUsAnswer: `“Gieß den Kiez” is a project of the [CityLAB Berlin](https://www.citylab-berlin.org/).
The CityLAB is a public innovation laboratory in the former Berlin-Tempelhof airport. Together with a large network of administration, civil society, science and start-ups, we are working on new ideas to make Berlin even more liveable. The CityLAB is a project of the Technologiestiftung Berlin and is funded by the Berlin Senate Chancellery.`,
press: `For press inquiries please contact [Anna Hantelmann](mailto:[email protected]?subject=giessdenkiez.de%20Presseanfrage).`,
communityTitle: "Community",
communityAnswer:
"Would you like to find out more about watering trees, report pumps or exchange ideas with other active users? Then join our Slack chat!",
slackButton: "Go to Slack Community",
feedback: `Do you have feedback about Gieß den Kiez?
feedback: `Do you have feedback on Gieß den Kiez?
[Please answer a few questions](https://citylabberlin.typeform.com/to/kCdnCgvC#product_id=GdK)`,
[Feel free to answer a few questions](https://citylabberlin.typeform.com/to/kCdnCgvC#product_id=GdK)`,
},
qa: [
{
Expand All @@ -149,17 +155,6 @@ Would you like to find out more about watering trees, report pumps or exchange i
[City trees - significance and challenges in times of climate change](https://www.hcu-hamburg.de/fileadmin/documents/REAP/files/Bildungsmaterial_Stadtbaeume_im_Klimawandel_2017.pdf)
[BUND - Functions of city trees](https://www.bund-naturschutz.de/natur-und-landschaft/stadt-als-lebensraum/stadtbaeume/funktionen-von-stadtbaeumen.html)`,
},
{
question: "About Us",
answer: `“Gieß den Kiez” is a project by [CityLAB Berlin](https://www.citylab-berlin.org/).
The CityLAB is a public innovation laboratory for the city of the future in the former Berlin-Tempelhof airport. Together with a large network of administration, civil society, science and start-ups, we are working on new ideas to make Berlin even more liveable. The CityLAB is an open place to join in! If you want to know more, take a look at our website or just drop by!
The CityLAB is a project of the Technologiestiftung Berlin and is funded by the Berlin Senate Chancellery.
Exchange ideas with the active pouring community! We would be happy to hear from you in our dedicated [Slack chat](https://join.slack.com/t/giessdenkiez/shared_invite/zt-e3et281u-xON4UmBZpKavzDRkw5HmCQ).
Press inquiries are best addressed [Anna Hantelmann](mailto:[email protected]?subject=giessdenkiez.de%20Presseanfrage) Tel.: +4915118457242`,
},
{
question: "Data sources",
Expand Down

0 comments on commit 3d82780

Please sign in to comment.