WIP: reconstruct layouts

* on-edit

lib/views/widget/not_found_tabs.html

@@ -1,9 +1,14 @@
 <ul class="nav nav-tabs hidden-print">
-  <li class="active"><a href="#revision-body" data-toggle="tab">{{ t('List View') }}</a></li>
+  <li class="nav-main-left-tab active">
+    <a href="#revision-body" data-toggle="tab">
+      <i class="icon-notebook"></i> List
+    </a>
+  </li>
 
-  <li>
+  <li class="nav-main-left-tab">
     <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Create') }}
     </a>
   </li>
+
 </ul>

lib/views/widget/page_tabs.html

@@ -4,13 +4,13 @@
   {#
     Left Tabs
   #}
-  <li class=" {% if not req.body.pageForm %}active{% endif %}" data-toggle="tooltip">
+  <li class="nav-main-left-tab {% if not req.body.pageForm %}active{% endif %}">
     <a href="#revision-body" data-toggle="tab">
-    <i class="icon-control-play"></i> View
+      <i class="icon-control-play"></i> View
     </a>
   </li>
 
-  <li {% if req.body.pageForm %}class="active"{% endif %}>
+  <li class="nav-main-left-tab {% if req.body.pageForm %}active{% endif %}">
     <a {% if user %}href="#edit-form" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
       <i class="icon-note"></i> {{ t('Edit') }}
     </a>

resource/styles/scss/_layout.scss

@@ -70,6 +70,21 @@
 } // }}}
 
 
+// fix tab width to 95 pixels
+// see also '_on-edit.scss'
+$nav-main-left-tab-width: 95px;
+.nav.nav-tabs {
+  .nav-main-left-tab {
+    width: $nav-main-left-tab-width;
+    text-align: center;
+    a {
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}
+
+
 .crowi.single { // {{{
 } // }}}
 

resource/styles/scss/_on-edit.scss

@@ -87,12 +87,16 @@ body.on-edit {
   }
 
   .row.bg-title {
+    $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin
+
     position: absolute;
     z-index: 1;
-    left: 190px;
-    min-width: calc(100% - 190px);
+    left: $left-margin;
+    min-width: calc(100% - #{$left-margin});
+
     // for crowi layout
-    > .col-md-9 {
+    > .col-md-9, .col-xs-12 {
+      padding: 0;
       width: 100%;
     }