From a2fc888e65ad7d26f056c00812abfa4f768d18a5 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Mon, 1 Feb 2021 17:12:01 +0100 Subject: [PATCH 01/42] added rectImage (WIP) --- frontend/content/helloWorld.mdx | 3 ++- .../components/mdx/rect-Image/rectImage.scss | 19 +++++++++++++++++++ .../components/mdx/rect-Image/rectImage.tsx | 7 +++++++ 3 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/mdx/rect-Image/rectImage.scss create mode 100644 frontend/src/components/mdx/rect-Image/rectImage.tsx diff --git a/frontend/content/helloWorld.mdx b/frontend/content/helloWorld.mdx index 03c99ea..ec1b4b2 100644 --- a/frontend/content/helloWorld.mdx +++ b/frontend/content/helloWorld.mdx @@ -1,4 +1,5 @@ import { RoundImage } from 'components/mdx/round-image/roundImage'; +import { RectImage } from 'components/mdx/rect-image/rectImage'; # Hello world from mdx! @@ -32,7 +33,7 @@ As a surprise, mdx also supports task list items: The following image is a regular React component. By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way. - + ## A note on styling diff --git a/frontend/src/components/mdx/rect-Image/rectImage.scss b/frontend/src/components/mdx/rect-Image/rectImage.scss new file mode 100644 index 0000000..d212144 --- /dev/null +++ b/frontend/src/components/mdx/rect-Image/rectImage.scss @@ -0,0 +1,19 @@ +@use '../../style/globals'; + +@mixin image { + image-rendering: optimizeQuality; +} + +.image-rect { + @include image; + border-radius: 0%; +} + +.image-full { + @include image; + width: 100%; + height: 100%; + + object-fit: cover; + object-position: center; +} diff --git a/frontend/src/components/mdx/rect-Image/rectImage.tsx b/frontend/src/components/mdx/rect-Image/rectImage.tsx new file mode 100644 index 0000000..a2dc188 --- /dev/null +++ b/frontend/src/components/mdx/rect-Image/rectImage.tsx @@ -0,0 +1,7 @@ +import './rectImage.scss'; + +import React from "react"; + +export function RectImage({ src, alt }: { src: string, alt: string }) { + return {alt}/ +} From 2fa8b0043443523c7c0006ff9ae49f5f04c0952e Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Tue, 9 Feb 2021 13:55:12 +0100 Subject: [PATCH 02/42] refactored image components to one component --- frontend/content/helloWorld.mdx | 5 ++- frontend/src/components/mdx/image/image.scss | 33 ++++++++++++++++++++ frontend/src/components/mdx/image/image.tsx | 7 +++++ 3 files changed, 42 insertions(+), 3 deletions(-) create mode 100644 frontend/src/components/mdx/image/image.scss create mode 100644 frontend/src/components/mdx/image/image.tsx diff --git a/frontend/content/helloWorld.mdx b/frontend/content/helloWorld.mdx index ec1b4b2..e75970c 100644 --- a/frontend/content/helloWorld.mdx +++ b/frontend/content/helloWorld.mdx @@ -1,5 +1,4 @@ -import { RoundImage } from 'components/mdx/round-image/roundImage'; -import { RectImage } from 'components/mdx/rect-image/rectImage'; +import { Image } from 'components/mdx/image/image'; # Hello world from mdx! @@ -33,7 +32,7 @@ As a surprise, mdx also supports task list items: The following image is a regular React component. By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way. - +{"A ## A note on styling diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss new file mode 100644 index 0000000..ecdf456 --- /dev/null +++ b/frontend/src/components/mdx/image/image.scss @@ -0,0 +1,33 @@ +@use '../../style/globals'; + +@mixin image { + image-rendering: optimizeQuality; +} + +.image-round { + @include image; + border-radius: 50%; +} + +.image-rectangle { + @include image; + border-radius: 0%; +} + +.image-medium { + @include image; + width: 10rem; + height: 10rem; + + object-fit: cover; + object-position: center; +} + +.image-big { + @include image; + width: 100%; + height: 100%; + + object-fit: cover; + object-position: center; +} diff --git a/frontend/src/components/mdx/image/image.tsx b/frontend/src/components/mdx/image/image.tsx new file mode 100644 index 0000000..507d712 --- /dev/null +++ b/frontend/src/components/mdx/image/image.tsx @@ -0,0 +1,7 @@ +import './image.scss'; + +import React from "react"; + +export function Image({ src, shape, alt }: { src: string, shape: string, alt: string }) { + return {alt}/ +} From 67b7944a39009a0f4d8aac60320169d6188088dd Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Tue, 9 Feb 2021 13:56:07 +0100 Subject: [PATCH 03/42] --- frontend/content/helloWorld.mdx | 2 +- frontend/src/components/mdx/image/image.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/content/helloWorld.mdx b/frontend/content/helloWorld.mdx index e75970c..9e88455 100644 --- a/frontend/content/helloWorld.mdx +++ b/frontend/content/helloWorld.mdx @@ -32,7 +32,7 @@ As a surprise, mdx also supports task list items: The following image is a regular React component. By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way. -{"A +{"A ## A note on styling diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss index ecdf456..62c22c9 100644 --- a/frontend/src/components/mdx/image/image.scss +++ b/frontend/src/components/mdx/image/image.scss @@ -23,7 +23,7 @@ object-position: center; } -.image-big { +.image-full { @include image; width: 100%; height: 100%; From e498bfdc35f546a9195d1d8afdbf1a8b663c046c Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Tue, 9 Feb 2021 13:56:34 +0100 Subject: [PATCH 04/42] refactored image components to one component --- .../components/mdx/rect-Image/rectImage.scss | 19 ------------------- .../components/mdx/rect-Image/rectImage.tsx | 7 ------- .../mdx/round-image/roundImage.scss | 19 ------------------- .../components/mdx/round-image/roundImage.tsx | 7 ------- 4 files changed, 52 deletions(-) delete mode 100644 frontend/src/components/mdx/rect-Image/rectImage.scss delete mode 100644 frontend/src/components/mdx/rect-Image/rectImage.tsx delete mode 100644 frontend/src/components/mdx/round-image/roundImage.scss delete mode 100644 frontend/src/components/mdx/round-image/roundImage.tsx diff --git a/frontend/src/components/mdx/rect-Image/rectImage.scss b/frontend/src/components/mdx/rect-Image/rectImage.scss deleted file mode 100644 index d212144..0000000 --- a/frontend/src/components/mdx/rect-Image/rectImage.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '../../style/globals'; - -@mixin image { - image-rendering: optimizeQuality; -} - -.image-rect { - @include image; - border-radius: 0%; -} - -.image-full { - @include image; - width: 100%; - height: 100%; - - object-fit: cover; - object-position: center; -} diff --git a/frontend/src/components/mdx/rect-Image/rectImage.tsx b/frontend/src/components/mdx/rect-Image/rectImage.tsx deleted file mode 100644 index a2dc188..0000000 --- a/frontend/src/components/mdx/rect-Image/rectImage.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import './rectImage.scss'; - -import React from "react"; - -export function RectImage({ src, alt }: { src: string, alt: string }) { - return {alt}/ -} diff --git a/frontend/src/components/mdx/round-image/roundImage.scss b/frontend/src/components/mdx/round-image/roundImage.scss deleted file mode 100644 index d446fcc..0000000 --- a/frontend/src/components/mdx/round-image/roundImage.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use '../../style/globals'; - -@mixin image { - image-rendering: optimizeQuality; -} - -.image-round { - @include image; - border-radius: 50%; -} - -.image-medium { - @include image; - width: 10rem; - height: 10rem; - - object-fit: cover; - object-position: center; -} diff --git a/frontend/src/components/mdx/round-image/roundImage.tsx b/frontend/src/components/mdx/round-image/roundImage.tsx deleted file mode 100644 index 4d60c3d..0000000 --- a/frontend/src/components/mdx/round-image/roundImage.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import './roundImage.scss'; - -import React from "react"; - -export function RoundImage({ src, alt }: { src: string, alt: string }) { - return {alt}/ -} From 8b94b8333fd1ea008a85677e1994ccaaf498c430 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Tue, 9 Feb 2021 13:59:15 +0100 Subject: [PATCH 05/42] added image size --- frontend/src/components/mdx/image/image.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss index 62c22c9..6fe60b3 100644 --- a/frontend/src/components/mdx/image/image.scss +++ b/frontend/src/components/mdx/image/image.scss @@ -23,6 +23,15 @@ object-position: center; } +.image-big { + @include image; + width: 25rem; + height: 25rem; + + object-fit: cover; + object-position: center; +} + .image-full { @include image; width: 100%; From de2f11797e4962f8ed0f716ed2df90d1b985629f Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Thu, 11 Feb 2021 09:58:54 +0100 Subject: [PATCH 06/42] adding picture on left/right side --- frontend/src/components/mdx/image/image.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss index 6fe60b3..96a89c2 100644 --- a/frontend/src/components/mdx/image/image.scss +++ b/frontend/src/components/mdx/image/image.scss @@ -14,6 +14,16 @@ border-radius: 0%; } +.image-left { + @include image; + float: left; +} + +.image-right { + @include image; + float: right; +} + .image-medium { @include image; width: 10rem; From 9edd6e0bfefa27d93a00e6dbdfaf8a3424f2ac04 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Thu, 11 Feb 2021 18:28:24 +0100 Subject: [PATCH 07/42] renamed "shape" to "props" --- frontend/content/helloWorld.mdx | 2 +- frontend/src/components/mdx/image/image.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/content/helloWorld.mdx b/frontend/content/helloWorld.mdx index 9e88455..a2a4645 100644 --- a/frontend/content/helloWorld.mdx +++ b/frontend/content/helloWorld.mdx @@ -32,7 +32,7 @@ As a surprise, mdx also supports task list items: The following image is a regular React component. By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way. -{"A +{"A ## A note on styling diff --git a/frontend/src/components/mdx/image/image.tsx b/frontend/src/components/mdx/image/image.tsx index 507d712..846b14b 100644 --- a/frontend/src/components/mdx/image/image.tsx +++ b/frontend/src/components/mdx/image/image.tsx @@ -2,6 +2,6 @@ import './image.scss'; import React from "react"; -export function Image({ src, shape, alt }: { src: string, shape: string, alt: string }) { - return {alt}/ +export function Image({ src, props, alt }: { src: string, props: string, alt: string }) { + return {alt}/ } From c31d4c13821ce8b3477373df2b9b7f9c06dc652b Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Thu, 11 Feb 2021 18:52:01 +0100 Subject: [PATCH 08/42] added component homescreen --- .../src/components/mdx/homescreen/homescreen.scss | 15 +++++++++++++++ .../src/components/mdx/homescreen/homescreen.tsx | 11 +++++++++++ 2 files changed, 26 insertions(+) create mode 100644 frontend/src/components/mdx/homescreen/homescreen.scss create mode 100644 frontend/src/components/mdx/homescreen/homescreen.tsx diff --git a/frontend/src/components/mdx/homescreen/homescreen.scss b/frontend/src/components/mdx/homescreen/homescreen.scss new file mode 100644 index 0000000..2864d72 --- /dev/null +++ b/frontend/src/components/mdx/homescreen/homescreen.scss @@ -0,0 +1,15 @@ +@use '../../style/globals'; + +.container{ + position: relative; + text-align: center; + color:black; + font-size: 30pt; +} + +.centered { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } \ No newline at end of file diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx new file mode 100644 index 0000000..abea6ea --- /dev/null +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -0,0 +1,11 @@ +import './homescreen.scss'; +import { Image } from 'components/mdx/image/image'; + +import React from "react"; + +export function Homescreen({ src, props, alt }: { src: string, props: string, alt: string }) { + return
+ { +
Hier könnte ihre Werbunge stehen
+
+ } \ No newline at end of file From 233d44c70db8d3528652e40cd7a2b6bbe2d8b916 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 09:13:31 +0100 Subject: [PATCH 09/42] inserting adapting text (no real design yet) --- frontend/src/components/mdx/homescreen/homescreen.scss | 2 +- frontend/src/components/mdx/homescreen/homescreen.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.scss b/frontend/src/components/mdx/homescreen/homescreen.scss index 2864d72..8fe087e 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.scss @@ -3,7 +3,7 @@ .container{ position: relative; text-align: center; - color:black; + color:blue; font-size: 30pt; } diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index abea6ea..43bb86a 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -3,9 +3,9 @@ import { Image } from 'components/mdx/image/image'; import React from "react"; -export function Homescreen({ src, props, alt }: { src: string, props: string, alt: string }) { +export function Homescreen({ src, props, alt, text }: { src: string, props: string, alt: string, text: string }) { return
{ -
Hier könnte ihre Werbunge stehen
+
{text}
} \ No newline at end of file From 1ec31daab02da867db24d7bf8bead5ed1b03c8e7 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 10:12:42 +0100 Subject: [PATCH 10/42] Removed Hello World Text (for testing purposes) --- frontend/src/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index fd10c7a..6b8a1a9 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -4,7 +4,6 @@ import TestMdxComponent from "../content/helloWorld.mdx"; function App() { return
-

Hello world from jsx!

{}
; } From 08d222b621c5e34bb3b0826695fda2d04a33ede5 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 10:13:04 +0100 Subject: [PATCH 11/42] removed content (for testing purposes) --- frontend/content/helloWorld.mdx | 43 ++++----------------------------- 1 file changed, 5 insertions(+), 38 deletions(-) diff --git a/frontend/content/helloWorld.mdx b/frontend/content/helloWorld.mdx index a2a4645..9cc8862 100644 --- a/frontend/content/helloWorld.mdx +++ b/frontend/content/helloWorld.mdx @@ -1,40 +1,7 @@ import { Image } from 'components/mdx/image/image'; +import { Homescreen } from 'components/mdx/homescreen/homescreen'; +import { Info } from 'components/mdx/info/info'; -# Hello world from mdx! - -## Regular markdown (GitHub flavor) - -You can write anything here that is allowed in regulra markdown files as well. -This includes _italic_, **bold** and ~~struck-through~~ text, [links with a descriptor](https://github.github.com/gfm/) and even tables: - -City | Country ---- | --- -Karlsruhe | Germany - -Code blocks are supported as well - although it's quite unlikely we'll need them on such a website. - -```java -public static void main(String[] args) { - System.out.println("Hello world"); -} -``` - -Other, essential features are -- lists, obviously - - nested lists - -As a surprise, mdx also supports task list items: -- [x] noticed it -- [ ] care about it - -## Custom components - -The following image is a regular React component. -By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way. - -{"A - -## A note on styling - -As you can see, the normal design isn't very stunning. -We can provide custom styles using the `MDXProvider` component - but we'll cross that bridge when we come to it. + + + \ No newline at end of file From bc1f9bf85bf7dcd3ef7d3d3e72ca279cf9549f59 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 10:13:25 +0100 Subject: [PATCH 12/42] renamed container --- frontend/src/components/mdx/homescreen/homescreen.scss | 2 +- frontend/src/components/mdx/homescreen/homescreen.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.scss b/frontend/src/components/mdx/homescreen/homescreen.scss index 8fe087e..1c0612a 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.scss @@ -1,6 +1,6 @@ @use '../../style/globals'; -.container{ +.homeContainer{ position: relative; text-align: center; color:blue; diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index 43bb86a..c72c24b 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -1,11 +1,12 @@ import './homescreen.scss'; import { Image } from 'components/mdx/image/image'; +import { TextField } from 'components/mdx/textField/textField'; import React from "react"; export function Homescreen({ src, props, alt, text }: { src: string, props: string, alt: string, text: string }) { - return
+ return
{ -
{text}
+
} \ No newline at end of file From 16c35de6a4e63b09f9a4481a7dea2a7d531baae5 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 10:13:40 +0100 Subject: [PATCH 13/42] added float left/right --- frontend/src/components/mdx/image/image.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss index 96a89c2..74427fb 100644 --- a/frontend/src/components/mdx/image/image.scss +++ b/frontend/src/components/mdx/image/image.scss @@ -50,3 +50,13 @@ object-fit: cover; object-position: center; } + +.image-left { + @include image; + float:left; +} + +.image-right { + @include image; + float: right; +} From 47ac3fa6be138e0b4624c679062b3f23091fda8c Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 10:14:02 +0100 Subject: [PATCH 14/42] added info component (not yet finished) --- frontend/src/components/mdx/info/info.scss | 8 ++++++++ frontend/src/components/mdx/info/info.tsx | 12 ++++++++++++ 2 files changed, 20 insertions(+) create mode 100644 frontend/src/components/mdx/info/info.scss create mode 100644 frontend/src/components/mdx/info/info.tsx diff --git a/frontend/src/components/mdx/info/info.scss b/frontend/src/components/mdx/info/info.scss new file mode 100644 index 0000000..7b2d68f --- /dev/null +++ b/frontend/src/components/mdx/info/info.scss @@ -0,0 +1,8 @@ +@use '../../style/globals'; + +.infoContainer{ + position: relative; + text-align: center; + color:rgb(0, 0, 0); + font-size: 20pt; +} \ No newline at end of file diff --git a/frontend/src/components/mdx/info/info.tsx b/frontend/src/components/mdx/info/info.tsx new file mode 100644 index 0000000..55b76d1 --- /dev/null +++ b/frontend/src/components/mdx/info/info.tsx @@ -0,0 +1,12 @@ +import './info.scss'; +import { Image } from 'components/mdx/image/image'; +import { TextField } from 'components/mdx/textField/textField'; + +import React from "react"; + +export function Info({ src, propsImage, propsText, alt, text }: { src: string, propsImage: string, propsText: string, alt: string, text: string }) { + return
+ { + +
+ } \ No newline at end of file From f6d789b2bf03d3c153e180fc8e3677bb949c5bd5 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 10:14:14 +0100 Subject: [PATCH 15/42] added textField --- frontend/src/components/mdx/textField/textField.scss | 8 ++++++++ frontend/src/components/mdx/textField/textField.tsx | 7 +++++++ 2 files changed, 15 insertions(+) create mode 100644 frontend/src/components/mdx/textField/textField.scss create mode 100644 frontend/src/components/mdx/textField/textField.tsx diff --git a/frontend/src/components/mdx/textField/textField.scss b/frontend/src/components/mdx/textField/textField.scss new file mode 100644 index 0000000..a73a16d --- /dev/null +++ b/frontend/src/components/mdx/textField/textField.scss @@ -0,0 +1,8 @@ +@use '../../style/globals'; + +.centered { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } diff --git a/frontend/src/components/mdx/textField/textField.tsx b/frontend/src/components/mdx/textField/textField.tsx new file mode 100644 index 0000000..d27cd2b --- /dev/null +++ b/frontend/src/components/mdx/textField/textField.tsx @@ -0,0 +1,7 @@ +import './textField.scss'; + +import React from "react"; + +export function TextField({text, props}:{text: string, props: string}){ + return
{text}
+} \ No newline at end of file From d5022ac7ebd908f9ba0eba734601c8ccebec6ce7 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 12 Feb 2021 12:12:19 +0100 Subject: [PATCH 16/42] fixed homescreen --- .../src/components/mdx/homescreen/homescreen.scss | 14 ++++++++++---- .../src/components/mdx/homescreen/homescreen.tsx | 3 +-- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.scss b/frontend/src/components/mdx/homescreen/homescreen.scss index 1c0612a..5d473d3 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.scss @@ -1,15 +1,21 @@ @use '../../style/globals'; .homeContainer{ - position: relative; + background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg'); + background-size: 100% 100%; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; text-align: center; - color:blue; - font-size: 30pt; + color:rgb(255, 145, 0); + font-size: 40pt; + } .centered { position: relative; top: 50%; left: 50%; - transform: translate(-50%, -50%); } \ No newline at end of file diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index c72c24b..2960ca9 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -4,9 +4,8 @@ import { TextField } from 'components/mdx/textField/textField'; import React from "react"; -export function Homescreen({ src, props, alt, text }: { src: string, props: string, alt: string, text: string }) { +export function Homescreen({ props, text }: { src: string, props: string, alt: string, text: string }) { return
- {
} \ No newline at end of file From cde54049f97b6837759d3e23da1fc329b1750008 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Mon, 22 Feb 2021 11:37:06 +0100 Subject: [PATCH 17/42] changed from float to flexboxes --- frontend/src/components/mdx/image/image.scss | 26 +++----------------- frontend/src/components/mdx/info/info.scss | 10 ++++++++ frontend/src/components/mdx/info/info.tsx | 21 +++++++++++++--- 3 files changed, 31 insertions(+), 26 deletions(-) diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss index 74427fb..7f120e0 100644 --- a/frontend/src/components/mdx/image/image.scss +++ b/frontend/src/components/mdx/image/image.scss @@ -14,16 +14,6 @@ border-radius: 0%; } -.image-left { - @include image; - float: left; -} - -.image-right { - @include image; - float: right; -} - .image-medium { @include image; width: 10rem; @@ -35,11 +25,10 @@ .image-big { @include image; - width: 25rem; - height: 25rem; - + width: 100%; + height: 100%; object-fit: cover; - object-position: center; + } .image-full { @@ -51,12 +40,3 @@ object-position: center; } -.image-left { - @include image; - float:left; -} - -.image-right { - @include image; - float: right; -} diff --git a/frontend/src/components/mdx/info/info.scss b/frontend/src/components/mdx/info/info.scss index 7b2d68f..6317e49 100644 --- a/frontend/src/components/mdx/info/info.scss +++ b/frontend/src/components/mdx/info/info.scss @@ -1,8 +1,18 @@ @use '../../style/globals'; .infoContainer{ + display:flex; position: relative; text-align: center; + width: 100%; color:rgb(0, 0, 0); font-size: 20pt; +} + +.text{ + flex-grow:3; +} + +.image{ + width:30%; } \ No newline at end of file diff --git a/frontend/src/components/mdx/info/info.tsx b/frontend/src/components/mdx/info/info.tsx index 55b76d1..6abb6df 100644 --- a/frontend/src/components/mdx/info/info.tsx +++ b/frontend/src/components/mdx/info/info.tsx @@ -5,8 +5,23 @@ import { TextField } from 'components/mdx/textField/textField'; import React from "react"; export function Info({ src, propsImage, propsText, alt, text }: { src: string, propsImage: string, propsText: string, alt: string, text: string }) { - return
- { - + if(propsImage.includes("left")){ + return
+
+ { +
+
+ +
+ } else { + return
+
+ +
+
+ { +
+
+ } } \ No newline at end of file From aaddfb66231749f21dd86b50fd28b5dfd20c43ff Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Tue, 23 Feb 2021 11:45:52 +0100 Subject: [PATCH 18/42] Homescreen adaptations --- frontend/content/helloWorld.mdx | 6 +-- .../components/mdx/homescreen/homescreen.scss | 39 +++++++++++++------ .../components/mdx/homescreen/homescreen.tsx | 4 +- 3 files changed, 33 insertions(+), 16 deletions(-) diff --git a/frontend/content/helloWorld.mdx b/frontend/content/helloWorld.mdx index 9cc8862..b1400b4 100644 --- a/frontend/content/helloWorld.mdx +++ b/frontend/content/helloWorld.mdx @@ -2,6 +2,6 @@ import { Image } from 'components/mdx/image/image'; import { Homescreen } from 'components/mdx/homescreen/homescreen'; import { Info } from 'components/mdx/info/info'; - - - \ No newline at end of file + + + diff --git a/frontend/src/components/mdx/homescreen/homescreen.scss b/frontend/src/components/mdx/homescreen/homescreen.scss index 5d473d3..104e1b6 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.scss @@ -1,21 +1,36 @@ @use '../../style/globals'; .homeContainer{ - background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg'); - background-size: 100% 100%; - position: absolute; top: 0; left: 0; bottom: 0; - right: 0; - text-align: center; - color:rgb(255, 145, 0); - font-size: 40pt; + right:0; + height:100vh; + width:100vw; + display:grid; + place-items:center; + position:absolute; + color:black; +} +.homeContainer::before{ + content:""; + top: 0; + left: 0; + bottom: 0; + right:0; + width:100vw; + height:100vh; + background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg'); + background-size: cover; + background-position: center 0%; + position: absolute; + filter: blur(2px) grayscale(20%); } -.centered { - position: relative; - top: 50%; - left: 50%; - } \ No newline at end of file +.homeContainer-inside{ + color:black; + font-size:40pt; + text-align:center; + z-index:1; +} \ No newline at end of file diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index 2960ca9..7aeb41a 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -6,6 +6,8 @@ import React from "react"; export function Homescreen({ props, text }: { src: string, props: string, alt: string, text: string }) { return
- +
+ Willkommen in Karlsruhe
+
} \ No newline at end of file From b12fbd2cf1cdd75a92ad730d576436aefc42ffcd Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Tue, 23 Feb 2021 11:46:22 +0100 Subject: [PATCH 19/42] added second content page with "Code" for content --- frontend/content/contentPage.mdx | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 frontend/content/contentPage.mdx diff --git a/frontend/content/contentPage.mdx b/frontend/content/contentPage.mdx new file mode 100644 index 0000000..3298906 --- /dev/null +++ b/frontend/content/contentPage.mdx @@ -0,0 +1,6 @@ +import { Image } from 'components/mdx/image/image'; +import { Homescreen } from 'components/mdx/homescreen/homescreen'; +import { Info } from 'components/mdx/info/info'; + + + \ No newline at end of file From 60729a20480659774440e5d22d6a44148516406c Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Tue, 23 Feb 2021 11:48:13 +0100 Subject: [PATCH 20/42] made text variable --- frontend/src/components/mdx/homescreen/homescreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index 7aeb41a..7452846 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -7,7 +7,7 @@ import React from "react"; export function Homescreen({ props, text }: { src: string, props: string, alt: string, text: string }) { return
- Willkommen in Karlsruhe + {text}
} \ No newline at end of file From ef119ff56c4f91bc8bf433df037c3585e3b53cf4 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 26 Feb 2021 16:16:10 +0100 Subject: [PATCH 21/42] added border radius --- frontend/src/components/mdx/image/image.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss index 7f120e0..0190d6b 100644 --- a/frontend/src/components/mdx/image/image.scss +++ b/frontend/src/components/mdx/image/image.scss @@ -28,7 +28,7 @@ width: 100%; height: 100%; object-fit: cover; - + border-radius: 5%; } .image-full { From 13705c54be622fd8386499d0cd671f5f5786bbe5 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 26 Feb 2021 16:16:31 +0100 Subject: [PATCH 22/42] added responsive design --- frontend/src/components/mdx/info/info.scss | 25 ++++++++++++--- frontend/src/components/mdx/info/info.tsx | 36 +++++++++++----------- 2 files changed, 39 insertions(+), 22 deletions(-) diff --git a/frontend/src/components/mdx/info/info.scss b/frontend/src/components/mdx/info/info.scss index 6317e49..af993b8 100644 --- a/frontend/src/components/mdx/info/info.scss +++ b/frontend/src/components/mdx/info/info.scss @@ -9,10 +9,27 @@ font-size: 20pt; } -.text{ - flex-grow:3; +@media (min-width: 450px){ + .infoContainer{ + flex-direction: row; + } + .text{ + flex-grow:3; + } + + .image{ + width:30%; + } } -.image{ - width:30%; +@media (max-width: 450px){ + .infoContainer{ + flex-direction: column; + } + .text{ + width:100%; + } + .image{ + width:100%; + } } \ No newline at end of file diff --git a/frontend/src/components/mdx/info/info.tsx b/frontend/src/components/mdx/info/info.tsx index 6abb6df..16fdc24 100644 --- a/frontend/src/components/mdx/info/info.tsx +++ b/frontend/src/components/mdx/info/info.tsx @@ -5,23 +5,23 @@ import { TextField } from 'components/mdx/textField/textField'; import React from "react"; export function Info({ src, propsImage, propsText, alt, text }: { src: string, propsImage: string, propsText: string, alt: string, text: string }) { - if(propsImage.includes("left")){ - return
-
- { + if(propsImage.includes("left")){ + return
+
+ { +
+
+ +
-
- + } else { + return
+
+ +
+
+ { +
-
- } else { - return
-
- -
-
- { -
-
- } - } \ No newline at end of file + } +} \ No newline at end of file From 7f552373103300a7d1f3c4105b09f8907348a56e Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Fri, 26 Feb 2021 16:16:50 +0100 Subject: [PATCH 23/42] filter:none --- frontend/src/components/mdx/textField/textField.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/mdx/textField/textField.scss b/frontend/src/components/mdx/textField/textField.scss index a73a16d..8c7ffdd 100644 --- a/frontend/src/components/mdx/textField/textField.scss +++ b/frontend/src/components/mdx/textField/textField.scss @@ -5,4 +5,5 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + filter:none; } From 5c92cf46cb1aa3c414567bee15a908da439ae562 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Mon, 22 Mar 2021 13:21:17 +0100 Subject: [PATCH 24/42] added white background to welcome text --- frontend/src/components/mdx/homescreen/homescreen.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/mdx/homescreen/homescreen.scss b/frontend/src/components/mdx/homescreen/homescreen.scss index 104e1b6..cba22b2 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.scss @@ -29,6 +29,7 @@ } .homeContainer-inside{ + background-color: white; color:black; font-size:40pt; text-align:center; From add9c8d1f57395090f9c0b4c1074d2253fbdfbe0 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Mon, 22 Mar 2021 13:21:34 +0100 Subject: [PATCH 25/42] added additiona Information div for things --- frontend/src/components/mdx/info/info.scss | 7 +++++++ frontend/src/components/mdx/info/info.tsx | 6 ++++-- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/mdx/info/info.scss b/frontend/src/components/mdx/info/info.scss index af993b8..fcceaa7 100644 --- a/frontend/src/components/mdx/info/info.scss +++ b/frontend/src/components/mdx/info/info.scss @@ -20,6 +20,10 @@ .image{ width:30%; } + .additionalInfo{ + width:10%; + font-size:10pt; + } } @media (max-width: 450px){ @@ -32,4 +36,7 @@ .image{ width:100%; } + .additionalInfo{ + display:none; + } } \ No newline at end of file diff --git a/frontend/src/components/mdx/info/info.tsx b/frontend/src/components/mdx/info/info.tsx index 16fdc24..8cab8e8 100644 --- a/frontend/src/components/mdx/info/info.tsx +++ b/frontend/src/components/mdx/info/info.tsx @@ -4,9 +4,10 @@ import { TextField } from 'components/mdx/textField/textField'; import React from "react"; -export function Info({ src, propsImage, propsText, alt, text }: { src: string, propsImage: string, propsText: string, alt: string, text: string }) { - if(propsImage.includes("left")){ +export function Info({ src, propsImage, propsText, alt, text, addInfo }: { src: string, propsImage: string, propsText: string, alt: string, text: string, addInfo:string }) { + if(propsImage.includes("left") || window.innerWidth <= 450){ return
+
{addInfo}
{
@@ -22,6 +23,7 @@ export function Info({ src, propsImage, propsText, alt, text }: { src: string, p
{
+
{addInfo}
} } \ No newline at end of file From 232fcb0875a65077e87d16d774b0dc6670b486ec Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Mon, 22 Mar 2021 13:24:13 +0100 Subject: [PATCH 26/42] removed additional Info div, when empty --- frontend/src/components/mdx/info/info.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/components/mdx/info/info.scss b/frontend/src/components/mdx/info/info.scss index fcceaa7..641165b 100644 --- a/frontend/src/components/mdx/info/info.scss +++ b/frontend/src/components/mdx/info/info.scss @@ -24,6 +24,9 @@ width:10%; font-size:10pt; } + .additionalInfo:empty{ + display:none; + } } @media (max-width: 450px){ From 006343f29bbe3b123e7ce9c407606d4092189a13 Mon Sep 17 00:00:00 2001 From: BottledSoda Date: Wed, 24 Mar 2021 13:12:29 +0100 Subject: [PATCH 27/42] add contentPage for development purpose --- frontend/src/content/contentPage.mdx | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 frontend/src/content/contentPage.mdx diff --git a/frontend/src/content/contentPage.mdx b/frontend/src/content/contentPage.mdx new file mode 100644 index 0000000..a46732d --- /dev/null +++ b/frontend/src/content/contentPage.mdx @@ -0,0 +1,6 @@ +import { Image } from '../components/mdx/image/image'; +import { Homescreen } from '../components/mdx/homescreen/homescreen'; +import { Info } from '../components/mdx/info/info'; + + + \ No newline at end of file From 8bf3641bb9f6a6244496287917caa1b4564a958e Mon Sep 17 00:00:00 2001 From: LinkKF Date: Fri, 26 Mar 2021 14:13:58 +0100 Subject: [PATCH 28/42] "" --- .../components/mdx/homescreen/homescreen.tsx | 15 +++--- frontend/src/components/mdx/info/info.scss | 10 ++-- frontend/src/components/mdx/info/info.tsx | 46 +++++++++---------- 3 files changed, 36 insertions(+), 35 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index 7452846..0565f85 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -1,13 +1,10 @@ import './homescreen.scss'; -import { Image } from 'components/mdx/image/image'; -import { TextField } from 'components/mdx/textField/textField'; - import React from "react"; -export function Homescreen({ props, text }: { src: string, props: string, alt: string, text: string }) { - return
-
- {text} -
+export function Homescreen({ text }: { src: string, props: string, alt: string, text: string }): React.ReactElement { + return
+
+ {text}
- } \ No newline at end of file +
; +} diff --git a/frontend/src/components/mdx/info/info.scss b/frontend/src/components/mdx/info/info.scss index 641165b..ad87c1a 100644 --- a/frontend/src/components/mdx/info/info.scss +++ b/frontend/src/components/mdx/info/info.scss @@ -10,9 +10,14 @@ } @media (min-width: 450px){ - .infoContainer{ + .infoContainer-left{ flex-direction: row; } + + .infoContainer-right{ + flex-direction: row-reverse; + } + .text{ flex-grow:3; } @@ -29,7 +34,7 @@ } } -@media (max-width: 450px){ + .infoContainer{ flex-direction: column; } @@ -42,4 +47,3 @@ .additionalInfo{ display:none; } -} \ No newline at end of file diff --git a/frontend/src/components/mdx/info/info.tsx b/frontend/src/components/mdx/info/info.tsx index 8cab8e8..b82fdb5 100644 --- a/frontend/src/components/mdx/info/info.tsx +++ b/frontend/src/components/mdx/info/info.tsx @@ -4,26 +4,26 @@ import { TextField } from 'components/mdx/textField/textField'; import React from "react"; -export function Info({ src, propsImage, propsText, alt, text, addInfo }: { src: string, propsImage: string, propsText: string, alt: string, text: string, addInfo:string }) { - if(propsImage.includes("left") || window.innerWidth <= 450){ - return
-
{addInfo}
-
- { -
-
- -
-
- } else { - return
-
- -
-
- { -
-
{addInfo}
-
- } -} \ No newline at end of file +export function Info({ src, propsImage, propsText, alt, text, addInfo }: { src: string, propsImage: string, propsText: string, alt: string, text: string, addInfo: string }): React.ReactElement { + if (propsImage.includes("left")) { + return
+
{addInfo}
+
+ {alt} +
+
+ +
+
; + } else { + return
+
{addInfo}
+
+ {alt} +
+
+ +
+
; + } +} From da38877a6879e265772345b6b9d419cb74ec0d24 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Sat, 27 Mar 2021 14:36:03 +0100 Subject: [PATCH 29/42] added module stuff --- ...homescreen.scss => homescreen.module.scss} | 2 +- .../components/mdx/homescreen/homescreen.tsx | 6 +-- .../components/mdx/image/image.module.scss | 40 ++++++++++++++++++ frontend/src/components/mdx/image/image.scss | 42 ------------------- frontend/src/components/mdx/image/image.tsx | 12 ++++-- .../mdx/info/{info.scss => info.module.scss} | 33 ++++++++------- frontend/src/components/mdx/info/info.tsx | 38 +++++++---------- .../{textField.scss => textField.module.scss} | 0 .../components/mdx/textField/textField.tsx | 10 ++--- frontend/src/content/contentPage.mdx | 11 +++-- 10 files changed, 98 insertions(+), 96 deletions(-) rename frontend/src/components/mdx/homescreen/{homescreen.scss => homescreen.module.scss} (99%) create mode 100644 frontend/src/components/mdx/image/image.module.scss delete mode 100644 frontend/src/components/mdx/image/image.scss rename frontend/src/components/mdx/info/{info.scss => info.module.scss} (75%) rename frontend/src/components/mdx/textField/{textField.scss => textField.module.scss} (100%) diff --git a/frontend/src/components/mdx/homescreen/homescreen.scss b/frontend/src/components/mdx/homescreen/homescreen.module.scss similarity index 99% rename from frontend/src/components/mdx/homescreen/homescreen.scss rename to frontend/src/components/mdx/homescreen/homescreen.module.scss index cba22b2..fa56e5e 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.module.scss @@ -34,4 +34,4 @@ font-size:40pt; text-align:center; z-index:1; -} \ No newline at end of file +} diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index 0565f85..ad7ca3f 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -1,9 +1,9 @@ -import './homescreen.scss'; +import homescreenStyles from './homescreen.module.scss'; import React from "react"; export function Homescreen({ text }: { src: string, props: string, alt: string, text: string }): React.ReactElement { - return
-
+ return
+
{text}
; diff --git a/frontend/src/components/mdx/image/image.module.scss b/frontend/src/components/mdx/image/image.module.scss new file mode 100644 index 0000000..b1e2d6f --- /dev/null +++ b/frontend/src/components/mdx/image/image.module.scss @@ -0,0 +1,40 @@ +@use '../../style/globals'; + + +@mixin image($width, $height) { + image-rendering: optimizeQuality; + + width: $width; + height: $height; + + border-radius: 5%; + + object-fit: cover; + object-position: center; +} + +.square { + @mixin square-image($size) { + @include image($size, $size); + } + + &-small { + @include square-image(5rem); + } + + &-medium { + @include square-image(10rem); + } + + &-large { + @include square-image(15rem); + } + + &-full { + @include square-image(100%) + } +} + +.round { + border-radius: 50%; +} diff --git a/frontend/src/components/mdx/image/image.scss b/frontend/src/components/mdx/image/image.scss deleted file mode 100644 index 0190d6b..0000000 --- a/frontend/src/components/mdx/image/image.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use '../../style/globals'; - -@mixin image { - image-rendering: optimizeQuality; -} - -.image-round { - @include image; - border-radius: 50%; -} - -.image-rectangle { - @include image; - border-radius: 0%; -} - -.image-medium { - @include image; - width: 10rem; - height: 10rem; - - object-fit: cover; - object-position: center; -} - -.image-big { - @include image; - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 5%; -} - -.image-full { - @include image; - width: 100%; - height: 100%; - - object-fit: cover; - object-position: center; -} - diff --git a/frontend/src/components/mdx/image/image.tsx b/frontend/src/components/mdx/image/image.tsx index 846b14b..ec27c51 100644 --- a/frontend/src/components/mdx/image/image.tsx +++ b/frontend/src/components/mdx/image/image.tsx @@ -1,7 +1,13 @@ -import './image.scss'; +import imageStyles from './image.module.scss'; import React from "react"; -export function Image({ src, props, alt }: { src: string, props: string, alt: string }) { - return {alt}/ +export type ImageSize = "small" | "medium" | "large" | "full"; +export type ImageShape = "round" | "rectangle"; + +export function Image({ src, alt, size, shape }: { src: string, alt: string, size?: ImageSize, shape?: ImageShape}): React.ReactElement { + const sizeStyleName: keyof typeof imageStyles = `square-${size ?? "medium"}` as const; + const shapeStyleName: keyof typeof imageStyles = shape ?? "rectangle" as const; + + return {alt}; } diff --git a/frontend/src/components/mdx/info/info.scss b/frontend/src/components/mdx/info/info.module.scss similarity index 75% rename from frontend/src/components/mdx/info/info.scss rename to frontend/src/components/mdx/info/info.module.scss index ad87c1a..7630f9a 100644 --- a/frontend/src/components/mdx/info/info.scss +++ b/frontend/src/components/mdx/info/info.module.scss @@ -7,6 +7,20 @@ width: 100%; color:rgb(0, 0, 0); font-size: 20pt; + flex-direction: column; + margin-bottom:25px; +} + +.text{ + width:100%; +} + +.image{ + width:100%; +} + +.additionalInfo{ + display:none; } @media (min-width: 450px){ @@ -19,15 +33,16 @@ } .text{ - flex-grow:3; + width:65%; } .image{ - width:30%; + width:25%; } .additionalInfo{ - width:10%; + width:15%; font-size:10pt; + display:flex; } .additionalInfo:empty{ display:none; @@ -35,15 +50,3 @@ } - .infoContainer{ - flex-direction: column; - } - .text{ - width:100%; - } - .image{ - width:100%; - } - .additionalInfo{ - display:none; - } diff --git a/frontend/src/components/mdx/info/info.tsx b/frontend/src/components/mdx/info/info.tsx index b82fdb5..65bf18c 100644 --- a/frontend/src/components/mdx/info/info.tsx +++ b/frontend/src/components/mdx/info/info.tsx @@ -1,29 +1,21 @@ -import './info.scss'; +import infoStyles from './info.module.scss'; import { Image } from 'components/mdx/image/image'; import { TextField } from 'components/mdx/textField/textField'; import React from "react"; -export function Info({ src, propsImage, propsText, alt, text, addInfo }: { src: string, propsImage: string, propsText: string, alt: string, text: string, addInfo: string }): React.ReactElement { - if (propsImage.includes("left")) { - return
-
{addInfo}
-
- {alt} -
-
- -
-
; - } else { - return
-
{addInfo}
-
- {alt} -
-
- -
-
; - } +export type ImagePosition = "left" | "right"; + +export function Info({ src, text, addInfo, propsText, imagePosition, alt }: { src: string, text: string, addInfo: string, propsImage: string, propsText: string, imagePosition?: ImagePosition, alt: string }): React.ReactElement { + const position: keyof typeof infoStyles = `infoContainer-${imagePosition ?? "left"}` as const; + + return
+
{addInfo}
+
+ {alt} +
+
+ +
+
; } diff --git a/frontend/src/components/mdx/textField/textField.scss b/frontend/src/components/mdx/textField/textField.module.scss similarity index 100% rename from frontend/src/components/mdx/textField/textField.scss rename to frontend/src/components/mdx/textField/textField.module.scss diff --git a/frontend/src/components/mdx/textField/textField.tsx b/frontend/src/components/mdx/textField/textField.tsx index d27cd2b..f1da907 100644 --- a/frontend/src/components/mdx/textField/textField.tsx +++ b/frontend/src/components/mdx/textField/textField.tsx @@ -1,7 +1,7 @@ -import './textField.scss'; - import React from "react"; +import textStyles from './textField.module.scss'; + -export function TextField({text, props}:{text: string, props: string}){ - return
{text}
-} \ No newline at end of file +export function TextField({text, props}:{text: string, props: string}):React.ReactElement{ + return
{text}
; +} diff --git a/frontend/src/content/contentPage.mdx b/frontend/src/content/contentPage.mdx index a46732d..5435d4c 100644 --- a/frontend/src/content/contentPage.mdx +++ b/frontend/src/content/contentPage.mdx @@ -1,6 +1,9 @@ -import { Image } from '../components/mdx/image/image'; -import { Homescreen } from '../components/mdx/homescreen/homescreen'; import { Info } from '../components/mdx/info/info'; +import {Homescreen} from '../components/mdx/homescreen/homescreen'; - - \ No newline at end of file + + + + + + From 10722d9a2f003c5408653d0f33a81b2c7db403b3 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Sat, 27 Mar 2021 15:15:27 +0100 Subject: [PATCH 30/42] made homescreen background variable --- .../mdx/homescreen/homescreen.module.scss | 14 ++++---------- .../src/components/mdx/homescreen/homescreen.tsx | 4 ++-- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.module.scss b/frontend/src/components/mdx/homescreen/homescreen.module.scss index fa56e5e..fc3ac4e 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.module.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.module.scss @@ -1,19 +1,10 @@ @use '../../style/globals'; .homeContainer{ - top: 0; - left: 0; - bottom: 0; - right:0; - height:100vh; - width:100vw; display:grid; place-items:center; position:absolute; color:black; -} - -.homeContainer::before{ content:""; top: 0; left: 0; @@ -21,10 +12,13 @@ right:0; width:100vw; height:100vh; - background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/99/Karlsruhe-Schloss-meph666-2005-Apr-22.jpg'); background-size: cover; background-position: center 0%; position: absolute; +} + +.homeContainer::before{ + filter: blur(2px) grayscale(20%); } diff --git a/frontend/src/components/mdx/homescreen/homescreen.tsx b/frontend/src/components/mdx/homescreen/homescreen.tsx index ad7ca3f..090fbeb 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.tsx +++ b/frontend/src/components/mdx/homescreen/homescreen.tsx @@ -1,8 +1,8 @@ import homescreenStyles from './homescreen.module.scss'; import React from "react"; -export function Homescreen({ text }: { src: string, props: string, alt: string, text: string }): React.ReactElement { - return
+export function Homescreen({ src, text }: { src: string, props: string, alt: string, text: string }): React.ReactElement { + return
{text}
From 74315cd52d273bf6efc7e91ce7839d99be9d93e1 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Sat, 27 Mar 2021 15:15:44 +0100 Subject: [PATCH 31/42] undid changes in helloWorld --- frontend/src/content/helloWorld.mdx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/frontend/src/content/helloWorld.mdx b/frontend/src/content/helloWorld.mdx index ae09408..4d6ce3f 100644 --- a/frontend/src/content/helloWorld.mdx +++ b/frontend/src/content/helloWorld.mdx @@ -1,11 +1,5 @@ -import { Image } from '../components/mdx/image/image'; -import { Homescreen } from '../components/mdx/homescreen/homescreen'; -import { Info } from '../components/mdx/info/info'; import { RoundImage } from '../components/mdx/round-image/roundImage'; - - - You can write anything here that is allowed in regulra markdown files as well. This includes _italic_, **bold** and ~~struck-through~~ text, [links with a descriptor](https://github.github.com/gfm/) and even tables: From 39cd74498f46012d049479c047f1f3744260d6d9 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Mon, 29 Mar 2021 13:48:30 +0200 Subject: [PATCH 32/42] merge branch development into new-components --- dhbw-ka-website.code-workspace | 3 +- frontend/{.eslintrc.json => .eslintrc.js} | 8 +- frontend/package.json | 102 ++++++++++------------ frontend/webpack.common.js | 13 ++- package-lock.json | 3 + 5 files changed, 69 insertions(+), 60 deletions(-) rename frontend/{.eslintrc.json => .eslintrc.js} (90%) create mode 100644 package-lock.json diff --git a/dhbw-ka-website.code-workspace b/dhbw-ka-website.code-workspace index 0eb549b..e299ced 100644 --- a/dhbw-ka-website.code-workspace +++ b/dhbw-ka-website.code-workspace @@ -6,6 +6,7 @@ ], "settings": { "typescript.tsdk": "./frontend/node_modules/typescript/lib", + "typescript.enablePromptUseWorkspaceTsdk": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, @@ -20,7 +21,7 @@ ] }, "eslint.workingDirectories": [ - "./frontend" + "frontend" ], "eslint.validate": [ "javascript", diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.js similarity index 90% rename from frontend/.eslintrc.json rename to frontend/.eslintrc.js index fa10709..21775ff 100644 --- a/frontend/.eslintrc.json +++ b/frontend/.eslintrc.js @@ -1,4 +1,6 @@ -{ +const path = require('path'); + +module.exports = { "root": true, "env": { "browser": true, @@ -35,7 +37,7 @@ "settings": { "import/resolver": { "eslint-import-resolver-webpack": { - "config": "./webpack.development.js" + "config": path.join(__dirname, "./webpack.development.js") } } }, @@ -66,4 +68,4 @@ "dist", "node_modules" ] -} +}; diff --git a/frontend/package.json b/frontend/package.json index adfd663..e0ce7e0 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,57 +1,51 @@ { - "name": "dhbw-ka-website", - "version": "0.1.0", - "description": "Informational website for aspiring students with everything about Karlsruhe city", - "repository": "https://github.com/Quaffel/dhbw-ka-website", - "license": "MIT", - "contributors": [ - { - "name": "Niklas Radomski", - "email": "niklas.radomski@outlook.de" + "name": "dhbw-ka-website", + "version": "0.1.0", + "description": "Informational website for aspiring students with everything about Karlsruhe city", + "repository": "https://github.com/Quaffel/dhbw-ka-website", + "license": "MIT", + "contributors": [ + { + "name": "Niklas Radomski", + "email": "niklas.radomski@outlook.de" + } + ], + "scripts": { + "start": "webpack serve --config webpack.development.js --open", + "build-development": "webpack --config webpack.development.js", + "build-production": "webpack --config webpack.production.js", + "dev": "npm run build-development && npm run start", + "lint": "eslint ." + }, + "devDependencies": { + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "sass": "^1.32.5", + "typescript": "^4.1.3", + "typescript-plugin-css-modules": "^3.1.0", + "webpack": "^5.16.0", + "webpack-cli": "^4.4.0", + "webpack-dev-server": "^3.11.2", + "webpack-merge": "^5.7.3", + "copy-webpack-plugin": "^7.0.0", + "tsconfig-paths-webpack-plugin": "^3.3.0", + "style-loader": "^2.0.0", + "css-loader": "^5.0.1", + "sass-loader": "^10.1.1", + "ts-loader": "^8.0.14", + "@mdx-js/loader": "^1.6.22", + "babel-loader": "^8.2.2", + "@babel/core": "^7.12.10", + "@babel/preset-env": "^7.12.10", + "@babel/preset-react": "^7.12.10", + "eslint": "7.19.0", + "@typescript-eslint/eslint-plugin": "^4.15.0", + "@typescript-eslint/parser": "^4.15.0", + "eslint-plugin-import": "^2.22.1", + "eslint-import-resolver-webpack": "^0.13.0", + "eslint-plugin-mdx": "^1.8.2", + "eslint-plugin-react": "^7.22.0" } - ], - "scripts": { - "start": "webpack serve --config webpack.development.js --open", - "build-development": "webpack --config webpack.development.js", - "build-production": "webpack --config webpack.production.js", - "dev": "npm run build-development && npm run start", - "lint": "eslint ." - }, - "devDependencies": { - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", - - "react": "^17.0.1", - "react-dom": "^17.0.1", - - "sass": "^1.32.5", - "typescript": "^4.1.3", - - "typescript-plugin-css-modules": "^3.1.0", - - "webpack": "^5.16.0", - "webpack-cli": "^4.4.0", - "webpack-dev-server": "^3.11.2", - "webpack-merge": "^5.7.3", - "copy-webpack-plugin": "^7.0.0", - "tsconfig-paths-webpack-plugin": "^3.3.0", - "style-loader": "^2.0.0", - "css-loader": "^5.0.1", - "sass-loader": "^10.1.1", - "ts-loader": "^8.0.14", - "@mdx-js/loader": "^1.6.22", - "babel-loader": "^8.2.2", - - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.12.10", - "@babel/preset-react": "^7.12.10", - - "eslint": "7.19.0", - "@typescript-eslint/eslint-plugin": "^4.15.0", - "@typescript-eslint/parser": "^4.15.0", - "eslint-plugin-import": "^2.22.1", - "eslint-import-resolver-webpack": "^0.13.0", - "eslint-plugin-mdx": "^1.8.2", - "eslint-plugin-react": "^7.22.0" - } } diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index dc2696f..bb1546c 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -1,4 +1,5 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require("path"); /** * @param options {{styleLocalIdentName: string}} @@ -32,7 +33,13 @@ module.exports = function(options) { options: { esModule: true, modules: { - localIdentName: options?.styleLocalIdentName ?? '[hash]' + localIdentName: (() => { + if (options && options.styleLocalIdentName) { + return options.styleLocalIdentName; + } else { + return '[hash]'; + } + })() }, importLoaders: 1 } @@ -46,7 +53,9 @@ module.exports = function(options) { resolve: { extensions: ['.tsx', '.ts', '.js', '.mdx'], modules: ['src', 'node_modules'], - plugins: [new TsconfigPathsPlugin()] + plugins: [new TsconfigPathsPlugin({ + configFile: path.join(__dirname, "tsconfig.json") + })] } }; }; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..48e341a --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} From 10f92a780b1180e5d08eaf0df43d10d23f2ff717 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Mon, 29 Mar 2021 14:02:15 +0200 Subject: [PATCH 33/42] reformatted Info method --- frontend/content/contentPage.mdx | 6 ------ frontend/src/components/mdx/image/image.module.scss | 6 ++++-- frontend/src/content/contentPage.mdx | 12 +++++++++--- 3 files changed, 13 insertions(+), 11 deletions(-) delete mode 100644 frontend/content/contentPage.mdx diff --git a/frontend/content/contentPage.mdx b/frontend/content/contentPage.mdx deleted file mode 100644 index 3298906..0000000 --- a/frontend/content/contentPage.mdx +++ /dev/null @@ -1,6 +0,0 @@ -import { Image } from 'components/mdx/image/image'; -import { Homescreen } from 'components/mdx/homescreen/homescreen'; -import { Info } from 'components/mdx/info/info'; - - - \ No newline at end of file diff --git a/frontend/src/components/mdx/image/image.module.scss b/frontend/src/components/mdx/image/image.module.scss index b1e2d6f..5987fef 100644 --- a/frontend/src/components/mdx/image/image.module.scss +++ b/frontend/src/components/mdx/image/image.module.scss @@ -7,8 +7,6 @@ width: $width; height: $height; - border-radius: 5%; - object-fit: cover; object-position: center; } @@ -38,3 +36,7 @@ .round { border-radius: 50%; } + +.rectangle{ + border-radius: 5%; +} diff --git a/frontend/src/content/contentPage.mdx b/frontend/src/content/contentPage.mdx index 5435d4c..e866066 100644 --- a/frontend/src/content/contentPage.mdx +++ b/frontend/src/content/contentPage.mdx @@ -4,6 +4,12 @@ import {Homescreen} from '../components/mdx/homescreen/homescreen'; - - - + + + From 80a21e5b40af3ca63e97eb20f86e819d058ab070 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Mon, 29 Mar 2021 14:04:02 +0200 Subject: [PATCH 34/42] removed round-image --- frontend/src/content/helloWorld.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/content/helloWorld.mdx b/frontend/src/content/helloWorld.mdx index 4d6ce3f..a76873b 100644 --- a/frontend/src/content/helloWorld.mdx +++ b/frontend/src/content/helloWorld.mdx @@ -1,4 +1,4 @@ -import { RoundImage } from '../components/mdx/round-image/roundImage'; +import { Image } from '../components/mdx/image/image'; You can write anything here that is allowed in regulra markdown files as well. This includes _italic_, **bold** and ~~struck-through~~ text, [links with a descriptor](https://github.github.com/gfm/) and even tables: @@ -28,7 +28,7 @@ As a surprise, mdx also supports task list items: The following image is a regular React component. By writing powerful, highly-adjustable components, we can write beautiful-looking articles with almost no effort in a maintainable way. - +{"A ## A note on styling From 0bf04fc8a56cb3faaf235fd5a8fc999940497fbc Mon Sep 17 00:00:00 2001 From: LinkKF Date: Mon, 29 Mar 2021 14:38:17 +0200 Subject: [PATCH 35/42] adressed PR changes --- .../mdx/homescreen/homescreen.module.scss | 17 +++++------------ .../src/components/mdx/info/info.module.scss | 6 +++--- frontend/src/content/contentPage.mdx | 3 ++- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.module.scss b/frontend/src/components/mdx/homescreen/homescreen.module.scss index fc3ac4e..3f24ac3 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.module.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.module.scss @@ -3,25 +3,18 @@ .homeContainer{ display:grid; place-items:center; - position:absolute; + position:relative; + bottom:0; color:black; content:""; - top: 0; - left: 0; - bottom: 0; - right:0; - width:100vw; - height:100vh; + z-index: -5; + width:100%; + height:100%; background-size: cover; background-position: center 0%; position: absolute; } -.homeContainer::before{ - - filter: blur(2px) grayscale(20%); -} - .homeContainer-inside{ background-color: white; color:black; diff --git a/frontend/src/components/mdx/info/info.module.scss b/frontend/src/components/mdx/info/info.module.scss index 7630f9a..351a8ca 100644 --- a/frontend/src/components/mdx/info/info.module.scss +++ b/frontend/src/components/mdx/info/info.module.scss @@ -43,9 +43,9 @@ width:15%; font-size:10pt; display:flex; - } - .additionalInfo:empty{ - display:none; + &:empty{ + display:none; + } } } diff --git a/frontend/src/content/contentPage.mdx b/frontend/src/content/contentPage.mdx index e866066..7cf4676 100644 --- a/frontend/src/content/contentPage.mdx +++ b/frontend/src/content/contentPage.mdx @@ -1,7 +1,8 @@ import { Info } from '../components/mdx/info/info'; import {Homescreen} from '../components/mdx/homescreen/homescreen'; - + Date: Mon, 29 Mar 2021 14:41:23 +0200 Subject: [PATCH 36/42] remove position relative --- frontend/src/components/mdx/homescreen/homescreen.module.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.module.scss b/frontend/src/components/mdx/homescreen/homescreen.module.scss index 3f24ac3..7ce2acd 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.module.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.module.scss @@ -3,7 +3,7 @@ .homeContainer{ display:grid; place-items:center; - position:relative; + position:absolute; bottom:0; color:black; content:""; @@ -12,7 +12,6 @@ height:100%; background-size: cover; background-position: center 0%; - position: absolute; } .homeContainer-inside{ From 655c9e02b37d0e231fce6e33017e5606f4a95264 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Tue, 30 Mar 2021 19:01:35 +0200 Subject: [PATCH 37/42] added max-size for full image size --- frontend/src/components/mdx/image/image.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/mdx/image/image.module.scss b/frontend/src/components/mdx/image/image.module.scss index 5987fef..46ccb6b 100644 --- a/frontend/src/components/mdx/image/image.module.scss +++ b/frontend/src/components/mdx/image/image.module.scss @@ -29,7 +29,7 @@ } &-full { - @include square-image(100%) + @include square-image(clamp(0px,100%, 1080px )) } } From 946514b33d7159b6bdb03b0a0aaf11bb083180bb Mon Sep 17 00:00:00 2001 From: LinkKF Date: Tue, 30 Mar 2021 19:02:38 +0200 Subject: [PATCH 38/42] resize navbar to fit to page --- frontend/src/components/navbar/navbar.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/navbar/navbar.module.scss b/frontend/src/components/navbar/navbar.module.scss index b38bb8d..6e1feb0 100644 --- a/frontend/src/components/navbar/navbar.module.scss +++ b/frontend/src/components/navbar/navbar.module.scss @@ -9,7 +9,7 @@ nav { text-align: center; position: sticky; - width: 100%; + width: 98.25%; color: globals.$color-font-secondary; background-color: globals.$color-secondary; From 41c18f6d74fe183f79835ccfa229c1241feda4bd Mon Sep 17 00:00:00 2001 From: LinkKF Date: Tue, 30 Mar 2021 20:53:34 +0200 Subject: [PATCH 39/42] undid changes on navbar --- frontend/src/components/navbar/navbar.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/navbar/navbar.module.scss b/frontend/src/components/navbar/navbar.module.scss index 6e1feb0..b38bb8d 100644 --- a/frontend/src/components/navbar/navbar.module.scss +++ b/frontend/src/components/navbar/navbar.module.scss @@ -9,7 +9,7 @@ nav { text-align: center; position: sticky; - width: 98.25%; + width: 100%; color: globals.$color-font-secondary; background-color: globals.$color-secondary; From 6630bb07c8369ec4a0135b94294572ea8908775a Mon Sep 17 00:00:00 2001 From: LinkKF Date: Tue, 30 Mar 2021 21:59:52 +0200 Subject: [PATCH 40/42] reformatted package/removed redundant package-lock --- frontend/package.json | 96 +++++++++++++++++++++---------------------- package-lock.json | 3 -- 2 files changed, 48 insertions(+), 51 deletions(-) delete mode 100644 package-lock.json diff --git a/frontend/package.json b/frontend/package.json index e0ce7e0..fd46583 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,51 +1,51 @@ { - "name": "dhbw-ka-website", - "version": "0.1.0", - "description": "Informational website for aspiring students with everything about Karlsruhe city", - "repository": "https://github.com/Quaffel/dhbw-ka-website", - "license": "MIT", - "contributors": [ - { - "name": "Niklas Radomski", - "email": "niklas.radomski@outlook.de" - } - ], - "scripts": { - "start": "webpack serve --config webpack.development.js --open", - "build-development": "webpack --config webpack.development.js", - "build-production": "webpack --config webpack.production.js", - "dev": "npm run build-development && npm run start", - "lint": "eslint ." - }, - "devDependencies": { - "@types/react": "^17.0.0", - "@types/react-dom": "^17.0.0", - "react": "^17.0.1", - "react-dom": "^17.0.1", - "sass": "^1.32.5", - "typescript": "^4.1.3", - "typescript-plugin-css-modules": "^3.1.0", - "webpack": "^5.16.0", - "webpack-cli": "^4.4.0", - "webpack-dev-server": "^3.11.2", - "webpack-merge": "^5.7.3", - "copy-webpack-plugin": "^7.0.0", - "tsconfig-paths-webpack-plugin": "^3.3.0", - "style-loader": "^2.0.0", - "css-loader": "^5.0.1", - "sass-loader": "^10.1.1", - "ts-loader": "^8.0.14", - "@mdx-js/loader": "^1.6.22", - "babel-loader": "^8.2.2", - "@babel/core": "^7.12.10", - "@babel/preset-env": "^7.12.10", - "@babel/preset-react": "^7.12.10", - "eslint": "7.19.0", - "@typescript-eslint/eslint-plugin": "^4.15.0", - "@typescript-eslint/parser": "^4.15.0", - "eslint-plugin-import": "^2.22.1", - "eslint-import-resolver-webpack": "^0.13.0", - "eslint-plugin-mdx": "^1.8.2", - "eslint-plugin-react": "^7.22.0" + "name": "dhbw-ka-website", + "version": "0.1.0", + "description": "Informational website for aspiring students with everything about Karlsruhe city", + "repository": "https://github.com/Quaffel/dhbw-ka-website", + "license": "MIT", + "contributors": [ + { + "name": "Niklas Radomski", + "email": "niklas.radomski@outlook.de" } + ], + "scripts": { + "start": "webpack serve --config webpack.development.js --open", + "build-development": "webpack --config webpack.development.js", + "build-production": "webpack --config webpack.production.js", + "dev": "npm run build-development && npm run start", + "lint": "eslint ." + }, + "devDependencies": { + "@types/react": "^17.0.0", + "@types/react-dom": "^17.0.0", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "sass": "^1.32.5", + "typescript": "^4.1.3", + "typescript-plugin-css-modules": "^3.1.0", + "webpack": "^5.16.0", + "webpack-cli": "^4.4.0", + "webpack-dev-server": "^3.11.2", + "webpack-merge": "^5.7.3", + "copy-webpack-plugin": "^7.0.0", + "tsconfig-paths-webpack-plugin": "^3.3.0", + "style-loader": "^2.0.0", + "css-loader": "^5.0.1", + "sass-loader": "^10.1.1", + "ts-loader": "^8.0.14", + "@mdx-js/loader": "^1.6.22", + "babel-loader": "^8.2.2", + "@babel/core": "^7.12.10", + "@babel/preset-env": "^7.12.10", + "@babel/preset-react": "^7.12.10", + "eslint": "7.19.0", + "@typescript-eslint/eslint-plugin": "^4.15.0", + "@typescript-eslint/parser": "^4.15.0", + "eslint-plugin-import": "^2.22.1", + "eslint-import-resolver-webpack": "^0.13.0", + "eslint-plugin-mdx": "^1.8.2", + "eslint-plugin-react": "^7.22.0" + } } diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 48e341a..0000000 --- a/package-lock.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "lockfileVersion": 1 -} From f186974a6915bbdeb927903ce24ba900f477d587 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Tue, 30 Mar 2021 22:00:01 +0200 Subject: [PATCH 41/42] reformatted files --- .../mdx/homescreen/homescreen.module.scss | 36 ++++----- .../components/mdx/image/image.module.scss | 5 +- .../src/components/mdx/info/info.module.scss | 78 +++++++++---------- 3 files changed, 58 insertions(+), 61 deletions(-) diff --git a/frontend/src/components/mdx/homescreen/homescreen.module.scss b/frontend/src/components/mdx/homescreen/homescreen.module.scss index 7ce2acd..8cd057b 100644 --- a/frontend/src/components/mdx/homescreen/homescreen.module.scss +++ b/frontend/src/components/mdx/homescreen/homescreen.module.scss @@ -1,23 +1,23 @@ @use '../../style/globals'; -.homeContainer{ - display:grid; - place-items:center; - position:absolute; - bottom:0; - color:black; - content:""; - z-index: -5; - width:100%; - height:100%; - background-size: cover; - background-position: center 0%; +.homeContainer { + display: grid; + place-items: center; + position: absolute; + bottom: 0; + color: black; + content: ""; + z-index: -5; + width: 100%; + height: 100%; + background-size: cover; + background-position: center 0%; } -.homeContainer-inside{ - background-color: white; - color:black; - font-size:40pt; - text-align:center; - z-index:1; +.homeContainer-inside { + background-color: white; + color: black; + font-size: 40pt; + text-align: center; + z-index: 1; } diff --git a/frontend/src/components/mdx/image/image.module.scss b/frontend/src/components/mdx/image/image.module.scss index 46ccb6b..fe049c6 100644 --- a/frontend/src/components/mdx/image/image.module.scss +++ b/frontend/src/components/mdx/image/image.module.scss @@ -1,6 +1,5 @@ @use '../../style/globals'; - @mixin image($width, $height) { image-rendering: optimizeQuality; @@ -29,7 +28,7 @@ } &-full { - @include square-image(clamp(0px,100%, 1080px )) + @include square-image(clamp(0px, 100%, 1080px)); } } @@ -37,6 +36,6 @@ border-radius: 50%; } -.rectangle{ +.rectangle { border-radius: 5%; } diff --git a/frontend/src/components/mdx/info/info.module.scss b/frontend/src/components/mdx/info/info.module.scss index 351a8ca..9ed99ac 100644 --- a/frontend/src/components/mdx/info/info.module.scss +++ b/frontend/src/components/mdx/info/info.module.scss @@ -1,52 +1,50 @@ @use '../../style/globals'; -.infoContainer{ - display:flex; - position: relative; - text-align: center; - width: 100%; - color:rgb(0, 0, 0); - font-size: 20pt; - flex-direction: column; - margin-bottom:25px; +.infoContainer { + display: flex; + position: relative; + text-align: center; + width: 100%; + color: rgb(0, 0, 0); + font-size: 20pt; + flex-direction: column; + margin-bottom: 25px; } -.text{ - width:100%; +.text { + width: 100%; } -.image{ - width:100%; +.image { + width: 100%; } -.additionalInfo{ - display:none; +.additionalInfo { + display: none; } -@media (min-width: 450px){ - .infoContainer-left{ - flex-direction: row; - } - - .infoContainer-right{ - flex-direction: row-reverse; - } - - .text{ - width:65%; - } - - .image{ - width:25%; - } - .additionalInfo{ - width:15%; - font-size:10pt; - display:flex; - &:empty{ - display:none; - } +@media (min-width: 450px) { + .infoContainer-left { + flex-direction: row; + } + + .infoContainer-right { + flex-direction: row-reverse; + } + + .text { + width: 65%; + } + + .image { + width: 25%; + } + .additionalInfo { + width: 15%; + font-size: 10pt; + display: flex; + &:empty { + display: none; } + } } - - From 9325b774c06c8c5ee04ceabd790b3eb065ac7e73 Mon Sep 17 00:00:00 2001 From: LinkKF Date: Tue, 30 Mar 2021 22:01:32 +0200 Subject: [PATCH 42/42] reformatted file --- frontend/package.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/package.json b/frontend/package.json index fd46583..adfd663 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -20,11 +20,15 @@ "devDependencies": { "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", + "react": "^17.0.1", "react-dom": "^17.0.1", + "sass": "^1.32.5", "typescript": "^4.1.3", + "typescript-plugin-css-modules": "^3.1.0", + "webpack": "^5.16.0", "webpack-cli": "^4.4.0", "webpack-dev-server": "^3.11.2", @@ -37,9 +41,11 @@ "ts-loader": "^8.0.14", "@mdx-js/loader": "^1.6.22", "babel-loader": "^8.2.2", + "@babel/core": "^7.12.10", "@babel/preset-env": "^7.12.10", "@babel/preset-react": "^7.12.10", + "eslint": "7.19.0", "@typescript-eslint/eslint-plugin": "^4.15.0", "@typescript-eslint/parser": "^4.15.0",