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.

[michael2847]

@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.

[michael2847]

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.

[michael2847]

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

[michael2847]

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.

[michael2847]

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 -->
  % }