webapp page are now responsive

=> page structures will change based on the screen size
STARIONGROUP · Jul 24, 2024 · 05ed811 · 05ed811
1 parent 0b80461
commit 05ed811
Show file tree

Hide file tree

Showing 21 changed files with 130 additions and 107 deletions.
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 
 @namespace COMETwebapp.Components.Common
 
-<div class="ps-3 data-items-panel-container" style="width: @this.Width;">
+<div class="data-items-panel-container @(this.CssClass)" style="width: @this.Width;">
     <div class="data-item-details-section">
         @if (this.IsSelected)
         {
@@ -43,4 +43,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
             </div>
         }
     </div>
-</div>
+</div>
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
@@ -66,5 +66,11 @@ public partial class DataItemDetailsComponent
         /// </summary>
         [Parameter]
         public string Width { get; set; } = "50%";
+
+        /// <summary>
+        /// The custom css class to be used in the container component
+        /// </summary>
+        [Parameter]
+        public string CssClass { get; set; }
     }
 }
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
@@ -6,12 +6,6 @@
     overflow: auto;
 }
 
-.data-items-panel-container {
-    max-height: 90vh;
-    position: sticky;
-    top: 10px;
-}
-
 .data-item-details-image {
     margin: auto;
     display: block;

diff --git a/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor b/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
@@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDataItemBase<CommonFileStore, CommonFileStoreRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -32,7 +32,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.CreatedOn)" MinWidth="80" DisplayFormat="{0:dd/MM/yyyy HH:mm:ss}" SearchEnabled="false"/>

