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",
"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: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": {
"@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" />
<entry-count-widget :verbose="false" :entry-count="project.entriesCount" />
<entry-count-widget class="project__entry-count" :verbose="false" :entry-count="project.entriesCount" />
</router-link>
<project-actions
:final="project.final"
@ -23,9 +23,9 @@
</template>
<script>
import OwnerWidget from '@/components/portfolio/OwnerWidget';
import ProjectActions from '@/components/portfolio/ProjectActions';
import EntryCountWidget from '@/components/rooms/EntryCountWidget';
import OwnerWidget from '@/components/portfolio/OwnerWidget.vue';
import ProjectActions from '@/components/portfolio/ProjectActions.vue';
import EntryCountWidget from '@/components/rooms/EntryCountWidget.vue';
import me from '@/mixins/me';
@ -65,18 +65,43 @@ export default {
border-bottom: 1px solid $color-silver;
&__link {
flex: 80%;
display: flex;
align-items: center;
display: grid;
width: 100%;
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 {
flex: 50%;
@include heading-4;
grid-column: 1 / span 2;
}
&__owner {
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>

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

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