How to dynamically change value in .volt on screen view

Question

I am using phalcon, .volt template

I am getting some data from database(predictability). Svg has one line starting on line 0 and finishing on 30. Another line is draw about first line and it should display some predictability

My problem is that it doesn`t look nice on small screens and I would need to change (only for mobile views 30 to 20)

I know that php itself can`t detect screen size as javascript (window.innerWidth);

<svg >
    <line x1="0" y1="0" x2="30" y2="0"  />
    <line x1="0" y1="0" x2="{{ predictability * 30 / 100 }}" y2="0"/>
</svg>

Is it possible somehow integrate JS to .volt and dynamically change fixed number 30 ?

img

Answer 1

You can make them work together. Let's suppose you are using Micro in Phalcon and you have defined the view service:

1. Create in your router the path:

   $app->get('/view/home2/{size}',
     function ($size) use ($app) {
        echo $app->view->render('index/home2', 
             [
              'svgWidth' => $size
             ]);
     }
   );
   

2. Create view '/index/home2':

    <svg >
    <line x1="0" y1="0" x2="30" y2="0"  />
    <line x1="0" y1="0" x2="{{ predictability * <?php echo $svgWidth; ?> / 100 }}" y2="0"/>
    </svg>
   

In your 'index/home' page, at the beginning:

<script>
   let url = window.innerWidth < 999 ? '/view/index/15' : '/view/index/30'; //or set a switch with more options for predictability value
    window.location.replace(url);
</script>