Skip to content

Commit

Permalink
Merge pull request #229 from SmartAPI/redesign
Browse files Browse the repository at this point in the history 
fix: 🔨 mobile friendly layout
  • Loading branch information
@marcodarko
marcodarko authored Mar 6, 2024
2 parents 24d4409 + 3fa5dfb commit 3d8fde2
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 83 deletions.
38 changes: 22 additions & 16 deletions web-app/src/components/RegistryItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,27 +84,31 @@
</div>
</div>
<div>
<div class="d-flex justify-content-start grey lighten-3" style="padding: 10px 20px; ">
<button
class="btn btn-small mr-1"
:class="[selection == 'details' ? 'indigo' : 'indigo lighten-2']"
@click="selection = selection == 'details' ? '' : 'details'"><small>Details</small></button>
<button
v-if="api._meta?.has_metakg"
class="btn btn-small mr-1"
:class="[selection == 'metakg' ? 'purple' : 'purple lighten-2']"
@click="selection = selection == 'metakg' ? '' : 'metakg'"><small>MetaKG</small>
<div class="d-flex justify-content-start grey lighten-3" style="padding: 10px 20px">
<button
class="btn btn-small mr-1"
:class="[selection == 'details' ? 'indigo' : 'indigo lighten-2']"
@click="selection = selection == 'details' ? '' : 'details'"
>
<small>Details</small>
</button>
<button
v-if="api._meta?.has_metakg"
class="btn btn-small mr-1"
:class="[selection == 'metakg' ? 'purple' : 'purple lighten-2']"
@click="selection = selection == 'metakg' ? '' : 'metakg'"
>
<small>MetaKG</small>
</button>
</div>
<div v-if="selection == 'details'">
<div
class="card-content detailsBack"
style="padding: 5px 20px"
>
<div class="card-content detailsBack" style="padding: 5px 20px">
<div class="row">
<div class="col s12 right-align">
<small class="grey-text">Updated: </small
><small class="white-text"><span v-text="getDate(api._meta.last_updated)"></span></small>
><small class="white-text"
><span v-text="getDate(api._meta.last_updated)"></span
></small>
</div>
<div class="col s12 left">
<h4
Expand Down Expand Up @@ -199,7 +203,9 @@
style="margin-left: 5px"
title="Edit metadata source on GitHub"
v-if="
user && api._meta.username === user.login && api._meta.url.includes('github')
user &&
api._meta.username === user.login &&
api._meta.url.includes('github')
"
v-bind:href="buildEditURL(api._meta.url)"
target="_blank"
Expand Down
121 changes: 63 additions & 58 deletions web-app/src/components/RegistryMetaKG.vue
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,71 @@
<template>
<div>
<div class="grey lighten-2 metakg-card p-0 row d-flex align-items-stretch m-0">
<h3 class="p-2 grey-text" v-if="loading">Loading...</h3>
<template v-if="!loading && !noHits">
<div class="col s12 m8">
<h5 style="font-weight: lighter">
MetaKG Entity Overview
<small class="right"
>Edges ({{ numberWithCommas(total) }}) | Objects ({{ objects.length }}) | Subjects ({{
subjects.length
}})</small
>
</h5>
<p v-if="total && total > size" class="center yellow lighten-4 orange-text rounded">
This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
numberWithCommas(total)
}})
</p>
<div v-if="graphData" style="max-height: 500px; overflow-y: scroll">
<div class="d-flex flex-wrap align-items-start">
<template v-for="(subjects, object) in graphData" :key="object">
<EntityPill :object="object" :subjects="subjects"></EntityPill>
</template>
</div>
<div class="grey lighten-2 metakg-card p-0 m-0 row">
<h3 class="p-2 purple-text" v-if="loading">Loading...</h3>
<template v-if="!loading && !noHits">
<div class="col s12 m8">
<h5 style="font-weight: lighter">
MetaKG Entity Overview
<small class="right"
>Edges ({{ numberWithCommas(total) }}) | Objects ({{ objects.length }}) | Subjects ({{
subjects.length
}})</small
>
</h5>
<p v-if="total && total > size" class="center yellow lighten-4 orange-text rounded">
This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
numberWithCommas(total)
}})
</p>
<div
v-if="graphData"
class="hide-on-small-only"
style="max-height: 500px; overflow-y: scroll"
>
<div class="d-flex flex-wrap align-items-start">
<template v-for="(subjects, object) in graphData" :key="object">
<EntityPill :object="object" :subjects="subjects"></EntityPill>
</template>
</div>
</div>
<div class="col s12 m4 grey darken-4">
<div class="d-flex justify-content-center">
<img class="scale-in-center" src="@/assets/img/metakg-01.png" width="80" />
<h5 class="white-text center" style="font-weight: lighter">MetaKG Explorer</h5>
</div>
<template v-if="networkData">
<SimpleNetwork :nodes="networkData.nodes" :edges="networkData.edges"></SimpleNetwork>
</template>
<p v-if="total && total > size" class="center yellow lighten-2 black-text rounded">
This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
numberWithCommas(total)
}})
</p>
<p class="center">
<span class="white-text caps">
Explore <b>the full</b> {{ api.info.title }}'s MetaKG
</span>
</p>
<div class="d-flex justify-content-center align-items-center p-1">
<router-link
class="btn btn-large purple white-text"
target="_blank"
:to="{
path: '/portal/translator/metakg',
query: {
q: 'api.smartapi.id:' + api._id
}
}"
>Try It Now <i class="fa fa-external-link" aria-hidden="true"></i
></router-link>
</div>
</div>
<div class="col s12 m4 grey darken-4">
<div class="d-flex justify-content-center">
<img class="scale-in-center" src="@/assets/img/metakg-01.png" width="80" />
<h5 class="white-text center" style="font-weight: lighter">MetaKG Explorer</h5>
</div>
<template v-if="networkData">
<SimpleNetwork :nodes="networkData.nodes" :edges="networkData.edges"></SimpleNetwork>
</template>
<p v-if="total && total > size" class="center yellow lighten-2 black-text rounded">
This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
numberWithCommas(total)
}})
</p>
<p class="center">
<span class="white-text caps">
Explore <b>the full</b> {{ api.info.title }}'s MetaKG
</span>
</p>
<div class="d-flex justify-content-center align-items-center p-1">
<router-link
class="btn btn-large purple white-text"
target="_blank"
:to="{
path: '/portal/translator/metakg',
query: {
q: 'api.smartapi.id:' + api._id
}
}"
>Try It Now <i class="fa fa-external-link" aria-hidden="true"></i
></router-link>
</div>
</template>
<div v-if="!loading && noHits">
<p class="center grey-text p-2">Oops...Can't load this right now...</p>
<p class="center hide-on-med-and-up">
<span class="yellow-text caps"> Not recommended for use on small screens </span>
</p>
</div>
</template>
<div v-if="!loading && noHits">
<p class="center grey-text p-2">Oops...Can't load this right now...</p>
</div>
</div>
</template>
Expand Down
22 changes: 13 additions & 9 deletions web-app/src/components/SimpleNetworkCosmo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
<template>
<div>
<div :id="'cosmo' + badgeID" class="cosmo"></div>
<div class="switch m-1">
<label>
<b :class="{ 'cyan-text': !curvedLinks }">Straight</b>
<input type="checkbox" v-model="curvedLinks" />
<span class="lever"></span>
<b :class="{ 'cyan-text': curvedLinks }">Curved</b>
</label>
<div class="d-flex justify-content-center">
<div>
<div :id="'cosmo' + badgeID" class="cosmo"></div>
<div class="d-flex justify-content-center">
<div class="switch m-1">
<label>
<b :class="{ 'cyan-text': !curvedLinks }">Straight</b>
<input type="checkbox" v-model="curvedLinks" />
<span class="lever"></span>
<b :class="{ 'cyan-text': curvedLinks }">Curved</b>
</label>
</div>
</div>
</div>
</div>
</template>
Expand Down

0 comments on commit 3d8fde2

Please sign in to comment.