Css modification for mobile

Development
1

Continuing the discussion from Responsive Design:

Hi, I’ve prepare css modification for Zammad 3.1.x. That should help till proper RD will be created by Zammad Team. You should consider it as alpha version…

Cheers,
Karol

4 Likes
2

Hi Karol,

thanks a lot! Unfortunately it didn’t work for me. We’re using 3.2.x—could you try with 3.2 as well?

Cheers,
Ben

3

Hi, will check if I can upgrade. Will back with info next week (few days off).

4

Hi Karol,

did you upgrade yet? :slight_smile:

Cheers,
Ben

5

Hi Karol,

any news on this?

Cheers,
Ben

6

Yes, what about for latest version Zammad. Me itrested to. ))

7

I got this working with latest version of Zammad (3.5.x). This makes it responsive on mobile devices and also allows it to act as a Progressive Web App on iOS after adding it to the Home Screen (rather than opening as another tab in the browser). It’s still kinda buggy and not perfect, but I think it’s at least usable until a proper responsive release of Zammad is out.

Here are the steps:

  1. Create /opt/zammad/public/assets/custom-mobile.css and paste contents of kazz3m/zammad-mobile-css

  2. Modify /etc/nginx/sites-enabled/zammad.conf and add the following under location / section:

     sub_filter '</head>' '<link rel="stylesheet" href="/assets/custom-mobile.css"><meta name="apple-mobile-web-app-capable" content="yes"></head>';
 sub_filter '<meta name="viewport" content="width=1024">' '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
 sub_filter_once on;

  3. Test NGINX configuration to make sure you didn’t make any typos
    nginx -t

  4. Reload NGINX configuration
    nginx -s reload

File Oct 01, 8 28 36 PM.jpeg
File Oct 01, 8 28 36 PM.jpeg1242×2406 107 KB

4 Likes
8

Super cool.
Step 2 through 4 are a bit sketchy.

You may want to use the custom directory which is for custom css (which your CSS is at this moment).
If you’ve done that, you’ll have to run zammad run rake assets:precompile followed by a Zammad service restart to get your changes.

1 Like
9

Re-reading this after referencing it in another thread - @MrGeneration do you mean with the precompile and service restart, any CSS in the custom directory will be picked up?

In other words, we won’t need the NGinx hack at all?

10

Looks like the nginx hack is most importantly needed to replace the <meta name="viewport" content="width=1024"> tag, which otherwise disables this mobile CSS from taking any action.

Alternatively to the nginx hack one could instead modify the application.html.erb file to do those changes, either by directly editing the files or using a zpm package.
(along with the zammad run rake assets:precompile && sudo systemctl restart zammad-web)

11

No need to apply these changes by hand any longer very soon from now! Zammad 4.0 includes these changes with some slight enhancements out of the box. If you’re curious you can already check it out installing a system from the develop branch :rocket:

7 Likes
12

Very cool, glad to hear that! Hope the ticket/user detail sidepanel has some improved handling in the enhancements, as with just this pure css tweak it got in the way a lot, need to try it out later. :rocket:

13

What does very soon mean? The current stable is 3.6, 3.7 is in developement

14

We in general do not provide any ETAs.
Very soon is actually the most acurate eta you’ll get. Sorry.

15

OK, I understand this.

I checked the responsive design in 3.7 develop, this looks very usable.
This will be a great feature for us, as we must use zammad on smartphones.

1 Like