Skip to content

Commit

Permalink
responsive adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@Maurier
Maurier committed Nov 10, 2023
1 parent e70a7d4 commit 9c493d5
Showing 1 changed file with 79 additions and 39 deletions.
118 changes: 79 additions & 39 deletions frontend/src/components/dataset/cd.dataset-html.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<v-container class="cd-contribute">
<div v-if="!isLoading && wasLoaded" class="d-flex">
<div v-if="!$vuetify.breakpoint.mdAndDown" class="sidebar pr-4">
<div v-if="!isSm" class="sidebar pr-4">
<div class="table-of-contents">
<div class="text-h6">Table of contents</div>
<ol class="text-body-2">
Expand All @@ -16,7 +16,7 @@
</div>
</div>

<div class="page-content">
<div class="page-content" :class="{ 'is-sm': isSm }">
<div class="d-flex justify-space-between mb-8">
<div class="text-h4">{{ data.name }}</div>
<v-btn
Expand All @@ -33,42 +33,59 @@
</v-btn>
</div>

<div class="dataset-info mb-8">
<div class="text-subtitle-2 gray--text">Created By:</div>
<div class="text-body-2">{{ createdBy }}</div>

<div class="text-subtitle-2">Provider:</div>
<div class="text-body-2">
<span v-if="data.provider.url" class="d-flex align-center">
<a :href="data.provider.url" target="_blank">{{
data.provider.name
}}</a>
<v-icon class="ml-2" small>mdi-open-in-new</v-icon>
</span>

<template v-else>{{ data.provider.name }}</template>
</div>

<div class="text-subtitle-2">Resource Type:</div>
<div class="text-body-2">{{ data["@type"] }}</div>
<v-row class="mb-8 align-start">
<v-col cols="12" sm="8" class="dataset-info">
<div v-bind="infoLabelAttr">Created By:</div>
<div v-bind="infoValueAttr">{{ createdBy }}</div>

<div v-bind="infoLabelAttr">Provider:</div>
<div v-bind="infoValueAttr">
<span v-if="data.provider.url" class="d-flex align-center">
<a :href="data.provider.url" target="_blank">{{
data.provider.name
}}</a>
<v-icon class="ml-2" small>mdi-open-in-new</v-icon>
</span>

<template v-else>{{ data.provider.name }}</template>
</div>

<div v-bind="infoLabelAttr">Resource Type:</div>
<div v-bind="infoValueAttr">{{ data["@type"] }}</div>

<div v-bind="infoLabelAttr">Resource Size:</div>
<div v-bind="infoValueAttr">~2 MB</div>

<div v-bind="infoLabelAttr">License:</div>
<div v-bind="infoValueAttr">
<div v-if="data.license.url" class="d-flex align-center">
<a :href="data.license.url" target="_blank">{{
data.license.name
}}</a>
<v-icon class="ml-2" small>mdi-open-in-new</v-icon>
</div>

<div class="text-subtitle-2">Resource Size:</div>
<div class="text-body-2">some test</div>
<template v-else>{{ data.license.name }}</template>

<div class="text-subtitle-2">License:</div>
<div class="text-body-2">{{ data.license.name }}</div>
<div class="font-weight-light">
{{ data.license.description }}
</div>
</div>
</v-col>

<div class="text-subtitle-2">Host Repository:</div>
<div class="text-body-2">HydroShare</div>
<v-col cols="12" sm="4" class="dataset-info">
<div v-bind="infoLabelAttr">Host Repository:</div>
<div v-bind="infoValueAttr">HydroShare</div>

<div class="text-subtitle-2">Created:</div>
<div class="text-body-2">{{ data.dateCreated }}</div>
<div v-bind="infoLabelAttr">Created:</div>
<div v-bind="infoValueAttr">{{ data.dateCreated }}</div>

<template v-if="data.dateModified">
<div class="text-subtitle-2">Last Updated:</div>
<div class="text-body-2">{{ data.dateModified }}</div>
</template>
</div>
<template v-if="data.dateModified">
<div v-bind="infoLabelAttr">Last Updated:</div>
<div v-bind="infoValueAttr">{{ data.dateModified }}</div>
</template>
</v-col>
</v-row>

<div class="mb-8 field">
<div class="text-overline primary--text darken-4">Description</div>
Expand Down Expand Up @@ -114,7 +131,7 @@
<v-divider class="primary mb-2"></v-divider>

<v-row>
<v-col col="12" sm="8">
<v-col cols="12" sm="8">
<div class="text-subtitle-2">Spatial</div>
<div class="my-2">metadata here</div>
<div>
Expand All @@ -125,12 +142,13 @@
</v-card>
</div>
</v-col>
<v-col col="12" sm="4">
<v-col cols="12" sm="4">
<div class="text-subtitle-2">Temporal</div>
<div>
<v-stepper flat vertical>
<v-stepper flat vertical :step="2">
<v-stepper-step
complete
step="1"
complete-icon="mdi-calendar-start-outline"
>
<span>Nov 24, 2023</span>
Expand All @@ -139,10 +157,11 @@
>
</v-stepper-step>

<v-stepper-content></v-stepper-content>
<v-stepper-content step="1"></v-stepper-content>

<v-stepper-step
complete
step="2"
complete-icon="mdi-calendar-end-outline"
>
<span>Dec 1, 2023</span>
Expand All @@ -151,7 +170,7 @@
>
</v-stepper-step>

<v-stepper-content></v-stepper-content>
<v-stepper-content step="2"></v-stepper-content>
</v-stepper>
</div>
</v-col>
Expand Down Expand Up @@ -221,7 +240,6 @@ import { Component, Vue } from "vue-property-decorator";
import { CzForm } from "@cznethub/cznet-vue-core";
import User from "@/models/user.model";
import { computed } from "vue";
@Component({
name: "cd-contribute",
Expand Down Expand Up @@ -265,6 +283,14 @@ export default class CdDataset extends Vue {
{ title: "How to Cite", link: "" },
];
protected infoLabelAttr = {
class: "info-label text-subtitle-2 font-weight-light",
};
protected infoValueAttr = {
class: "info-value text-body-2",
};
created() {
this.loadDataset();
}
Expand All @@ -273,6 +299,10 @@ export default class CdDataset extends Vue {
return this.data.creator?.map((c) => c.name).join(", ");
}
protected get isSm() {
return this.$vuetify.breakpoint.mdAndDown;
}
protected async loadDataset() {
this.submissionId = this.$route.params.id;
this.isLoading = true;
Expand Down Expand Up @@ -315,6 +345,16 @@ export default class CdDataset extends Vue {
.page-content {
flex-grow: 1;
word-break: break-word;
&.is-sm {
.dataset-info {
grid-template-columns: auto;
}
.info-value {
margin-bottom: 1rem;
}
}
}
.dataset-info {
Expand Down

0 comments on commit 9c493d5

Please sign in to comment.