Kaynağa Gözat

[core] Ported utils and admin wizard to Hue 3

Enrico Berti 12 yıl önce
ebeveyn
işleme
abbadc7e4e

+ 1 - 0
.gitignore

@@ -90,3 +90,4 @@ nosetests.xml
 oozie.sql
 tools/jenkins/ext/
 tools/jenkins/oozie.sql
+apps/logs

+ 155 - 163
apps/about/src/about/templates/admin_wizard.mako

@@ -35,203 +35,195 @@ ${ commonheader(_('Quick Start'), "quickstart", user, "100px") | n,unicode }
   </div>
 % endif
 
-<div style="position: absolute;top:110px;right:30px">
-  <a href="http://gethue.com" target="_blank" title="${ _('Visit the Hue website.') }">
-    <img src="/static/art/hue-logo-subtle.png"/>
-  </a>
-</div>
-
 <div class="container-fluid">
   <div class="row-fluid">
-    <h2>
-      % if user.is_superuser:
-        ${ _('Quick Start Wizard') } -
-      % endif
-      Hue ${version}
-    </h2>
-  </div>
+    <div class="card" style="margin-bottom: 100px;">
+      <h2 class="card-heading simple">
+        % if user.is_superuser:
+          ${ _('Quick Start Wizard') } -
+        % endif
+        Hue ${version}
+      </h2>
 
-  % if user.is_superuser:
-  <br/>
+      <div class="card-body">
+          % if user.is_superuser:
+            <br/>
 
-  <div class="row-fluid">
-   <div id="properties" class="section">
-    <ul class="nav nav-tabs">
-      <li class="active"><a href="#step1" class="step">${ _('Step 1:') } <i class="icon-cogs"></i> ${ _('Check Configuration') }</a></li>
-      <li><a href="#step2" class="step">${ _('Step 2:') } <i class="icon-book"></i> ${ _('Examples') }</a></li>
-      <li><a href="#step3" class="step">${ _('Step 3:') } <i class="icon-group"></i> ${ _('Users') }</a></li>
-      <li><a id="lastStep" href="#step4" class="step">${ _('Step 4:') } <i class="icon-flag"></i> ${_('Go!') }</a></li>
-    </ul>
-
-    <div class="steps" >
-      <div id="step1" class="stepDetails">
-      <div class="widget-box">
-        <div class="widget-title">
-          <span class="icon">
-            <i class="icon-th-list"></i>
-          </span>
-          <h5>${ _('Check your current configuration') }</h5>
-        </div>
-        <div class="widget-content">
-          ${ check_config | n,smart_unicode }
-        </div>
-      </div>
+          <div class="row-fluid">
+          <div id="properties" class="section">
+            <ul class="nav nav-tabs" style="margin-bottom: 0">
+              <li class="active"><a href="#step1" class="step">${ _('Step 1:') } <i
+                  class="icon-cogs"></i> ${ _('Check Configuration') }</a></li>
+              <li><a href="#step2" class="step">${ _('Step 2:') } <i class="icon-book"></i> ${ _('Examples') }</a></li>
+              <li><a href="#step3" class="step">${ _('Step 3:') } <i class="icon-group"></i> ${ _('Users') }</a></li>
+              <li><a id="lastStep" href="#step4" class="step">${ _('Step 4:') } <i class="icon-flag"></i> ${_('Go!') }
+              </a></li>
+            </ul>
 
-      <div class="widget-box">
-        <div class="widget-title">
-          <span class="icon">
-            <i class="icon-trash"></i>
-          </span>
-          <h5>${ _('HDFS Trash Configuration') }</h5>
-        </div>
-        <div class="widget-content">
-          <div class="container-fluid">
-          % if trash_enabled:
+          <div class="steps">
+          <div id="step1" class="stepDetails">
+            <div class="card card-tab">
+              <h2 class="card-heading simple">${ _('Check your current configuration') }</h2>
+
+              <div class="card-body">
+              ${ check_config | n,smart_unicode }
+              </div>
+            </div>
+
+          <div class="card card-home card-tab card-tab-bordertop">
+            <h2 class="card-heading simple">${ _('HDFS Trash Configuration') }</h2>
+          <div class="card-body">
+          <p>
+            % if not trash_enabled:
             <h5>${ _('Trash is active.')}</h5>
