How do I layout viewmodels?

Question

I’m building the public part of the booking platform and want it to be mobile first. After spending several hours understanding how the layout is rendered. I come to the conclusion that the column count in VM don’t have any effect below 14 columns. So for getting control over the layout I added a groupbox (wrapper) for all content in the the VM and styled it like this:

.wrapper {  
        grid-column-start: 1;
        grid-column-end: 13;

        @media only screen and (min-width: 500px) {
            grid-column-start: 5;
            grid-column-end: 9;
    }
   }

This will make the VM fill the screen on mobile and center the screen on desktop. Is this the way to do it? Or Am I missing something.

I want to be able to set a style class on VM-level to handle different layout and styling, in my case for the public part and the admin part of the platform. Or is it some other way to do this? yes, the vm is a class but this is more on category level.

Is using groupboxes the way to go to handle layout? In that case it would be nice if the vm-editor handles multiple levels in a better way when using nested VM.

score 0 · Answer 1 · answered May 13 '20 at 18:15

0

I don't understand what "have any effect below 14 columns" means.

The rendered view will have the same number of columns as designed.

Groupboxes are intended to group content and will get added functionality so that all content always will be wrapped in div that are from a designed group box or an inferred group-box.

This will make it easier to adapt one design to fit different screen size. As of now, it's not been a priority to implement though.

answered May 13 '20 at 18:15

Lars

191
4

I have a viewmodel column count = 3 and the style looks like this: .mg_IndexBookingPage{display: grid;display: -ms-grid;grid-template-columns: repeat(15, minmax(0px, auto));display: -ms-grid;-ms-grid-columns:(1fr 10px)[15] ;} .IndexBookingPage_Wrapper{ grid-column:1/16;grid-row:1/8;-ms-grid-column:1;-ms-grid-column-span:29;-ms-grid-row:1;-ms-grid-row-span:7; } it repeat 15 in this case. So nested groupboxes is way to go? – Bengt Henriksson May 13 '20 at 18:52
What is the best way to handle different theming for different part of the app? Admin part and public branded part. – Bengt Henriksson May 14 '20 at 21:23
Are you saying that nothing in your view uses more than 3 columns, and the column count are 3 on the green viewmodel class, and you still get 15 columns in the rendered grid? – Lars May 15 '20 at 07:18
Yes! My conclusion is that the top-level will render max number of columns in sub-level (Im talking about nested group boxes and its content) and column count on viewmodel will have no effect. – Bengt Henriksson May 16 '20 at 09:48
This makes its difficult to predict the styling, and its a struggle working with nested group boxes in the editor because the sub-level are allowed do push its parents span. I think span should be fixed and has to be change by hand. – Bengt Henriksson May 16 '20 at 10:10
Group boxes are not to be seen as "one column". It's a grouping of ui widgets. There's no "sub-level" when it comes to counting columns. Forget how Bootstrap did it. – Lars May 17 '20 at 11:59
So what is the best way to style my views in the same way depending on screen size? – Bengt Henriksson May 19 '20 at 10:44

How do I layout viewmodels?

1 Answers1