Skip to content

Commit 083a662

Browse files
LinkKFLinkKF
authored
Homescreen and Infoscreen (#11)
* added rectImage (WIP) * refactored image components to one component * refactored image components to one component * added image size * adding picture on left/right side * renamed "shape" to "props" * added component homescreen * inserting adapting text (no real design yet) * Removed Hello World Text (for testing purposes) * removed content (for testing purposes) * renamed container * added float left/right * added info component (not yet finished) * added textField * fixed homescreen * changed from float to flexboxes * Homescreen adaptations * added second content page with "Code" for content * made text variable * added border radius * added responsive design * filter:none * added white background to welcome text * added additiona Information div for things * removed additional Info div, when empty * add contentPage for development purpose * "" * added module stuff * made homescreen background variable * undid changes in helloWorld * merge branch development into new-components * reformatted Info method * removed round-image * adressed PR changes * remove position relative * added max-size for full image size * resize navbar to fit to page * undid changes on navbar * reformatted package/removed redundant package-lock * reformatted files * reformatted file
1 parent 615a3e4 commit 083a662

File tree

9 files changed

+144
-17
lines changed

9 files changed

+144
-17
lines changed

‎frontend/src/components/mdx/homescreen/homescreen.module.scss

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@use '../../style/globals';
2+
3+
.homeContainer {
4+
display: grid;
5+
place-items: center;
6+
position: absolute;
7+
bottom: 0;
8+
color: black;
9+
content: "";
10+
z-index: -5;
11+
width: 100%;
12+
height: 100%;
13+
background-size: cover;
14+
background-position: center 0%;
15+
}
16+
17+
.homeContainer-inside {
18+
background-color: white;
19+
color: black;
20+
font-size: 40pt;
21+
text-align: center;
22+
z-index: 1;
23+
}

‎frontend/src/components/mdx/homescreen/homescreen.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import homescreenStyles from './homescreen.module.scss';
2+
import React from "react";
3+
4+
export function Homescreen({ src, text }: { src: string, props: string, alt: string, text: string }): React.ReactElement {
5+
return <div className={`${homescreenStyles["homeContainer"]}`} style={{backgroundImage: `url(${src})`}} >
6+
<div className={`${homescreenStyles["homeContainer-inside"]}`}>
7+
{text}
8+
</div>
9+
</div>;
10+
}

‎frontend/src/components/mdx/round-image/roundImage.module.scss renamed to ‎frontend/src/components/mdx/image/image.module.scss

+8
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,16 @@
2626
&-large {
2727
@include square-image(15rem);
2828
}
29+
30+
&-full {
31+
@include square-image(clamp(0px, 100%, 1080px));
32+
}
2933
}
3034

3135
.round {
3236
border-radius: 50%;
3337
}
38+
39+
.rectangle {
40+
border-radius: 5%;
41+
}

‎frontend/src/components/mdx/image/image.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import imageStyles from './image.module.scss';
2+
3+
import React from "react";
4+
5+
export type ImageSize = "small" | "medium" | "large" | "full";
6+
export type ImageShape = "round" | "rectangle";
7+
8+
export function Image({ src, alt, size, shape }: { src: string, alt: string, size?: ImageSize, shape?: ImageShape}): React.ReactElement {
9+
const sizeStyleName: keyof typeof imageStyles = `square-${size ?? "medium"}` as const;
10+
const shapeStyleName: keyof typeof imageStyles = shape ?? "rectangle" as const;
11+
12+
return <img src={src} className={`${imageStyles[shapeStyleName]} ${imageStyles[sizeStyleName]}`} alt={alt} />;
13+
}

