Making Responsive Apps Easier with this Package

Show and Tell
1

I just created a tiny package that can make responsive apps easier to build.

Using it is simple. You just add a decorator to your form like this

from responsive import responsive

@responsive.form
class Form1(Form1Template):
     ...

And then, you can add two methods, to your form, on_mobile and on_pc.

def on_mobile(self):
    self.label_1.spacing_above='small'
    #Any other changes to your components or general code

def on_pc(self):
    self.label_1.spacing_above='large'
    #Any other changes to your components or general code

That way, you can specify separate code to be run depending on whether the user is using mobile or a larger device (laptop, desktop, tablets). You can also specify the width threshold (Default is 768px)


from responsive import responsive

responsive.pc_width_threshold = 600 
#Now, any device having more than 600px will be treated as pc

Bonus Feature

This package also makes it easier to modify the css of a component directly using python.

responsive.set_css(self.label_1, 'padding-top','10px', important = True)

Nothing that wasn’t already possible but saves you the effort of typing a few extra lines

Lastly, here is a short example app

13 Likes
2

This is a really cool package!

However, I would like to plead with you not to do this:

Putting extra things onto the Component class creates new things that will break when we next update that class! (Or worse, it might break the Components in a way that people then blame on us!) And a name like set is pretty generic – who knows what we might want to put there?

I strongly, strongly advise an approach like I described here, using a function imported from your dependency rather than monkey-patching the Component class:

6 Likes
3

Thanks for the advice.

I have made the necessary changes to the package. There is now a function called set_css within the dependency that does this job.

2 Likes
4

Thank you! Now I can get round to being suitably impressed by the project :slight_smile:

2 Likes
5

Nice and clean dependency @divyeshlakhotia!

Up to now I’ve mostly been relying on data bindings like

  • 'small' if self.item['is_mobile'] else 'medium'

But I like that all of the device-specific styling and app logic is all in one place with your package. So I think I’ll try it out.

2 Likes
6

For some reason I can’t clone the project. Just comes up with the IDE as if I’d first opened it (ie without a project loaded).

edit - hmm, but it did create the project in my project list. I’m sure cloning used to open the project as well?

edit 2 - ah, maybe it’s because it also cloned a dependency?

7

If a clone link has dependencies, it doesn’t open any app in the IDE by default

1 Like