ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Make topic page responsive 

Resolves MS-791 #complete
This commit is contained in:
Ramon Wenger 2023-08-31 15:37:31 +02:00
parent daf6fd2354
commit 4cde2febe0
6 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/components/LanguageSwitcher.vue
View File

@ -39,7 +39,12 @@ const { mutate: changeLanguageMutation } = useMutation(
const changeLanguage = (lang: string) => changeLanguageMutation({ language: lang }); const changeLanguage = (lang: string) => changeLanguageMutation({ language: lang });
</script> </script>
<style scoped lang="postcss"> <style scoped lang="scss">
@import 'styles/helpers';
.language-switcher { .language-switcher {
width: 100%;
@include desktop {
width: auto;
}
} }
</style> </style>

8
client/src/components/modules/ModuleFilter.vue
View File

@ -212,13 +212,19 @@ const updateLastModuleLevelUser = (moduleLevel: ModuleLevelNode) => {
.module-filter { .module-filter {
&__filter-selection { &__filter-selection {
display: flex; display: flex;
flex-direction: column;
@include desktop {
flex-direction: row;
}
justify-content: flex-start; justify-content: flex-start;
column-gap: $medium-spacing; column-gap: $medium-spacing;
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
} }
&__dropdown { &__dropdown {
width: 180px; @include desktop {
width: 180px;
}
} }
&__language-switcher { &__language-switcher {

11
client/src/components/modules/ModuleTeaser.vue
View File

@ -15,7 +15,10 @@
<p class="module-teaser__description"> <p class="module-teaser__description">
{{ teaser }} {{ teaser }}
</p> </p>
<div class="module-teaser__pills" v-if="$flavor.showModuleFilter"> <div
class="module-teaser__pills"
v-if="$flavor.showModuleFilter"
>
<pill :text="level?.name"></pill> <pill :text="level?.name"></pill>
<pill :text="category?.name"></pill> <pill :text="category?.name"></pill>
</div> </div>
@ -63,13 +66,17 @@ const moduleLink = computed(() => {
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
border: 1px solid #e2e2e2; border: 1px solid #e2e2e2;
height: 390px; height: 390px;
max-width: 380px;
width: 100%; width: 100%;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
max-width: $topic-mobile-width;
@include desktop {
max-width: $topic-desktop-width;
}
&--small { &--small {
height: 300px; height: 300px;
} }

2
client/src/components/ui/PillRadioButtons.vue
View File

@ -32,7 +32,7 @@ function updateSelectedItem(item: string) {
overflow: hidden; overflow: hidden;
&__button { &__button {
flex: 1; flex-grow: 1;
cursor: pointer; cursor: pointer;
background-color: $color-silver-light; background-color: $color-silver-light;
text-transform: uppercase; text-transform: uppercase;

2
client/src/pages/topic-page.vue
View File

@ -167,6 +167,8 @@ export default {
padding: $large-spacing 0; padding: $large-spacing 0;
} }
grid-template-columns: 1fr; grid-template-columns: 1fr;
max-width: $topic-mobile-width;
justify-self: center;
@include desktop { @include desktop {
max-width: 1500px; // 300px (sidebar) + 3x 380 (max width teaser) + 2x 60 (column gap) max-width: 1500px; // 300px (sidebar) + 3x 380 (max width teaser) + 2x 60 (column gap)
grid-template-columns: 300px 1fr; grid-template-columns: 300px 1fr;

5
client/src/styles/_variables.scss
View File

@ -46,7 +46,6 @@ $color-white: #ffffff !default;
$header-color: $color-charcoal-dark; $header-color: $color-charcoal-dark;
$intro-color: $color-silver-dark; $intro-color: $color-silver-dark;
$secondary-color: $color-accent-2 !default; $secondary-color: $color-accent-2 !default;
$sans-serif-font-family: 'Montserrat', Arial, sans-serif; $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
$serif-font-family: 'ff-meta-serif-web-pro', serif; $serif-font-family: 'ff-meta-serif-web-pro', serif;
@ -83,7 +82,6 @@ $popover-default-bottom: -110px;
$footer-width: 800px; $footer-width: 800px;
$news-width: 550px; $news-width: 550px;
$medium-input-width: 380px; $medium-input-width: 380px;
$screen-width: 1200px; $screen-width: 1200px;
@ -91,3 +89,6 @@ $screen-width: 1200px;
$small-icon-dimension: 14px; $small-icon-dimension: 14px;
$default-icon-dimension: 25px; $default-icon-dimension: 25px;
$large-icon-dimension: 40px; $large-icon-dimension: 40px;
$topic-mobile-width: 480px;
$topic-desktop-width: 380px;