Merge pull request #363 from weseek/fix/362-h1-revision-path

Fix/362 h1 revision path

lib/views/layout-crowi/not_found.html

@@ -7,9 +7,9 @@
 
   <div class="header-wrap">
     <header id="page-header">
-      <div class="flex-title-line">
+      <div>
         <div>
-          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <h1 class="title" id="revision-path"></h1>
           <div id="revision-url" class="url-line"></div>
         </div>
       </div>

lib/views/layout-crowi/page.html

@@ -10,7 +10,7 @@
     <header id="page-header">
       <div class="d-flex align-items-center">
         <div class="title-container">
-          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <h1 class="title" id="revision-path"></h1>
           <div id="revision-url" class="url-line"></div>
         </div>
         {% include '../widget/header-buttons.html' %}

lib/views/layout-crowi/page_list.html

@@ -17,7 +17,7 @@
     <div class="d-flex align-items-center">
       <div class="title-container">
         <div class="d-flex">
-          <h1 class="title flex-item-title" id="revision-path"></h1>
+          <h1 class="title" id="revision-path"></h1>
           {% if false %} {# Disable temporaly -- 2018.03.08 Yuki Takei #}
           {% if searchConfigured() && !isTopPage() && !isTrashPage() %}
           <form id="search-listpage-form" class="m-l-10 input-group search-input-group hidden-xs hidden-sm"

lib/views/layout-growi/widget/header.html

@@ -7,7 +7,7 @@
         </a>
       </div>
       <div class="title-container">
-        <h1 class="title flex-item-title" id="revision-path"></h1>
+        <h1 class="title" id="revision-path"></h1>
         <div id="revision-url" class="url-line"></div>
       </div>
       {% if page %}

resource/js/components/Page/RevisionPath.js

@@ -73,6 +73,9 @@ export default class RevisionPath extends React.Component {
       marginLeft: "0.2em",
       marginRight: "0.2em",
     }
+    const pathSegmentStyle = {
+      wordBreak: 'keep-all'
+    }
     const editButtonStyle = {
       marginLeft: "0.5em",
       padding: "0 2px",
@@ -86,9 +89,10 @@ export default class RevisionPath extends React.Component {
 
       // add elements for page
       afterElements.push(
-        <span key={page.pagePath} className="path-segment">
+        <span key={page.pagePath} className="path-segment" style={pathSegmentStyle}>
           <a href={page.pagePath}>{page.pageName}</a>
-        </span>);
+        </span>
+      );
 
       // add elements for '/'
       afterElements.push(

resource/styles/scss/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin variable-font-size($basesize) {
+  font-size: $basesize;
+  @media(max-width: $screen-lg) {
+    font-size: #{$basesize * 0.9};
+  }
+  @media(max-width: $screen-md) {
+    font-size: #{$basesize * 0.8};
+  }
+  @media(max-width: $screen-sm) {
+    font-size: #{$basesize * 0.7};
+  }
+  @media(max-width: $screen-xs) {
+    font-size: #{$basesize * 0.6};
+  }
+}

resource/styles/scss/_on-edit.scss

@@ -143,13 +143,17 @@ body.on-edit {
 
     background: none;
 
-    h1 {
-      font-size: 20px;
+    h1#revision-path {
+      @include variable-font-size(20px);
       line-height: 1em;
+
+      .d-flex {
+        flex-wrap: nowrap;  // nowrap even if the path is too long
+      }
     }
 
     // hide if screen size is less than smartphone
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: $screen-xs) {
       display: none;
     }
   }

resource/styles/scss/_page.scss

@@ -52,10 +52,19 @@
       }
     }
 
-    h1 {
-      font-size: 28px;
+    .url-line {
+      color: #999;
+      font-size: 1rem;
+    }
+
+    h1#revision-path {
+      @include variable-font-size(28px);
+
       margin-top: 0;
       margin-bottom: 0;
+      .d-flex {
+        flex-wrap: wrap;  // for long page path
+      }
 
       // crowi layout only
       a.last-path {
@@ -68,11 +77,6 @@
 
     }
 
-    .url-line {
-      color: #999;
-      font-size: 1rem;
-    }
-
     // affix
     &.affix {
       width: 100%;
@@ -82,8 +86,8 @@
       z-index: 15; // over the .sidebar
       box-shadow: 0 0px 2px #999;
 
-      h1 {
-        font-size: 1.8em;
+      h1#revision-path {
+        @include variable-font-size(20px);
       }
     }
 

resource/styles/scss/style.scss

@@ -4,6 +4,7 @@
 // import variables
 @import '../agile-admin/inverse/variables';
 @import 'variables';
+@import 'mixins';
 
 @import 'override-bootstrap-variables';