« Back to list view

ullright update instance to responsive & pagespeed

  • apps/frontend/templates/_html_head.php

    • <!DOCTYPE html>
<html lang="<?php echo $sf_user->getCulture() ?>">

<!--  Begin of html head -->
<head>

<?php /* html validator wants this at the top */ ?>
<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

...

<?php use_stylesheet('/ullCorePlugin/css/normalize.css', 'first', array('media' => 'all')) ?>

...

<?php if (sfConfig::get('sf_environment') == 'prod'): ?>
  <!-- Google Analytics Code -->
<?php endif ?>
  • Update Layout apps/frontend/templates/layout.php 
    • <?php include_partial('global/html_head') ?>
<?php /* The statement above includes the html head */ ?>
<?php /* Location: apps/frontend/templates/_html_head.php */ ?>


<!--  Begin of html body -->
<?php /* Adds request specific css classes for the current request */ ?>
<?php /* Example for URL "page/homepage" : */ ?>
<?php /* <body class="
  ull_cms_show                      = module + action
  module_ull_cms                    = module name
  action_show                       = action_name
  cms_page_homepage                 = cms specific the page slug (unique identifier)
  cms_content_type_page_with_image  = cms specific the content type slug (unique identifier)
"> */ ?>
<body class="<?php echo ullCmsHelper::renderBodyClasses() ?>">


<?php /* Toggle visiblity of inline editing controls */ ?>
<?php include_partial('ullCms/switch') ?>

....
  • Remove mobile specific files
    • apps/frontend/templates/_html_head.mobile.php
    • apps/frontend/templates/layout.mobile.php
  • Merge all css file into custom.css and remove the "multiformat" include
    • web/css/custom.css
  • Add main mobile css mainly for edit tables at the very top of web/css/custom.css 
    • @import url("/ullCorePlugin/css/main_responsive_mobile.css") (max-width: 511px);
  • Use media queries 
    • @media (max-width: 1023px) {
}

@media (max-width: 639px) {
}

 

Responsive Javascript element move

@media (max-width: 800px) {
  
  #sidebar {
    display: none;
    margin-top: 32px;
  }

}

<script>
    if($(window).width() < 800)
    {
        $("#sidebar").insertAfter("#ull_cms_show_container");
        $("#sidebar").show();
    }
</script>