From 1a06080a8234ec4292b9f7dfa0b5db29ab29dc30 Mon Sep 17 00:00:00 2001 From: tsindt Date: Mon, 21 Sep 2026 18:28:23 +0200 Subject: [PATCH 1/5] Erster Wurf des Mockups --- buildtime/cmd/server/httpServer.go | 2 +- buildtime/internal/handler/mainHandler.go | 1 + buildtime/static/css/scpq_content.css | 37 +++++++++++++++- buildtime/static/css/scpq_footer.css | 4 ++ buildtime/static/css/scpq_global.css | 54 ++++++++++++++++++++++- buildtime/static/css/scpq_header.css | 34 +++++++------- buildtime/templates/pages/index.html | 50 +++++++++++++++++++++ 7 files changed, 162 insertions(+), 20 deletions(-) create mode 100644 buildtime/templates/pages/index.html diff --git a/buildtime/cmd/server/httpServer.go b/buildtime/cmd/server/httpServer.go index 1854b3d..032a1c3 100644 --- a/buildtime/cmd/server/httpServer.go +++ b/buildtime/cmd/server/httpServer.go @@ -49,7 +49,7 @@ func InitHttpServer(config *viper.Viper, dbHandler *sql.DB) HttpServer { router := gin.Default() // initialize templates - //router.LoadHTMLGlob("../templates/**/*.html") + router.LoadHTMLGlob("../templates/**/*.html") router.Use(cors.Default()) diff --git a/buildtime/internal/handler/mainHandler.go b/buildtime/internal/handler/mainHandler.go index 26a74d5..56cd1b7 100644 --- a/buildtime/internal/handler/mainHandler.go +++ b/buildtime/internal/handler/mainHandler.go @@ -18,4 +18,5 @@ func NewMainHandler(p *services.PropertyTypeService) *MainHandler { func (h *MainHandler) Home(ctx *gin.Context) { // Implement the logic for the main handler's home endpoint here + ctx.HTML(200, "index.html", nil) } diff --git a/buildtime/static/css/scpq_content.css b/buildtime/static/css/scpq_content.css index da429ce..6d86bc7 100644 --- a/buildtime/static/css/scpq_content.css +++ b/buildtime/static/css/scpq_content.css @@ -11,8 +11,43 @@ main { border-radius: var(--box-border-radius); } +nav { + height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px); + overflow-y: auto; + /* Scrollbar, wenn der Inhalt zu groß ist */ + display: flex; /* Macht die Liste horizontal */ + justify-content: flex-start; /* Elemente am Anfang ausrichten */ + flex-direction: column; /* Elemente vertikal anordnen */ + border: 1px solid var(--secondary-color); + border-radius: var(--box-border-radius); + margin: 16px; + @media (max-width: 768px) { + margin: 0px; + } + padding: 5px; + background-color: var(--primary-font-color); +} + +nav ul { + padding-top: 15px; /* Entfernt die Standard-Padding der Liste */ + list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */ + + flex-wrap: wrap; /* Elemente umbrechen, wenn der Platz nicht ausreicht */ + gap: 20px; /* Abstand zwischen den Listenelementen */ +} + +nav ul li a { + text-decoration: none; /* Entfernt die Unterstreichung */ + color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ +} +nav ul li a:hover { + text-decoration: underline; /* Unterstreichung beim Überfahren mit der Maus */ + font-weight: bold; /* Macht den Text fett */ +} + + .editor-container { - height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 132px); + height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px); display: flex; flex-direction: row; /* Elemente horizontal anordnen */ diff --git a/buildtime/static/css/scpq_footer.css b/buildtime/static/css/scpq_footer.css index 38c4c71..fcebe66 100644 --- a/buildtime/static/css/scpq_footer.css +++ b/buildtime/static/css/scpq_footer.css @@ -8,4 +8,8 @@ footer { color: var(--secondary-font-color); margin: 16px; padding: 10px; + @media (max-width: 768px) { + padding: 0px; /* Adjust the padding for smaller screens */ + margin: 8px; /* Adjust the margin for smaller screens */ + } } diff --git a/buildtime/static/css/scpq_global.css b/buildtime/static/css/scpq_global.css index e301b3f..a4b78a2 100644 --- a/buildtime/static/css/scpq_global.css +++ b/buildtime/static/css/scpq_global.css @@ -14,7 +14,7 @@ --data-background-color: #ffffff; /* Dimensions */ - --header-height: 32px; + --header-height: 64px; --footer-height: 32px; --main-content-padding: 20px; --box-border-radius: 10px; @@ -32,8 +32,60 @@ * { margin: 0; padding: 0; + box-sizing: border-box; } +// 12 Spalten Grid System +.row::after { + content: ""; + clear: both; + display: table; +} + +[class*="col-"] { + float: left; + padding: 15px; +} + +/* Responsive Anpassungen Handy */ +[class*="col-"] { +width: 100%; +} + +/* Responsive Anpassungen Tablet */ +@media screen and (min-width: 600px) { + .col-s-1 {width: 8.33%;} + .col-s-2 {width: 16.66%;} + .col-s-3 {width: 25%;} + .col-s-4 {width: 33.33%;} + .col-s-5 {width: 41.66%;} + .col-s-6 {width: 50%;} + .col-s-7 {width: 58.33%;} + .col-s-8 {width: 66.66%;} + .col-s-9 {width: 75%;} + .col-s-10 {width: 83.33%;} + .col-s-11 {width: 91.66%;} + .col-s-12 {width: 100%;} +} + +/* Spaltenbreiten für 12 Spalten Grid */ +@media screen and (min-width: 768px) { +.col-1 {width: 8.33%;} +.col-2 {width: 16.66%;} +.col-3 {width: 25%;} +.col-4 {width: 33.33%;} +.col-5 {width: 41.66%;} +.col-6 {width: 50%;} +.col-7 {width: 58.33%;} +.col-8 {width: 66.66%;} +.col-9 {width: 75%;} +.col-10 {width: 83.33%;} +.col-11 {width: 91.66%;} +.col-12 {width: 100%;} +} + + + /* 2. Schriftart anwenden und Ränder entfernen*/ body { font-family: 'Inter', Arial, sans-serif; diff --git a/buildtime/static/css/scpq_header.css b/buildtime/static/css/scpq_header.css index 6711155..30a011c 100644 --- a/buildtime/static/css/scpq_header.css +++ b/buildtime/static/css/scpq_header.css @@ -4,6 +4,12 @@ header { display: flex; justify-content: flex-start; + flex-direction: row; + @media (max-width: 768px) { + flex-direction: column; + justify-content: center; + align-items: center; + } align-items: center; height: var(--header-height); @@ -21,28 +27,22 @@ header img { padding-right: 16px; /* Space between the image and the header text */ } +header h1 { + font-weight: 600; + font-size: 2em; /* Adjust the font size as needed */ + margin-left: 5px; + padding: 16px; + @media (max-width: 768px) { + font-size: 1em; /* Adjust the font size for smaller screens */ + padding: 0px; /* Adjust the padding for smaller screens */ + } +} + header p { font-weight: 100; margin-left: 16px; padding-right: 16px; } -nav { - margin: 16px; - padding: 10px; -} -nav ul { - list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */ - display: flex; /* Macht die Liste horizontal */ - gap: 20px; /* Abstand zwischen den Listenelementen */ -} -nav ul li a { - text-decoration: none; /* Entfernt die Unterstreichung */ - color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ -} -nav ul li a:hover { - text-decoration: underline; /* Unterstreichung beim Überfahren mit der Maus */ - font-weight: bold; /* Macht den Text fett */ -} diff --git a/buildtime/templates/pages/index.html b/buildtime/templates/pages/index.html new file mode 100644 index 0000000..71bbf85 --- /dev/null +++ b/buildtime/templates/pages/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + Simply CPQ Material Editor V2 + + +
+
+

Simply CPQ Material Editor V2

+
+
+
+ +
+
+

Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+ +
+
+

Sidebar

+

Wir ziehen mit unserem Equipment zurück in die Zollkantine in Bremen. Wir teilen uns dann den Raum mit Myrre und ihrer Band.

+
+
+
+
+ + + + \ No newline at end of file -- 2.54.0 From 2c22601cd64a55912ab098c7ae69cafe22620098 Mon Sep 17 00:00:00 2001 From: Thomas Sindt Date: Mon, 21 Sep 2026 23:07:55 +0200 Subject: [PATCH 2/5] CSS Fixes --- buildtime/static/css/scpq_content.css | 9 ++++----- buildtime/static/css/scpq_footer.css | 10 ++++++++++ buildtime/templates/pages/index.html | 10 ++++------ 3 files changed, 18 insertions(+), 11 deletions(-) diff --git a/buildtime/static/css/scpq_content.css b/buildtime/static/css/scpq_content.css index 6d86bc7..76648d6 100644 --- a/buildtime/static/css/scpq_content.css +++ b/buildtime/static/css/scpq_content.css @@ -12,7 +12,7 @@ main { } nav { - height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px); + height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px); overflow-y: auto; /* Scrollbar, wenn der Inhalt zu groß ist */ display: flex; /* Macht die Liste horizontal */ @@ -20,12 +20,12 @@ nav { flex-direction: column; /* Elemente vertikal anordnen */ border: 1px solid var(--secondary-color); border-radius: var(--box-border-radius); - margin: 16px; + margin-left: 16px; @media (max-width: 768px) { - margin: 0px; + height: 100%; } padding: 5px; - background-color: var(--primary-font-color); + background-color: var(--primary-color); } nav ul { @@ -45,7 +45,6 @@ nav ul li a:hover { font-weight: bold; /* Macht den Text fett */ } - .editor-container { height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px); display: flex; diff --git a/buildtime/static/css/scpq_footer.css b/buildtime/static/css/scpq_footer.css index fcebe66..d3e66a5 100644 --- a/buildtime/static/css/scpq_footer.css +++ b/buildtime/static/css/scpq_footer.css @@ -13,3 +13,13 @@ footer { margin: 8px; /* Adjust the margin for smaller screens */ } } + +footer a { + text-decoration: none; /* Entfernt die Unterstreichung */ + color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ +} +footer a:hover { + text-decoration: underline; /* Unterstreichung beim Überfahren mit der Maus */ + font-weight: bold; /* Macht den Text fett */ +} + diff --git a/buildtime/templates/pages/index.html b/buildtime/templates/pages/index.html index 71bbf85..4a75635 100644 --- a/buildtime/templates/pages/index.html +++ b/buildtime/templates/pages/index.html @@ -16,7 +16,7 @@
-
-
+

