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..b800164 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 */ @@ -11,8 +11,49 @@ main { border-radius: var(--box-border-radius); } +nav { + 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 */ + 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-left: 16px; + @media (max-width: 768px) { + height: 100%; + } + padding: 5px; + background-color: var(--primary-color); + color: var(--secondary-font-color); +} + +nav ul { + 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 */ +} + +.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) - 132px); + height: calc(100vh - var(--header-height) - var(--footer-height) - 4 * var(--main-content-padding) - 96px); display: flex; flex-direction: row; /* Elemente horizontal anordnen */ @@ -48,13 +89,12 @@ main { } .leaf { - padding-left: 20px; + padding-left: 28px; /* Einrückung für Blätter */ color: var(--primary-color); font-weight: lighter; } - /* form styles */ .cform { display: flex; @@ -100,4 +140,29 @@ main { .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/static/css/scpq_footer.css b/buildtime/static/css/scpq_footer.css index 38c4c71..b2267c7 100644 --- a/buildtime/static/css/scpq_footer.css +++ b/buildtime/static/css/scpq_footer.css @@ -7,5 +7,18 @@ 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 */ + } } + +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/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..b85fa6a --- /dev/null +++ b/buildtime/templates/pages/index.html @@ -0,0 +1,157 @@ + + + + + + + + + + Simply CPQ Material Editor V2 + + +
+
+

Simply CPQ Material Editor V2

+
+
+
+ +
+
+

Property-Type Group

+
+
+
+ + + + + + +
+ + + +
+
+
+
+
+
+
+

Values für {PropertyTypeName}

+
+
+ + + + + + + + + + + + + + + + + + + +
IDValueDescriptionActions
1Value 1Description 1 +
+ + +
+
2Value 2Description 2 +
+ + +
+
+
+
+
+
+
+
+ + + + \ No newline at end of file