diff --git a/COMETwebapp/Components/EngineeringModel/DomainFileStore/DomainFileStoresTable.razor b/COMETwebapp/Components/EngineeringModel/DomainFileStore/DomainFileStoresTable.razor
@@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDataItemBase<DomainFileStore, DomainFileStoreRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -32,7 +32,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(DomainFileStoreRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(DomainFileStoreRowViewModel.CreatedOn)" MinWidth="80" DisplayFormat="{0:dd/MM/yyyy HH:mm:ss}" SearchEnabled="false"/>
@@ -55,4 +55,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
         <DxButton Text="Cancel " RenderStyle="ButtonRenderStyle.Success" Click="@(this.ViewModel.OnCancelPopupButtonClick)"/>
         <DxButton Text="Confirm" RenderStyle="ButtonRenderStyle.Danger" Click="@(this.OnDeletionConfirmed)"/>
     </div>
-</DxPopup>
+</DxPopup>
diff --git a/COMETwebapp/Components/EngineeringModel/OptionsTable.razor b/COMETwebapp/Components/EngineeringModel/OptionsTable.razor
@@ -16,7 +16,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 ------------------------------------------------------------------------------->
 @inherits SelectedDataItemBase<Option, OptionRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -33,7 +33,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(OptionRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(OptionRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
@@ -57,4 +57,4 @@ Copyright (c) 2023-2024 Starion Group S.A.
         <DxButton Text="Cancel " RenderStyle="ButtonRenderStyle.Success" Click="@(this.ViewModel.OnCancelPopupButtonClick)"/>
         <DxButton Text="Confirm" RenderStyle="ButtonRenderStyle.Danger" Click="@(this.OnDeletionConfirmed)"/>
     </div>
-</DxPopup>
+</DxPopup>
diff --git a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
@@ -26,69 +26,69 @@
 
 <LoadingComponent IsVisible="@this.ViewModel.IsLoading">
     <ValidationMessageComponent ValidationMessage="@(this.ErrorMessage)" />
-    <div style="display: flex">
-        <div>
-            <h4>Source Model</h4>
-            <div class="model-elements-column sticky-scrollable-column">
-                <DxGrid @ref="this.SecondGrid"
-                        Data="this.ViewModel.RowsSource"
-                        ShowAllRows="true"
-                        CssClass="second-grid"
-                        AllowSort="false"
-                        RowClick="this.OnElementSelected"
-                        AllowSelectRowByClick="true"
-                        SelectionMode="GridSelectionMode.Single"
-                        VerticalScrollBarMode="ScrollBarMode.Visible"
-                        CustomizeElement="@(OnCustomizeElement)">
-                    <Columns>
-                        <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
-                        <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
-                        <DxGridDataColumn FieldName="@nameof(ElementDefinitionRowViewModel.IsTopElement)" Visible="false"/>
-                    </Columns>
-                </DxGrid>
+    <div class="selected-data-item-page">
+        <div class="selected-data-item-table d-flex" style="flex: 1 1 58%!important;">
+            <div>
+                <h4>Source Model</h4>
+                <div class="sticky-scrollable-column">
+                    <DxGrid @ref="this.SecondGrid"
+                            Data="this.ViewModel.RowsSource"
+                            ShowAllRows="true"
+                            CssClass="second-grid"
+                            AllowSort="false"
+                            RowClick="this.OnElementSelected"
+                            AllowSelectRowByClick="true"
+                            SelectionMode="GridSelectionMode.Single"
+                            VerticalScrollBarMode="ScrollBarMode.Visible"
+                            CustomizeElement="@(OnCustomizeElement)">
+                        <Columns>
+                            <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value" />
+                            <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)" />
+                            <DxGridDataColumn FieldName="@nameof(ElementDefinitionRowViewModel.IsTopElement)" Visible="false"/>
+                        </Columns>
+                    </DxGrid>
+                </div>
             </div>
-        </div>
-        <div style="padding-left: 10px">
-            <h4>Target Model</h4>
-            <div class="model-elements-column sticky-scrollable-column">
-                <DxGrid @ref="this.FirstGrid"
-                        Data="this.ViewModel.RowsTarget"
-                        ShowAllRows="true"
-                        CssClass="first-grid"
-                        AllowSort="false"
-                        RowClick="this.OnElementSelected"
-                        AllowSelectRowByClick="true"
-                        SelectionMode="GridSelectionMode.Single"
-                        VerticalScrollBarMode="ScrollBarMode.Visible"
-                        CustomizeElement="@(OnCustomizeElement)">
-                    <Columns>
-                        <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value"/>
-                        <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)"/>
-                    </Columns>
-                </DxGrid>
+            <div>
+                <h4>Target Model</h4>
+                <div class="sticky-scrollable-column">
+                    <DxGrid @ref="this.FirstGrid"
+                            Data="this.ViewModel.RowsTarget"
+                            ShowAllRows="true"
+                            CssClass="first-grid"
+                            AllowSort="false"
+                            RowClick="this.OnElementSelected"
+                            AllowSelectRowByClick="true"
+                            SelectionMode="GridSelectionMode.Single"
+                            VerticalScrollBarMode="ScrollBarMode.Visible"
+                            CustomizeElement="@(OnCustomizeElement)">
+                        <Columns>
+                            <DxGridDataColumn Caption="Element Definition" FieldName="@nameof(ElementDefinitionRowViewModel.ElementDefinitionName)" GroupIndex="0" GroupInterval="GridColumnGroupInterval.Value"/>
+                            <DxGridDataColumn Caption="Element Usage" FieldName="@nameof(ElementDefinitionRowViewModel.ElementUsageName)"/>
+                        </Columns>
+                    </DxGrid>
+                </div>
             </div>
         </div>
+        <DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
+                                  NotSelectedText="Select an item to view or edit"
+                                  Width="100%"
+                                  CssClass="model-editor-details">
+            <div class="mb-2 row">
+                <h4 class="d-inline">Panel Editor</h4>
+                <div class="float-end">
+                    @if (this.ViewModel.SelectedElementDefinition is not null)
+                    {
+                        <DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)"/>
+                    }
 
-        <div style="width: 1300px;">
-            <DataItemDetailsComponent IsSelected="@(this.ViewModel.SelectedElementDefinition is not null)"
-                                      NotSelectedText="Select an item to view or edit"
-                                      Width="100%">
-                <div class="mb-2">
-                    <h4 class="d-inline">Panel Editor</h4>
-                    <div class="float-end">
-                        @if (this.ViewModel.SelectedElementDefinition is not null)
-                        {
-                            <DxButton Id="addParameter" Text="Add Parameter" IconCssClass="oi oi-plus" Click="@(this.ViewModel.OpenAddParameterPopup)"/>
-                        }
-
-                        <DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
-                    </div>
+                    <DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
                 </div>
-                <div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
-                        <DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
-                </div>
-            </DataItemDetailsComponent>
-        </div>
+            </div>
+            <div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
+                <DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
+            </div>
+        </DataItemDetailsComponent>
     </div>
     <DxPopup CloseOnOutsideClick="false" HeaderText="Create Element Definition" @bind-Visible="@this.ViewModel.IsOnCreationMode" Width="40vw">
         <Content>
