diff --git a/java/code/src/com/suse/manager/webui/controllers/login/templates/login.jade b/java/code/src/com/suse/manager/webui/controllers/login/templates/login.jade index 5ebba4f786c1..6a38dd2c2e81 100644 --- a/java/code/src/com/suse/manager/webui/controllers/login/templates/login.jade +++ b/java/code/src/com/suse/manager/webui/controllers/login/templates/login.jade @@ -27,7 +27,7 @@ html(lang=window.preferredLocale.replace("_", "-")) include /templates/common.jade - body(class='#{webTheme}' == "uyuni" ? "theme-#{webTheme} new-theme login-page" : "theme-#{webTheme} new-theme") + body(class="theme-#{webTheme} new-theme login-page") #login +csrfToken diff --git a/java/code/webapp/WEB-INF/decorators/layout_c.jsp b/java/code/webapp/WEB-INF/decorators/layout_c.jsp index 9ef1b0be20fe..8a8417cf4eac 100644 --- a/java/code/webapp/WEB-INF/decorators/layout_c.jsp +++ b/java/code/webapp/WEB-INF/decorators/layout_c.jsp @@ -64,6 +64,5 @@ - diff --git a/java/code/webapp/WEB-INF/decorators/layout_error.jsp b/java/code/webapp/WEB-INF/decorators/layout_error.jsp index 7b3c8f42b18e..3ba21582a82c 100644 --- a/java/code/webapp/WEB-INF/decorators/layout_error.jsp +++ b/java/code/webapp/WEB-INF/decorators/layout_error.jsp @@ -54,86 +54,88 @@ "> - + -
-
- -
-
    -
  • - -
    • -
