Convert panels to cards

ltb-project · Jul 9, 2024 · 95c023a · 95c023a
1 parent dcec3f5
commit 95c023a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 34 deletions.
diff --git a/htdocs/css/service-desk.css b/htdocs/css/service-desk.css
@@ -10,11 +10,7 @@ a, a:hover {
   text-decoration: none;
 }
 
-.panel, .alert, .navbar-wrapper {
-  box-shadow:0 3px 6px rgba(0,0,0,.25);
-}
-
-.panel {
+.card {
   background-color:#fff;
   background-color:rgba(255,255,255,0.8);
 }

diff --git a/templates/display.tpl b/templates/display.tpl
@@ -1,15 +1,15 @@
 <div class="row">
     <div class="display col-md-6">
 
-        <div class="panel panel-info">
-            <div class="panel-heading text-center">
-                <p class="panel-title">
+        <div class="card mb-3 shadow card-info">
+            <div class="card-header text-center">
+                <p class="card-title">
                     <i class="fa fa-fw fa-{$attributes_map.{$card_title}.faclass}"></i>
                     {$entry.{$attributes_map.{$card_title}.attribute}.0}
                 </p>
             </div>
 
-            <div class="panel-body">
+            <div class="card-body">
 
                 <div class="table-responsive">
                 <table class="table table-striped table-hover">
@@ -45,15 +45,15 @@
             </div>
         </div>
 
-        <div class="panel panel-info">
-            <div class="panel-heading text-center">
-                <p class="panel-title">
+        <div class="card mb-3 shadow card-info">
+            <div class="card-header text-center">
+                <p class="card-title">
                     <i class="fa fa-fw fa-info-circle"></i>
                     {$msg_accountstatus}
                 </p>
             </div>
 
-            <div class="panel-body">
+            <div class="card-body">
 
                 <div class="table-responsive">
                 <table class="table table-striped table-hover">
@@ -100,15 +100,15 @@
     <div class="col-md-6">
 
         {if $use_checkpassword}
-        <div class="panel panel-info">
-            <div class="panel-heading text-center">
-                <p class="panel-title">
+        <div class="card mb-3 shadow card-info">
+            <div class="card-header text-center">
+                <p class="card-title">
                     <i class="fa fa-fw fa-check-circle"></i>
                     {$msg_checkpassword}
                 </p>
             </div>
 
-             <div class="panel-body">
+             <div class="card-body">
 
                  <form id="checkpassword" method="post" action="index.php?page=checkpassword">
                      {if $checkpasswordresult eq 'passwordrequired'}
@@ -138,15 +138,15 @@
         {/if}
 
         {if $use_resetpassword}
-        <div class="panel panel-info">
-            <div class="panel-heading text-center">
-                <p class="panel-title">
+        <div class="card mb-3 shadow card-info">
+            <div class="card-header text-center">
+                <p class="card-title">
                     <i class="fa fa-fw fa-repeat"></i>
                     {$msg_resetpassword}
                 </p>
             </div>
 
-             <div class="panel-body">
+             <div class="card-body">
 
                  <form id="resetpassword" method="post" action="index.php?page=resetpassword">
                      {if $resetpasswordresult eq 'passwordrequired'}
@@ -211,15 +211,15 @@
         {/if}
 
         {if $isLocked}
-        <div class="panel panel-danger">
-            <div class="panel-heading text-center">
-                <p class="panel-title">
+        <div class="card mb-3 shadow card-danger">
+            <div class="card-header text-center">
+                <p class="card-title">
                     <i class="fa fa-fw fa-exclamation-triangle"></i>
                     {$msg_accountlocked}
                 </p>
             </div>
 
-             <div class="panel-body">
+             <div class="card-body">
                  {if $unlockDate}
                  <p>{$msg_unlockdate} {$unlockDate|date_format:{$date_specifiers}}</p>
                  {/if}
@@ -241,16 +241,16 @@
         {/if}
 
         {if !$isLocked}
-        <div class="panel panel-success">
-            <div class="panel-heading text-center">
-                <p class="panel-title">
+        <div class="card mb-3 shadow card-success">
+            <div class="card-header text-center">
+                <p class="card-title">
                     <i class="fa fa-fw fa-check-square-o"></i>
                     {$msg_accountunlocked}
                 </p>
             </div>
 
              {if $use_lockaccount}
-             <div class="panel-body">
+             <div class="card-body">
                  <form id="lockaccount" method="post" action="index.php?page=lockaccount">
                      {if $lockaccountresult eq 'ldaperror'}
                      <div class="alert alert-danger"><i class="fa fa-fw fa-exclamation-triangle"></i> {$msg_accountnotlocked}</div>
@@ -268,9 +268,9 @@
         {/if}
 
         {if $isExpired}
-        <div class="panel panel-danger">
-            <div class="panel-heading text-center">
-                <p class="panel-title">
+        <div class="card mb-3 shadow card-danger">
+            <div class="card-header text-center">
+                <p class="card-title">
                     <i class="fa fa-fw fa-exclamation-triangle"></i>
                     {$msg_passwordexpired}
                 </p>

diff --git a/templates/index.tpl b/templates/index.tpl
@@ -1,7 +1,7 @@
 {include file="header.tpl"}
 
-<div class="panel panel-success">
-<div class="panel-body">
+<div class="card mb-3 shadow card-success">
+<div class="card-body">
 
 {include file="menu.tpl"}