Problem/Motivation

Bootstrap Site maintenance page looks as you can see in the following screenshot:
Add basic maintenance page

Proposed resolution

Have basic themed Site maintenance page.
As you can see in the following screenshot:
Add basic maintenance page

Remaining tasks

  • No tasks

User interface changes

  • Site Logo at the center.
  • Maintenance message.
  • Responsive view of the Site maintenance page.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

RajabNatshah created an issue. See original summary.

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

FileSize
2.59 KB

This is the patch to have the basic themed Site maintenance page.

Rajab Natshah’s picture

Version: 7.x-3.x-dev » 8.x-3.x-dev
Status: Active » Needs review
Rajab Natshah’s picture

Issue summary: View changes
markhalliwell’s picture

Title: Have basic themed Site maintenance page. » Add basic maintenance page
Status: Needs review » Needs work
Issue tags: +needs backport to 7.x-3.x
  1. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,90 @@
    +      <div class="panel panel-default">
    

    I'd rather this not be a panel. A truly "basic" implementation would be just like the normal page: navbar with logo + site name/slogan, a page header and content.

  2. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,90 @@
    +      <div class="footer-credits">
    +        <p>&copy; {{ "now"|date("Y") }} {{ site_name }}.  {{ 'All rights reserved.'|t }}</p>
    +      </div>
    

    This makes the assumption that the site/content is copyrighted. I'd rather this project not make these assumptions. This can easily be added in a sub-theme as needed.

Rajab Natshah’s picture

Rajab Natshah’s picture

FileSize
4.06 KB

Thank you Mark,

Noted; I thought that would be your points in the feedback :)

Following with your directions.

Add basic maintenance page

A new patch file

markhalliwell’s picture

  1. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,127 @@
    +{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
    ...
    +        theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',
    +        theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : container,
    

    The database may not be reachable during maintenance. Theme settings will need defaults in case these aren't provided.

  2. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,127 @@
    +        {{ page.navigation }}
    ...
    +        {% if logo %}
    +          <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">
    +            <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
    +          </a>
    +        {% endif %}
    +
    +        {% if site_name or site_slogan %}
    +          <div class="name-and-slogan">
    +            {% if site_name %}
    +             <h1 class="site-name">
    +               <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
    +             </h1>
    +            {% endif %}
    +
    +            {% if site_slogan %}
    +              <div class="site-slogan">{{ site_slogan }}</div>
    +            {% endif %}
    +          </div>{# /.name-and-slogan #}
    

    Replace the navigation region with the branding. This is normally a block, but this isn't available in maintenance mode.

    It should be in the navbar header to mimc the normal site.

  3. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,127 @@
    +        {# .btn-navbar is used as the toggle for collapsed navbar content #}
    +        {% if page.navigation_collapsible %}
    +          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    +            <span class="sr-only">{{ 'Toggle navigation'|t }}</span>
    +            <span class="icon-bar"></span>
    +            <span class="icon-bar"></span>
    +            <span class="icon-bar"></span>
    +          </button>
    +        {% endif %}
    ...
    +      {# Navigation (collapsible) #}
    +      {% if page.navigation_collapsible %}
    +        <div id="navbar-collapse" class="navbar-collapse collapse">
    +          {{ page.navigation_collapsible }}
    +        </div>
    +      {% endif %}
    

    There's no need for this since there are no menu items.

  4. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,127 @@
    +      set content_classes = ['primary-column',
    +        'col-sm-8',
    +        'col-sm-offset-2',
    +        'text-center',
    +        'vertical-margin'
    +      ]
    

    These are unnecessary. Just set to col-sm-12

  5. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,127 @@
    +      {# Highlighted #}
    +      {% if page.highlighted %}
    +        {% block highlighted %}
    +          <div class="highlighted">{{ page.highlighted }}</div>
    +        {% endblock %}
    +      {% endif %}
    ...
    +{% if page.footer %}
    +  {% block footer %}
    +    <footer class="footer {{ container }}" role="contentinfo">
    +      {{ page.footer }}
    +    </footer>
    +  {% endblock %}
    +{% endif %}
    

    There's no need for superfluous regions.

Rajab Natshah’s picture

FileSize
2.17 KB

Do you think having an extend will help?

{% extends "page.html.twig" %}

I have been researching many bootstrap snippets about site maintenance, some with demos.

http://bootsnipp-env.elasticbeanstalk.com/snippets/m0Vyl

A very nice site maintenance page, which I liked, is a video in the message text. from Youtube/Vimeo with a tip for direction or action to wait and watch or go some where else to the Facebook page or twitter page.

It's your call Mark! I'm happy to have it with the basic style. Not sure if extend will do that job.
I have a new patch file

If not connected to the database. In Drupal 7 I used to use something as the following:

/**
 * Implements hook_preprocess_maintenance_page().
 */
function THEME_NAME_preprocess_maintenance_page(&$variables) {

  // If not connected to the database.
  if (!$variables['db_is_active']) {
    $variables['site_name'] = 'The website name';
    $variables['title'] = 'Site under maintenance!';
    $variables['content'] = 'The website is currently under maintenance. We should be back shortly. Thank you for your patience.';
  }

  drupal_add_css(drupal_get_path('theme', 'THEME_NAME') . '/assets/css/style.css');
}

Trying to have that in Drupal 8 or something around.

markhalliwell’s picture

+++ b/templates/system/maintenance-page.html.twig
@@ -0,0 +1,73 @@
+          'text-center',
+          'vertical-margin'

Don't center the text please.

Rajab Natshah’s picture

Thanks a lot for following on this issue.
I made the change, and it will look as you can see in the attached image
Site under maintenance bootstrap theme Drupal8

Attached the patch file.

Rajab Natshah’s picture

Issue summary: View changes
Rajab Natshah’s picture

Status: Needs work » Needs review
Rajab Natshah’s picture

markhalliwell’s picture

Status: Needs review » Needs work
  1. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,63 @@
    +      {% set header_classes = ['primary-column', 'col-sm-12'] %}
    

    Please remove the primary-column class as it is not needed.

  2. +++ b/templates/system/maintenance-page.html.twig
    @@ -0,0 +1,63 @@
    +            <img src="{{ logo }}" alt="{{ 'Home'|t }}"/>
    

    The navbar classes should be added to the header/branding containers to make it look decent.

Rajab Natshah’s picture

New patch for 8.x-3.x

Site under maintenance bootstrap theme Drupal8 5

And patch for 7.x-3.x

Site under maintenance bootstrap theme Drupal8 5

And only for D7.x-3.x: if the database was not connected to the database. db_is_active == false
Site under maintenance bootstrap theme Drupal8 5

Rajab Natshah’s picture

Rajab Natshah’s picture

Status: Needs work » Needs review
Rajab Natshah’s picture

xeniksp’s picture

Rajab Natshah’s picture

Happy with that.

Rajab Natshah’s picture

Status: Needs work » Needs review
Rajab Natshah’s picture

Issue summary: View changes

markhalliwell’s picture

Version: 8.x-3.x-dev » 7.x-3.x-dev
Status: Needs review » Needs work
Issue tags: -needs backport to 7.x-3.x

7.x-3.x still needs an updated backported patch like #24.

xeniksp’s picture

Here is an updated patch for 7.x-3.x

xeniksp’s picture

I removed the global $theme because i think it is not needed and i replaced the $content_column_classes with .col-sm-12

markhalliwell’s picture

  • markcarver committed 41a99a8 on 7.x-3.x
    Issue #2865975 by markcarver, RajabNatshah, s_xenikakis: Add basic...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.