Merge pull request #3009 from weseek/imprv/whole-layout

Imprv/whole layout

src/client/js/app.jsx

@@ -109,14 +109,13 @@ if (pageContainer.state.pageId != null) {
     'liker-list': <LikerList />,
 
     'recent-created-icon': <RecentlyCreatedIcon />,
-    'user-created-list': <RecentCreated userId={pageContainer.state.creator._id} />,
     'user-bookmark-icon': <BookmarkIcon />,
-    'user-bookmark-list': <BookmarkList userId={pageContainer.state.creator._id} />,
   });
 }
 if (pageContainer.state.creator != null) {
   Object.assign(componentMappings, {
     'user-created-list': <RecentCreated userId={pageContainer.state.creator._id} />,
+    'user-bookmark-list': <BookmarkList userId={pageContainer.state.creator._id} />,
   });
 }
 if (pageContainer.state.path != null) {

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -111,7 +111,7 @@ const GrowiSubNavigation = (props) => {
   }
 
   return (
-    <div className={`grw-subnav d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
+    <div className={`grw-subnav container-fluid d-flex align-items-center justify-content-between ${isCompactMode ? 'grw-subnav-compact d-print-none' : ''}`}>
 
       {/* Left side */}
       <div className="d-flex grw-subnav-left-side">

src/client/js/components/Page/NotFoundAlert.jsx

@@ -16,7 +16,7 @@ const NotFoundAlert = (props) => {
   }
 
   return (
-    <div className="border border-info m-4 p-3">
+    <div className="border border-info p-3">
       <div className="col-md-12 p-0">
         <h2 className="text-info lead">
           <i className="icon-info pr-2 font-weight-bold" aria-hidden="true"></i>

src/client/styles/scss/_admin.scss

@@ -1,6 +1,7 @@
 .admin-page {
   .title {
-    padding: 0.5rem 15px;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
 
     line-height: 1em;
 

src/client/styles/scss/_comment_growi.scss

@@ -32,11 +32,6 @@
     }
   }
 
-  .page-comments-row {
-    // offset margin left to apply bg-color
-    margin: 30px -15px 30px -15px;
-  }
-
   .page-comments {
     h4 {
       margin-bottom: 1em;

src/client/styles/scss/_layout.scss

@@ -29,9 +29,41 @@ body {
 }
 
 .main {
-  padding-right: 15px;
-  padding-left: 15px;
   margin-top: 1rem;
+
+  @include media-breakpoint-up(md) {
+    margin-top: 3rem;
+  }
+}
+
+.top-of-table-contents {
+  line-height: 1.25;
+  border-bottom: 1px solid transparent;
+
+  .user-list-content {
+    direction: rtl;
+
+    .liker-user-count,
+    .seen-user-count {
+      font-size: 12px;
+      font-weight: bolder;
+    }
+  }
+  .cls-1 {
+    isolation: isolate;
+  }
+}
+
+.revision-toc {
+  position: sticky;
+  // growisubnavigation + grw-navbar-boder
+  top: calc(100px + 4px);
+  width: 250px;
+  margin-top: 5px;
+
+  .revision-toc-content {
+    padding: 0;
+  }
 }
 
 .grw-fab {

src/client/styles/scss/_layout_growi.scss

@@ -1,37 +0,0 @@
-@import 'layout';
-
-.growi {
-  .content-main {
-    padding: 0;
-  }
-
-  .top-of-table-contents {
-    line-height: 1.25;
-    border-bottom: 1px solid transparent;
-
-    .user-list-content {
-      direction: rtl;
-
-      .liker-user-count,
-      .seen-user-count {
-        font-size: 12px;
-        font-weight: bolder;
-      }
-    }
-    .cls-1 {
-      isolation: isolate;
-    }
-  }
-
-  .revision-toc {
-    position: sticky;
-    // growisubnavigation + grw-navbar-boder
-    top: calc(100px + 4px);
-    width: 250px;
-    margin-top: 5px;
-
-    .revision-toc-content {
-      padding: 0;
-    }
-  }
-}

src/client/styles/scss/_mixins.scss

@@ -27,6 +27,12 @@
     height: calc(100vh - #{$editor-margin-top});
     margin-top: 0px !important;
 
+    .container-lg {
+      max-width: unset;
+      padding: 0;
+      margin: 0;
+    }
+
     &,
     .content-main,
     .tab-content {

src/client/styles/scss/_on-edit.scss

@@ -45,13 +45,6 @@ body.on-edit {
     @include expand-editor($editor-margin-top);
   }
 
-  // for growi layout
-  .main {
-    .col.grw-page-content-container {
-      padding: 0;
-    }
-  }
-
   // show
   .d-edit-block {
     display: block !important;

src/client/styles/scss/_override-bootstrap.scss

@@ -9,6 +9,25 @@
     outline: none !important;
   }
 
+  .container,
+  .container-sm,
+  .container-md,
+  .container-lg,
+  .container-xl,
+  .container-fluid {
+    // default: 15px
+    // padding-right: 15px;
+    // padding-left: 15px;
+    @include media-breakpoint-down(xs) {
+      padding-right: 10px;
+      padding-left: 10px;
+    }
+    @include media-breakpoint-up(md) {
+      padding-right: 30px;
+      padding-left: 30px;
+    }
+  }
+
   h1 {
     font-size: 36px;
     line-height: 48px;

src/client/styles/scss/_subnav.scss

@@ -1,6 +1,7 @@
 .grw-subnav {
   min-height: $grw-subnav-min-height;
-  padding: 8px 15px;
+  padding-top: 8px;
+  padding-bottom: 8px;
 
   @include media-breakpoint-up(md) {
     min-height: $grw-subnav-min-height-md;

src/client/styles/scss/style-app.scss

@@ -37,7 +37,6 @@
 @import 'editor-navbar';
 @import 'handsontable';
 @import 'layout';
-@import 'layout_growi';
 @import 'login';
 @import 'me';
 @import 'mirror_mode';

src/server/views/admin/app.html

@@ -11,10 +11,7 @@
 
 
 {% block content_main %}
-<div class="content-main admin-app row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-app"></div>
-</div>
+  <div id="admin-app"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/customize.html

@@ -17,13 +17,10 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-customize row">
-  {% parent %}
-  <div id="grw-hljs-container-for-demo">
-    {{ cdnHighlightJsStyleTag(getConfig('crowi', 'customize:highlightJsStyle')) }}
-  </div>
-  <div class="col-lg-9" id="admin-customize"></div>
+<div id="grw-hljs-container-for-demo">
+  {{ cdnHighlightJsStyleTag(getConfig('crowi', 'customize:highlightJsStyle')) }}
 </div>
+<div id="admin-customize" class="admin-customize"></div>
 {% endblock content_main %}
 
 {% block content_footer %} {% endblock content_footer %}

src/server/views/admin/export.html

@@ -7,11 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-export row">
-  {% parent %}
-  <div id="admin-export-page" class="col-lg-9"></div>
-</div>
-
+<div id="admin-export-page" class="admin-export"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/external-accounts.html

@@ -7,10 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-external-account-setting"></div>
-</div>
+<div id="admin-external-account-setting"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/global-notification-detail.html

@@ -7,13 +7,9 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-global-notification-setting"
-      data-global-notification="{{ globalNotification|json }}"></div>
-</div>
+<div id="admin-global-notification-setting"
+    data-global-notification="{{ globalNotification|json }}"></div>
+{% endblock content_main %}
 
-  {% endblock content_main %}
-
-  {% block content_footer %}
-  {% endblock content_footer %}
+{% block content_footer %}
+{% endblock content_footer %}

src/server/views/admin/importer.html

@@ -7,11 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-importer row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-importer"></div>
-</div>
-
+<div id="admin-importer" class="admin-importer"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/index.html

@@ -7,10 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-home"></div>
-</div>
+<div id="admin-home"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/markdown.html

@@ -7,11 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-markdown-setting"></div>
-</div>
-
+<div id="admin-markdown-setting"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/notification.html

@@ -7,10 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-notification row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-notification-setting"></div>
-</div>
+<div id="admin-notification-setting" class="admin-notification"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/search.html

@@ -7,16 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-    <div
-      class="col-lg-9"
-      id ="admin-full-text-search-management"
-    >
-    </div>
-</div>
-
-
+  <div id ="admin-full-text-search-management"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/security.html

@@ -7,10 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main admin-security row">
-  {% parent %}
-  <div class="col-lg-9" id="admin-security-setting"></div>
-</div>
+<div id="admin-security-setting" class="admin-security"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/user-group-detail.html

@@ -7,14 +7,10 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-  <div
-    id="admin-user-group-detail"
-    class="col-lg-9"
-    data-user-group="{{ userGroup|json }}"
-  >
-  </div>
+<div
+  id="admin-user-group-detail"
+  data-user-group="{{ userGroup|json }}"
+>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/user-groups.html

@@ -7,10 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-  <div id ="admin-user-group-page" class="col-lg-9"></div>
-</div>
+<div id ="admin-user-group-page"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/admin/users.html

@@ -7,14 +7,7 @@
 {% endblock %}
 
 {% block content_main %}
-<div class="content-main row">
-  {% parent %}
-  <div
-    class="col-lg-9"
-    id ="admin-user-page"
-  >
-  </div>
-</div>
+<div id ="admin-user-page"></div>
 {% endblock content_main %}
 
 {% block content_footer %}

src/server/views/layout-growi/forbidden.html

@@ -2,15 +2,18 @@
 
 
 {% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
+  <div class="container-lg">
+    {% include '../widget/page_alerts.html' %}
+  </div>
 {% endblock %}
 
 {% block content_main %}
-  <div class="row">
-    <div class="col grw-page-content-container">
-      {% include '../widget/forbidden_content.html' %}
+  <div class="container-lg">
+    <div class="row">
+      <div class="col">
+        {% include '../widget/forbidden_content.html' %}
+      </div>
     </div>
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container"></div>
   </div>
 {% endblock %}
 

src/server/views/layout-growi/not_creatable.html

@@ -2,16 +2,19 @@
 
 
 {% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
+  <div class="container-lg">
+    {% include '../widget/page_alerts.html' %}
+  </div>
 {% endblock %}
 
 
 {% block content_main %}
-  <div class="row">
-    <div class="col grw-page-content-container">
-      {% include '../widget/not_creatable_content.html' %}
+  <div class="container-lg">
+    <div class="row">
+      <div class="col">
+        {% include '../widget/not_creatable_content.html' %}
+      </div>
     </div>
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container"></div>
   </div>
 {% endblock %}
 

src/server/views/layout-growi/not_found.html

@@ -2,16 +2,19 @@
 
 
 {% block content_main_before %}
-  {% include '../widget/page_alerts.html' %}
+  <div class="container-lg">
+    {% include '../widget/page_alerts.html' %}
+  </div>
 {% endblock %}
 
 
 {% block content_main %}
-  <div class="row">
-    <div class="col grw-page-content-container">
-      {% include '../widget/not_found_content.html' %}
+  <div class="container-lg">
+    <div class="row">
+      <div class="col">
+        {% include '../widget/not_found_content.html' %}
+      </div>
     </div>
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container"></div>
   </div>
 {% endblock %}
 

src/server/views/layout-growi/page.html

@@ -6,19 +6,9 @@
 
 
 {% block content_main %}
-  <div class="d-flex justify-content-between">
+  <div class="container-lg">
 
-    <div class="grw-page-content-container flex-grow-1">
-
-      {% include '../widget/page_content.html' %}
-
-    </div>
-
-    <div class="d-none d-lg-block revision-toc-container">
-      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
-        <div id="revision-toc-content" class="revision-toc-content"></div>
-      </div>
-    </div>
+    {% include '../widget/page_content.html' %}
 
   </div>
 {% endblock %}

src/server/views/layout-growi/page_list.html

@@ -6,28 +6,17 @@
 
 
 {% block content_main %}
-  <div class="d-flex justify-content-between">
-
-    <div class="grw-page-content-container flex-grow-1">
-
-      {% include '../widget/page_content.html' %}
-
-    </div>
-
-    <div class="d-none d-lg-block revision-toc-container">
-      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
-        <div id="revision-toc-content" class="revision-toc-content"></div>
-      </div>
-    </div>
-
+  <div class="container-lg">
+    {% include '../widget/page_content.html' %}
   </div>
-
 {% endblock %}
 
 
 {% block content_main_after %}
   {% if isTrashPage() %}
-    <div id="trash-page-list"></div>
+    <div class="container-lg">
+      <div id="trash-page-list"></div>
+    </div>
   {% endif %}
   {% if page %}
     {% include '../widget/page_attachments.html' %}

src/server/views/layout-growi/shared_page.html

@@ -2,7 +2,9 @@
 
 
 {% block content_header %}
-  <h1 class="p-3">{{ page.path | preventXss }}</h1>
+  <div class="container-fluid">
+    <h1 class="py-3">{{ page.path | preventXss }}</h1>
+  </div>
 {% endblock %}
 
 
@@ -14,36 +16,20 @@
 {% endblock %}
 
 {% block content_main %}
-  <div
-    class="d-flex justify-content-between"
-    id="is-shared-page"
-    data-share-link-expired-at="{% if sharelink.expiredAt %}{{ sharelink.expiredAt|datetz('Y/m/d H:i:s')}}{% endif %}"
-    data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}"
-  >
-    {% block content_page %}
-      <div class="grw-page-content-container flex-grow-1">
-        <div id="share-link-alert"></div>
-
-        {% include '../widget/page_content.html' %}
-        {# force remove #revision-toc from #content_main of parent #}
-        <script>
-          $('#revision-toc').remove();
-        </script>
-
-      </div>
-
-      {# relocate #revision-toc #}
-      <div class="d-none d-lg-block revision-toc-container">
-        <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
-          <div id="revision-toc-content" class="revision-toc-content"></div>
-        </div>
-      </div>
-    {% endblock %}
+  <div class="container-lg">
+
+    <div
+      id="is-shared-page"
+      data-share-link-expired-at="{% if sharelink.expiredAt %}{{ sharelink.expiredAt|datetz('Y/m/d H:i:s')}}{% endif %}"
+      data-share-link-created-at="{{ sharelink.createdAt|datetz('Y/m/d H:i:s')}}"
+    >
+      <div id="share-link-alert"></div>
+      {% include '../widget/page_content.html' %}
+    </div>
 
   </div>
 {% endblock %}
 
-
 {% block body_end %}
   <div id="presentation-layer" class="fullscreen-layer">
     <div id="presentation-container"></div>

src/server/views/layout-growi/user_page.html

@@ -6,43 +6,11 @@
 {% endblock %}
 
 {% block content_main %}
+  <div class="container-lg">
 
-  <div class="d-flex justify-content-between">
-    <div class="grw-page-content-container flex-grow-1">
-
-      <div class="user-info" id="user-info">
-      </div>
-
-      {#
-        #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
-        #   setting of 'revision-toc' (affix) is hindered.
-        #}
-      <div class="mb-5 user-page-content-container d-edit-none d-print-none">
-      </div>
-
-      {% block content_main_before %}
-        {% parent %}
-      {% endblock %}
-
-      {% include '../widget/page_content.html' %}
-
-      {# force remove #revision-toc from #content_main of parent #}
-      <script>
-        $('#revision-toc').remove();
-      </script>
-
-    </div> {# /.col- #}
-
-    {# relocate #revision-toc #}
-    <div class="d-none d-lg-block revision-toc-container">
-      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="116">
-        <div id="revision-toc-content" class="revision-toc-content"></div>
-      </div>
-    </div> {# /.col- #}
+    {% include '../widget/page_content.html' %}
 
   </div>
-
-
 {% endblock %}
 
 
@@ -50,26 +18,30 @@
   {% include 'widget/comments.html' %}
 
   {% if page %}
-    <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
-      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="bookmarks-list">
-        <i id="user-bookmark-icon"></i>
-        Bookmarks
-      </h2>
-      <div class="page-list" id="user-bookmark-list">
-        <div class="page-list-container">
+    <div class="container-lg">
+
+      <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+        <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="bookmarks-list">
+          <i id="user-bookmark-icon"></i>
+          Bookmarks
+        </h2>
+        <div class="page-list" id="user-bookmark-list">
+          <div class="page-list-container">
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
-      <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="recently-created-list">
-        <i id="recent-created-icon"></i>
-        Recently Created
-      </h2>
-      <div class="page-list" id="user-created-list">
-        <div class="page-list-container">
+      <div class="grw-page-list-m mt-5 pb-5 d-edit-none">
+        <h2 class="grw-page-list-title-m border-bottom pb-2 mb-3" id="recently-created-list">
+          <i id="recent-created-icon"></i>
+          Recently Created
+        </h2>
+        <div class="page-list" id="user-created-list">
+          <div class="page-list-container">
+          </div>
         </div>
       </div>
+
     </div>
   {% endif %}
 

src/server/views/layout-growi/widget/comments.html

@@ -1,15 +1,17 @@
-<div class="page-comments-row row d-edit-none d-print-none">
+<div class="page-comments-row mt-5 py-4 d-edit-none d-print-none">
+  <div class="container-lg">
 
-  <div class="page-comments col-lg-10 my-5">
+    <div class="page-comments">
 
-    <h2 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h2>
+      <h2 class="border-bottom pb-2 mb-3"><i class="icon-fw icon-bubbles"></i> Comments</h2>
 
-    <div class="page-comments-list" id="page-comments-list"></div>
+      <div class="page-comments-list" id="page-comments-list"></div>
 
-    {% if page and not page.isDeleted() %}
-    <div id="page-comment-write"></div>
-    {% endif %}
+      {% if page and not page.isDeleted() %}
+      <div id="page-comment-write"></div>
+      {% endif %}
 
-  </div>
+    </div>
 
+  </div>
 </div>

src/server/views/layout/admin.html

@@ -1,17 +1,40 @@
-{% extends '../layout-growi/base/layout.html' %}
-
+{% extends './layout.html' %}
 
 {% block html_base_css %}admin-page{% endblock %}
 
-
 {% block html_head_loading_app %}
 <script src="{{ webpack_asset('js/admin.js') }}" defer></script>
 {% endblock %}
 
-{% block content_main %}
-  <div class="col-lg-3" id="admin-navigation"></div>
-{% endblock content_main %}
+{% block layout_main %}
 
-{# disable custom script in admin page #}
-{% block custom_script %}
+{% block content_header_wrapper %}
+<header class="container-fluid py-0">
+  {% block content_header %}
+    <div id="grw-subnav-container"></div>
+  {% endblock %}
+</header>
 {% endblock %}
+
+<div id="main" class="main {% block main_css_class %}{% endblock %}">
+
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-lg-3" id="admin-navigation"></div>
+      <div class="col-lg-9">
+        {% block content_main_before %}
+        {% endblock %}
+
+        {% block content_main %}
+        {% endblock content_main %}
+
+        {% block content_main_after %}
+        {% endblock %}
+      </div>
+    </div>
+  </div>
+</div><!-- /.main -->
+
+<footer class="footer">
+</footer>
+{% endblock %} {# layout_main #}

src/server/views/widget/page_attachments.html

@@ -1,12 +1,10 @@
-<div class="row page-attachments-row d-edit-none d-print-none">
-  <div class="col-12">
-    <div class="mt-4 mb-4">
-      <div class="page-attachments" id="page-attachment"></div>
+<div class="page-attachments-row mt-5 py-4 d-edit-none d-print-none">
+  <div class="container-lg">
+    <div class="page-attachments" id="page-attachment"></div>
 
-      <p class="page-meta">
-        <p>Last revision posted at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.revision.author.username }}"><img src="{{ page.revision.author|picture }}" class="picture picture-sm rounded-circle"> {{ page.revision.author.name }}</a></p>
-        <p>Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.creator.username }}"><img src="{{ page.creator|default(page.creator)|picture }}" class="picture picture-sm rounded-circle"> {{ page.creator.name }}</a></p>
-      </p>
-    </div>
+    <p class="page-meta">
+      <p>Last revision posted at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.revision.author.username }}"><img src="{{ page.revision.author|picture }}" class="picture picture-sm rounded-circle"> {{ page.revision.author.name }}</a></p>
+      <p>Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <a href="/user/{{ page.creator.username }}"><img src="{{ page.creator|default(page.creator)|picture }}" class="picture picture-sm rounded-circle"> {{ page.creator.name }}</a></p>
+    </p>
   </div>
 </div>

src/server/views/widget/page_content.html

@@ -1,5 +1,5 @@
 {% if page %}
-<div id="content-main" class="content-main container"
+<div id="content-main" class="content-main d-flex"
   data-path="{{ encodeURI(page.path) }}"
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
   data-page-id="{% if page %}{{ page._id.toString() }}{% endif %}"
@@ -32,7 +32,7 @@
   data-share-link-id="{% if sharelink %}{{ sharelink._id|json }}{% endif %}"
   >
 {% else %}
-<div id="content-main" class="content-main"
+<div id="content-main" class="content-main d-flex"
   data-path="{{ encodeURI(path) }}"
   data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
   data-slack-channels="{{ slack|default('') }}"
@@ -41,12 +41,25 @@
   >
 {% endif %}
 
+<div class="flex-grow-1">
   {% include 'page_alerts.html' %}
 
-<div id="display-switcher">
-  <script type="text/template" id="raw-text-original">{{ revision.body.toString() | encodeHTML }}</script>
+  {% if pageUser %}
+    <div class="user-info" id="user-info"></div>
+  {% endif %}
+
+  <div id="display-switcher">
+    <script type="text/template" id="raw-text-original">{{ revision.body.toString() | encodeHTML }}</script>
+  </div>
+  <div id="page-editor-navbar-bottom-container" class="d-none d-edit-block"></div>
+</div>
+
+<div class="d-none d-lg-block revision-toc-container ml-4">
+  <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="123">
+    <div id="revision-toc-content" class="revision-toc-content"></div>
+  </div>
 </div>
-<div id="page-editor-navbar-bottom-container" class="d-none d-edit-block"></div>
+
 <div id="grw-page-status-alert-container"></div>
 
 </div>