WIP: reconstruct layouts

* search

lib/views/layout/layout.html

@@ -112,7 +112,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
       {% if 'crowi-plus' === layoutType() %}growi{% endif %}"
   data-me="{{ user._id.toString() }}"
   data-plugin-enabled="{{ isEnabledPlugins() }}"
- {% block html_base_attr %}{% endblock %}
+  {% block html_base_attr %}{% endblock %}
   data-csrftoken="{{ csrf() }}"
   data-current-username="{% if user %}{{ user.username }}{% endif %}"
  >

lib/views/search.html

@@ -1,16 +1,23 @@
-{% extends 'layout-growi/base/layout.html' %}
+{% extends 'layout/layout.html' %}
 
-{% block main_css_class %}search-page{% endblock %}
 {% block html_base_attr %}
   data-spy="scroll"
   data-target="#search-result-list"
 {% endblock %}
 
-{% block html_title %}Search {% endblock %}
 
-{% block content_main %}
+{% block layout_main %}
+<div class="container-fluid">
 
-<div class="" id="search-page">
-</div>
+  <div class="row">
+    <div id="main" class="main m-t-15 col-md-12 search-page">
+      <div class="" id="search-page"></div>
+    </div>
+  </div>
 
-{% endblock %}
+</div><!-- /.container-fluid -->
+
+<footer class="footer">
+  {% include 'widget/system-version.html' %}
+</footer>
+{% endblock %} {# layout_main #}

resource/js/components/SearchPage.js

@@ -91,14 +91,10 @@ export default class SearchPage extends React.Component {
   render() {
     return (
       <div>
-        <div className="header-wrap">
-          <header>
-            <SearchForm
-              onSearchFormChanged={this.search}
-              keyword={this.state.searchingKeyword}
-              />
-          </header>
-        </div>
+        <SearchForm
+          onSearchFormChanged={this.search}
+          keyword={this.state.searchingKeyword}
+          />
 
         <SearchResult
           crowi={this.props.crowi} crowiRenderer={this.props.crowiRenderer}

resource/js/components/SearchPage/SearchResult.js

@@ -189,7 +189,7 @@ export default class SearchResult extends React.Component {
       deletionModeButtons =
       <div className="btn-group">
         <button type="button" className="btn btn-rounded btn-default btn-xs" onClick={() => this.handleDeletionModeChange()}>
-          <i className="icon-action-undo"/> Cancel
+          <i className="icon-ban"/> Cancel
         </button>
         <button type="button" className="btn btn-rounded btn-danger btn-xs" onClick={() => this.showDeleteConfirmModal()} disabled={this.state.selectedPages.size == 0}>
           <i className="icon-trash"/> Delete
@@ -230,7 +230,7 @@ export default class SearchResult extends React.Component {
               onClick={() => this.toggleCheckbox(page)} />
             }
           <div className="page-list-option">
-            <a href={page.path}><i className="fa fa-sign-in" /></a>
+            <a href={page.path}><i className="icon-login" /></a>
           </div>
         </Page>
       );
@@ -255,7 +255,7 @@ export default class SearchResult extends React.Component {
                 {allSelectCheck}
               </div>
               <div className="search-result-meta">
-                <i className="icon-bulb" /> Found {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"
+                <i className="icon-magnifier" /> Found {this.props.searchResultMeta.total} pages with "{this.props.searchingKeyword}"
               </div>
               <div className="clearfix"></div>
               <div className="page-list">

resource/styles/scss/_search.scss

@@ -105,10 +105,11 @@
 
   .search-result-list {
     nav {
+      padding-right: 0;
       &.affix {
         top: 8px;
-        width: 32%;
-        padding-right: 0;
+        width: 33%;
+        padding-right: 5px;
         padding-bottom: 50px;
         height: 100%;
         overflow-y: scroll;
@@ -126,7 +127,7 @@
     }
 
     .search-result-meta {
-      margin-bottom: 16px;
+      margin-bottom: 10px;
       font-weight: bold;
     }
 
@@ -142,6 +143,7 @@
     .search-result-page {
       > h2 {
         font-size: 20px;
+        line-height: 1em;
       }
       &:first-child > h2 {
         margin-top: 0;