‎frontend/src/components/mdx/info/info.module.scss

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@use '../../style/globals';
2+
3+
.infoContainer {
4+
display: flex;
5+
position: relative;
6+
text-align: center;
7+
width: 100%;
8+
color: rgb(0, 0, 0);
9+
font-size: 20pt;
10+
flex-direction: column;
11+
margin-bottom: 25px;
12+
}
13+
14+
.text {
15+
width: 100%;
16+
}
17+
18+
.image {
19+
width: 100%;
20+
}
21+
22+
.additionalInfo {
23+
display: none;
24+
}
25+
26+
@media (min-width: 450px) {
27+
.infoContainer-left {
28+
flex-direction: row;
29+
}
30+
31+
.infoContainer-right {
32+
flex-direction: row-reverse;
33+
}
34+
35+
.text {
36+
width: 65%;
37+
}
38+
39+
.image {
40+
width: 25%;
41+
}
42+
.additionalInfo {
43+
width: 15%;
44+
font-size: 10pt;
45+
display: flex;
46+
&:empty {
47+
display: none;
48+
}
49+
}
50+
}

‎frontend/src/components/mdx/info/info.tsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import infoStyles from './info.module.scss';
2+
import { Image } from 'components/mdx/image/image';
3+
4+
import React from "react";
5+
6+
export type ImagePosition = "left" | "right";
7+
8+
export function Info({ src, text, addInfo, imagePosition, alt }
9+
:{ src: string, text: string, addInfo: string, propsImage: string, imagePosition?: ImagePosition, alt: string })
10+
: React.ReactElement {
11+
const position: keyof typeof infoStyles = `infoContainer-${imagePosition ?? "left"}` as const;
12+
13+
return <div className={`${infoStyles[position]} ${infoStyles["infoContainer"]}`}>
14+
<div className={`${infoStyles["additionalInfo"]}`}>{addInfo}</div>
15+
<div className={`${infoStyles["image"]}`}>
16+
<Image src={src} size="full" shape="rectangle" alt={alt} />
17+
</div>
18+
<div className={`${infoStyles["text"]}`}>
19+
{text}
20+
</div>
21+
</div>;
22+
}

‎frontend/src/components/mdx/round-image/roundImage.tsx

-11
This file was deleted.

‎frontend/src/content/contentPage.mdx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Info } from '../components/mdx/info/info';
2+
import {Homescreen} from '../components/mdx/homescreen/homescreen';
3+
4+
<Homescreen src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
5+
propsImage={"image-rectangle image-full"} text={"Willkommen in Karlsruhe"} alt={"A lorem picsum"}/>
6+
7+
8+
<Info src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
9+
imagePosition={"left"} alt={"A lorem picsum"} text={"Bilder können sowohl links vom Text,"}
10+
addInfo={"Hier stehen Öfnnungszeiten, Adresse, o.ä."}/>
11+
<Info src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
12+
imagePosition={"right"} alt={"A lorem picsum"}
13+
text={"als auch rechts vom Text sein. Problem ist jetzt nur noch, dass Bilder in Zeilen ohne addInfo ein wenig größer sind."}
14+
addInfo={"Zum nächsten Bild gibts keine zusätzlichen Infos, deshalb wird dort nichts angezeigt!"}/>
15+
<Info src={"https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg"}
16+
imagePosition={"left"} alt={"A lorem picsum"} text={"Das ist das Karlsruher Schloss. Gebaut wurde es damals und seitdem steht es da."}/>

‎frontend/src/content/helloWorld.mdx

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import { RoundImage } from '../components/mdx/round-image/roundImage';
2-
3-
# Hello world from mdx!
4-
5-
## Regular markdown (GitHub flavor)
1+
import { Image } from '../components/mdx/image/image';
62

73
You can write anything here that is allowed in regulra markdown files as well.
84
This includes _italic_, **bold** and ~~struck-through~~ text, [links with a descriptor](https://github.github.com/gfm/) and even tables:
@@ -32,7 +28,7 @@ As a surprise, mdx also supports task list items:
3228
The following image is a regular React component.
3329
By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way.
3430

35-
<RoundImage src={"https://picsum.photos/100/200"} alt={"A lorem picsum"} size={"medium"}/>
31+
<Image src={"https://picsum.photos/100/200"} alt={"A lorem picsum"} size={"medium"}/>
3632

3733
## A note on styling
3834

0 commit comments

Comments
 (0)