-          % else:
-          ${ _('You can activate trash collection by setting fs.trash.interval in core-site.xml:')}<br/><br/>
+            % else:
+            ${ _('You can activate trash collection by setting fs.trash.interval in core-site.xml:')}<br/><br/>
             <pre>
   &#60;property&#62;
     &#60;name&#62;fs.trash.interval&#60;/name&#62;
     &#60;value&#62;10060&#60;/value&#62;
   &#60;/property&#62;</pre>
-          % endif
+            % endif
+          </p>
+          </div>
+          </div>
           </div>
-        </div>
-      </div>
-    </div>
 
-      <div id="step2" class="stepDetails hide">
-      <div class="widget-box">
-        <div class="widget-title">
-          <span class="icon">
-            <i class="icon-th-list"></i>
-          </span>
-          <h5>${ _('Install all the application examples') }</h5>
-        </div>
-        <div class="widget-content">
-          <ul>
-          <li>
-            <a href="#" class="installAllBtn" data-loading-text="${ _('Installing...') }">
-             <i class="icon-download-alt"></i> ${ _('All') }
-            </a>
-          </li>
-          </ul>
-        </div>
-      </div>
+          <div id="step2" class="stepDetails hide">
+            <div class="card card-tab card-listcontent">
+              <h2 class="card-heading simple">${ _('Install all the application examples') }</h2>
+
+              <div class="card-body">
+                <p>
+                <ul>
+                  <li>
+                    <a href="#" class="installAllBtn" data-loading-text="${ _('Installing...') }">
+                      <i class="icon-download-alt"></i> ${ _('All') }
+                    </a>
+                  </li>
+                </ul>
+                </p>
+              </div>
+            </div>
 
-      <div class="widget-box">
-        <div class="widget-title">
-          <span class="icon">
-            <i class="icon-th-list"></i>
-          </span>
-          <h5>${ _('Install individual application examples') }</h5>
-        </div>
-        <div class="widget-content">
+          <div class="card card-home card-tab card-tab-bordertop card-listcontent">
+            <h2 class="card-heading simple">${ _('Install individual application examples') }</h2>
+          <div class="card-body">
+            <p>
           <ul>
-        % if 'beeswax' in app_names:
-          <li>
-            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-sample-url="${ url('beeswax:install_examples') }">
-             <i class="icon-download-alt"></i> ${ apps['beeswax'].nice_name }
-            </a>
-          </li>
-        % endif
-        % if 'impala' in app_names:
-          <li>
-            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-sample-url="${ url('impala:install_examples') }">
-             <i class="icon-download-alt"></i> ${ apps['impala'].nice_name }
-            </a>
-          </li>
-        % endif
-        % if 'jobsub' in app_names:
-          <li>
-            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-sample-url="${ url('oozie:install_examples') }">
-              <i class="icon-download-alt"></i> ${ apps['jobsub'].nice_name }
-            </a>
-          </li>
-        % endif
-        % if 'oozie' in app_names:
-          <li>
-            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-sample-url="${ url('oozie:install_examples') }">
-              <i class="icon-download-alt"></i> ${ apps['oozie'].nice_name }
-            </a>
-          </li>
-        % endif
-        % if 'pig' in app_names:
-          <li>
-            <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }" data-sample-url="${ url('pig:install_examples') }">
-             <i class="icon-download-alt"></i> ${ apps['pig'].nice_name }
-            </a>
-          </li>
-        % endif
+          % if 'beeswax' in app_names:
+              <li>
+                <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }"
+                   data-sample-url="${ url('beeswax:install_examples') }">
+                  <i class="icon-download-alt"></i> ${ apps['beeswax'].nice_name }
+                </a>
+              </li>
+          % endif
+          % if 'impala' in app_names:
+              <li>
+                <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }"
+                   data-sample-url="${ url('impala:install_examples') }">
+                  <i class="icon-download-alt"></i> ${ apps['impala'].nice_name }
+                </a>
+              </li>
+          % endif
+          % if 'jobsub' in app_names:
+              <li>
+                <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }"
+                   data-sample-url="${ url('oozie:install_examples') }">
+                  <i class="icon-download-alt"></i> ${ apps['jobsub'].nice_name }
+                </a>
+              </li>
+          % endif
+          % if 'oozie' in app_names:
+              <li>
+                <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }"
+                   data-sample-url="${ url('oozie:install_examples') }">
+                  <i class="icon-download-alt"></i> ${ apps['oozie'].nice_name }
+                </a>
+              </li>
+          % endif
+          % if 'pig' in app_names:
+              <li>
+                <a href="#" class="installBtn" data-loading-text="${ _('Installing...') }"
+                   data-sample-url="${ url('pig:install_examples') }">
+                  <i class="icon-download-alt"></i> ${ apps['pig'].nice_name }
+                </a>
+              </li>
+          % endif
           </ul>