Sidebar

Wir ziehen mit unserem Equipment zurück in die Zollkantine in Bremen. Wir teilen uns dann den Raum mit Myrre und ihrer Band.

@@ -40,10 +40,8 @@
-
-
-

© 2026 Simply CPQ - All rights reserved - contact: Thomas.Sindt@gmx.de

-
+ -- 2.54.0 From 77ed6e0869bc9e5be001cfc580ea820827d51c00 Mon Sep 17 00:00:00 2001 From: tsindt Date: Tue, 22 Sep 2026 09:45:13 +0200 Subject: [PATCH 3/5] CSS glatt gezogen --- buildtime/static/css/scpq_content.css | 1 + buildtime/static/css/scpq_footer.css | 1 - buildtime/templates/pages/index.html | 12 +++++++----- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/buildtime/static/css/scpq_content.css b/buildtime/static/css/scpq_content.css index 76648d6..14a0453 100644 --- a/buildtime/static/css/scpq_content.css +++ b/buildtime/static/css/scpq_content.css @@ -37,6 +37,7 @@ nav ul { } nav ul li a { + padding-top: 16px; /* Abstand oben für die Links */ text-decoration: none; /* Entfernt die Unterstreichung */ color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ } diff --git a/buildtime/static/css/scpq_footer.css b/buildtime/static/css/scpq_footer.css index d3e66a5..b2267c7 100644 --- a/buildtime/static/css/scpq_footer.css +++ b/buildtime/static/css/scpq_footer.css @@ -7,7 +7,6 @@ footer { border-radius: var(--box-border-radius); color: var(--secondary-font-color); margin: 16px; - padding: 10px; @media (max-width: 768px) { padding: 0px; /* Adjust the padding for smaller screens */ margin: 8px; /* Adjust the margin for smaller screens */ diff --git a/buildtime/templates/pages/index.html b/buildtime/templates/pages/index.html index 4a75635..785e470 100644 --- a/buildtime/templates/pages/index.html +++ b/buildtime/templates/pages/index.html @@ -8,7 +8,7 @@ Simply CPQ Material Editor V2 - +
@@ -16,7 +16,7 @@
-
- + \ No newline at end of file -- 2.54.0 From f01587a4f775e402b1bdea5d444b439fd344dff6 Mon Sep 17 00:00:00 2001 From: tsindt Date: Tue, 22 Sep 2026 15:47:59 +0200 Subject: [PATCH 4/5] Treeview und Formfeld als Dummy aufgebaut --- buildtime/static/css/scpq_content.css | 16 ++-- buildtime/templates/pages/index.html | 101 +++++++++++++++++++++++--- 2 files changed, 101 insertions(+), 16 deletions(-) diff --git a/buildtime/static/css/scpq_content.css b/buildtime/static/css/scpq_content.css index 14a0453..a613810 100644 --- a/buildtime/static/css/scpq_content.css +++ b/buildtime/static/css/scpq_content.css @@ -3,7 +3,7 @@ main { padding: var(--main-content-padding); margin: 16px; - height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px); + height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding)); /* 32px für die Margen */ overflow-y: auto; /* Scrollbar, wenn der Inhalt zu groß ist */ @@ -12,7 +12,7 @@ main { } nav { - height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 64px); + height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding)); overflow-y: auto; /* Scrollbar, wenn der Inhalt zu groß ist */ display: flex; /* Macht die Liste horizontal */ @@ -26,10 +26,10 @@ nav { } padding: 5px; background-color: var(--primary-color); + color: var(--secondary-font-color); } nav ul { - padding-top: 15px; /* Entfernt die Standard-Padding der Liste */ list-style-type: none; /* Entfernt die Standard-Aufzählungszeichen */ flex-wrap: wrap; /* Elemente umbrechen, wenn der Platz nicht ausreicht */ @@ -37,7 +37,6 @@ nav ul { } nav ul li a { - padding-top: 16px; /* Abstand oben für die Links */ text-decoration: none; /* Entfernt die Unterstreichung */ color: var(--secondary-font-color); /* Setzt die Schriftfarbe */ } @@ -46,6 +45,13 @@ nav ul li a:hover { font-weight: bold; /* Macht den Text fett */ } +.rootNode { + padding-top: 28px; + /* Einrückung für die Wurzelknoten */ + color: var(--primary-color); + font-weight: bold; +} + .editor-container { height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px); display: flex; @@ -83,7 +89,7 @@ nav ul li a:hover { } .leaf { - padding-left: 20px; + padding-left: 28px; /* Einrückung für Blätter */ color: var(--primary-color); font-weight: lighter; diff --git a/buildtime/templates/pages/index.html b/buildtime/templates/pages/index.html index 785e470..c68e2db 100644 --- a/buildtime/templates/pages/index.html +++ b/buildtime/templates/pages/index.html @@ -18,24 +18,103 @@
-

Content

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+

Property-Type Group

+
+
+
+ + + + + + +
+ + + +
+
+
+
-
-

Sidebar

-

Wir ziehen mit unserem Equipment zurück in die Zollkantine in Bremen. Wir teilen uns dann den Raum mit Myrre und ihrer Band.

+

Values für {PropertyTypeName}

+
+
+

Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.

+ +
+
-- 2.54.0 From 3116696a79306598e6748beed45bdb0c49d29ca8 Mon Sep 17 00:00:00 2001 From: tsindt Date: Fri, 25 Sep 2026 06:26:53 +0200 Subject: [PATCH 5/5] Tabelle --- buildtime/static/css/scpq_content.css | 28 +++++++++++++++++++++-- buildtime/templates/pages/index.html | 32 +++++++++++++++++++++++++-- 2 files changed, 56 insertions(+), 4 deletions(-) diff --git a/buildtime/static/css/scpq_content.css b/buildtime/static/css/scpq_content.css index a613810..b800164 100644 --- a/buildtime/static/css/scpq_content.css +++ b/buildtime/static/css/scpq_content.css @@ -95,7 +95,6 @@ nav ul li a:hover { font-weight: lighter; } - /* form styles */ .cform { display: flex; @@ -141,4 +140,29 @@ nav ul li a:hover { .mt-16 { margin-top: 16px; -} \ No newline at end of file +} + +/* Table styles */ +table { + margin: 16px; + width: 80%; + border-collapse: collapse; +} + +table, th, td { + border: 1px solid var(--primary-color); +} + +th, td { + padding: 8px; + text-align: left; +} + +td { + background-color: var(--data-background-color); +} + +th { + color: var(--primary-color); + font-weight: 500; +} diff --git a/buildtime/templates/pages/index.html b/buildtime/templates/pages/index.html index c68e2db..b85fa6a 100644 --- a/buildtime/templates/pages/index.html +++ b/buildtime/templates/pages/index.html @@ -111,8 +111,36 @@

Values für {PropertyTypeName}

-

Hier können die Werte der ausgewählten Eigenschaft bearbeitet werden.

- + + + + + + + + + + + + + + + + + + + +
IDValueDescriptionActions
1Value 1Description 1 +
+ + +
+
2Value 2Description 2 +
+ + +
+
-- 2.54.0