create_responsive_layout
Generate responsive layouts for desktop and mobile views with isMobile() detection, including optional sidebar and bottom bar components.
Instructions
Создать адаптивные лейауты (Desktop + Mobile) с isMobile()
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| app_id | Yes | ID приложения | |
| with_sidebar | No | Включить сайдбар в Desktop | |
| with_bottombar | No | Включить bottombar в Mobile |
Implementation Reference
- webasyst-mcp.js:1545-1685 (handler)The core handler function that implements the 'create_responsive_layout' tool. It generates PHP layout classes and corresponding HTML templates for both desktop (with optional sidebar) and mobile (with optional bottombar) responsive layouts in a Webasyst application, using waLayout and isMobile() detection.async function createResponsiveLayoutTool({ app_id, with_sidebar = true, with_bottombar = true }) { const rootPath = await findWebasystRoot(); const appPath = path.join(rootPath, 'wa-apps', app_id); if (!(await fileExists(appPath))) throw new Error(`Приложение ${app_id} не найдено`); const layoutsDir = path.join(appPath, 'lib', 'layouts'); const templatesDir = path.join(appPath, 'templates', 'layouts'); await ensureDir(layoutsDir); await ensureDir(templatesDir); const className = app_id.charAt(0).toUpperCase() + app_id.slice(1); // Desktop Layout PHP const desktopLayoutPhp = `<?php class ${className}DesktopLayout extends waLayout { public function execute() { // Assign common variables \$this->executeAction('sidebar', new ${app_id}BackendSidebarAction()); } } `; // Mobile Layout PHP const mobileLayoutPhp = `<?php class ${className}MobileLayout extends waLayout { public function execute() { // Assign common variables for mobile \$this->view->assign('is_mobile', true); } } `; // Backend Controller with isMobile() check const controllerPhp = `<?php class ${app_id}BackendController extends waViewController { public function execute() { if (\$this->getRequest()->isMobile()) { \$this->setLayout(new ${className}MobileLayout()); } else { \$this->setLayout(new ${className}DesktopLayout()); } } } `; // Desktop Layout HTML const desktopHtml = `<!DOCTYPE html> <html> <head> <title>{\$wa->appName()}</title> {\$wa->css()} {include file="ui_wrapper.html"} <link rel="stylesheet" href="{\$wa_app_static_url}css/${app_id}.css"> </head> <body class="white"> <div id="wa-app" class="flexbox"> ${with_sidebar ? `<div class="sidebar width-adaptive mobile-friendly"> <div class="sidebar-body"> {\$sidebar} </div> </div>` : ''} <div class="content"> <div class="block double-padded"> {\$content} </div> </div> </div> {\$wa->js()} <script src="{\$wa_app_static_url}js/${app_id}.js"></script> </body> </html> `; // Mobile Layout HTML const mobileHtml = `<!DOCTYPE html> <html> <head> <title>{\$wa->appName()}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> {\$wa->css()} {include file="ui_wrapper.html"} <link rel="stylesheet" href="{\$wa_app_static_url}css/${app_id}.css"> </head> <body class="white mobile"> <div id="wa-app"${with_bottombar ? ' class="with-bottombar"' : ''}> <div class="content"> <div class="block padded"> {\$content} </div> </div> ${with_bottombar ? `<div class="bottombar"> <ul> <li class="selected"> <a href="#"> <span>{\$_('Home')}</span> </a> </li> <li> <a href="#"> <span>{\$_('List')}</span> </a> </li> <li> <a href="#"> <span>{\$_('Settings')}</span> </a> </li> </ul> </div>` : ''} </div> {\$wa->js()} <script src="{\$wa_app_static_url}js/${app_id}.js"></script> </body> </html> `; // Write files await fs.writeFile(path.join(layoutsDir, `${className}DesktopLayout.class.php`), desktopLayoutPhp); await fs.writeFile(path.join(layoutsDir, `${className}MobileLayout.class.php`), mobileLayoutPhp); await fs.writeFile(path.join(templatesDir, 'Desktop.html'), desktopHtml); await fs.writeFile(path.join(templatesDir, 'Mobile.html'), mobileHtml); const createdFiles = [ `lib/layouts/${className}DesktopLayout.class.php`, `lib/layouts/${className}MobileLayout.class.php`, `templates/layouts/Desktop.html`, `templates/layouts/Mobile.html` ]; return { content: [{ type: 'text', text: `Адаптивные лейауты созданы для ${app_id}:\n\n${createdFiles.join('\n')}\n\nИспользуйте в контроллере:\n\nif ($this->getRequest()->isMobile()) {\n $this->setLayout(new ${className}MobileLayout());\n} else {\n $this->setLayout(new ${className}DesktopLayout());\n}` }] }; }
- webasyst-mcp.js:1813-1814 (registration)Registration of the tool handler in the MCP server's CallToolRequestSchema switch statement.case 'create_responsive_layout': return await createResponsiveLayoutTool(args);
- webasyst-mcp.js:1751-1752 (registration)Tool registration in the ListToolsRequestSchema response, including name, description, and input schema definition.{ name: 'create_responsive_layout', description: 'Создать адаптивные лейауты (Desktop + Mobile) с isMobile()', inputSchema: { type: 'object', properties: { app_id: { type: 'string', description: 'ID приложения' }, with_sidebar: { type: 'boolean', default: true, description: 'Включить сайдбар в Desktop' }, with_bottombar: { type: 'boolean', default: true, description: 'Включить bottombar в Mobile' } }, required: ['app_id'] } }, ]
- webasyst-mcp.js:1751-1752 (schema)Input schema definition for the create_responsive_layout tool, specifying required app_id and optional sidebar/bottombar flags.{ name: 'create_responsive_layout', description: 'Создать адаптивные лейауты (Desktop + Mobile) с isMobile()', inputSchema: { type: 'object', properties: { app_id: { type: 'string', description: 'ID приложения' }, with_sidebar: { type: 'boolean', default: true, description: 'Включить сайдбар в Desktop' }, with_bottombar: { type: 'boolean', default: true, description: 'Включить bottombar в Mobile' } }, required: ['app_id'] } }, ]