Making a nice mobile layout

[Jaymer]

instead of using a generator (like in the training vids), I need to make a pretty mobile container for a repeating area on a phone.

this is how Appgyver shows the objects in this template. 4 objects laid out Horizontally. 3rd one has Vertical orientation for the 2 objects inside it.

I know I can make 1 static version of this using nested containers and objects… but if I do this first and get 1 “perfect”, is there a way to turn that into a repeating area? Save it one time and use it multiple places? Or do I use the generator to make a repeating area, and then hack the containers from there.

If someone can point to some docs where this is described that would help a lot.

[Sorry_Duh]

I just removed my original post as I thought you was trying to create both images above but on relooking I noticed that the second image is most likely how Appgyver shows elements my apologies.

@Jaymer

I know I can make 1 static version of this using nested containers and objects… but if I do this first and get 1 “perfect”, is there a way to turn that into a repeating area?

Yes elements that can repeat all have some sort of make this a repeat children or make repeat option e.g rows, columns etc:

This will now turn it from static row to a repeating row

@Jaymer

Save it one time and use it multiple places?

If you are referring to using the repeating row in multiple places you would use for Node Js a partial or for php another option like SSI, require or include:

Using Partials with NodeJS

Server Side Includes (SSI)

[Jaymer]

“multiple places”

what i mean is lets say this is a view of cars for sale. a picture, & description. a place for a favorites heart in the front. it repeats in a list. user taps on it to show the details on the next page, then comes back.

so I can spend time prettying up my sizing, formatting, colors, styles, icons, etc and make it perfect, and then convert it into a repeating area and voila, i have a nice list of cars to show in a list on my phone.

That master container that is repeating… thats what I want to save into a Partial (i read that link). That example makes sense for a static Banner, but does it also work for a data-bound container?
When I use the Partial somewhere, it would make sense that I have to set the bindings but I don’t want to lose all my precise formatting of the nested containers, padding, alignments, etc.

Do I make my partial be one instance of the car listing, that doesn’t repeat. Then after I include the partial, I make it repeating? Or make the entire repeating list the partial?

[Sorry_Duh]

Just to add here I would advise you make this a repeat from the beginning because if you don’t you will have to then add the binds after converting to a repeat region. For example:

For my paragraph if I was to just enter 23 for example all repeats would show 23 when using a repeat expression from a database you choose what to repeat so lets say I wanted my paragraph to repeat the unique id in my case users_content_id

This would be what is entered in the paragraph not 23 as 23 is a static value

The above is what would be returned when the paragraph has the dynamic bind and not a static value.

[Sorry_Duh]

@Jaymer

That master container that is repeating… thats what I want to save into a Partial (i read that link). That example makes sense for a static Banner, but does it also work for a data-bound container?

Yes aslong as the server connect returning the data is still available to be used by the repeating area you could also use the partial in the repeat if your structure requires this hard to picture your app requirements

@Jaymer

Do I make my partial be one instance of the car listing, that doesn’t repeat. Then after I include the partial, I make it repeating? Or make the entire repeating list the partial?

If the entire list is the same you could just make it all a partial as the expression would be the same etc

Sorry if im mistaking the requirements here trying to visualise what you are wanting to create

[Jaymer]

@Sorry_Duh

Sorry if im mistaking the requirements here trying to visualise what you are wanting to create

thx for helping. trying to recreate the 1st picture in the thread. simple data fields from a database listed in a repeating area. the hard[er] part is building the container, so I don’t want to have to recreate that over and over throughout a big app when i need a list of cars on different pages. I want to use that same EXACT template for a vehicle list in multiple places.

[Sorry_Duh]

<div class="container">
    <div class="row" is="dmx-repeat" id="repeat1" dmx-bind:repeat="serverconnect1.data.query">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between">
                <img height="50">
                <dl class="mb-0 ps-1 w-100">
                    <dt>Label</dt>
                    <dd class="mb-0">Description</dd>
                </dl>
                <i class="fa fa-chevron-right fa-large"></i>
            </div>
        </div>
    </div>
</div>

This might be a starting point for you if you’re using Bootstrap 5 and font awesome 5.14 Also if you are always going to use the same server connect to get this list you could have something like the above in a partial and also have the server connect in the partial that way all pages you use the repeat on will have the data.

Obviously the above is just for the layout you would need to edit the expressions and content if you use it.

[Jaymer]

and that easily turns into this, live from MSSQL.
so now I see… the formatting I was talking about is all boostrap code which can be easily copied/pasted as HTML into another source file. Partials or not, its easy.

Working with Appgyver, this was all hidden - you had to use their template/layout drawing system - never saw code at this level. Of course this isn’t hard, I just hadn’t seen it yet in Wappler. And I wasn’t far enough into Babble.io to see what was under the covers… except it seemed slow.

If you wouldn’t have taken the time to help me get this far, I’d be stuck for a while - was having trouble getting out of that Generator table stuff, being unsure what the necc. “repeat” magic was.
Now I have a model and see how easy this is. Fantastic!
AND Fast. My data is not local - and this is fast.

I’ve got a long way to go, but within 4 hours (burned 2 the other day) I’ve got what I want coming from my live server. Life is good!

[PaulBS]

