Skip to content

Commit

Permalink
style: simplify overview page - make banner fit in the actual header (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
shawnyama authored Oct 11, 2023
1 parent 5d82fde commit f8478f7
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 112 deletions.
24 changes: 22 additions & 2 deletions packages/client/hmi-client/src/components/asset/tera-asset.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@
</aside>
</header>
<template v-if="!hideIntro">
<header id="asset-top" ref="headerRef">
<header
id="asset-top"
:class="{ 'overview-banner': pageType === ProjectPages.OVERVIEW }"
ref="headerRef"
>
<section>
<!-- put the buttons above the title if there is an overline -->
<div v-if="overline" class="vertically-center">
Expand Down Expand Up @@ -46,8 +50,9 @@
<div class="header-buttons">
<slot name="bottom-header-buttons" />
</div>
<slot name="overview-summary" />
</section>
<aside class="spread-out">
<aside v-if="pageType !== ProjectPages.OVERVIEW" class="spread-out">
<Button
v-if="featureConfig.isPreview"
icon="pi pi-times"
Expand All @@ -65,8 +70,11 @@

<script setup lang="ts">
import { ref, computed, watch, PropType } from 'vue';
import { useRoute } from 'vue-router';
import Button from 'primevue/button';
import { FeatureConfig } from '@/types/common';
import { ProjectPages } from '@/types/Project';
import { AssetType } from '@/types/Types';
const props = defineProps({
name: {
Expand Down Expand Up @@ -114,6 +122,8 @@ const shrinkHeader = computed(() => {
);
});
const pageType = useRoute().params.pageType as ProjectPages | AssetType;
// Scroll margin for anchors are adjusted depending on the header (inserted in css)
const scrollMarginTopStyle = computed(() => (shrinkHeader.value ? '3.5rem' : '0.5rem'));
const stretchContentStyle = computed(() =>
Expand Down Expand Up @@ -209,6 +219,16 @@ header aside {
header.shrinked aside {
align-self: center;
}
header.overview-banner section {
width: 100%;
max-width: 100%;
}
.overview-banner {
background: url('@/assets/svg/terarium-icon-transparent.svg') no-repeat right 20% center,
linear-gradient(45deg, #8bd4af1a, #d5e8e5 100%) no-repeat;
background-size: 25%, 100%;
}
.nudge-down {
margin-top: 0.25rem;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,98 +1,86 @@
<template>
<main>
<tera-asset
:name="useProjects().activeProject.value?.name"
:authors="useProjects().activeProject.value?.username"
:is-naming-asset="isRenamingProject"
:publisher="`Last updated ${DateUtils.formatLong(
useProjects().activeProject.value?.timestamp
)}`"
class="overview-banner"
>
<template #name-input>
<InputText
v-if="isRenamingProject"
v-model="newProjectName"
ref="inputElement"
@keyup.enter="updateProjectName"
/>
</template>
<template #edit-buttons>
<Button
icon="pi pi-ellipsis-v"
class="p-button-icon-only p-button-text p-button-rounded"
@click="showProjectMenu"
/>
<Menu ref="projectMenu" :model="projectMenuItems" :popup="true" />
</template>
<section>
<section class="summary">
<!-- This div is so that child elements will automatically collapse margins -->
<div>
<!-- Description & Contributors -->
<section class="description">
<p>
{{ useProjects().activeProject.value?.description }}
</p>
</section>
</div>
</section>
<!-- Project summary KPIs -->
<section class="summary-KPI-bar">
<div
class="summary-KPI"
v-for="(assets, type) of useProjects().activeProject.value?.assets"
:key="type"
>
<span class="summary-KPI-number">{{ assets.length ?? 0 }}</span>
<span class="summary-KPI-label">{{ capitalize(type) }}</span>
</div>
</section>
<tera-asset
:name="useProjects().activeProject.value?.name"
:authors="useProjects().activeProject.value?.username"
:is-naming-asset="isRenamingProject"
:publisher="`Last updated ${DateUtils.formatLong(
useProjects().activeProject.value?.timestamp
)}`"
>
<template #name-input>
<InputText
v-if="isRenamingProject"
v-model="newProjectName"
ref="inputElement"
@keyup.enter="updateProjectName"
/>
</template>
<template #edit-buttons>
<Button
icon="pi pi-ellipsis-v"
class="p-button-icon-only p-button-text p-button-rounded"
@click="showProjectMenu"
/>
<Menu ref="projectMenu" :model="projectMenuItems" :popup="true" />
</template>
<template #overview-summary>
<!-- Description & Contributors -->
<p>
{{ useProjects().activeProject.value?.description }}
</p>
<!-- Project summary KPIs -->
<section class="summary-KPI-bar">
<div
class="summary-KPI"
v-for="(assets, type) of useProjects().activeProject.value?.assets"
:key="type"
>
<span class="summary-KPI-number">{{ assets.length ?? 0 }}</span>
<span class="summary-KPI-label">{{ capitalize(type) }}</span>
</div>
</section>
</tera-asset>
</template>
<section class="content-container">
<h5>Quick links</h5>
<!-- Quick link buttons go here -->
<section>
<div class="quick-links">
<Button
label="Upload resources"
size="large"
icon="pi pi-cloud-upload"
class="p-button p-button-secondary quick-link-button"
@click="isUploadResourcesModalVisible = true"
/>
<Button
label="New model"
size="large"
icon="pi pi-share-alt"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Models)"
/>
<Button
size="large"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Workflows)"
>
<vue-feather
class="p-button-icon-left"
type="git-merge"
size="1.25rem"
stroke="rgb(16, 24, 40)"
/>
<span class="p-button-label">New workflow</span>
</Button>
<Button size="large" class="p-button p-button-secondary quick-link-button">
<compare-models-icon class="icon" />
<span class="p-button-label">Compare models</span>
</Button>
<Button
label="New simulation"
size="large"
icon="pi pi-play"
class="p-button p-button-secondary quick-link-button"
<section class="quick-links">
<Button
label="Upload resources"
size="large"
icon="pi pi-cloud-upload"
class="p-button p-button-secondary quick-link-button"
@click="isUploadResourcesModalVisible = true"
/>
<Button
label="New model"
size="large"
icon="pi pi-share-alt"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Models)"
/>
<Button
size="large"
class="p-button p-button-secondary quick-link-button"
@click="emit('open-new-asset', AssetType.Workflows)"
>
<vue-feather
class="p-button-icon-left"
type="git-merge"
size="1.25rem"
stroke="rgb(16, 24, 40)"
/>
</div>
<span class="p-button-label">New workflow</span>
</Button>
<Button size="large" class="p-button p-button-secondary quick-link-button">
<compare-models-icon class="icon" />
<span class="p-button-label">Compare models</span>
</Button>
<Button
label="New simulation"
size="large"
icon="pi pi-play"
class="p-button p-button-secondary quick-link-button"
/>
</section>
<!-- Resources list table goes here -->
<section class="resource-list">
Expand Down Expand Up @@ -168,19 +156,17 @@
</template>
</DataTable>
</section>
<section class="drag-n-drop">
<tera-upload-resources-modal
:visible="isUploadResourcesModalVisible"
@close="isUploadResourcesModalVisible = false"
/>
</section>
<tera-upload-resources-modal
:visible="isUploadResourcesModalVisible"
@close="isUploadResourcesModalVisible = false"
/>
</section>
<tera-multi-select-modal
:is-visible="showMultiSelect"
:selected-resources="selectedResources"
:buttons="multiSelectButtons"
></tera-multi-select-modal>
</main>
/>
</tera-asset>
</template>

<script setup lang="ts">
Expand Down Expand Up @@ -364,13 +350,6 @@ a {
text-decoration: underline;
}
.overview-banner {
background: url('@/assets/svg/terarium-icon-transparent.svg') no-repeat right 20% center,
linear-gradient(45deg, #8bd4af1a, #d5e8e5 100%) no-repeat;
background-size: 25%, 100%;
height: auto;
}
.content-container {
overflow-y: auto;
padding: 1rem;
Expand All @@ -379,21 +358,20 @@ a {
flex-direction: column;
}
.description {
margin: 1rem;
}
.contributors {
flex-direction: row;
align-items: center;
gap: 0.75rem;
}
p,
.summary-KPI-bar {
color: var(--text-color-primary);
}
.summary-KPI-bar {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.5);
border-radius: var(--border-radius);
Expand Down

0 comments on commit f8478f7

Please sign in to comment.