-        </div>
-      </div>
-    </div>
+            </p>
+          </div>
+          </div>
+          </div>
 
-      <div id="step3" class="stepDetails hide">
-      <div class="widget-box">
-        <div class="widget-title">
-          <span class="icon">
-            <i class="icon-th-list"></i>
-          </span>
-          <h5>${ _('Create or import users') }</h5>
-        </div>
-        <div class="widget-content">
-        <a  href="${ url('useradmin.views.list_users') }" target="_blank"><img src="/useradmin/static/art/icon_useradmin_24.png"> ${ _('User Admin') }</a>
-        </div>
-      </div>
+            <div id="step3" class="stepDetails hide">
+              <div class="card card-tab card-listcontent">
+                <h2 class="card-heading simple">${ _('Create or import users') }</h2>
 
-      <div class="widget-box">
-        <div class="widget-title">
-          <span class="icon">
-            <i class="icon-th-list"></i>
-          </span>
-          <h5>${ _('Tours and tutorials') }</h5>
-        </div>
-        <div class="widget-content" style="padding-left: 14px">
-          <label class="checkbox">
-            <input class="updatePreferences" type="checkbox" name="tours_and_tutorials" style="margin-right: 10px" title="${ ('Check to enable the tours and tutorials') }" ${ tours_and_tutorials and "checked" }/>
-            ${ ('Display the "Available Tours" question mark when tours are available for a specific page.') }
-          </label>
-        </div>
-      </div>
-    </div>
+                <div class="card-body">
+                  <p>
+                    <a href="${ url('useradmin.views.list_users') }" target="_blank" style="padding-left: 2px"><img
+                        src="/useradmin/static/art/icon_useradmin_24.png"
+                        style="margin-right: 4px;"> ${ _('User Admin') }</a>
+                  </p>
+                </div>
+              </div>
+
+              <div class="card card-home card-tab card-tab-bordertop card-listcontent">
+                <h2 class="card-heading simple">${ _('Tours and tutorials') }</h2>
 
-      <div id="step4" class="stepDetails hide">
-      <div class="widget-box">
-        <div class="widget-title">
-          <span class="icon">
-            <i class="icon-th-list"></i>
-          </span>
-          <h5>${ _('Use the applications') }</h5>
-        </div>
-        <div class="widget-content">
-          <a href="${ url('desktop.views.home') }" class="step"><i class="icon-home"></i> ${_('Hue Home') }</a>
-        </div>
+                <div class="card-body">
+                  <p>
+                    <label class="checkbox">
+                      <input class="updatePreferences" type="checkbox" name="tours_and_tutorials"
+                             style="margin-right: 10px"
+                             title="${ ('Check to enable the tours and tutorials') }" ${ tours_and_tutorials and "checked" }/>
+                    ${ ('Display the "Available Tours" question mark when tours are available for a specific page.') }
+                    </label>
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            <div id="step4" class="stepDetails hide">
+              <div class="card card-tab card-listcontent">
+                <h2 class="card-heading simple">${ _('Use the applications') }</h2>
+
+                <div class="card-body">
+                  <p>
+                    <a href="${ url('desktop.views.home') }" class="step"><i class="icon-home"></i> ${_('Hue Home') }
+                    </a>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          </div>
+          </div>
+          % endif
       </div>
     </div>
-    </div>
+  </div>
 
