0002 web UI bootstrap #1511
0002 web UI bootstrap #1511
Conversation
Use the latest Bootstrap version 5.1.3 - minified styles - minified and bundled javascript (incl. popper)
…s/extern/hmBootstrap.css
Adding box-sizing: content-box;to #menubar since bootstrap introduces a lot of resets like a default
*, ::after, ::before {
box-sizing: border-box;
}
which breaks the menubar a bit
The adoption of certain bootstrap css classes is still in hmBootstrap.css, but heavily reduced to the required bits.
- progress-bar-success -> bg-success - progress-bar-info -> bg-info - progress-bar-warning -> bg-warning - progress-bar-danger -> bg-danger
- deleted index.hmt & index.htm.orig from the patch
| @@ -2293,6 +2293,14 @@ table.center { | |||
| font-weight: bold; | |||
| } | |||
|
|
|||
| .controlHeader150px { | |||
There was a problem hiding this comment.
What purpose does this change serve here? Can't see controlHeader150px be used anywhere?!?
There was a problem hiding this comment.
I don't know. It's part of the original style.css from occu. See here https://github.com/eq-3/occu/blob/70db0f403ca72d235ce5cf6416b6534daac83f95/WebUI/www/webui/style.css#L2264
|
Uh, I have some doubt regarding the correct baseline of $ diff -Naur 0002-WebUI-Bootstrap/occu/WebUI/www/rega/pages/index.htm.orig 0001-RaspberryMatic/occu/WebUI/www/rega/pages/index.htm.orig
--- 0002-WebUI-Bootstrap/occu/WebUI/www/rega/pages/index.htm.orig 2021-11-07 14:59:06.000000000 +0100
+++ 0001-RaspberryMatic/occu/WebUI/www/rega/pages/index.htm.orig 2021-10-31 20:58:21.000000000 +0100
@@ -41,10 +41,8 @@
<script type="text/javascript" src="/webui/js/extern/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="/webui/js/extern/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="/webui/js/extern/jqplot.canvasTextRenderer.min.js"></script>
- <script type="text/javascript" src="/webui/js/extern/jqplot.cursor.js"></script>
+ <script type="text/javascript" src="/webui/js/extern/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="/webui/js/extern/jqplot.enhancedLegendRenderer.min.js"></script>
- <script type="text/javascript" src="/webui/js/extern/jqplot.highlighter.min.js"></script>
- <script type="text/javascript" src="/webui/js/extern/jqplot.markerRenderer.js"></script>
<script type="text/javascript" src="/webui/js/lang/loadTextResource.js"></script>
<script type="text/javascript" src="/webui/js/lang/translate.js"></script>
<script type="text/javascript" src="/webui/js/extern/knockout.js"></script>
@@ -107,14 +105,12 @@
isHTTPS = window.location.protocol.startsWith("https:");
forceUpdate = false;
- preventInterfaceCheck = (jQuery.url().param('preventInterfaceCheck') == "true") ? true : false;
+ preventInterfaceCheck = false;
urlParamInterfaces = jQuery.url().param('showInterfaces');
urlDebug = jQuery.url().param('debug');
showDummyLicense = jQuery.url().param('showDummyLicense');
createNewProgram = false;
showAPITools = jQuery.url().param('showAPITools');
- showRFAddress = (jQuery.url().param('showRFAddress') == "true") ? true : false;
-
/**
* jg_250 |
0057-WebUI-ImprovedDutyCycleDisplay and retired the changes in 0039-WebUI-Fix-Style-Glitches as they don't have any impact so far. Thus, now 0002-WebUI-Bootstrap can be cleanly applied at least.
|
Ok, I have now slightly reworked your patchset to allow to apply it cleanly. However, after using it in my test environment the WebUI looks slightly different in certain areas. See:
Note the bigger/taller buttons on the start page and the slightly offset on the "Startseite" text, etc. Furthermore have a look at that thing here:
So it looks like border css style settings are modified by the introduction of the updated bootstrap or the way you include it now slightly different with your |
Don't worry, the |
Thanks!
I'll have a look into it as soon as I compiled the firmware by myself.
This is again a side effect of the bootstrap resets. This time it's for tables: It can be fixed with a style fix for I also saw that the footer buttons are broken and need a fix like this: |
Isn't it possible that you switch the priority of the bootstrap css vs webui css around and make sure that the webui css gets priority under all corcumstances so that the bootstrap css is not able to reset certain existing css statements from the webui css? |
|
Well, I tried with no great success. I think, the best approach may be to bundle all generic style fixes in the anyway existing These would by (in order)
|
…Fix #menubar style in style.css'
|
Uhm, locally 50ab606 builds just fine. What have I done wrong? |
You can also execute This error seems to be related to uncommitted changes of the |
|
Yes, I see. But I haven't even touched this code which shows up in the diff. :( |
|
If I create a test branch from d8ede91 and execute |
|
@jens-maus: what has changed with f61834b? I don't get it ... |
Nothing really. I just recreated main.min.css using scss and and I guess due to a somewhat different development environment or other scss version the main.min.css was generated differently. |
and 0146-WebUI-ImprovedStartpageLayout more compatible to 0002-WebUI-Bootstrap
popupTable windows look essentially the same even with 0002-WebUI-Bootstrap.
added input css mods to have checkboxen and label with the same distance as before adding bootstrap.
WebUI. This should fix non-bold texts in help page
jens-maus
added
💡 enhancement-ideas
|
I'm not sure if the design change in the "Zeitmodul" is related to this PR, but I see in Version RaspberryMatic-3.67.10.20230211 some differences to 3.67.10.20230114: alt: neu: |
Description
In 0057-WebUI-ImprovedDutyCycleDisplay we introduced bootstrap into RasperryMatic and included bootstrap v3.4. I would like to have an update to v5.1.3 and separate bootstrap into it's own patch. I think there are the following steps required:
Related Issue
See #1509
Types of changes
Alternate Designs
One could also update bootstrap within 0057-WebUI-ImprovedDutyCycleDisplay, but there are benefits of this refactoring. We can now better make use of all the features of bootstrap and continue to improve the WebUI.
Possible Drawbacks
All the carefully handcrafted styles in the WebUI may break. Heavy testing is therefore recommended.
Verification Process
Release Notes
We moved Bootstrap into it's own WebUI patch, updated it to the latest version 5.1.3 and reworked the original 0057-WebUI-ImprovedDutyCycleDisplay to make use of this refactoring.
Contributing checklist