From be3a255c46dc60df5efab95862a6e16e11ee53c8 Mon Sep 17 00:00:00 2001
From: "Hahn Axel (hahn)" <axel.hahn@unibe.ch>
Date: Mon, 26 Feb 2024 16:52:44 +0100
Subject: [PATCH] update layout project overview + phase list

---
 .../deployment/classes/project_gui.class.php  | 139 ++++++++++++------
 public_html/deployment/main.css               |  13 +-
 public_html/deployment/main_new_ui.css        |   5 +-
 public_html/deployment/pages/act_overview.php |  10 +-
 4 files changed, 114 insertions(+), 53 deletions(-)

diff --git a/public_html/deployment/classes/project_gui.class.php b/public_html/deployment/classes/project_gui.class.php
index c995d6d3..b63ad261 100644
--- a/public_html/deployment/classes/project_gui.class.php
+++ b/public_html/deployment/classes/project_gui.class.php
@@ -630,23 +630,48 @@ class projectgui extends project {
     public function renderPhaseInfo() {
         $sRow1 = false;
         $sRow2 = false;
+
+        $renderAdminLTE=new renderadminlte();                    
+
+        $iWidth=12 / count($this->getActivePhases());
         foreach ($this->getActivePhases() as $sPhase) {
-            $sRow1.='<th class="' . $sPhase . ' tdphase">' . $sPhase . '</th>';
-            $sRow2.='<td class="' . $sPhase . '">'
-                    . t('url') . ': <a href="' . $this->_aPrjConfig["phases"][$sPhase]["url"] . '">' . $this->_aPrjConfig["phases"][$sPhase]["url"] . '</a><br>'
-                    . '<br>' . t('deploytimes') . ':<br>';
+            $sRow1.=$renderAdminLTE->addCol(
+                '<table class="nomargin"><tr><th class="' . $sPhase . ' tdphase">' . $sPhase . '</th></tr></table>'
+                ,
+                $iWidth);
+              
+            $sDetails=t('url') . ': <a href="' . $this->_aPrjConfig["phases"][$sPhase]["url"] . '">' . $this->_aPrjConfig["phases"][$sPhase]["url"] . '</a><br>'
+            . '<br>' . t('deploytimes') . ':<br>';
             if (count($this->_getDeploytimes($sPhase))) {
-                $sRow2.=implode("<br>", $this->_getDeploytimes($sPhase));
+                $sDetails.=implode("<br>", $this->_getDeploytimes($sPhase));
             } else {
-                $sRow2.=t('deploytimes-immediately');
+                $sDetails.=t('deploytimes-immediately');
             }
-            $sRow2.='<br>' . $this->renderLink("phase", $sPhase)
+            $sDetails.='<br>' . $this->renderLink("phase", $sPhase)
                     . $this->_renderHosts($sPhase)
                     . '<br>'
                     . $this->_renderFiles($sPhase)
-                    . '</td>';
+                    ;
+
+            $sRow2.=$renderAdminLTE->addCol(
+                $renderAdminLTE->getCard(array (
+                    'class' => $sPhase,
+                    'variant' => '',
+                    'tb-remove' => 1,
+                    'tb-collapse' => 1,
+                    'title' => '',
+                    'tools' => '',
+                    'text' => $sDetails,
+                    'footer' => '',
+                )), 
+                $iWidth
+            );
         }
-        return '<table><thead><tr>' . $sRow1 . '</tr></thead><tbody><tr>' . $sRow2 . '</tr></tbody></table>';
+        return ''
+            .$renderAdminLTE->addRow($sRow1)
+            .$renderAdminLTE->addRow($sRow2)
+            ;
+
     }
 
     /**
@@ -1654,6 +1679,9 @@ class projectgui extends project {
      */
     public function renderVisual() {
         $sReturn = '';
+
+        $renderAdminLTE=new renderadminlte();
+
         $sBarHeightBg = '1.0em';
         $sBarHeight = '0.8em';
         $sContinue = '<span style="font-size: 300%; color:#ace;">&raquo;&raquo;</span><br>';
@@ -1706,45 +1734,62 @@ class projectgui extends project {
                 <div class="details">' . $sDetail . ' </div>
             </div>';
         }
-            $sReturn = '
-            <div class="visualprocess">
-                <div class="process box">
-                    <div class="title">'  . t("versioncontrol") . '</div>
-                    <div class="details">
-                        ' . $sRepoBar . '<br>
-                        ' . t("repositoryinfos") . '<br>
-                        ' // . $this->_aPrjConfig["build"]["type"] 
-                        . preg_replace('/.*\@(.*):.*/', '$1', $this->_aPrjConfig["build"]["url"])
-                        . '<br>(<strong title="' . t('branch-select') . '">' . count($aBranches) . '</strong>)'
-                    . '
-                    </div>
-                </div>
-                
-                <div class="process">
-                    <div class="action">' . $sContinue . t("build-hint-overview") . '<br><br>' . ($this->canAcceptPhase() ? $this->renderLink("build") : '') . '</div>
-                </div>
 
-                
-                <div class="process box">
-                    <div class="title">' . $this->_oHtml->getIcon('package') . t("archive") . '</div>
-                    <div class="details">
-                        ' . $sPackagebar . '<br>
-                        ' . t("packages") . '<br>
-                        (<strong>' . count($this->_getVersionUsage()) . '</strong>)
-                    </div>
-                </div>
-                
-                <div class="process">
-                    <div class="action">'.$sContinue . sprintf(t("queue-hint-overview"), $this->getNextPhase()).'</div>
-                </div>
-                
-                <div class="process phases box">
-                    <div class="title">'  . $this->_oHtml->getIcon('phase') . t("phases") . '</div>
-                    ' . ($sPhaseImg ? $sPhaseImg : '<div class="process">' . t("none") . '</div>') . '
-                </div>
-            </div>
-            <div style="clear:both"></div>
-            ';
+        $sReturn .= ''
+            . '<div class="visualprocess">'
+            . $renderAdminLTE->addRow(
+                ''
+                . $renderAdminLTE->addCol(
+                    $renderAdminLTE->getCard([
+                        'type'=>'',
+                        'variant'=>'outline',
+                        'title'=>'',
+                        'text'=> '<h3>'.t("versioncontrol"). '</h3>' . $sRepoBar . '<br>
+                            ' . t("repositoryinfos") . '<br>
+                            ' // . $this->_aPrjConfig["build"]["type"] 
+                            . preg_replace('/.*\@(.*):.*/', '$1', $this->_aPrjConfig["build"]["url"])
+                            . '<br>(<strong title="' . t('branch-select') . '">' . count($aBranches) . '</strong>)',
+                        ]
+                    ), 2
+                    )
+                . $renderAdminLTE->addCol(
+                    '<div class="action">' . $sContinue . t("build-hint-overview") . '<br><br>' . ($this->canAcceptPhase() ? $this->renderLink("build") : '') . '</div>',
+                    1
+                )
+                . $renderAdminLTE->addCol(
+                    $renderAdminLTE->getCard([
+                        'type'=>'',
+                        'variant'=>'outline',
+                        'title'=>'',
+                        'text'=> '<h3>'.$this->_oHtml->getIcon('package') . t("archive"). '</h3>' 
+                            . '<div class="archive">'
+                                . '<div class="details">'
+                                . $sPackagebar . '<br>' 
+                                . '</div>'
+                                . t("packages") . '<br>'
+                                .'(<strong>' . count($this->_getVersionUsage()) . '</strong>)'
+                            . '</div>'
+                        ]
+                    ), 2
+                    )
+                . $renderAdminLTE->addCol(
+                    '<div class="action">'.$sContinue . sprintf(t("queue-hint-overview"), $this->getNextPhase()).'</div>',
+                    1
+                )
+                . $renderAdminLTE->addCol(
+                    $renderAdminLTE->getCard([
+                        'type'=>'',
+                        'variant'=>'outline',
+                        'title'=>'',
+                        'text'=> '<h3>'.$this->_oHtml->getIcon('phase') . t("phases"). '</h3>' 
+                            . ($sPhaseImg ? $sPhaseImg : '<div class="process">' . t("none") . '</div>')
+                        ]
+                    ), 6
+                    )
+                )
+                .'</div>'
+            ;
+
         return $sReturn;
     }
 
diff --git a/public_html/deployment/main.css b/public_html/deployment/main.css
index ce1d69d5..be743e24 100644
--- a/public_html/deployment/main.css
+++ b/public_html/deployment/main.css
@@ -621,15 +621,20 @@ input[type="checkbox"]:checked+label {
 
 /* ----- visualized process ----- */
 .visualprocess {
-    float: left;
     margin: 2em 0 1em;
 }
 
+.visualprocess .archive {
+    text-align: center;
+    padding: 0 0 5px;
+    min-width: 7em;
+}
+
 .visualprocess .process {
     float: left;
     text-align: center;
     padding: 0 0 5px;
-    min-width: 5em;
+    min-width: 7em;
 }
 
 .visualprocess .process.box {
@@ -641,6 +646,7 @@ input[type="checkbox"]:checked+label {
 
 .visualprocess .action {
     float: left;
+    text-align: center;
     padding: 0em 1em 1em 1em;
     background: #fff;
 }
@@ -652,8 +658,9 @@ input[type="checkbox"]:checked+label {
     color: #aaa;
 }
 
+.visualprocess .archive .details span ,
 .visualprocess .process .details span {border-right: 3px solid #fff;}
-
+.visualprocess div.card{ min-height: 20em; }
 
 /* ----- replacemets with templates ----- */
 span.replace {
diff --git a/public_html/deployment/main_new_ui.css b/public_html/deployment/main_new_ui.css
index f68df4ce..1f3cfb7c 100644
--- a/public_html/deployment/main_new_ui.css
+++ b/public_html/deployment/main_new_ui.css
@@ -64,4 +64,7 @@ a.topbrand small {
 /* fix width of input fields */
 .form-control {
 	max-width: 100%;
-}
\ No newline at end of file
+}
+
+table.nomargin{ margin: 0; border: none; width: 100%;}
+table.nomargin th {padding: 0.3em;}
\ No newline at end of file
diff --git a/public_html/deployment/pages/act_overview.php b/public_html/deployment/pages/act_overview.php
index 3588e39c..a00c34d9 100644
--- a/public_html/deployment/pages/act_overview.php
+++ b/public_html/deployment/pages/act_overview.php
@@ -72,6 +72,8 @@ if (!array_key_exists("prj", $aParams)) {
         $sListOfBranches='<h4>'.t('branch-select').'</h4><ol>'.$sListOfBranches.'</ol>';
     }
 
+    // --- generate tabs:
+
     $aTabdata=[];
     $aTabdata[$oHtml->getIcon('workflow') . t("way-of-packages")] = $oPrj->renderVisual();
     if($iCountOfBuildErrors){
@@ -90,10 +92,11 @@ if (!array_key_exists("prj", $aParams)) {
     }
 
     $sOut = ''
-            .'<h3>'.t('overview-label').' '.$oPrj->renderLink("setup").'</h3>'
+            .'<h3>'.t('overview-label').'&nbsp;&nbsp;&nbsp;'.$oPrj->renderLink("setup").'</h3><br>'
             .$renderAdminLTE->getTabbedContent(['tabs'=>$aTabdata])
             ;
-            
+
+    /*
     $sPhaselinks='';
     $sLastPhase = '';
     foreach($oPrj->getActivePhases() as $sPhase){
@@ -103,6 +106,9 @@ if (!array_key_exists("prj", $aParams)) {
             ;
         $sLastPhase = $sPhase;
     }
+    */
+
+    
     $BODY=
         $renderAdminLTE->addRow(
             $renderAdminLTE->addCol(
-- 
GitLab