-    <div class="form-actions" style="position:fixed;bottom:0;margin:0;margin-left:-20px;width:100%">
-      <a id="backBtn" class="btn disabled">${ _('Back') }</a>
-      <a id="nextBtn" class="btn btn-primary disable-feedback">${ _('Next') }</a>
-    </div>
-   </div>
+  <div class="form-actions" style="position:fixed;bottom:0;margin:0;margin-left:-20px;width:100%">
+    <a id="backBtn" class="btn disabled">${ _('Back') }</a>
+    <a id="nextBtn" class="btn btn-primary disable-feedback">${ _('Next') }</a>
   </div>
-  % endif
+
 </div>
 
 % if user.is_superuser:
 <style type="text/css">
   .steps {
     min-height: 300px;
-    margin-bottom: 80px;
   }
 
   input[type=submit] {
     margin-left: 50px;
   }
+
 </style>
 
 <script src="/static/ext/js/routie-0.3.0.min.js" type="text/javascript" charset="utf-8"></script>

+ 8 - 4
desktop/core/src/desktop/templates/404.mako

@@ -20,10 +20,14 @@ from django.utils.translation import ugettext as _
 ${ commonheader(_('Not Found'), "", user) | n,unicode }
 
   <div class="container-fluid">
-    <h1>${_('Page not found')}</h1>
-    <p>${_("We're sorry, but the requested page could not be found:")}</p>
-    <br/>
-    <code>${uri}</code>
+    <div class="row-fluid">
+      <div class="span12 well">
+        <div class="hero-unit">
+          <h1>${_('Page not found.')}</h1>
+          <p>${_("We're sorry, but the requested page could not be found:")} <code>${uri}</code></p>
+        </div>
+      </div>
+    </div>
   </div>
 
 ${ commonfooter(messages) | n,unicode }

+ 43 - 36
desktop/core/src/desktop/templates/500.mako

@@ -22,46 +22,53 @@ from django.utils.translation import ugettext as _
 
 ${ commonheader(_('Error'), "", user) | n,unicode }
 
-  <div class="container-fluid">
-    <h1>${_('Server Error (500)')}</h1>
-    <p>${_("Sorry, there's been an error. An email was sent to your administrators. Thank you for your patience.")}</p>
-    <div class="details">
-    % if traceback:
-      <a href="javascript:toggleDisplay('#traceback');" title="${ _('See the stacktrace') }"><i class="icon-share-alt"></i> ${_('More Info')}</a>
-      % if user.is_superuser:
-        &nbsp;
-        <a href="/logs" target="_new" title="${ _('View server logs') }"><i class="icon-tasks"></i> ${_('View Logs')}</a>
-      % endif
-      <br />
-      <br />
-      <div id="traceback" class="hide">
-        <table class="table table-striped" style="background: white; border: 1px solid #DDDDDD;">
-          <thead>
-            <tr>
-              <td>${_("File Name")}</td>
-              <td>${_("Line Number")}</td>
-            <td>${_("Function Name")}</td>
-            </tr>
-          </thead>
-          <tbody>
-            % for (file_name, line_number, function_name, text) in traceback:
-              <tr>
-                <td>${smart_unicode(file_name) or ""}</td>
-                <td>${smart_unicode(line_number) or ""}</td>
-                <td>${smart_unicode(function_name) or ""}</td>
-              </tr>
-            % endfor
-          </tbody>
-        </table>
+ <div class="container-fluid">
+    <div class="row-fluid">
+      <div class="span12 well">
+        <div class="hero-unit">
+          <h1>${_('Server Error (500)')}</h1>
+          <p>${_("Sorry, there's been an error. An email was sent to your administrators. Thank you for your patience.")}</p>
+          <div class="details">
+          % if traceback:
+            <a href="javascript:toggleDisplay('#traceback');" title="${ _('See the stacktrace') }"><i class="icon-share-alt"></i> ${_('More Info')}</a>
+            % if user.is_superuser:
+              &nbsp;
+              <a href="/logs" target="_new" title="${ _('View server logs') }"><i class="icon-tasks"></i> ${_('View Logs')}</a>
+            % endif
+            <br />
+            <br />
+            <div id="traceback" class="hide">
+              <table class="table table-striped" style="background: white; border: 1px solid #DDDDDD;">
+                <thead>
+                  <tr>
+                    <td>${_("File Name")}</td>
+                    <td>${_("Line Number")}</td>
+                  <td>${_("Function Name")}</td>
+                  </tr>
+                </thead>
+                <tbody>
+                  % for (file_name, line_number, function_name, text) in traceback:
+                    <tr>
+                      <td>${smart_unicode(file_name) or ""}</td>
+                      <td>${smart_unicode(line_number) or ""}</td>
+                      <td>${smart_unicode(function_name) or ""}</td>
+                    </tr>
+                  % endfor
+                </tbody>
+              </table>
+            </div>
+          % else:
+            % if user.is_superuser:
+              <a href="/logs" target="_new" title="${ _('View server logs') }"><i class="icon-tasks"></i> ${_('View Logs')}</a>
+            % endif
+          % endif
+          </div>
+        </div>
       </div>
