ソースを参照

Got something working. Just experiencing some problems in IE and Edge (ugh!).

jalbr74 7 年 前
コミット
6a9b78c598

+ 32 - 8
server/src/main/webapp/WEB-INF/jsp/admin-dashboard.jsp

@@ -55,8 +55,10 @@
     <div id="centerbody">
     <div id="centerbody">
         <div id="page-content-title"><pwm:display key="Title_Dashboard" bundle="Admin"/></div>
         <div id="page-content-title"><pwm:display key="Title_Dashboard" bundle="Admin"/></div>
         <%@ include file="fragment/admin-nav.jsp" %>
         <%@ include file="fragment/admin-nav.jsp" %>
-        <div id="DashboardTabContainer" data-dojo-type="dijit.layout.TabContainer" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true">
-            <div id="StatusTab" data-dojo-type="dijit.layout.ContentPane" title="Status" class="tabContent">
+        <div id="DashboardTabContainer" class="tab-container" style="width: 100%; height: 100%;" data-dojo-props="doLayout: false, persist: true">
+            <input name="tabs" type="radio" id="tab-1" checked="checked" class="input"/>
+            <label for="tab-1" class="label">Status</label>
+            <div id="StatusTab" class="tab-content-pane" title="Status" >
                 <table class="nomargin">
                 <table class="nomargin">
                     <tr>
                     <tr>
                         <td class="key">
                         <td class="key">
@@ -150,7 +152,10 @@
                     <div class="noticebar">Events rates are per minute.  <pwm:display key="Notice_DynamicRefresh" bundle="Admin"/></div>
                     <div class="noticebar">Events rates are per minute.  <pwm:display key="Notice_DynamicRefresh" bundle="Admin"/></div>
                 </div>
                 </div>
             </div>
             </div>
-            <div id="HealthTab" data-dojo-type="dijit.layout.ContentPane" title="Health" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-2" checked="checked" class="input"/>
+            <label for="tab-2" class="label">Health</label>
+            <div id="HealthTab" class="tab-content-pane" title="Health">
                 <div id="healthBody">
                 <div id="healthBody">
                     <div class="WaitDialogBlank"></div>
                     <div class="WaitDialogBlank"></div>
                 </div>
                 </div>
@@ -160,7 +165,10 @@
                     <a href="<pwm:context/>/public/health.jsp"><pwm:context/>/public/health.jsp</a>
                     <a href="<pwm:context/>/public/health.jsp"><pwm:context/>/public/health.jsp</a>
                 </div>
                 </div>
             </div>
             </div>
-            <div id="AboutTab" data-dojo-type="dijit.layout.ContentPane" title="<pwm:display key="Title_About" bundle="Admin"/>" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-3" checked="checked" class="input"/>
+            <label for="tab-3" class="label"><pwm:display key="Title_About" bundle="Admin"/></label>
+            <div id="AboutTab" class="tab-content-pane" title="<pwm:display key="Title_About" bundle="Admin"/>">
                 <div style="max-height: 400px; overflow: auto;">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                     <table class="nomargin">
                         <% for (final DisplayElement displayElement : appDashboardData.getAbout()) { %>
                         <% for (final DisplayElement displayElement : appDashboardData.getAbout()) { %>
@@ -221,7 +229,10 @@
                     </table>
                     </table>
                 </div>
                 </div>
             </div>
             </div>
-            <div id="ServicesTab" data-dojo-type="dijit.layout.ContentPane" title="Services" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-4" checked="checked" class="input"/>
+            <label for="tab-4" class="label">Services</label>
+            <div id="ServicesTab" class="tab-content-pane" title="Services">
                 <table class="nomargin">
                 <table class="nomargin">
                     <tr>
                     <tr>
                         <th style="font-weight:bold;">
                         <th style="font-weight:bold;">
@@ -270,7 +281,10 @@
                     <% } %>
                     <% } %>
                 </table>
                 </table>
             </div>
             </div>
-            <div id="LocalDBTab" data-dojo-type="dijit.layout.ContentPane" title="LocalDB" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-5" checked="checked" class="input"/>
+            <label for="tab-5" class="label">LocalDB</label>
+            <div id="LocalDBTab" class="tab-content-pane" title="LocalDB">
                 <div style="max-height: 400px; overflow: auto;">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                     <table class="nomargin">
                         <% for (final DisplayElement displayElement : appDashboardData.getLocalDbInfo()) { %>
                         <% for (final DisplayElement displayElement : appDashboardData.getLocalDbInfo()) { %>
@@ -309,7 +323,10 @@
                 <% } %>
                 <% } %>
                 </div>
                 </div>
             </div>
             </div>
