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

Update mobile styling for project list and detail pages 

Resolves MS-532
This commit is contained in:
Ramon Wenger 2023-01-25 15:31:53 +01:00
parent dc8c37f476
commit 45b9e7e57b
3 changed files with 70 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/package.json
View File

@ -25,7 +25,9 @@
"install:cypress": "cypress install", "install:cypress": "cypress install",
"test:unit": "jest", "test:unit": "jest",
"cypress:parallel": "CYPRESS_API_URL=\"https://iterativ-cypress-director.herokuapp.com/\" cy2 run --parallel --record --key somekey --config-file cypress.frontend.json --ci-build-id some-id", "cypress:parallel": "CYPRESS_API_URL=\"https://iterativ-cypress-director.herokuapp.com/\" cy2 run --parallel --record --key somekey --config-file cypress.frontend.json --ci-build-id some-id",
"cypress:parallel:run": "cy2 run --parallel --record --config-file cypress.frontend.json --ci-build-id " "cypress:parallel:run": "cy2 run --parallel --record --config-file cypress.frontend.json --ci-build-id ",
"prettier": "prettier . --write",
"prettier:check": "prettier . --check"
}, },
"dependencies": { "dependencies": {
"@apollo/client": "^3.5.8", "@apollo/client": "^3.5.8",

39
client/src/components/portfolio/ProjectListItem.vue
View File

@ -10,7 +10,7 @@
<owner-widget :owner="project.student" class="project__owner" /> <owner-widget :owner="project.student" class="project__owner" />
<entry-count-widget :verbose="false" :entry-count="project.entriesCount" /> <entry-count-widget class="project__entry-count" :verbose="false" :entry-count="project.entriesCount" />
</router-link> </router-link>
<project-actions <project-actions
:final="project.final" :final="project.final"
@ -23,9 +23,9 @@
</template> </template>
<script> <script>
import OwnerWidget from '@/components/portfolio/OwnerWidget'; import OwnerWidget from '@/components/portfolio/OwnerWidget.vue';
import ProjectActions from '@/components/portfolio/ProjectActions'; import ProjectActions from '@/components/portfolio/ProjectActions.vue';
import EntryCountWidget from '@/components/rooms/EntryCountWidget'; import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
import me from '@/mixins/me'; import me from '@/mixins/me';
@ -65,18 +65,43 @@ export default {
border-bottom: 1px solid $color-silver; border-bottom: 1px solid $color-silver;
&__link { &__link {
flex: 80%; display: grid;
display: flex; width: 100%;
align-items: center; grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
row-gap: $small-spacing;
align-items: flex-start;
flex-direction: column;
@include desktop {
display: flex;
flex: 80%;
flex-direction: row;
align-items: center;
}
} }
&__title { &__title {
flex: 50%; flex: 50%;
@include heading-4; @include heading-4;
grid-column: 1 / span 2;
} }
&__owner { &__owner {
flex: 40%; flex: 40%;
grid-column: 1 / span 1;
}
&__actions {
display: none;
@include desktop {
display: block;
}
}
&__entry-count {
justify-self: flex-end;
grid-column: 2 / span 1;
} }
} }
</style> </style>

45
client/src/pages/portfolio/project.vue
View File

@ -121,26 +121,43 @@ export default {
.project { .project {
&__header { &__header {
padding: $large-spacing; padding: $medium-spacing;
@include desktop {
padding: $large-spacing;
}
border-bottom: 1px solid $color-silver; border-bottom: 1px solid $color-silver;
display: grid; display: grid;
grid-template-areas: grid-template-areas:
'b a' 'b'
't t' 't'
'd d' 'd'
'm m'; 'm'
'a';
@include desktop {
grid-template-areas:
'b a'
't t'
'd d'
'm m';
}
} }
&__back { &__back {
grid-area: b; grid-area: b;
margin-bottom: $medium-spacing;
@include desktop {
margin-bottom: 0;
}
} }
&__actions { &__actions {
grid-area: a; grid-area: a;
display: flex; display: flex;
justify-self: end; @include desktop {
justify-self: end;
}
} }
&__more { &__more {
@ -181,19 +198,27 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: $medium-spacing;
@include desktop { @include desktop {
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center;
margin-bottom: 0;
} }
justify-content: flex-start; justify-content: flex-start;
position: relative; position: relative;
align-items: center;
& > :first-child { & > :first-child {
margin-left: $large-spacing; margin-bottom: $medium-spacing;
@include desktop {
margin-left: $large-spacing;
margin-bottom: 0;
}
} }
& > :nth-child(2) { & > :nth-child(2) {
margin-left: $large-spacing; @include desktop {
margin-left: $large-spacing;
}
} }
} }