-    % else:
-      % if user.is_superuser:
-        <a href="/logs" target="_new" title="${ _('View server logs') }"><i class="icon-tasks"></i> ${_('View Logs')}</a>
-      % endif
-    % endif
     </div>
   </div>
 
+
   <script type="text/javascript">
     function toggleDisplay(selector) {
       $(selector).slideToggle(500);

+ 1 - 3
desktop/core/src/desktop/templates/check_config.mako

@@ -18,7 +18,6 @@ from desktop.lib.conf import BoundConfig
 from django.utils.translation import ugettext as _
 %>
 
-<div class="container-fluid">
     ${_('Configuration files located in')} <code>${conf_dir}</code>
     <br/><br/>
     % if error_list:
@@ -48,5 +47,4 @@ from django.utils.translation import ugettext as _
     </table>
     % else:
       <h5>${_('All OK. Configuration check passed.')}</h5>
-    % endif
-</div>
+    % endif

+ 13 - 19
desktop/core/src/desktop/templates/dump_config.mako

@@ -44,34 +44,27 @@ ${layout.menubar(section='dump_config')}
 
     <div class="container-fluid">
       <div class="row-fluid">
-
+        <div class="well">
         ${_('Configuration files located in')} <code>${conf_dir}</code>
-        <br/><br/>
-
-        <div class="widget-box">
-          <div class="widget-title">
-            <span class="icon">
-              <i class="icon-th-list"></i>
-            </span>
-            <h5>${_('Installed Applications')}</h5>
-          </div>
-          <div class="widget-content">
+        </div>
+
+        <div class="card card-home">
+            <h2 class="card-heading simple">${_('Installed Applications')}</h2>
+          <div class="card-body">
+            <p>
             <ul id="installedAppsz" class="nav nav-pills">
             % for app in apps:
                 <li><a href="/${app.display_name}">${app.name}</a></li>
             % endfor
             </ul>
+           </p>
           </div>
         </div>
 
-        <div class="widget-box" style="margin-top: 40px">
-          <div class="widget-title">
-            <span class="icon">
-              <i class="icon-th-list"></i>
-            </span>
-            <h5>${_('Configuration Sections and Variables')}</h5>
-          </div>
-          <div class="widget-content">
+        <div class="card card-home">
+            <h2 class="card-heading simple">${_('Configuration Sections and Variables')}</h2>
+          <div class="card-body">
+            <p>
             <ul class="nav nav-tabs">
               % for obj in top_level:
                 <li
@@ -87,6 +80,7 @@ ${layout.menubar(section='dump_config')}
               <br/>
               <br/>
               <br/>
+            </p>
           </div>
         </div>
 

+ 3 - 3
desktop/core/src/desktop/templates/home.mako

@@ -46,7 +46,7 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
   <div class="row-fluid" style="margin-top: 30px">
 
     <div class="span4">
-      <div class="card card-home">
+      <div class="card card-home card-listcontent">
         <h2 class="card-heading simple">${_('Query')}</h2>
 
         <div class="card-body">
@@ -65,7 +65,7 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
     </div>
 
     <div class="span4">
-      <div class="card card-home">
+      <div class="card card-home card-listcontent">
         <h2 class="card-heading simple">${_('Hadoop')}</h2>
 
         <div class="card-body">
@@ -83,7 +83,7 @@ ${ commonheader(_('Home'), "home", user) | n,unicode }
     </div>
 
     <div class="span4">
-      <div class="card card-home">
+      <div class="card card-home card-listcontent">
         <h2 class="card-heading simple">${_('Workflow')}</h2>
 
         <div class="card-body">

+ 34 - 19
desktop/core/src/desktop/templates/logs.mako

@@ -32,6 +32,11 @@ ${layout.menubar(section='log_view')}
     margin: 0;
     padding: 2px;
     border: 0;
+    white-space: pre-wrap;
+  }
+
+  pre.nowrap {
+    white-space: nowrap;
   }
 
   pre.highlighted {
@@ -40,6 +45,7 @@ ${layout.menubar(section='log_view')}
 
   #logs {
     overflow: auto;
+    background-color: #F5F5F5;
   }
 
   #logs pre:first-child {