@@ -101,4 +101,4 @@
             <AddParameter ViewModel="@this.ViewModel.AddParameterViewModel"/>
         </Content>
     </DxPopup>
-</LoadingComponent>
+</LoadingComponent>
diff --git a/COMETwebapp/Components/ParameterEditor/ParameterTable.razor.css b/COMETwebapp/Components/ParameterEditor/ParameterTable.razor.css
@@ -16,7 +16,7 @@
 }
 
 .table-container {
-    min-width: 1400px;
+    width: fit-content;
     margin-top: 15px;
     max-height: 80vh;
 }
diff --git a/COMETwebapp/Components/ReferenceData/Categories/CategoriesTable.razor b/COMETwebapp/Components/ReferenceData/Categories/CategoriesTable.razor
@@ -1,7 +1,7 @@
 <!------------------------------------------------------------------------------
 Copyright (c) 2023-2024 Starion Group S.A.
 
-    Authors: Justine Veirier d'aiguebonne, Sam Gerené, Alex Vorobiev, Alexander van Delft, Nabil Abbar
+    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
 
     This file is part of CDP4-COMET WEB Community Edition
      The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
@@ -22,7 +22,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<Category, CategoryRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -39,7 +39,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(CategoryRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(CategoryRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>

diff --git a/COMETwebapp/Components/ReferenceData/MeasurementScales/MeasurementScalesTable.razor b/COMETwebapp/Components/ReferenceData/MeasurementScales/MeasurementScalesTable.razor
@@ -22,7 +22,7 @@ Copyright (c) 2024 Starion Group S.A.
 
 @inherits SelectedDeprecatableDataItemBase<MeasurementScale, MeasurementScaleRowViewModel>
 
-<div class="d-flex justify-content-between">
+<div class="selected-data-item-page">
     <DxGrid @ref="this.Grid"
             Data="this.ViewModel.Rows.Items"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -39,7 +39,7 @@ Copyright (c) 2024 Starion Group S.A.
             PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
             PageSizeSelectorAllRowsItemVisible="true"
             FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-            CssClass="height-fit-content">
+            CssClass="selected-data-item-table">
         <Columns>
             <DxGridDataColumn FieldName="@nameof(MeasurementScaleRowViewModel.Name)" MinWidth="150"/>
             <DxGridDataColumn FieldName="@nameof(MeasurementScaleRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
@@ -59,4 +59,4 @@ Copyright (c) 2024 Starion Group S.A.
                                ShouldCreate="@(this.ShouldCreateThing)"
                                OnSaved="@(this.OnSaved)"/>
     </DataItemDetailsComponent>
-</div>
+</div>
diff --git a/COMETwebapp/Components/ReferenceData/MeasurementUnits/MeasurementUnitsTable.razor b/COMETwebapp/Components/ReferenceData/MeasurementUnits/MeasurementUnitsTable.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<MeasurementUnit, MeasurementUnitRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -34,7 +34,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(MeasurementUnitRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(MeasurementUnitRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>

diff --git a/COMETwebapp/Components/ReferenceData/ParameterTypes/ParameterTypeTable.razor b/COMETwebapp/Components/ReferenceData/ParameterTypes/ParameterTypeTable.razor
@@ -17,8 +17,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<ParameterType, ParameterTypeRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
-
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -35,7 +34,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(ParameterTypeRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(ParameterTypeRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
@@ -53,7 +52,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
             <ParameterTypeForm ViewModel="@(this.ViewModel)"
                                @bind-IsVisible="@(this.IsOnEditMode)"
                                ShouldCreate="@(this.ShouldCreateThing)"
-                               OnSaved="@(this.OnSaved)" />
+                               OnSaved="@(this.OnSaved)"/>
         </DataItemDetailsComponent>
     </div>
 </LoadingComponent>
diff --git a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
@@ -18,7 +18,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
 @inherits SelectedDeprecatableDataItemBase<DomainOfExpertise, DomainOfExpertiseRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div class="d-flex justify-content-between">
+    <div class="selected-data-item-page">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -35,7 +35,7 @@ Copyright (c) 2023-2024 Starion Group S.A.
                 PageSizeSelectorItems="@(new int[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
                 FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
-                CssClass="height-fit-content">
+                CssClass="selected-data-item-table">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>