-            <div id="JavaTab" data-dojo-type="dijit.layout.ContentPane" title="Java" class="tabContent">
+
+            <input name="tabs" type="radio" id="tab-6" checked="checked" class="input"/>
+            <label for="tab-6" class="label">Java</label>
+            <div id="JavaTab" class="tab-content-pane" title="Java">
                 <table class="nomargin">
                 <table class="nomargin">
                     <% for (final DisplayElement displayElement : appDashboardData.getJavaAbout()) { %>
                     <% for (final DisplayElement displayElement : appDashboardData.getJavaAbout()) { %>
                     <% request.setAttribute("displayElement", displayElement); %>
                     <% request.setAttribute("displayElement", displayElement); %>
@@ -361,8 +378,11 @@
                 </div>
                 </div>
                 <% } %>
                 <% } %>
             </div>
             </div>
+
             <% if (!JavaHelper.isEmpty(appDashboardData.getNodeData())) { %>
             <% if (!JavaHelper.isEmpty(appDashboardData.getNodeData())) { %>
-            <div id="Status" data-dojo-type="dijit.layout.ContentPane" title="Nodes" class="tabContent">
+            <input name="tabs" type="radio" id="tab-7" checked="checked" class="input"/>
+            <label for="tab-7" class="label">Nodes</label>
+            <div id="Status" class="tab-content-pane" title="Nodes">
                 <div style="max-height: 400px; overflow: auto;">
                 <div style="max-height: 400px; overflow: auto;">
                     <table class="nomargin">
                     <table class="nomargin">
                         <tr>
                         <tr>
@@ -411,6 +431,8 @@
                 </div>
                 </div>
             </div>
             </div>
             <% } %>
             <% } %>
+
+            <div class="tab-end"></div>
         </div>
         </div>
     </div>
     </div>
     <div class="push"></div>
     <div class="push"></div>
@@ -450,6 +472,8 @@
         });
         });
     </script>
     </script>
 </pwm:script>
 </pwm:script>
+
+<link rel="stylesheet" type="text/css" href="<pwm:url url='/public/resources/tab-container.css' addContext="true"/>"/>
 <%@ include file="/WEB-INF/jsp/fragment/footer.jsp" %>
 <%@ include file="/WEB-INF/jsp/fragment/footer.jsp" %>
 <pwm:script-ref url="/public/resources/js/admin.js"/>
 <pwm:script-ref url="/public/resources/js/admin.js"/>
 </body>
 </body>

+ 86 - 0
server/src/main/webapp/public/resources/tab-container.css

@@ -0,0 +1,86 @@
+.tab-container * {
+    box-sizing: border-box;
+}
+
+.tab-container {
+    box-shadow: 0 48px 80px -32px rgba(0,0,0,0.3);
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 700px;
+    position: relative;
+}
+
+.input {
+    position: absolute;
+    opacity: 0;
+}
+
+.tab-container > .label {
+    background: #f6f9f8;
+    border: 1px solid #dae1e1;
+    border-bottom: transparent;
+    border-radius: 4px 4px 0 0;
+    color: #7f7f7f;
+    cursor: pointer;
+    font-size: 15px;
+    margin-left: 5px;
+    padding: 6px 12px;
+    transition: background 0.1s, color 0.1s;
+    width: 100%;
+}
+
+.tab-container > .label:hover {
+    /*background: #d8d8d8;*/
+    color: #01a9e7;
+    border-top-color: #01a9e7;
+    border-left-color: #01a9e7;
+    border-right-color: #01a9e7;
+}
+
+.tab-container > .label:active {
+    /*background: #ccc;*/
+}
+
+.tab-container > .input:focus + .label {
+    /*box-shadow: inset 0px 0px 0px 3px #2aa1c0;*/
+    z-index: 1;
+}
+
+.tab-container > .input:checked + .label {
+    background: #fff;
+    border: 1px solid #6a6f71;
+    border-bottom-color: transparent;
+    color: #000;
+    margin-bottom: -1px;
+    z-index: 100;
+}
+
+@media (min-width: 600px) {
+    .tab-container > .label {
+        width: auto;
+    }
+}
+
+.tab-content-pane {
+    display: none;
+    padding: 20px 30px 30px;
+    background: #fff;
+}
+
+@media (min-width: 600px) {
+    .tab-content-pane {
+        order: 99;
+    }
+}
+
+.input:checked + .label + .tab-content-pane {
+    display: block;
+}
+
+.tab-container > .tab-end {
+    border-bottom: 1px solid #6a6f71;
+    /*position: absolute;*/
+    /*top: 30px;*/
+    left: 0;
+    width: 100%;
+}