Redesigning MantisBT 2.x FreeCAD Theme

[kkremitzki]

Hi everyone,

We have a staging environment available for the transition to MantisBT 2.x (currently at 2.1 in staging.) Link:
https://freecad.kwkengineering.com/trac ... w_page.php

This is using a backup DB from about a week ago.

The FreeCAD theme in use now is not compatible with this version of MantisBT in a technical or stylistic sense. The page-width footer in use now doesn't really mesh with the sidebar UI of MantisBT 2.x and would need to be integrated into the new footer, for example.

The new header should be easily modifiable with a few new links and a change to the same shade of black as the current header.

I just wanted to create this thread to announce the availability of the staging environment, to get people's feedback on MantisBT 2.x, and on the new style. If anyone else is interested in looking into making a MantisBT 2.x plugin for this style, feel free to get started and share your work in this thread. If not, I'll post here again as I make more progress.

[agryson]

Thanks for this @kkremitzki.

It already looks like a great step up!

Just a question though, how can contributors contribute? Is there a git repo we can clone or play around with?

Do you prefer that we submit css directly?

[kkremitzki]

I haven't created a repo yet, but the current theme is at https://github.com/FreeCAD/Homepage/tre ... eecadTheme

In order to deploy on staging I have to comment out in FreecadTheme.php near the top:

Code: Select all

        /*$this->requires = array(
            'MantisCore' => '1.2.0',
            'Search' => '0.0.4',
        );*/

When I have this plugin deployed the landing page looks like this:

Screenshot from 2017-02-10 04-01-54.png (119.54 KiB) Viewed 3469 times

The header is present but behind the new interface's header.

[agryson]

I haven't created a repo yet, but the current theme is at https://github.com/FreeCAD/Homepage/tre ... eecadTheme

I think it's going to be very hard to work collaboratively on this unless all contributors can run local tests.
I'll try to install this weekend to create a local theme that I can push to you. Might be good to create instructions or a VM for other contributors to have a local test system.

[kkremitzki]

One of the easiest ways is with Docker. There's a MantisBT 2.0 dockerfile repo here that has excellent instructions to get started (assuming you're a little familiar with docker already):
https://github.com/vimagick/dockerfiles ... r/mantisbt

Once docker-compose up is run and everything is set up, it's just a matter of getting the FreecadTheme folder into the plugins directory of wherever MantisBT is installed inside the docker.

A short summary of instructions:
1. Download and install the latest version of Docker from their website
2. Make a folder
3. In that folder create a docker-compose.yml file with the contents in the readme of that github repo
4. Run docker-compose up in the folder
5. Run the firefox command or visit the URL in the command to complete installation
6. Somehow get the FreecadTheme folder to the correct location inside the docker (there are several ways to do this)

For #6, for example, you can put the FreecadTheme folder inside your folder from #2. Then modify the docker-compose.yml file's mantisbt: section to look like:

Code: Select all

mantisbt:
  image: vimagick/mantisbt:latest
  ports:
    - "8989:80"
  links:
    - mysql
  restart: always
  volumes:
    - ./FreecadTheme:/tmp/FreecadTheme

Then the folder will be available inside the Docker at /tmp/FreecadTheme to be copied into the MantisBT plugins folder.

Hopefully that helps people get started.

[kkremitzki]

I suppose the main short-term objectives are to add FreeCAD branding and logo, have a link back to the homepage, and include the same forum/wiki icons in the header in the tracker now.
And to include any relevant links in the new footer (which?)
Worst case scenario, the JS file could just append HTML elements as needed, with some CSS cleanup.

Once we get a minimum viable product we can go ahead with the migration and adjust as needed MantisBT 2.x interface is way way nicer (especially check out the difference on mobile) so the sooner, the better.

[yorik]

It can start small... Most of the work I had to do in other themes was to integrate bootstrap, which here is already done. So making a mantis2 theme should not be much work. Basically:

- use the FreeCAD logo from /images/logo.png
- use "FreeCAD" as title instead of MantisBT and make it link to the main page
- make the title bar look like the others. If you just include /css/freecad.css I believe this will be done automatically

In mantis1.3 adding a new theme was basically adding a plugin. Not sure if it still works that way?

[kkremitzki]

I've made quite a few improvements! The footer works on mobile right now, but I'm seeing both the FreeCAD footer and the original footer on desktop. The header looks good on desktop, but the hamburger menu doesn't work on mobile.

Edit: Just fixed the footer. The "FreeCAD" text in the header is the wrong size, 24px, even if I have

Code: Select all

a .navbar-brand {
  font-size: 18px !important;
}

in tracker/plugins/FreecadTheme/freecad.css.

Edit2: Well, if I hardcode the CSS in the HTML-in-strings inside the PHP file it works... Take a look.

[yorik]

great job!! Almost done!
I wouldn't worry too much about he footer, I don't think anyone is really happy with it, it's not very useful, plus it doesn't translate... I wonder if we shouldn't simply remove it.

[saso]

Great, if you add z-index: 1027; (or more) to freecad.css footer{} ln 51 it will go above the side bar, at least in chrome it does Personally I would not remove the footer, but I do have this itch for some time now to move GitHub up to with Forum, Wiki and Mantis (personally I like when the source of an open source project is clearly accessible) and maybe add twitter or gitter on its place in the footer? Anyway, looking forward to see this on the main server soon