Skip to content

Commit

Permalink
Merge pull request #1992 from DSD-DBS/active-sessions-layout
Browse files Browse the repository at this point in the history
feat: Use full-width for active sessions on mobile devices
  • Loading branch information
MoritzWeber0 authored Nov 13, 2024
2 parents 1b940f4 + e821c90 commit c109ca2
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 10 deletions.
9 changes: 3 additions & 6 deletions frontend/src/app/sessions/sessions.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,9 @@
<div class="mt-2">
<app-user-sessions-wrapper>
<div class="flex flex-wrap justify-around gap-4">
<app-create-persistent-session
class="w-[360px] sm:w-[450px]"
></app-create-persistent-session>
<app-active-sessions
class="mt-[10px] w-[360px] sm:mt-0 sm:w-[450px]"
></app-active-sessions>
<app-create-persistent-session class="w-full sm:w-[450px]">
</app-create-persistent-session>
<app-active-sessions class="w-full sm:w-[450px]"></app-active-sessions>
</div>
</app-user-sessions-wrapper>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ <h1 class="text-2xl">Active Sessions</h1>
height: '240px',
width: '432px',
border: '1px solid white',
margin: 0,
'max-width': '100%',
}"
></ngx-skeleton-loader>
} @else if ((sessions | async)?.length === 0) {
Expand All @@ -24,7 +26,7 @@ <h2 class="mb-3 text-xl font-medium">No active sessions</h2>
</div>
} @else if ((sessions | async)?.length !== 0) {
<div class="flex flex-col gap-2">
<div class="rounded border bg-white p-2">
<div class="w-full rounded border bg-white p-2">
<h2><b>Internal Session Viewer</b></h2>
<mat-radio-group [(ngModel)]="selectedWindowManager">
<mat-radio-button value="tiling"
Expand All @@ -36,7 +38,7 @@ <h2><b>Internal Session Viewer</b></h2>
</mat-radio-group>

<a
class="w-full max-w-[85vw]"
class="w-full"
matInput
mat-stroked-button
color="primary"
Expand All @@ -48,7 +50,10 @@ <h2><b>Internal Session Viewer</b></h2>
}"
[disabled]="!(selectedSessionIDs$ | async)?.length"
>
<span> Open selected sessions in internal session viewer </span>
<div>
Open selected sessions
<span class="hidden sm:inline">in internal session viewer</span>
</div>
<mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon>
</a>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const meta: Meta<ActiveSessionsComponent> = {
providers: [mockOwnUserWrapperServiceProvider(mockUser)],
}),
componentWrapperDecorator(
(story) => `<div class="w-[360px] sm:w-[450px]">${story}</div>`,
(story) => `<div class="w-full sm:w-[450px]">${story}</div>`,
),
],
};
Expand Down

0 comments on commit c109ca2

Please sign in to comment.