Style the tabs with bootstrap.

zopefoundation · May 17, 2018 · fc43778 · fc43778
1 parent f4023cb
commit fc43778
Showing 1 changed file with 21 additions and 69 deletions.
diff --git a/src/App/dtml/manage_tabs.dtml b/src/App/dtml/manage_tabs.dtml
@@ -12,87 +12,39 @@
 </dtml-if>
 </dtml-in>
 
-
-<table cellpadding="0" cellspacing="0" width="100%" border="0">
-
-<tr>
-  <td bgcolor="#000000" rowspan="5" width="1%"></td>
-</tr>
-
-<tr>
-<dtml-in manage_options>
-<dtml-if "_['sequence-index']==a_">
-  <td bgcolor="#ffffff" rowspan="2"></td>
-  <td></td>
-  <td bgcolor="#ffffff" rowspan="2"></td>
-  <td bgcolor="#000000" rowspan="4">&nbsp;</td>
-<dtml-else>
-  <td bgcolor="#efefef" rowspan="2"></td>
-  <td bgcolor="#efefef"><span style="font-size:10%;">&nbsp;</span></td>
-  <td bgcolor="#efefef" rowspan="2"></td>
-  <td bgcolor="#000000" rowspan="4">&nbsp;</td>
-</dtml-if>
-</dtml-in>
-</tr>
-<tr>
-<dtml-in manage_options mapping>
-<dtml-let s_item=sequence-item s_index=sequence-index>
-<dtml-if "s_index==a_">
-  <td bgcolor="#ffffff" valign="bottom" class="tab-small"
-   align="center"><font face="Verdana, Arial, Helvetica"
-   size="1" color="#000000">&nbsp;<a <dtml-if "s_item.get('action')"
-   >href="&dtml-action;"<dtml-else
-   >href="<dtml-var "REQUEST.URL1" html_quote>"</dtml-if
-   ><dtml-if "s_item.get('target')"> target="&dtml-target;"</dtml-if
-   >><span style="color: #000000;"><strong><dtml-var "s_item['label']"
-   ></strong></span></a>&nbsp;</font></td>
-<dtml-else>
-  <td bgcolor="#efefef" valign="bottom" class="tab-small"
-   align="center"><font face="Verdana, Arial, Helvetica"
-   size="1" color="#000000">&nbsp;<a <dtml-if "s_item.get('action')"
-   >href="&dtml-action;"<dtml-else
-   >href="<dtml-var "REQUEST.URL1" html_quote>"</dtml-if
-   ><dtml-if "s_item.get('target')"> target="&dtml-target;"</dtml-if
-   >><span style="color: #000000;"><strong><dtml-var "s_item['label']"
-   ></strong></span></a>&nbsp;</font></td>
-</dtml-if>
-</dtml-let>
-</dtml-in>
-</tr>
-<tr>
-<dtml-in manage_options>
-<dtml-if "_['sequence-index']==a_">
-  <td colspan="3" bgcolor="#ffffff"><span style="font-size:30%;">&nbsp;</span></td>
-<dtml-else>
-  <td colspan="3" bgcolor="#c0c0c0"><span style="font-size:30%;">&nbsp;</span></td>
-</dtml-if>
-</dtml-in>
-</tr>
-</table>
+  <nav role="navigation">
+    <ul class="nav nav-pills nav-fill">
+      <dtml-in manage_options mapping>
+        <dtml-let s_item=sequence-item s_index=sequence-index>
+          <li class="nav-item">
+            <a <dtml-if "s_index==a_">class="nav-link active"<dtml-else
+              >class="nav-link"</dtml-if>
+               <dtml-if "s_item.get('action')"
+               >href="&dtml-action;"<dtml-else
+               >href="<dtml-var "REQUEST.URL1" html_quote>"</dtml-if
+               ><dtml-if "s_item.get('target')"> target="&dtml-target;"</dtml-if
+               >><dtml-var "s_item['label']"></a>
+          </li>
+        </dtml-let>
+      </dtml-in>
+    </ul>
+  </nav>
 </dtml-if>
 
 <dtml-unless MANAGE_TABS_NO_BANNER>
-  <br />
-  <table width="100%" cellspacing="0" cellpadding="2" border="0">
-  <tr class="location-bar">
-    <td align="left" valign="top">
-    <div class="std-text">
+  <p>
     <strong>
     <dtml-if meta_type>
       &dtml-meta_type;
     <dtml-else>
     Object
     </dtml-if>
-    at <dtml-var expr="tabs_path_default(REQUEST)">
     </strong>
+    at <dtml-var expr="tabs_path_default(REQUEST)">
     <dtml-if wl_isLocked>
-      Locked
+      <span class="badge badge-warning">Locked</span>
     </dtml-if wl_isLocked>
-    </div>
-    </td>
-  </tr>
-  </table>
-
+  </p>
 </dtml-unless>
 
 <dtml-if manage_tabs_message>