@@ -56,26 +62,26 @@ ${layout.menubar(section='log_view')}
 </style>
 
 <div class="container-fluid">
-  <%actionbar:render>
-    <%def name="search()">
+  <div class="card">
+    <%actionbar:render>
+      <%def name="search()">
         <input type="text" class="input-xxlarge search-query" placeholder="${_('Search in the logs')}" value="${query}">
-    </%def>
-    <%def name="creation()">
-        <span class="btn-group">
-          <a href="/download_logs" class="btn"><i class="icon-download-alt"></i> ${_('Download entire log as zip')}</a>
-        </span>
-    </%def>
-  </%actionbar:render>
-
-  <% log.reverse() %>
-
-  <div id="logs">
-      % for l in log:
-        <pre>${smart_unicode(l, errors='ignore')}</pre>
-      % endfor
-  </div>
+      </%def>
+      <%def name="creation()">
+        <label class="checkbox" style="display: inline-block; margin-right: 10px"><input id="wrapLogs" type="checkbox" checked="checked">${_('Wrap logs')}</label>
+        <a href="/download_logs" class="btn"><i class="icon-download-alt"></i> ${_('Download entire log as zip')}</a>
+      </%def>
+    </%actionbar:render>
+
+    <% log.reverse() %>
+
+    <div id="logs">
+        % for l in log:
+          <pre>${smart_unicode(l, errors='ignore')}</pre>
+        % endfor
+    </div>
 
-  <br/>
+  </div>
 
 </div>
 
@@ -114,7 +120,7 @@ ${layout.menubar(section='log_view')}
         heightAfter += $(this).outerHeight(true);
       });
       if (_el.height() > ($(window).height() - _el.offset().top - heightAfter)) {
-        _el.css("overflow-y", "auto").height($(window).height() - _el.offset().top - heightAfter);
+        _el.css("overflow-y", "auto").height($(window).height() - _el.offset().top - heightAfter - 30);
       }
     }
 
@@ -140,6 +146,15 @@ ${layout.menubar(section='log_view')}
         $("#logs").scrollTop(0);
       }
     }
+
+    $("#wrapLogs").on("change", function(){
+      if ($(this).is(":checked")){
+        $("pre").removeClass("nowrap");
+      }
+      else {
+        $("pre").addClass("nowrap");
+      }
+    });
   });
 </script>
 

+ 16 - 7
desktop/core/static/css/hue3.css

@@ -974,7 +974,7 @@ div.box {
 }
 
 .table tbody tr:hover td, .table tbody tr:hover th {
-  background-color: #E8F1FB;
+  background-color: #EFEFEF;
 }
 
 .nounderline:hover {
@@ -1229,33 +1229,42 @@ a#advanced-btn:hover {
   padding-top: 4px;
 }
 
-.card-home ul {
+.card-listcontent ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.card-home ul li {
+.card-listcontent ul li {
   margin: 0;
   padding: 0;
 }
 
-.card-home a {
+.card-listcontent a {
   padding: 5px 15px;
   display: block;
   font-size: 14px;
   font-weight: bold;
 }
 
-.card-home a i {
+.card-listcontent a i {
   color: #999999;
 }
 
-.card-home a:hover {
+.card-listcontent a:hover {
   background-color: #EEEEEE;
   text-decoration: none;
 }
 
-.card-home a:hover i {
+.card-listcontent a:hover i {
   color: #333333;
 }
+
+.card-tab {
+  margin-top: 0;
+  border-bottom: 1px solid #D8D8D8;
+}
+
+.card-tab-bordertop {
+   border-top: 1px solid #D8D8D8;
+}