Skip to content

Commit 38cdb36

Browse files
nickprotopnickprotop
committed
Fix mobile responsiveness for project tabs, settings, organizations, and scrollable tab navigation
1 parent 8c08a93 commit 38cdb36

8 files changed

Lines changed: 38 additions & 21 deletions

File tree

‎cloud/src/LrmCloud.Web/Pages/Organizations/Index.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414

1515
<PageTitle>Organizations - LRM Cloud</PageTitle>
1616

17-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
18-
<RadzenText TextStyle="TextStyle.H4">Organizations</RadzenText>
17+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
18+
<RadzenText TextStyle="TextStyle.H4" Style="margin: 0;">Organizations</RadzenText>
1919
<RadzenButton Variant="Radzen.Variant.Filled" Icon="add" Text="New Organization" Click="@OpenCreateDialog" Disabled="@(!_canCreateOrg)" title="@_limitMessage" />
2020
</RadzenStack>
2121

‎cloud/src/LrmCloud.Web/Pages/Projects/Settings.razor‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@ else if (_project == null)
3333
}
3434
else
3535
{
36-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
37-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
36+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
37+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem">
3838
<RadzenButton Icon="arrow_back" Variant="Radzen.Variant.Text" Size="ButtonSize.Small"
3939
Click="@(() => Navigation.NavigateTo($"projects/{ProjectId}"))" />
40-
<RadzenText TextStyle="TextStyle.H4">Project Settings</RadzenText>
41-
<RadzenText TextStyle="TextStyle.H6" class="rz-color-secondary">@_project.Name</RadzenText>
40+
<RadzenText TextStyle="TextStyle.H4" Style="margin: 0;">Project Settings</RadzenText>
41+
<RadzenText TextStyle="TextStyle.H6" class="rz-color-secondary" Style="margin: 0;">@_project.Name</RadzenText>
4242
</RadzenStack>
4343

4444
<RadzenButton ButtonStyle="ButtonStyle.Primary" Icon="save" Text="@(_isSubmitting ? "Saving..." : "Save Changes")"

‎cloud/src/LrmCloud.Web/Pages/Projects/Tabs/GitHubTab.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
@inject NotificationService NotificationService
77
@inject Radzen.DialogService DialogService
88

9-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
10-
<RadzenStack Gap="0">
9+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
10+
<RadzenStack Gap="0" Style="min-width: 200px; flex: 1;">
1111
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
1212
<RadzenIcon Icon="code" Style="vertical-align: middle;" />
13-
<RadzenText TextStyle="TextStyle.H5">GitHub Sync</RadzenText>
13+
<RadzenText TextStyle="TextStyle.H5" Style="margin: 0;">GitHub Sync</RadzenText>
1414
</RadzenStack>
1515
<RadzenText TextStyle="TextStyle.Body2" class="rz-color-secondary">
1616
Sync your translations with a GitHub repository.

‎cloud/src/LrmCloud.Web/Pages/Projects/Tabs/GlossaryTab.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
@inject NotificationService NotificationService
77
@inject Radzen.DialogService DialogService
88

9-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
10-
<RadzenStack Gap="0">
9+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
10+
<RadzenStack Gap="0" Style="min-width: 200px; flex: 1;">
1111
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
1212
<RadzenIcon Icon="book" Style="vertical-align: middle;" />
13-
<RadzenText TextStyle="TextStyle.H5">Project Glossary</RadzenText>
13+
<RadzenText TextStyle="TextStyle.H5" Style="margin: 0;">Project Glossary</RadzenText>
1414
</RadzenStack>
1515
<RadzenText TextStyle="TextStyle.Body2" class="rz-color-secondary">
1616
Define terms that should be translated consistently. Project terms override organization terms.

‎cloud/src/LrmCloud.Web/Pages/Projects/Tabs/HistoryTab.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
@inject NotificationService NotificationService
66
@inject Radzen.DialogService DialogService
77

8-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
9-
<RadzenStack Gap="0">
8+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
9+
<RadzenStack Gap="0" Style="min-width: 200px; flex: 1;">
1010
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
1111
<RadzenIcon Icon="restore" Style="vertical-align: middle;" />
12-
<RadzenText TextStyle="TextStyle.H5">Sync History</RadzenText>
12+
<RadzenText TextStyle="TextStyle.H5" Style="margin: 0;">Sync History</RadzenText>
1313
</RadzenStack>
1414
<RadzenText TextStyle="TextStyle.Body2" class="rz-color-secondary">
1515
View push and revert operations. Click on an entry to see detailed changes, or revert to undo a push.

‎cloud/src/LrmCloud.Web/Pages/Projects/Tabs/SnapshotsTab.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
@inject NotificationService NotificationService
66
@inject Radzen.DialogService DialogService
77

8-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
9-
<RadzenStack Gap="0">
8+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
9+
<RadzenStack Gap="0" Style="min-width: 200px; flex: 1;">
1010
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
1111
<RadzenIcon Icon="history" Style="vertical-align: middle;" />
12-
<RadzenText TextStyle="TextStyle.H5">Snapshots</RadzenText>
12+
<RadzenText TextStyle="TextStyle.H5" Style="margin: 0;">Snapshots</RadzenText>
1313
</RadzenStack>
1414
<RadzenText TextStyle="TextStyle.Body2" class="rz-color-secondary">
1515
Snapshots are point-in-time backups of your project's translations. Use them to track changes and restore to previous states.

‎cloud/src/LrmCloud.Web/Pages/Projects/Tabs/ValidationTab.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
@inject ResourceService ResourceService
33
@inject NotificationService NotificationService
44

5-
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" class="rz-mb-4">
6-
<RadzenStack Gap="0">
5+
<RadzenStack Orientation="Radzen.Orientation.Horizontal" JustifyContent="JustifyContent.SpaceBetween" AlignItems="Radzen.AlignItems.Center" Wrap="FlexWrap.Wrap" Gap="0.5rem" class="rz-mb-4">
6+
<RadzenStack Gap="0" Style="min-width: 200px; flex: 1;">
77
<RadzenStack Orientation="Radzen.Orientation.Horizontal" AlignItems="Radzen.AlignItems.Center" Gap="0.5rem">
88
<RadzenIcon Icon="verified" Style="vertical-align: middle;" />
9-
<RadzenText TextStyle="TextStyle.H5">Validation Report</RadzenText>
9+
<RadzenText TextStyle="TextStyle.H5" Style="margin: 0;">Validation Report</RadzenText>
1010
</RadzenStack>
1111
<RadzenText TextStyle="TextStyle.Body2" class="rz-color-secondary">
1212
Identify duplicates, missing translations, empty values, and placeholder mismatches.

‎cloud/src/LrmCloud.Web/wwwroot/css/app.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1456,5 +1456,22 @@ ul.rz-profile-menu > li > ul.rz-navigation-menu {
14561456
flex: 1 1 100%;
14571457
min-width: 100% !important;
14581458
}
1459+
1460+
/* Make tabs scrollable on mobile */
1461+
.rz-tabs .rz-tabview-nav {
1462+
overflow-x: auto !important;
1463+
flex-wrap: nowrap !important;
1464+
-webkit-overflow-scrolling: touch;
1465+
scrollbar-width: none; /* Firefox */
1466+
-ms-overflow-style: none; /* IE/Edge */
1467+
}
1468+
1469+
.rz-tabs .rz-tabview-nav::-webkit-scrollbar {
1470+
display: none; /* Chrome/Safari */
1471+
}
1472+
1473+
.rz-tabs .rz-tabview-nav li {
1474+
flex-shrink: 0;
1475+
}
14591476
}
14601477

0 commit comments

Comments
 (0)