[Remove Vuetify from Studio] Page layout in Settings

[MisRob]

🙂 Looking for an issue? Welcome! This issue is open for contribution. If this is the first time you’re requesting an issue, please:

• Read Contributing guidelines carefully. Pay extra attention to Using generative AI. Pull requests and comments that don’t follow the guidelines won’t be answered.
• Confirm that you’ve read the guidelines in your comment.

Sub-issue of #5060.

Complexity: Medium

Summary

Remove Vuetify layout components VContent and VContainer from Settings index page

studio/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue

Lines 24 to 37 in efb74db

	<VContent>
	<VContainer
	fluid
	class="pa-0"
	style="height: calc(100vh - 112px); overflow: auto; overflow-x: hidden"
	>
	<VContainer
	class="ml-0 pl-5"
	:class="offline ? 'pt-5' : 'pt-2'"
	>
	<router-view />
	</VContainer>
	</VContainer>
	</VContent>

in favor of creating a new shared/views/StudioPage component that has no Vuetify dependencies, and using it instead of VContent and VContainer in SettingsIndex.vue.

StudioPage requirements

• Expected usage example:

// SettingsIndex.vue

<StudioPage>
  <router-view />
</StudioPage>

• Sets width and height of the whole content area
• Receives content via the default slot
• Positions content below the app bar
• Positions content below the offline alert when visible
• Renders as <main>
• Sets maximum content width
  • For small and medium screens: 100% (no limit)
  • For large: 1000px limit
• Sets left and right padding
  • For small screens: 16px
  • For medium screens: 24px
  • For large screens: 48px
• Utilizes useKResponsiveLayout to detect small, medium, and large screen sizes

How to get there

• Login as user@a.com with password a
• Go to Settings
• To see the offline alert, turn on / off offline mode in browser development tools

Guidance

• Read the project this issue is part of
• https://design-system.learningequality.org/layout
• https://design-system.learningequality.org/usekresponsivewindow

Out of Scope

• Do not refactor any other areas of the codebase

Expected UI/UX changes

• Padding values were chosen to closely resemble the current experience. However, due to the migration to our breakpoint system, there will be differences in when values take effect. The configuration above should still result in a slightly
  improved experience, particularly on smaller screen sizes.
• Maximum content width will be 1000px instead of Vuetify's 1185px. 1000px is a standard value used in Kolibri for this purpose.

Acceptance criteria

• The specification above is followed.
• Except for "Expected UI/UX changes," there are no functional or visual differences in user experience.
• All user interactions are manually tested with no regressions.
• Pull request includes screenshots.
• Mobile experience is reasonable

[vtushar06]

Hi! @MisRob
I’d love to work on this issue. I’ve read the contributing guidelines and the layout docs. Let me know if it’s good to start. Thanks!
@vtushar06

[AllanOXDi]

Hi @vtushar06 - I will assign it to you

[vtushar06]

Thanks, @AllanOXDi!
I’ve started working on the issue and will keep you updated on the progress. Let me know if there are any additional edge cases you’d like me to keep in mind.
Looking forward to contributing!
— @vtushar06

[MisRob]

Hi @vtushar06, I haven't heard from you on learningequality/kolibri-design-system#1067 for a while so I will unassign you here for now. If you return to contributing, let's finish the aforementioned pull request first, and then we can assign another task if you still wish.

[vtushar06]

Hii @MisRob,
Sorry for being late actually my sem exams has being going on that's why I was unable to update.

I will try to update soon if you allow.

Thanks @MisRob

[MisRob]

No problem @vtushar06, take your time to finish resolving the other issue first. After that's done, no problem to assign more issues. Thanks!

[vtushar06]

Sure @MisRob ,
I will try to finish other assigned than proceed with this.

Thanks @MisRob .