-
-
- -
-
-
- -
-
- -
-
-
-
-
- -
-
- +
+
+
+ + + + +
+
+ +
+ + +
+
+
+ +
+
+
- - -
-
-
diff --git a/java/spacewalk-java.changes.eth.scope b/java/spacewalk-java.changes.eth.scope new file mode 100644 index 000000000000..f082de62194b --- /dev/null +++ b/java/spacewalk-java.changes.eth.scope @@ -0,0 +1 @@ +- Layout improvements for the login page and error page diff --git a/web/html/javascript/spacewalk-essentials.js b/web/html/javascript/spacewalk-essentials.js index 76061fab6b92..f5866b8a68c1 100644 --- a/web/html/javascript/spacewalk-essentials.js +++ b/web/html/javascript/spacewalk-essentials.js @@ -46,18 +46,8 @@ function listenForGlobalNotificationChanges() { // On section#spacewalk-content scroll function scrollTopBehavior() { jQuery(scrollTarget).on("scroll", function () { - if(jQuery(this).scrollTop() > 100) { - jQuery('#scroll-top').show(); - } else { - jQuery('#scroll-top').hide(); - } - sstScrollBehavior(); }); - - jQuery(document).on('click', '#scroll-top', function() { - jQuery(scrollTarget).scrollTo(0,0); - }); } // A container function for what should be fired diff --git a/web/html/src/branding/css/body.scss b/web/html/src/branding/css/base/body.scss similarity index 74% rename from web/html/src/branding/css/body.scss rename to web/html/src/branding/css/base/body.scss index 23705ab0be01..6a4aa953f3f6 100644 --- a/web/html/src/branding/css/body.scss +++ b/web/html/src/branding/css/base/body.scss @@ -1,4 +1,3 @@ -// NB! This must be in sync between the old and the new theme! html, body { height: 100%; diff --git a/web/html/src/branding/css/bootstrap-grid-patch.scss b/web/html/src/branding/css/base/bootstrap/grid-patch.scss similarity index 100% rename from web/html/src/branding/css/bootstrap-grid-patch.scss rename to web/html/src/branding/css/base/bootstrap/grid-patch.scss diff --git a/web/html/src/branding/css/susemanager/bootstrap-fixes.scss b/web/html/src/branding/css/base/bootstrap/legacy-fixes.scss similarity index 71% rename from web/html/src/branding/css/susemanager/bootstrap-fixes.scss rename to web/html/src/branding/css/base/bootstrap/legacy-fixes.scss index 160749bab396..c2295d684d36 100644 --- a/web/html/src/branding/css/susemanager/bootstrap-fixes.scss +++ b/web/html/src/branding/css/base/bootstrap/legacy-fixes.scss @@ -1,3 +1,5 @@ +// NB! Do NOT add anything new to this file, it's a remnant of old theme bits + // See https://stackoverflow.com/a/42887127/1470607 .pull-right { @extend .float-start; diff --git a/web/html/src/branding/css/bootstrap-scaffolding-variables.scss b/web/html/src/branding/css/base/bootstrap/scaffolding-variables.scss similarity index 100% rename from web/html/src/branding/css/bootstrap-scaffolding-variables.scss rename to web/html/src/branding/css/base/bootstrap/scaffolding-variables.scss diff --git a/web/html/src/branding/css/susemanager/components/address.scss b/web/html/src/branding/css/base/components/address.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/address.scss rename to web/html/src/branding/css/base/components/address.scss diff --git a/web/html/src/branding/css/susemanager/components/alerts.scss b/web/html/src/branding/css/base/components/alerts.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/alerts.scss rename to web/html/src/branding/css/base/components/alerts.scss diff --git a/web/html/src/branding/css/susemanager/components/buttons.scss b/web/html/src/branding/css/base/components/buttons.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/buttons.scss rename to web/html/src/branding/css/base/components/buttons.scss diff --git a/web/html/src/branding/css/susemanager/components/buttons.suma.scss b/web/html/src/branding/css/base/components/buttons.suma.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/buttons.suma.scss rename to web/html/src/branding/css/base/components/buttons.suma.scss diff --git a/web/html/src/branding/css/susemanager/components/buttons.uyuni.scss b/web/html/src/branding/css/base/components/buttons.uyuni.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/buttons.uyuni.scss rename to web/html/src/branding/css/base/components/buttons.uyuni.scss diff --git a/web/html/src/branding/css/susemanager/components/collapse.scss b/web/html/src/branding/css/base/components/collapse.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/collapse.scss rename to web/html/src/branding/css/base/components/collapse.scss diff --git a/web/html/src/branding/css/susemanager/components/date-time-picker.scss b/web/html/src/branding/css/base/components/date-time-picker.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/date-time-picker.scss rename to web/html/src/branding/css/base/components/date-time-picker.scss diff --git a/web/html/src/branding/css/susemanager/components/dropdown-menu.scss b/web/html/src/branding/css/base/components/dropdown-menu.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/dropdown-menu.scss rename to web/html/src/branding/css/base/components/dropdown-menu.scss diff --git a/web/html/src/branding/css/susemanager/components/header.scss b/web/html/src/branding/css/base/components/header.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/header.scss rename to web/html/src/branding/css/base/components/header.scss diff --git a/web/html/src/branding/css/susemanager/components/help-block.scss b/web/html/src/branding/css/base/components/help-block.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/help-block.scss rename to web/html/src/branding/css/base/components/help-block.scss diff --git a/web/html/src/branding/css/susemanager/components/icons.scss b/web/html/src/branding/css/base/components/icons.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/icons.scss rename to web/html/src/branding/css/base/components/icons.scss diff --git a/web/html/src/branding/css/susemanager/components/inputs.scss b/web/html/src/branding/css/base/components/inputs.scss similarity index 98% rename from web/html/src/branding/css/susemanager/components/inputs.scss rename to web/html/src/branding/css/base/components/inputs.scss index 83ea7ef2a419..13851d958d5a 100644 --- a/web/html/src/branding/css/susemanager/components/inputs.scss +++ b/web/html/src/branding/css/base/components/inputs.scss @@ -23,6 +23,7 @@ div.form-control, &, &:focus, &:active { + color: $eos-bc-gray-1000; background: #fff; } diff --git a/web/html/src/branding/css/susemanager/components/label.scss b/web/html/src/branding/css/base/components/label.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/label.scss rename to web/html/src/branding/css/base/components/label.scss diff --git a/web/html/src/branding/css/susemanager/components/legend-box.scss b/web/html/src/branding/css/base/components/legend-box.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/legend-box.scss rename to web/html/src/branding/css/base/components/legend-box.scss diff --git a/web/html/src/branding/css/susemanager/components/legend.scss b/web/html/src/branding/css/base/components/legend.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/legend.scss rename to web/html/src/branding/css/base/components/legend.scss diff --git a/web/html/src/branding/css/susemanager/components/lists.scss b/web/html/src/branding/css/base/components/lists.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/lists.scss rename to web/html/src/branding/css/base/components/lists.scss diff --git a/web/html/src/branding/css/susemanager/components/mark.scss b/web/html/src/branding/css/base/components/mark.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/mark.scss rename to web/html/src/branding/css/base/components/mark.scss diff --git a/web/html/src/branding/css/susemanager/components/modal.scss b/web/html/src/branding/css/base/components/modal.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/modal.scss rename to web/html/src/branding/css/base/components/modal.scss diff --git a/web/html/src/branding/css/susemanager/components/nav.scss b/web/html/src/branding/css/base/components/nav.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/nav.scss rename to web/html/src/branding/css/base/components/nav.scss diff --git a/web/html/src/branding/css/susemanager/components/panels.scss b/web/html/src/branding/css/base/components/panels.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/panels.scss rename to web/html/src/branding/css/base/components/panels.scss diff --git a/web/html/src/branding/css/susemanager/components/panels.suma.scss b/web/html/src/branding/css/base/components/panels.suma.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/panels.suma.scss rename to web/html/src/branding/css/base/components/panels.suma.scss diff --git a/web/html/src/branding/css/susemanager/components/panels.uyuni.scss b/web/html/src/branding/css/base/components/panels.uyuni.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/panels.uyuni.scss rename to web/html/src/branding/css/base/components/panels.uyuni.scss diff --git a/web/html/src/branding/css/susemanager/components/pre.scss b/web/html/src/branding/css/base/components/pre.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/pre.scss rename to web/html/src/branding/css/base/components/pre.scss diff --git a/web/html/src/branding/css/susemanager/components/tables.scss b/web/html/src/branding/css/base/components/tables.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/tables.scss rename to web/html/src/branding/css/base/components/tables.scss diff --git a/web/html/src/branding/css/susemanager/components/text.scss b/web/html/src/branding/css/base/components/text.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/text.scss rename to web/html/src/branding/css/base/components/text.scss diff --git a/web/html/src/branding/css/susemanager/components/titles.scss b/web/html/src/branding/css/base/components/titles.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/titles.scss rename to web/html/src/branding/css/base/components/titles.scss diff --git a/web/html/src/branding/css/susemanager/components/titles.suma.scss b/web/html/src/branding/css/base/components/titles.suma.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/titles.suma.scss rename to web/html/src/branding/css/base/components/titles.suma.scss diff --git a/web/html/src/branding/css/susemanager/components/titles.uyuni.scss b/web/html/src/branding/css/base/components/titles.uyuni.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/titles.uyuni.scss rename to web/html/src/branding/css/base/components/titles.uyuni.scss diff --git a/web/html/src/branding/css/susemanager/components/toolbar.scss b/web/html/src/branding/css/base/components/toolbar.scss similarity index 100% rename from web/html/src/branding/css/susemanager/components/toolbar.scss rename to web/html/src/branding/css/base/components/toolbar.scss diff --git a/web/html/src/branding/css/base/fonts.scss b/web/html/src/branding/css/base/fonts.scss new file mode 100644 index 000000000000..738413870fd2 --- /dev/null +++ b/web/html/src/branding/css/base/fonts.scss @@ -0,0 +1,65 @@ +@font-face { + font-family: "Lato"; + font-style: normal; + font-weight: 300; + src: local("Lato"), url("~branding/fonts/Lato/Lato-Regular.ttf") format("truetype"); +} +@font-face { + font-family: "Lato Bold"; + font-style: normal; + font-weight: 300; + src: local("Lato Bold"), local("LatoBold"), + url("~branding/fonts/Lato/Lato-Bold.ttf") format("truetype"); +} + +@font-face { + font-family: "WorkSans"; + font-style: normal; + font-weight: 300; + src: local("WorkSans"), url("~branding/fonts/WorkSans/static/WorkSans-Regular.ttf") format("truetype"); +} +@font-face { + font-family: "WorkSans Bold"; + font-style: normal; + font-weight: 300; + src: local("WorkSans Bold"), local("WorkSansBold"), + url("~branding/fonts/WorkSans/static/WorkSans-Bold.ttf") format("truetype"); +} + +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 300; + src: url("~branding/fonts/Poppins/poppins-v15-latin-300.eot"); /* IE9 Compat Modes */ + src: local(""), url("~branding/fonts/Poppins/poppins-v15-latin-300.eot?#iefix") format("embedded-opentype"), + /* IE6-IE8 */ url("~branding/fonts/Poppins/poppins-v15-latin-300.woff2") format("woff2"), + /* Super Modern Browsers */ url("~branding/fonts/Poppins/poppins-v15-latin-300.woff") format("woff"), + /* Modern Browsers */ url("~branding/fonts/Poppins/poppins-v15-latin-300.ttf") format("truetype"), + /* Safari, Android, iOS */ url("~branding/fonts/Poppins/poppins-v15-latin-300.svg#Poppins") format("svg"); /* Legacy iOS */ +} + +@font-face { + font-family: "Poppins"; + font-style: normal; + font-weight: 500; + src: url("~branding/fonts/Poppins/poppins-v15-latin-500.eot"); /* IE9 Compat Modes */ + src: local(""), url("~branding/fonts/Poppins/poppins-v15-latin-500.eot?#iefix") format("embedded-opentype"), + /* IE6-IE8 */ url("~branding/fonts/Poppins/poppins-v15-latin-500.woff2") format("woff2"), + /* Super Modern Browsers */ url("~branding/fonts/Poppins/poppins-v15-latin-500.woff") format("woff"), + /* Modern Browsers */ url("~branding/fonts/Poppins/poppins-v15-latin-500.ttf") format("truetype"), + /* Safari, Android, iOS */ url("~branding/fonts/Poppins/poppins-v15-latin-500.svg#Poppins") format("svg"); /* Legacy iOS */ +} + +@font-face { + font-family: "Roboto Light"; + font-style: normal; + font-weight: 300; + src: local("Roboto Light"), local("RobotoLight"), url("~branding/fonts/Roboto/Roboto-Light.ttf") format("truetype"); +} + +@font-face { + font-family: "Roboto Bold"; + font-style: normal; + font-weight: 300; + src: local("Roboto Bold"), local("RobotoBold"), url("~branding/fonts/Roboto/Roboto-Bold.ttf") format("truetype"); +} diff --git a/web/html/src/branding/css/susemanager/index.scss b/web/html/src/branding/css/base/index.scss similarity index 65% rename from web/html/src/branding/css/susemanager/index.scss rename to web/html/src/branding/css/base/index.scss index bdbc9e36561e..96e57cdc4073 100644 --- a/web/html/src/branding/css/susemanager/index.scss +++ b/web/html/src/branding/css/base/index.scss @@ -1,16 +1,14 @@ -@import "../base/theme.scss"; -@import "../base/tables.scss"; -@import "../base/error.scss"; -@import "../base/tools.scss"; -@import "../base/setup-wizard.scss"; -@import "../base/notifications.scss"; -@import "../base/fixes.scss"; -@import "../base/network.scss"; -@import "../base/inputs.scss"; -@import "../base/forms.scss"; -@import "../base/hr.scss"; - -@import "./legacy-pages/login.scss"; +@import "./theme.scss"; +@import "./tables.scss"; +@import "./error.scss"; +@import "./tools.scss"; +@import "./setup-wizard.scss"; +@import "./notifications.scss"; +@import "./fixes.scss"; +@import "./network.scss"; +@import "./inputs.scss"; +@import "./forms.scss"; +@import "./hr.scss"; @import "./components/titles.scss"; @import "./components/alerts.scss"; @@ -36,7 +34,7 @@ @import "./components/lists.scss"; @import "./components/dropdown-menu.scss"; -@import "./bootstrap-fixes.scss"; +@import "./bootstrap/legacy-fixes.scss"; // Responsive overrides -@import "../base/responsive-rules.scss"; +@import "./responsive-rules.scss"; diff --git a/web/html/src/branding/css/mixins.scss b/web/html/src/branding/css/base/mixins.scss similarity index 100% rename from web/html/src/branding/css/mixins.scss rename to web/html/src/branding/css/base/mixins.scss diff --git a/web/html/src/branding/css/base/theme.scss b/web/html/src/branding/css/base/theme.scss index c599a74c3f53..f33ea61d64b2 100644 --- a/web/html/src/branding/css/base/theme.scss +++ b/web/html/src/branding/css/base/theme.scss @@ -88,6 +88,7 @@ footer { bottom: 0px; width: 100%; @include make-row; + margin: 0 auto; a { color: inherit; @@ -98,17 +99,6 @@ footer { color: inherit; } - /* override spacewalk rules */ - div:nth-child(1), - div:nth-child(2) { - float: none; - width: 100%; - margin: 0; - min-height: auto; - text-align: left !important; - padding: 0; - } - div.wrapper { background: $aside-footer-logo-background; min-height: 28px; @@ -333,33 +323,6 @@ nav.navbar-pf { } } -#scroll-top { - display: none; - position: fixed; - bottom: 5px; - right: 3px; - cursor: pointer; - z-index: 1000; - border-radius: 20px; - width: 35px; - height: 35px; - font-size: 1.5em; - padding: 0; - text-align: center; - background-color: rgba(77, 211, 167, 0.2); - color: $gray-dark; - border: 1px solid rgba(0, 192, 129, 0.2); - i { - margin: 0 auto; - height: 26px; - } -} -#scroll-top:hover { - background-color: rgba(0, 192, 129, 0.9); - color: $gray-light; - border: 1px solid darken($green, 10%); -} - //Nav menu in left column #nav { font-size: 1.1em; diff --git a/web/html/src/branding/css/susemanager/variables.scss b/web/html/src/branding/css/base/variables.scss similarity index 99% rename from web/html/src/branding/css/susemanager/variables.scss rename to web/html/src/branding/css/base/variables.scss index 2d7733ba3bc0..33947802abf7 100644 --- a/web/html/src/branding/css/susemanager/variables.scss +++ b/web/html/src/branding/css/base/variables.scss @@ -1,3 +1,5 @@ +@import "./fonts.scss"; + /** * EOS Colors guideline for products https://productbrand.suse.com/colors * diff --git a/web/html/src/branding/css/fonts.scss b/web/html/src/branding/css/fonts.scss deleted file mode 100644 index d91bdc702501..000000000000 --- a/web/html/src/branding/css/fonts.scss +++ /dev/null @@ -1,65 +0,0 @@ -@font-face { - font-family: "Lato"; - font-style: normal; - font-weight: 300; - src: local("Lato"), url("../fonts/Lato/Lato-Regular.ttf") format("truetype"); -} -@font-face { - font-family: "Lato Bold"; - font-style: normal; - font-weight: 300; - src: local("Lato Bold"), local("LatoBold"), - url("../fonts/Lato/Lato-Bold.ttf") format("truetype"); -} - -@font-face { - font-family: "WorkSans"; - font-style: normal; - font-weight: 300; - src: local("WorkSans"), url("../fonts/WorkSans/static/WorkSans-Regular.ttf") format("truetype"); -} -@font-face { - font-family: "WorkSans Bold"; - font-style: normal; - font-weight: 300; - src: local("WorkSans Bold"), local("WorkSansBold"), - url("../fonts/WorkSans/static/WorkSans-Bold.ttf") format("truetype"); -} - -@font-face { - font-family: "Poppins"; - font-style: normal; - font-weight: 300; - src: url("../fonts/Poppins/poppins-v15-latin-300.eot"); /* IE9 Compat Modes */ - src: local(""), url("../fonts/Poppins/poppins-v15-latin-300.eot?#iefix") format("embedded-opentype"), - /* IE6-IE8 */ url("../fonts/Poppins/poppins-v15-latin-300.woff2") format("woff2"), - /* Super Modern Browsers */ url("../fonts/Poppins/poppins-v15-latin-300.woff") format("woff"), - /* Modern Browsers */ url("../fonts/Poppins/poppins-v15-latin-300.ttf") format("truetype"), - /* Safari, Android, iOS */ url("../fonts/Poppins/poppins-v15-latin-300.svg#Poppins") format("svg"); /* Legacy iOS */ -} - -@font-face { - font-family: "Poppins"; - font-style: normal; - font-weight: 500; - src: url("../fonts/Poppins/poppins-v15-latin-500.eot"); /* IE9 Compat Modes */ - src: local(""), url("../fonts/Poppins/poppins-v15-latin-500.eot?#iefix") format("embedded-opentype"), - /* IE6-IE8 */ url("../fonts/Poppins/poppins-v15-latin-500.woff2") format("woff2"), - /* Super Modern Browsers */ url("../fonts/Poppins/poppins-v15-latin-500.woff") format("woff"), - /* Modern Browsers */ url("../fonts/Poppins/poppins-v15-latin-500.ttf") format("truetype"), - /* Safari, Android, iOS */ url("../fonts/Poppins/poppins-v15-latin-500.svg#Poppins") format("svg"); /* Legacy iOS */ -} - -@font-face { - font-family: "Roboto Light"; - font-style: normal; - font-weight: 300; - src: local("Roboto Light"), local("RobotoLight"), url("../fonts/Roboto/Roboto-Light.ttf") format("truetype"); -} - -@font-face { - font-family: "Roboto Bold"; - font-style: normal; - font-weight: 300; - src: local("Roboto Bold"), local("RobotoBold"), url("../fonts/Roboto/Roboto-Bold.ttf") format("truetype"); -} diff --git a/web/html/src/branding/css/susemanager-dark.scss b/web/html/src/branding/css/susemanager-dark.scss index a8ef08cc6ed6..3d3d3a62e375 100644 --- a/web/html/src/branding/css/susemanager-dark.scss +++ b/web/html/src/branding/css/susemanager-dark.scss @@ -1,16 +1,14 @@ $theme: "susemanager-dark"; -@import "./body.scss"; -@import "./fonts.scss"; +@import "./base/body.scss"; -@import "./bootstrap-scaffolding-variables.scss"; +@import "./base/bootstrap/scaffolding-variables.scss"; .new-theme { - @import "./bootstrap-grid-patch.scss"; + @import "./base/bootstrap/grid-patch.scss"; @import "bootstrap/scss/bootstrap"; - @import "./mixins.scss"; - @import "./susemanager/variables.scss"; + @import "./variables.scss"; @import "./susemanager-dark-variables.scss"; display: flex; @@ -23,5 +21,11 @@ $theme: "susemanager-dark"; line-height: 1.5; color: $body-color; - @import "./susemanager/index.scss"; + @at-root { + :root { + --bs-body-color: #{$body-color}; + } + } + + @import "./base/index.scss"; } diff --git a/web/html/src/branding/css/susemanager-light.scss b/web/html/src/branding/css/susemanager-light.scss index 8bffb1be9ca3..b3c5be821c4a 100644 --- a/web/html/src/branding/css/susemanager-light.scss +++ b/web/html/src/branding/css/susemanager-light.scss @@ -1,16 +1,14 @@ $theme: "susemanager-light"; -@import "./body.scss"; -@import "./fonts.scss"; +@import "./base/body.scss"; -@import "./bootstrap-scaffolding-variables.scss"; +@import "./base/bootstrap/scaffolding-variables.scss"; .new-theme { - @import "./bootstrap-grid-patch.scss"; + @import "./base/bootstrap/grid-patch.scss"; @import "bootstrap/scss/bootstrap"; - @import "./mixins.scss"; - @import "./susemanager/variables.scss"; + @import "./variables.scss"; @import "./susemanager-light-variables.scss"; display: flex; @@ -23,5 +21,11 @@ $theme: "susemanager-light"; line-height: 1.5; color: $body-color; - @import "./susemanager/index.scss"; + @at-root { + :root { + --bs-body-color: #{$body-color}; + } + } + + @import "./base/index.scss"; } diff --git a/web/html/src/branding/css/susemanager/legacy-pages/login.scss b/web/html/src/branding/css/susemanager/legacy-pages/login.scss deleted file mode 100644 index 871a85150ef6..000000000000 --- a/web/html/src/branding/css/susemanager/legacy-pages/login.scss +++ /dev/null @@ -1,3 +0,0 @@ -@include onUyuni { - @import "login.uyuni.scss"; -} diff --git a/web/html/src/branding/css/susemanager/legacy-pages/login.uyuni.scss b/web/html/src/branding/css/susemanager/legacy-pages/login.uyuni.scss deleted file mode 100644 index 63c6d92abc40..000000000000 --- a/web/html/src/branding/css/susemanager/legacy-pages/login.uyuni.scss +++ /dev/null @@ -1,173 +0,0 @@ -body.login-page { - background: $uyuni-blue-100; - font-size: 16px; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - width: 100%; - overflow: auto; - margin-top: 0px; - color: $gray-light; - - #login { - display: flex; - flex-direction: column; - height: 100%; - } -} -.login-page { - text-align: left; - - .wrap { - width: 1024px; - margin: 0 auto; - box-sizing: border-box; - } - .navbar-header { - margin-left: 10px; - } - .spacewalk-main-column-layout { - flex: 1 0 auto; - - section { - padding: 3em 0; - width: 100%; - } - } - h1 { - font-size: 52px; - color: $green; - } - h2 { - font-size: 32px; - } - .btn-dark { - color: $green; - border: 1px solid $green; - display: inline-block; - text-decoration: none; - padding: 0.4em 1em; - border-radius: 4px; - font-size: 15px; - margin-left: 3em; - } - .btn-dark:hover { - border: 1px solid darken($green, 10%); - } - .margins-updown { - margin: 2em 0; - } - input { - margin-bottom: 1em; - background: $uyuni-blue-900; - color: $gray-light; - border: 0; - -webkit-font-smoothing: antialiased; - box-shadow: 0px 1px 0px 0px $uyuni-blue-100, 0px 1px 0px 0px $uyuni-blue-900 inset; - -moz-box-shadow: 0px 1px 0px 0px $uyuni-blue-100, 0px 1px 0px 0px $uyuni-blue-900 inset; - -webkit-box-shadow: 0px 1px 0px 0px $uyuni-blue-100, 0px 1px 0px 0px $uyuni-blue-900 inset; - } - input:focus { - color: $white; - } - hr { - background: $uyuni-blue-900, 3%; - height: 1px; - border: 0; - border-bottom: 1px solid $uyuni-blue-100; - } - input[type="submit"] { - background: $green; - color: $white; - margin-bottom: 1em; - border: 0; - box-shadow: 0px 1px 0px 0px $green, 0px 0px 0px 0px $green-dark inset; - -moz-box-shadow: 0px 1px 0px 0px $green, 0px 0px 0px 0px $green-dark inset; - -webkit-box-shadow: 0px 1px 0px 0px $green, 0px 0px 0px 0px $green-dark inset; - } - input[type="submit"]:hover { - background: $green-dark; - -webkit-font-smoothing: antialiased; - } - a { - text-decoration: underline; - } - a:hover { - color: $green-dark; - } - .small-text { - font-size: 0.8em; - } - label { - font-weight: normal; - } - header { - font-size: 13px; - border-bottom: 0px; - .navbar-brand { - text-decoration: none; - } - } - .alert { - font-size: 14px; - } - footer { - border-bottom: 16px solid $green; - border-top-width: 0px; - background-color: $uyuni-blue-100; - position: static; - padding-bottom: 1em; - padding-left: 0; - color: $gray; - - div.wrapper { - padding: 0 15px; - background-size: auto 35px; - min-height: 35px; - } - .wrap { - display: flex; - gap: 16px; - - > div { - display: inline-block; - width: auto; - } - } - a { - color: inherit; - } - .bottom-line { - display: block; - margin-top: 10px; - } - } -} - -.keep-header { - .login-page { - header { - height: auto !important; - - .navbar-controls { - float: right !important; - width: auto; - margin-top: 0px !important; - } - } - } -} - -@include media-breakpoint-down(lg) { - .login-page .wrap { - width: 100%; - } -} - -@include media-breakpoint-down(md) { - .login-page section.wrap { - padding-right: 1em; - padding-left: 1em; - } - // TODO: Test - // .keep-header; -} diff --git a/web/html/src/branding/css/uyuni.scss b/web/html/src/branding/css/uyuni.scss index 6fbd61d1b847..f8a8c961a143 100644 --- a/web/html/src/branding/css/uyuni.scss +++ b/web/html/src/branding/css/uyuni.scss @@ -1,16 +1,14 @@ $theme: "uyuni"; -@import "./body.scss"; -@import "./fonts.scss"; +@import "./base/body.scss"; -@import "./bootstrap-scaffolding-variables.scss"; +@import "./base/bootstrap/scaffolding-variables.scss"; .new-theme { - @import "./bootstrap-grid-patch.scss"; + @import "./base/bootstrap/grid-patch.scss"; @import "bootstrap/scss/bootstrap"; - @import "./mixins.scss"; - @import "./susemanager/variables.scss"; + @import "./variables.scss"; @import "./uyuni-variables.scss"; display: flex; @@ -23,5 +21,11 @@ $theme: "uyuni"; line-height: 1.5; color: $body-color; - @import "./susemanager/index.scss"; + @at-root { + :root { + --bs-body-color: #{$body-color}; + } + } + + @import "./base/index.scss"; } diff --git a/web/html/src/branding/css/variables.scss b/web/html/src/branding/css/variables.scss new file mode 100644 index 000000000000..8c8f92f5df2c --- /dev/null +++ b/web/html/src/branding/css/variables.scss @@ -0,0 +1,2 @@ +@import "./base/mixins.scss"; +@import "./base/variables.scss"; diff --git a/web/html/src/build/webpack.alias.js b/web/html/src/build/webpack.alias.js index 24ee8e75ceaa..8584c934f1a4 100644 --- a/web/html/src/build/webpack.alias.js +++ b/web/html/src/build/webpack.alias.js @@ -5,6 +5,7 @@ module.exports = { core: path.resolve(__dirname, "../core/"), manager: path.resolve(__dirname, "../manager/"), utils: path.resolve(__dirname, "../utils/"), + branding: path.resolve(__dirname, "../branding/"), jquery: path.resolve(__dirname, "./inject.global.jquery.js"), // Support HRM with hooks, see https://github.com/gaearon/react-hot-loader#hot-loaderreact-dom "react-dom": "@hot-loader/react-dom", diff --git a/web/html/src/build/webpack.config.js b/web/html/src/build/webpack.config.js index 9dad2ccd47b3..c59820dd889a 100644 --- a/web/html/src/build/webpack.config.js +++ b/web/html/src/build/webpack.config.js @@ -170,16 +170,14 @@ module.exports = (env, argv) => { test: /\.(png|jpe?g|gif|svg)$/i, type: "asset/resource", generator: { - // TODO: Revert this to `fonts/[hash][ext][query]` after the Bootstrap migration is done - filename: "img/[base]", + filename: "img/[hash][ext][query]", }, }, { test: /\.(eot|ttf|woff|woff2)$/i, type: "asset/resource", generator: { - // TODO: Revert this to `fonts/[hash][ext][query]` after the Bootstrap migration is done - filename: "fonts/[base]", + filename: "fonts/[hash][ext][query]", }, }, // See https://getbootstrap.com/docs/5.3/getting-started/webpack/ @@ -194,6 +192,14 @@ module.exports = (env, argv) => { { // Interprets `@import` and `url()` like `import/require()` and will resolve them loader: "css-loader", + options: { + modules: { + auto: true, + localIdentName: isProductionMode + ? "[hash:base64:5]" // This is the default value for CSS modules + : "[path][name]__[local]--[hash:base64:5]", + }, + }, }, { // Loader for webpack to process CSS with PostCSS @@ -207,6 +213,11 @@ module.exports = (env, argv) => { { // Loads a SASS/SCSS file and compiles it to CSS loader: "sass-loader", + options: { + sassOptions: { + loadPaths: path.resolve(__dirname, "../"), + }, + }, }, ], }, diff --git a/web/html/src/core/debugUtils/index.ts b/web/html/src/core/debugUtils/index.ts index aef5eaca9add..628b3271d85c 100644 --- a/web/html/src/core/debugUtils/index.ts +++ b/web/html/src/core/debugUtils/index.ts @@ -3,16 +3,13 @@ import { showErrorToastr, showSuccessToastr, showWarningToastr } from "component const debugUtils = { logTheme() { - const oldTheme = document.querySelector( - 'link[href^="/css/susemanager-light"],link[href^="/css/susemanager-dark"],link[href^="/css/uyuni"]' - ); - const newTheme = document.querySelector( + const theme = document.querySelector( 'link[href^="/css/updated-susemanager-light"],link[href^="/css/updated-susemanager-dark"],link[href^="/css/updated-uyuni"]' ); - if (!oldTheme || !newTheme) { + if (!theme) { throw new TypeError("Unable to identify theme"); } - return `the theme is: ${oldTheme.getAttribute("href")} ${newTheme.getAttribute("href")}`; + return `the theme is: ${theme.getAttribute("href")}`; }, toggleTheme() { if (document.body.className.includes("theme-susemanager-")) { @@ -22,60 +19,35 @@ const debugUtils = { document.body.className = document.body.className.replace("theme-uyuni", "theme-susemanager-light"); } - const oldLightTheme = document.querySelector('link[href^="/css/susemanager-light"]'); - const newLightTheme = document.querySelector('link[href^="/css/updated-susemanager-light"]'); - if (oldLightTheme && newLightTheme) { - oldLightTheme.setAttribute("href", oldLightTheme.getAttribute("href")!.replace("susemanager-light", "uyuni")); - newLightTheme.setAttribute( + const sumaLight = document.querySelector('link[href^="/css/updated-susemanager-light"]'); + if (sumaLight) { + sumaLight.setAttribute( "href", - newLightTheme.getAttribute("href")!.replace("updated-susemanager-light", "updated-uyuni") + sumaLight.getAttribute("href")!.replace("updated-susemanager-light", "updated-uyuni") ); this.logTheme(); return; } - const oldDarkTheme = document.querySelector('link[href^="/css/susemanager-dark"]'); - const newDarkTheme = document.querySelector('link[href^="/css/updated-susemanager-dark"]'); - if (oldDarkTheme && newDarkTheme) { - oldDarkTheme.setAttribute("href", oldDarkTheme.getAttribute("href")!.replace("susemanager-dark", "uyuni")); - newDarkTheme.setAttribute( + const sumaDark = document.querySelector('link[href^="/css/updated-susemanager-dark"]'); + if (sumaDark) { + sumaDark.setAttribute( "href", - newDarkTheme.getAttribute("href")!.replace("updated-susemanager-dark", "updated-uyuni") + sumaDark.getAttribute("href")!.replace("updated-susemanager-dark", "updated-uyuni") ); this.logTheme(); return; } - const oldUyuniTheme = document.querySelector('link[href^="/css/uyuni"]'); - const newUyuniTheme = document.querySelector('link[href^="/css/updated-uyuni"]'); - if (oldUyuniTheme && newUyuniTheme) { - oldUyuniTheme.setAttribute("href", oldUyuniTheme.getAttribute("href")!.replace("uyuni", "susemanager-light")); - newUyuniTheme.setAttribute( - "href", - newUyuniTheme.getAttribute("href")!.replace("updated-uyuni", "updated-susemanager-light") - ); + const uyuni = document.querySelector('link[href^="/css/updated-uyuni"]'); + if (uyuni) { + uyuni.setAttribute("href", uyuni.getAttribute("href")!.replace("updated-uyuni", "updated-susemanager-light")); this.logTheme(); return; } throw new TypeError("Unable to identify theme"); }, - toggleUpdatedTheme() { - const oldTheme = document.querySelector(".old-theme"); - if (oldTheme) { - oldTheme.classList.remove("old-theme"); - oldTheme.classList.add("new-theme"); - console.log("current theme: new theme"); - return; - } - const updatedTheme = document.querySelector(".new-theme"); - if (updatedTheme) { - updatedTheme.classList.add("old-theme"); - updatedTheme.classList.remove("new-theme"); - console.log("current theme: old theme"); - return; - } - }, showSuccessToastr, showWarningToastr, showErrorToastr, diff --git a/web/html/src/manager/login/susemanager/login.module.scss b/web/html/src/manager/login/susemanager/login.module.scss index 655ed8704da6..b9c7944e6f30 100644 --- a/web/html/src/manager/login/susemanager/login.module.scss +++ b/web/html/src/manager/login/susemanager/login.module.scss @@ -1,4 +1,4 @@ -@import "../../../branding/css/susemanager/variables.scss"; +@import "branding/css/variables.scss"; :global(.old-theme), :global(.new-theme) { diff --git a/web/html/src/manager/login/susemanager/login.tsx b/web/html/src/manager/login/susemanager/login.tsx index f724d446dfc0..3d680f3bda18 100644 --- a/web/html/src/manager/login/susemanager/login.tsx +++ b/web/html/src/manager/login/susemanager/login.tsx @@ -41,13 +41,19 @@ const SusemanagerThemeLogin = (props: ThemeProps) => {

{t("Discover a new way of managing your servers, packages, patches and more via one interface.")}

- {t("Learn more about {product}.", { + {t("Learn more about {productName}.", { link: (str) => ( - + {str} ), - product: product.key, + productName: product.key, })}

@@ -109,11 +115,17 @@ const SusemanagerThemeLogin = (props: ThemeProps) => { /> -
- Copyright Notice +
+ {t("Copyright Notice")} - {`${props.productName} release `} - {props.webVersion} + {t("{productName} release {versionNumber}", { + productName: props.productName, + versionNumber: ( + + {props.webVersion} + + ), + })} {props.customFooter && {props.customFooter}}
diff --git a/web/html/src/manager/login/uyuni/footer-logo.svg b/web/html/src/manager/login/uyuni/footer-logo.svg new file mode 100644 index 000000000000..6aa55cbd6e46 --- /dev/null +++ b/web/html/src/manager/login/uyuni/footer-logo.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/web/html/src/manager/login/uyuni/login-footer.tsx b/web/html/src/manager/login/uyuni/login-footer.tsx deleted file mode 100644 index dcd60dd48992..000000000000 --- a/web/html/src/manager/login/uyuni/login-footer.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from "react"; - -import { docsLocale } from "core/user-preferences"; - -type Props = { - productName: string; - webVersion: string; - customFooter: React.ReactNode; -}; - -const LoginFooter = (props: Props) => ( - -); - -export default LoginFooter; diff --git a/web/html/src/manager/login/uyuni/login.module.scss b/web/html/src/manager/login/uyuni/login.module.scss new file mode 100644 index 000000000000..b86064a19b36 --- /dev/null +++ b/web/html/src/manager/login/uyuni/login.module.scss @@ -0,0 +1,114 @@ +@import "branding/css/variables.scss"; + +:global(.theme-uyuni.login-page) { + font-size: 16px; + background: $uyuni-blue-100; + color: $eos-bc-gray-100; + + :global(#login) { + display: flex; + flex-direction: column; + height: 100%; + } + + :global(.spacewalk-main-column-layout) { + flex-direction: column; + overflow: auto; + } + + .contentArea { + max-width: 1024px; + margin: 70px auto 0; + } + + .content { + display: flex; + flex-wrap: wrap; + gap: 20px 80px; + } + + .half { + flex: 1 1 0; + display: flex; + flex-direction: column; + min-width: 300px; + } + + .left { + gap: 20px; + flex-grow: 1.4; + } + + .right { + flex-grow: 1; + } + + .h1 { + font-size: 52px; + color: $green; + margin-top: 0; + margin-bottom: 30px; + } + + .h2 { + font-size: 32px; + margin-top: 22px; + margin-bottom: 30px; + } + + .learnMore { + color: $eos-bc-green-500; + border: 1px solid $eos-bc-green-500; + display: inline-block; + text-decoration: none; + padding: 0.4em 1em; + border-radius: 4px; + font-size: 15px; + margin-left: 3em; + + &:hover { + text-decoration: none; + } + } + + .form { + display: flex; + flex-direction: column; + gap: 10px; + + .submit { + display: block; + width: 100%; + margin-top: 10px; + text-align: center; + } + } + + .footer { + margin-top: auto; + display: flex; + padding-bottom: 30px; + border-bottom: 16px solid $eos-bc-green-500; + color: $eos-bc-gray-500; + font-size: 0.9em; + + .content { + flex: 1 1 auto; + flex-wrap: wrap; + max-width: 1024px; + padding: 0 15px; + margin: 0 auto; + display: flex; + gap: 16px; + } + + a, a:hover { + color: inherit; + text-decoration: underline; + } + + .logoLink { + margin-left: auto; + } + } +} diff --git a/web/html/src/manager/login/uyuni/login.tsx b/web/html/src/manager/login/uyuni/login.tsx index 9240814c4187..136940d43fc0 100644 --- a/web/html/src/manager/login/uyuni/login.tsx +++ b/web/html/src/manager/login/uyuni/login.tsx @@ -1,6 +1,8 @@ import * as React from "react"; import { useState } from "react"; +import { docsLocale } from "core/user-preferences"; + import { SubmitButton } from "components/buttons"; import { useInputValue } from "components/hooks/forms/useInputValue"; import { Messages } from "components/messages/messages"; @@ -8,7 +10,8 @@ import { Messages } from "components/messages/messages"; import { ThemeProps } from "../login"; import { getFormMessages, getGlobalMessages } from "../messages"; import useLoginApi from "../use-login-api"; -import LoginFooter from "./login-footer"; +import logo from "./footer-logo.svg"; +import styles from "./login.module.scss"; const UyuniThemeLogin = (props: ThemeProps) => { const loginInput = useInputValue(""); @@ -21,33 +24,32 @@ const UyuniThemeLogin = (props: ThemeProps) => { return (
-
-
-
- -
-

{product.bodyTitle}

-

- {t("Discover a new way of managing your servers, packages, patches and more via one interface.")} -

-

- {t("Learn more about")} {product.key}: - - {" "} - View website +

+
+ +
+ -
+
-

{t("Sign In")}

+

{t("Sign In")}

{ event.preventDefault(); @@ -66,46 +68,65 @@ const UyuniThemeLogin = (props: ThemeProps) => { setIsLoading(false); }} name="loginForm" + className={styles.form} > -
- - - -
+ + + -
-

{props.legalNote}

+ {props.legalNote ? ( + <> +

{props.legalNote}

+ + ) : null}
+ {/* We don't use a
- - ); }; diff --git a/web/html/src/manager/storybook/storybook.tsx b/web/html/src/manager/storybook/storybook.tsx index 26902ebf0a60..94322c6b58c6 100644 --- a/web/html/src/manager/storybook/storybook.tsx +++ b/web/html/src/manager/storybook/storybook.tsx @@ -60,14 +60,6 @@ export const Storybook = () => { invalidate(); }} /> -
diff --git a/web/spacewalk-web.changes.eth.scope b/web/spacewalk-web.changes.eth.scope new file mode 100644 index 000000000000..f082de62194b --- /dev/null +++ b/web/spacewalk-web.changes.eth.scope @@ -0,0 +1 @@ +- Layout improvements for the login page and error page