From 2d281704de8c5b67592dd7f9362620927230ef2b Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 24 Mar 2024 15:04:18 +0100 Subject: [PATCH] Remove fomantic container module (#30036) Small CSS module. There was a ordering conflict between `.ui.menu` and `.ui.container` which I've solved by adding the `.ui.menu` rule into base. --------- Co-authored-by: Giteabot --- web_src/css/base.css | 35 +------ web_src/css/index.css | 1 + web_src/css/modules/container.css | 78 ++++++++++++++ web_src/fomantic/build/semantic.css | 157 ---------------------------- web_src/fomantic/semantic.json | 1 - 5 files changed, 83 insertions(+), 189 deletions(-) create mode 100644 web_src/css/modules/container.css diff --git a/web_src/css/base.css b/web_src/css/base.css index 226ec70386..51a4852e7e 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -352,6 +352,10 @@ ol.ui.list li, border-right-color: var(--color-primary); } +.ui.menu { + display: flex; +} + .ui.menu, .ui.vertical.menu { background: var(--color-menu); @@ -738,37 +742,6 @@ img.ui.avatar, padding-top: 14px; } -/* overwrite semantic width of containers inside the main page content div (div with class "page-content") */ -.page-content .ui.ui.ui.container:not(.fluid) { - width: 1280px; - max-width: calc(100% - 64px); - margin-left: auto; - margin-right: auto; -} - -.ui.container.fluid.padded { - padding: 0 32px; -} - -/* enable fluid page widths for medium size viewports */ -@media (min-width: 768px) and (max-width: 1200px) { - .page-content .ui.ui.ui.container:not(.fluid) { - max-width: calc(100% - 32px); - } - .ui.container.fluid.padded { - padding: 0 16px; - } -} - -@media (max-width: 767.98px) { - .page-content .ui.ui.ui.container:not(.fluid) { - max-width: calc(100% - 16px); - } - .ui.container.fluid.padded { - padding: 0 8px; - } -} - .ui.pagination.menu .active.item { color: var(--color-text); background: var(--color-active); diff --git a/web_src/css/index.css b/web_src/css/index.css index e8df321829..7ba19e62d4 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -14,6 +14,7 @@ @import "./modules/svg.css"; @import "./modules/flexcontainer.css"; @import "./modules/message.css"; +@import "./modules/container.css"; @import "./modules/header.css"; @import "./shared/flex-list.css"; diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css new file mode 100644 index 0000000000..dc854f89d0 --- /dev/null +++ b/web_src/css/modules/container.css @@ -0,0 +1,78 @@ +/* based on Fomantic UI container module, with just the parts extracted that we use. If you find any + unused rules here after refactoring, please remove them. */ + +.ui.container { + display: block; + max-width: 100%; +} + +@media (max-width: 767.98px) { + .ui.ui.ui.container:not(.fluid) { + width: auto; + margin-left: 1em; + margin-right: 1em; + } +} + +@media (min-width: 768px) and (max-width: 991.98px) { + .ui.ui.ui.container:not(.fluid) { + width: 723px; + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width: 992px) and (max-width: 1199.98px) { + .ui.ui.ui.container:not(.fluid) { + width: 933px; + margin-left: auto; + margin-right: auto; + } +} + +@media (min-width: 1200px) { + .ui.ui.ui.container:not(.fluid) { + width: 1127px; + margin-left: auto; + margin-right: auto; + } +} + +.ui.fluid.container { + width: 100%; +} + +.ui[class*="center aligned"].container { + text-align: center; +} + +/* overwrite width of containers inside the main page content div (div with class "page-content") */ +.page-content .ui.ui.ui.container:not(.fluid) { + width: 1280px; + max-width: calc(100% - 64px); + margin-left: auto; + margin-right: auto; +} + +.ui.container.fluid.padded { + padding: 0 32px; +} + +/* enable fluid page widths for medium size viewports */ +@media (min-width: 768px) and (max-width: 1200px) { + .page-content .ui.ui.ui.container:not(.fluid) { + max-width: calc(100% - 32px); + } + .ui.container.fluid.padded { + padding: 0 16px; + } +} + +@media (max-width: 767.98px) { + .page-content .ui.ui.ui.container:not(.fluid) { + max-width: calc(100% - 16px); + } + .ui.container.fluid.padded { + padding: 0 8px; + } +} diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 4d82244277..d9abf343b8 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -3032,163 +3032,6 @@ .plus:before { content: '\e802'; } */ -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI - Container - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Container -*******************************/ - -/* All Sizes */ - -.ui.container { - display: block; - max-width: 100%; -} - -/* Mobile */ - -@media only screen and (max-width: 767.98px) { - .ui.ui.ui.container:not(.fluid) { - width: auto; - margin-left: 1em; - margin-right: 1em; - } - - .ui.ui.ui.grid.container { - width: auto; - } - - .ui.ui.ui.relaxed.grid.container { - width: auto; - } - - .ui.ui.ui.very.relaxed.grid.container { - width: auto; - } -} - -/* Tablet */ - -@media only screen and (min-width: 768px) and (max-width: 991.98px) { - .ui.ui.ui.container:not(.fluid) { - width: 723px; - margin-left: auto; - margin-right: auto; - } - - .ui.ui.ui.grid.container { - width: calc(723px + 2rem); - } - - .ui.ui.ui.relaxed.grid.container { - width: calc(723px + 3rem); - } - - .ui.ui.ui.very.relaxed.grid.container { - width: calc(723px + 5rem); - } -} - -/* Small Monitor */ - -@media only screen and (min-width: 992px) and (max-width: 1199.98px) { - .ui.ui.ui.container:not(.fluid) { - width: 933px; - margin-left: auto; - margin-right: auto; - } - - .ui.ui.ui.grid.container { - width: calc(933px + 2rem); - } - - .ui.ui.ui.relaxed.grid.container { - width: calc(933px + 3rem); - } - - .ui.ui.ui.very.relaxed.grid.container { - width: calc(933px + 5rem); - } -} - -/* Large Monitor */ - -@media only screen and (min-width: 1200px) { - .ui.ui.ui.container:not(.fluid) { - width: 1127px; - margin-left: auto; - margin-right: auto; - } - - .ui.ui.ui.grid.container { - width: calc(1127px + 2rem); - } - - .ui.ui.ui.relaxed.grid.container { - width: calc(1127px + 3rem); - } - - .ui.ui.ui.very.relaxed.grid.container { - width: calc(1127px + 5rem); - } -} - -/******************************* - Types -*******************************/ - -/* Text Container */ - -.ui.text.container { - font-family: var(--fonts-regular); - max-width: 700px; - line-height: 1.5; - font-size: 1.14285714rem; -} - -/* Fluid */ - -.ui.fluid.container { - width: 100%; -} - -/******************************* - Variations -*******************************/ - -.ui[class*="left aligned"].container { - text-align: left; -} - -.ui[class*="center aligned"].container { - text-align: center; -} - -.ui[class*="right aligned"].container { - text-align: right; -} - -.ui.justified.container { - text-align: justify; - -webkit-hyphens: auto; - hyphens: auto; -} - -/******************************* - Theme Overrides -*******************************/ - /******************************* Site Overrides *******************************/ diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index 876996a4b4..9c7cb54cb7 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -24,7 +24,6 @@ "api", "button", "checkbox", - "container", "dimmer", "dropdown", "form",