If you are using Framework7 for your mobile app they have a nice card view -
https://framework7.io/docs/cards
Or even better, list view -
https://framework7.io/docs/list-view
(scroll to the bottom of those links and look at the demo for lots of examples

[Jaymer]

Paul, this was great to read - and great examples. Following training materials, I had only been using a “Blank Project” in Wappler. So I’m trying to check out Kitchen Sink.

I don’t want a native/hybrid app - just a web app for phones.
The only option for Framework7 is the cordova/capacitor option.
So I’m not sure if I can start with Kitchen Sink for my Web app.
(moving on)

I changed my BS5 car list (shown above) to a F7 “media list”:

but it doesn’t look the same as in the F7 example you supplied:

How do I set the css variables for “item-title”, “item-subtitle”, etc?

I don’t know where/how in the Wappler ecosystem to do this?
In fact, the Styles tab doesn’t allow me to modify the CSS (makes sense, I don’t really want to edit “framework7-bundle.min.css” - but how to I create my local CSS ti override F7? Maybe this is where the variables are set?

thx!

[PaulBS]

Hi Jaymer,
Framework7 (F7) is a framework (like Bootstrap) that includes bits and pieces to enable more native(like) features when used on a mobile device (mainly display and animation).
It will still work as a website display framework although not its primary focus.

As long as you have it linked to your project you can use its pre-built CSS classes but I don’t know about mixing BS5 and F7.

So for the list view, you referenced, you would add the following HTML in Wappler -

<div class="block-title">Songs</div>
      <div class="list media-list">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg"
                  width="80" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Yellow Submarine</div>
                  <div class="item-after">$15</div>
                </div>
                <div class="item-subtitle">Beatles</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                  tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum
                  sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
                  dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </a></li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-2.jpg"
                  width="80" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Don't Stop Me Now</div>
                  <div class="item-after">$22</div>
                </div>
                <div class="item-subtitle">Queen</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                  tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum
                  sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
                  dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </a>
          </li>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-160x160-3.jpg"
                  width="80" /></div>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title">Billie Jean</div>
                  <div class="item-after">$16</div>
                </div>
                <div class="item-subtitle">Michael Jackson</div>
                <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis
                  tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum
                  sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec
                  dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
              </div>
            </a>
          </li>
        </ul>
      </div>

All the layout is done for you by following their div class structure.
Cut and paste from their docs to start with and once you get their logic it gets easier.
BTW - I mainly use code view working with F7 as it is easier when referencing their docs and examples.
As for how Wappler handles CSS stylesheets, it creates a single file (style.css) in the CSS subfolder of www (for mobile apps).

[Jaymer]

@Jaymer

I changed my BS5 car list (shown above) to a F7 “media list”:

Thx Paul
I’ve already changed the HTML - you can see in my prev post, under this:
I changed my BS5 car list (shown above) to a F7 “media list”:
That image IS a F7 media list.

When I asked: How do I set the css variables for “item-title”, “item-subtitle”,
That image under that is the Styles that Wappler shows me in my project.
But it uses variables to set the TITLE and SUBTITLE.
Wappler doesn’t allow me to change the CSS in this window:

So my Q is still “how to I create my local CSS to override F7? Maybe this is where the variables are set?”

Because you see my Title and Subtotal just blend in with the other text.
Somewhere I need to set those styles.

[Jaymer]

the styles.css referred to in the Project setup is empty.
I added this to it, to set the variables for display:

:root {
--f7-font-family: sans-serif;
--f7-list-item-title-font-weight: 900; 
--f7-list-item-title-font-size: 18px; 
--f7-list-item-subtitle-font-weight: 900; 
--f7-list-item-subtitle-font-size: 14px;
--f7-list-item-text-font-size: 12px;
}

now I get this:

… which isn’t much diff. that what I had before, but now I’ve learned the F7 stuff and since this is for mobile & tablets, its a good direction to go in. Thx

[Jaymer]

@PaulBS
Paul, didn’t want to bother everyone with a new thread, but hope you (or anyone) could clear up a few tiny things for me.

here’s my code for the above car list using F7.

1. why is this “view: content” section in my Wappler App Structure window? whats it for? there’s nothing in it? should I delete it?

2. for some reason, I get my F7 car list with no ability to scroll? Don’t understand why. there’s 100+ <li> elements in the source.

3. Seems odd to me that we develop on a layout page (ie. NOT the index.eps) and if you “Open in Browser” I get this:
   

So I always have to switch to the index page before I test in browser. Can’t get the hang of this.

For this “car view” I don’t want it to be whatever the width of my PC browser window is - so I used a width statement in my <body> tag. Don’t know the right way to size my list.

thx

[George]

I would really suggest using Framework7 only when building full blown mobile apps.

If you are using NodeJS and building responsive websites that you want to look good on mobile - just stick to bootstrap.

You can check in our docs the usage of NodeJS templating to fully understand how layouts and includes work:

About the NodeJS category

[PaulBS]

Hi Jaymer,

Yes, that is the way to control the font of the ALL text on your site and the formatting of the item bits.

If you don’t want to change it everywhere you can use the Wappler Design panel (on the right).
Select an object (i.e. the List Title) then click on the Design tab, give it a class name and make the changes visually.
This will add the class to the selected item and create an entry in the styles.css for you.

[PaulBS]

Hi Jaymer,

These questions are going a bit deep for my experience but on point 3, yes you have to load index.html since that is the only page used but the server loads in the content pages as per the routing.
Ben helped me understand this in my question here -
https://community.wappler.io/t/local-storage-and-layout-pages/32739/3