Bootstrap theme

[zanix]

Create a new theme using the Bootstrap framework

[zanix]

I got the bootstrap library added as another theme in a fork. I just need some changes specified in issue #2 and issue #4 to be able to render menus correctly and to add some ajax/js magic.

[Roflicide]

@zanix awesome! here's what I've created so far:

essentially my idea is the dashboard consists of panels, one for each world, along with data underneath. Clicking on the respective button takes you to the particular world page. The image could be the overviewer image, or I was even thinking we could pull the image from the server if they have a server_icon.png. I just like the idea of cards with data underneath for a quick glance

What do you think?

[zanix]

I like it. You are further along with a concept than I am plus this is better than my ideas so far. I saw that you use Balsamiq for wire framing in the other post so maybe we can keep working on mockups before we get too far into a design.

[Roflicide]

Ok yea that sounds good, sorry I changed my design lol got a bit ahead of myself

[zanix]

Ok yea that sounds good, sorry I changed my design lol got a bit ahead of myself

No, that's fine. Sometimes you have to play with the actual framework to get ideas. I just prefer to work with Balsamiq mockups when I have an idea of what is possible with the framework. I also prevents you from worrying about color or fonts when designing a layout.

[Roflicide]

Yea thats very true. Also what kinds of colors were you thinking of? The base color right now on that template is a shade of blue, here's the monochromatic color scheme

i think blue and gray is sorta calming, and I was planning on incorporating those into a redesigned logo thats consistent across both msc-gui and msc-client, the website too should reflect whatever color scheme we use. Paletton, adobe kuler, and coolors are all good for generating some colors

[zanix]

I think utilizing some sort of picker with some color themes would be a good idea. As for during development and default once a picker is implemented, the colors above are fine.

[zanix]

We should start working on a requirements/task list for the GUI. I will create a new issue for this.

[sandain]

@Roflicide, do you have source for your theme above? I like your theme better than the one I put together

[Roflicide]

Unfortunately I can't find it anymore, but it was also just a mockup. I can try and create a proper theme for the new mojolicious api you put together

[sandain]

Let me know if anything needs to change, especially ids or classes of various elements, to work with the bootstrap css.

[Roflicide]

Do you think you could change the msc_enabled_world_list helper function to return a JSON object (or just a data object) that we could manipulate with? For the bootstrap dashboard each world is going to be a card (not a list item) so I can't really work with the current data as it is an unordered html list.

For instance, I'll make a template that's like this for the dashboard:

        <div class="row">
            <div class="col-lg-4 col-sm-6 portfolio-item">
                <div class="card h-100">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                    <div class="card-body">
                        <h4 class="card-title">
                            <a href="#">Project One</a>
                        </h4>
                        <p class="card-text">Testing testing 123</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->

So, I would want to iterate through the list of worlds and then create a <row> container for each one.

As a side note, do you know the perl code that I could use to iterate through the worlds and print the above row for each world? I'm not quite sure how I would go about doing that with mojo and perl.

[sandain]

This could easily be done a few different ways. First, I could create a new helper subroutine to just build this HTML similar to how the msc_enabled_world_list helper function returns an HTML formatted unordered list of worlds. Another option is store the list of worlds in a variable that can then be used in the template to generate this HTML code. One last option would be to add a HTTP get for /worlds.json so that you can parse JSON with javascript.

The second option, storing a variable containing the list of worlds might work best. So the dashboard template would look something like (untested):

% layout 'default';
% for my $world (@{$enabledWorlds}) {
        <div class="row">
            <div class="col-lg-4 col-sm-6 portfolio-item">
                <div class="card h-100">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                    <div class="card-body">
                        <h4 class="card-title">
                            <a href="#"><%= $world %></a>
                        </h4>
                        <p class="card-text">Testing testing 123</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
  % }

[Roflicide]

Sounds good! One thing I will say is that I will probably want more data than just a variable of world names for the dashboard. For instance, it'd be cool to display if the world is running, the players online, and server version for each world on the dashboard (it would give it more of that "control panel" kind of look and feel that I wanna go for).

That's why I think it might be best to do the third option, so we can get a bunch of data about the world for use in dashboard. I suppose the downside is that it will take longer for the dashboard to load because they'll be more data to query?

What are your thoughts?

[sandain]

We can pass more than simple arrays in the so-called stash, we could define a data structure that has everything needed. However, you are right that it would slow down page generation with each query call, and this would hold true even if we were using json. The time it takes to generate a page does not need to be quick however. A reverse proxy could be setup to create a cache of the site that is periodically refreshed.

Note that each individual world page in my basic site performs a query and the load time without a proxy is noticeable.

[Roflicide]

Sounds good to me!

[sandain]

Ok, I worked on this a little, the latest commit is ae837fd811152725d7b6a5a07f9d8d7808e0840e. It is currently a mix of my old theme and your bootstrap theme so it is ugly, but it is a start. Query data is now available on the Dashboard (note the lame MOTD on my worlds).

[sandain]

I worked on this a little more. I added a new status-json option to MSCS with commit MinecraftServerControl/mscs@ecf61a3e894ccb8930e119f86fb218c69ab57954, and I use this new command in MSC-GUI. Here is the latest commit: 4b7e30637520e78a9ce761232c815d410c4b0341.

This is what it looks like now. It is still ugly, but I think all the data we might want is now accessible:

[sandain]

I worked on this a little more and got the theme closer to @Roflicide's design above.

[Roflicide]

Nice, looking good!! I'll try and work on this and submit some pull requests later.

[sandain]

Right on. Please let me know if there is anything missing that you need.

[sandain]

If you want raw json data for each world, note that I created a template for this. By default it is setup to serve html, so localhost/worlds/alpha is the same as localhost/worlds/alpha.html. You get the same info in json format with localhost/worlds/alpha.json. I also created a list of worlds in json format at localhost/worlds.json.

I was thinking that loading query data could be done with JS to load asynchronously from the rest of the page. These json templates will help with that.

[sandain]

I've been working on this more. The dashboard is now updated using Ajax, so it is much more responsive and since it auto updates, it provides a better dashboard.

Here is the latest screenshot:

[Roflicide]

woah, looks good!