add createdAt and updatedAt to affix header

src/client/styles/scss/_page_growi.scss

@@ -1,52 +1,67 @@
-.growi.main-container {
-  header {
-    div.title-logo-container {
-      display: none; // hide in default
-
-      a {
-        // centering
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-
-        img {
-          width: 16px;
-          height: 16px;
-        }
-      }
-    }
-
-    ul.authors {
-      margin: 0;
-
-      li {
-        font-size: 12px;
-        list-style: none;
-      }
-
-      .picture {
-        width: 22px;
-        height: 22px;
-        border: 1px solid #ccc;
-      }
-    }
-  }
-
-  /*
-   * affix header
-   */
-  header.affix {
-    // show logo link
-    div.title-logo-container {
-      display: unset;
-      margin-right: 6px;
-      margin-left: -12px;
-    }
-    // hide authors in affix
-    .authors {
-      display: none !important;
-    }
-  }
-}
+.growi.main-container {
+  header {
+    div.title-logo-container {
+      display: none; // hide in default
+
+      a {
+        // centering
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+
+        img {
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    ul.authors {
+      padding-left: 1.5em;
+      margin: 0;
+
+      li {
+        font-size: 12px;
+        list-style: none;
+      }
+
+      .picture {
+        width: 22px;
+        height: 22px;
+        border: 1px solid #ccc;
+
+        &.picture-xs {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+  }
+
+  /*
+   * affix header
+   */
+  header:not(.affix) {
+    .only-affix {
+      display: none !important;
+    }
+  }
+  header.affix {
+    .not-affix {
+      display: none !important;
+    }
+
+    // show logo link
+    div.title-logo-container {
+      display: unset;
+      margin-right: 6px;
+      margin-left: -12px;
+    }
+    // hide authors in affix
+    .authors {
+      padding-left: 0.5em;
+    }
+  }
+}

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

@@ -17,8 +17,8 @@
 
       <ul class="authors hidden-sm hidden-xs text-nowrap">
         <li>
-          <div class="d-flex align-items-center">
-            <a class="m-r-5" href="{{ userPageRoot(page.creator) }}">
+          <div class="d-flex align-items-center not-affix">
+            <a class="m-r-5" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
               <img src="{{ page.creator|default(author)|picture }}" class="picture img-circle">
             </a>
             <div>
@@ -26,17 +26,33 @@
               <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
             </div>
           </div>
+          <div class="d-flex align-items-center only-affix">
+            <a class="m-r-5" href="{{ userPageRoot(page.creator) }}" data-toggle="tooltip" data-placement="bottom" title="{{ page.creator.name|default(author.name) }}">
+              <img src="{{ page.creator|default(author)|picture }}" class="picture picture-xs img-circle">
+            </a>
+            <div class="ml-auto">
+              <div>Created at <span class="text-muted">{{ page.createdAt|datetz('y/m/d H:i') }}</span></div>
+            </div>
+          </div>
         </li>
         <li class="m-t-5">
-          <div class="d-flex align-items-center">
-            <a class="m-r-5" href="{{ userPageRoot(page.revision.author) }}">
-              <img src="{{ page.revision.author|default(author)|picture }}" class="picture img-circle">
+          <div class="d-flex align-items-center not-affix">
+            <a class="m-r-5" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
+              <img src="{{ author|picture }}" class="picture img-circle">
             </a>
             <div>
-              <div>Updated by <a href="{{ userPageRoot(page.revision.author) }}">{{ page.revision.author.name|default(author.name) }}</a></div>
+              <div>Updated by <a href="{{ userPageRoot(page.revision.author) }}">{{ author.name }}</a></div>
               <div class="text-muted">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
             </div>
           </div>
+          <div class="d-flex align-items-center only-affix">
+            <a class="m-r-5" href="{{ userPageRoot(author) }}" data-toggle="tooltip" data-placement="bottom" title="{{ author.name }}">
+              <img src="{{ author|picture }}" class="picture picture-xs img-circle">
+            </a>
+            <div class="ml-auto">
+              <div>Updated at <span class="text-muted">{{ page.updatedAt|datetz('y/m/d H:i') }}</span></div>
+            </div>
+          </div>
         </li>
       </ul>
       {% endif %}