Skip to content

Commit

Permalink
Merge pull request #277 from biothings/redesign
Browse files Browse the repository at this point in the history
fix: 🔨 consistent headers
  • Loading branch information
marcodarko authored Aug 9, 2024
2 parents ac1ee84 + b38ce71 commit 0c0a034
Show file tree
Hide file tree
Showing 18 changed files with 204 additions and 272 deletions.
8 changes: 4 additions & 4 deletions nuxt-app/assets/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,10 @@
color: var(--dde-accent);
}

.min-100 {
min-height: 100vh;
}

.whiteFadeBox {
width: 100%;
height: 30%;
Expand Down Expand Up @@ -1012,10 +1016,6 @@ span.fa-stack:hover > svg:nth-child(1) {
background: linear-gradient(to right, #4a7d8f 0%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 );
}
.userInfo {
box-shadow: 0px 2px 10px var(--dde-accent);
border-bottom: 10px solid #63296b;
}
.stepBox {
position: relative;
width: 100%;
Expand Down
9 changes: 9 additions & 0 deletions nuxt-app/components/Title.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script setup>
const props = defineProps(["title", "subtitle"]);
</script>
<template>
<div class="p-5 text-dde-dark text-center mt-5">
<h1>{{ title }}</h1>
<h5 v-if="subtitle">{{ subtitle }}</h5>
</div>
</template>
8 changes: 3 additions & 5 deletions nuxt-app/pages/about/index.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<template>
<div id="about" style="min-height: 100vh" class="bg-white">
<div class="container" style="margin-top: 40px">
<div class="jumbotron bg-white mt-5">
<h1 class="text-dde-dark mb-0">About the Data Discovery Project</h1>
</div>
<div id="about" class="min-100">
<div class="container">
<Title title="About the Data Discovery Project"></Title>

<div class="p-1">
<h5 class="mainTextDark caps">
Expand Down
10 changes: 2 additions & 8 deletions nuxt-app/pages/best-practices/index.vue
Original file line number Diff line number Diff line change
@@ -1,12 +1,6 @@
<template>
<div
id="guides"
class="container-fluid text-dark"
style="min-height: 100vh; padding-top: 60px"
>
<div class="bg-light text-center mt-5 p-1">
<h1 class="mainTextLight">DATASET DISCOVERY BEST PRACTICES</h1>
</div>
<div id="guides" class="container-fluid text-dark min-100">
<Title title="Resource Discovery Best Practices"></Title>
<div class="text-center mb-5">
<div class="col-md-8 col-sm-12 m-auto p-3 container text-left text-dark">
<p class="d-flex justify-content-center align-items-center">
Expand Down
4 changes: 1 addition & 3 deletions nuxt-app/pages/branding/index.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<template>
<div id="about" style="min-height: 100vh" class="reg-hero">
<div class="jumbotron p-5 mt-5 bg-dde-mid">
<h1 class="text-light">Branding</h1>
</div>
<Title title="Branding"></Title>
<div class="jumbotron bg-light p-5 mt-5 text-dde-dark">
<h2>Terms of Use</h2>
<p>
Expand Down
22 changes: 9 additions & 13 deletions nuxt-app/pages/dashboard/index.vue
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
<template>
<section id="dashboard" class="bg-dde-dark">
<div
class="container"
style="min-height: 100vh; padding-top: 80px"
v-if="userInfo?.login"
>
<h1 class="text-light caps mt-5">
{{
<section id="dashboard" class="bg-light">
<div class="container min-100" v-if="userInfo?.login">
<Title
:title="
userInfo?.name
? "Hello, " + userInfo.name.split(" ")[0] + "!"
: "My Dashboard"
}}
</h1>
? 'Hello, ' + userInfo.name.split(' ')[0] + '!'
: 'My Dashboard'
"
></Title>
<div class="dashboard">
<div class="row mb-5">
<!-- uSER BOX -->
<div class="col-sm-2 p-0 userInfo bg-dde-mid">
<div class="col-sm-2 p-0 bg-dde-mid">
<div class="pRelative">
<img
v-if="userInfo.avatar_url"
Expand Down
9 changes: 3 additions & 6 deletions nuxt-app/pages/faq/[[portal]].vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,9 @@ useHead({
</script>

<template>
<main class="bg-dde-mid text-light" style="min-height: 100vh">
<div
class="jumbotron bg-dde-dark text-center pt-5"
style="margin-top: 40px"
>
<h1 class="text-light" v-text="name"></h1>
<main class="bg-light text-dde-dark min-100">
<Title :title="name"></Title>
<div class="text-center p-2">
<span>
Jump To:
<template v-for="section in faq" :key="section + '1'">
Expand Down
10 changes: 3 additions & 7 deletions nuxt-app/pages/json-schema-viewer/index.vue
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
<template>
<div
id="jsoneditor"
class="container"
style="min-height: 100vh; padding-top: 60px"
>
<div class="bg-light text-center mt-1 py-5">
<h1 class="text-dde-dark">JSON SCHEMA VIEWER</h1>
<div id="jsoneditor" class="container min-100">
<div class="bg-light text-center">
<Title title="JSON Schema Viewer"></Title>
<div class="mb-1">
<form id="linkForm" class="col-sm-10 m-auto" @submit="loadSchema()">
<small v-html="loadMsg"></small>
Expand Down
51 changes: 16 additions & 35 deletions nuxt-app/pages/login/index.vue
Original file line number Diff line number Diff line change
@@ -1,40 +1,21 @@
<template>
<div
id="login"
class="jumbotron text-center d-flex justify-content-center align-items-center"
style="min-height: 95vh"
>
<div class="p-2">
<div class="row m-0">
<div class="col-sm-12 text-center">
<img
src="@/assets/img/dde-logo-o.svg"
width="100"
height="100"
alt="DDE"
/>
<h3 class="text-muted">Select the login method</h3>
<hr />
<div id="login" class="min-100">
<Title title="Select Login Method"></Title>
<div
class="jumbotron bg-light d-flex justify-content-center align-items-center"
>
<div class="row m-0 w-100">
<div class="col-sm-6 jumbotron text-center bg-dde-dark">
<a id="ghButton" role="button" class="btn btn-light mainTextDark"
>Login with Github
<font-awesome-icon icon="fa fa-chevron-right"></font-awesome-icon
></a>
</div>
<div class="col-sm-12" v-if="$route.fullPath.includes('n3c')">
<p class="m-0 text-info">
N3C members please use NCATS UNA to log in. Login with GitHub is
disabled.
</p>
</div>
<div class="col-sm-12 row m-0 opt-bg py-5">
<div class="col-sm-6 p-2">
<a id="ghButton" role="button" class="btn btn-light mainTextDark"
>Login with Github
<font-awesome-icon icon="fa fa-chevron-right"></font-awesome-icon
></a>
</div>
<div class="col-sm-6 p-2">
<a id="samlLink" role="button" class="btn btn-light mainTextLight"
>Login with NCATS UNA
<font-awesome-icon icon="fa fa-chevron-right"></font-awesome-icon
></a>
</div>
<div class="col-sm-6 jumbotron text-center bg-dde-mid">
<a id="samlLink" role="button" class="btn btn-light mainTextLight"
>Login with NCATS UNA
<font-awesome-icon icon="fa fa-chevron-right"></font-awesome-icon
></a>
</div>
</div>
</div>
Expand Down
12 changes: 3 additions & 9 deletions nuxt-app/pages/markup-generator/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { useRouter, useRoute } from "vue-router";
import CodeEditorWithProp from "../../components/CodeEditorWithProp";
import InputBox from "../../components/guide/InputBox";
import generator_img from "../../assets/img/generator.svg";
const { $swal } = useNuxtApp();
const runtimeConfig = useRuntimeConfig();
Expand Down Expand Up @@ -137,14 +136,9 @@ onMounted(() => {
});
</script>
<template>
<div class="mt-4 p-0 bg-light">
<div class="container text-left bg-light pt-2">
<div class="mt-5 text-center">
<h1 class="p-1 text-dde-dark">
<img :src="generator_img" width="100" height="100" alt="Generator" />
{{ searchTerm || "Markup Generator" }}
</h1>
</div>
<div class="bg-light min-100">
<div class="container text-left bg-light">
<Title :title="searchTerm || 'Markup Generator'"></Title>
<div class="m-0 row p-1 bg-dde-mid">
<div class="col-sm-12 bg-dde-dark p-2">
<form @submit.prevent="handleSubmit()" class="d-flex col-sm-5">
Expand Down
136 changes: 63 additions & 73 deletions nuxt-app/pages/metadata-playground/index.vue
Original file line number Diff line number Diff line change
@@ -1,81 +1,71 @@
<script setup>
import validator_img from "@/assets/img/validator.svg";
import generator_img from "@/assets/img/generator.svg";
useHead({
title: "DDE | Registries",
meta: [
{
name: "twitter:image",
content: "https://i.postimg.cc/wTG3pgRY/featured.jpg",
},
{
property: "og:image",
content: "https://i.postimg.cc/wTG3pgRY/featured.jpg",
},
{
property: "og:url",
content: "http://discovery.biothings.io/registries",
},
{
name: "twitter:url",
content: "http://discovery.biothings.io/registries",
},
{
property: "og:description",
content:
"Browse structured resource metadata or available namespaces and schemas on the DDE",
},
{
name: "description",
content:
"Browse structured resource metadata or available namespaces and schemas on the DDE",
},
{
name: "twitter:card",
content:
"Browse structured resource metadata or available namespaces and schemas on the DDE",
},
],
});
</script>

<template>
<div
class="jumbotron text-center d-flex justify-content-center align-items-center"
style="min-height: 90vh"
>
<div class="p-2">
<div class="row m-0">
<div class="col-sm-12 text-center">
<img
src="@/assets/img/dde-logo-o.svg"
width="100"
height="100"
alt="DDE"
/>
<h3 class="text-muted caps">Validate and create great metadata</h3>
<div class="min-100">
<Title title="Validate and Create Metadata"></Title>
<div
class="jumbotron bg-light d-flex justify-content-center align-items-center"
>
<div class="row m-0 w-100">
<div class="col-sm-6 jumbotron text-center bg-dde-dark">
<img :src="validator_img" width="150" alt="validate" />
<hr />
<router-link to="/validator" class="btn btn-light mainTextDark"
>Validate your metadata against an existing schema
<font-awesome-icon icon="fas fa-chevron-right"
/></router-link>
</div>
<div class="col-sm-12 row m-0 opt-bg py-5">
<div class="col-sm-6 p-2">
<router-link to="/validator" class="btn btn-light mainTextDark"
>Validate your metadata against an existing schema
<font-awesome-icon icon="fas fa-chevron-right"
/></router-link>
</div>
<div class="col-sm-6 p-2">
<router-link
to="/markup-generator"
class="btn btn-light mainTextLight"
>Create new metadata based off an existing schema
<font-awesome-icon icon="fas fa-chevron-right"
/></router-link>
</div>
<div class="col-sm-6 jumbotron text-center bg-dde-mid">
<img :src="generator_img" width="150" alt="generate" />
<hr />
<router-link
to="/markup-generator"
class="btn btn-light mainTextLight"
>Create new metadata based off an existing schema
<font-awesome-icon icon="fas fa-chevron-right"
/></router-link>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
name: "Registries",
head() {
return {
title: "DDE | Registries",
meta: [
{
name: "twitter:image",
content: "https://i.postimg.cc/wTG3pgRY/featured.jpg",
},
{
property: "og:image",
content: "https://i.postimg.cc/wTG3pgRY/featured.jpg",
},
{
property: "og:url",
content: "http://discovery.biothings.io/registries",
},
{
name: "twitter:url",
content: "http://discovery.biothings.io/registries",
},
{
property: "og:description",
content:
"Browse structured resource metadata or available namespaces and schemas on the DDE",
},
{
name: "description",
content:
"Browse structured resource metadata or available namespaces and schemas on the DDE",
},
{
name: "twitter:card",
content:
"Browse structured resource metadata or available namespaces and schemas on the DDE",
},
],
};
},
};
</script>
22 changes: 12 additions & 10 deletions nuxt-app/pages/ns/index.vue
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
<template>
<div
class="d-flex justify-content-center align-items-center min-h-100 discoveryIntroBack alert-secondary"
>
<div class="col-sm-10 text-center">
<h1 class="mainTextDark">Schema Viewer</h1>
<p>Visualize and Register Your Own Schema</p>
<div class="jumbotron grad-dark text-light text-left shadow">
<h2>Get started:</h2>
<SchemaViewerForm></SchemaViewerForm>
<div class="min-100 bg-light">
<Title
title="Schema Viewer"
subtitle="Visualize and Register Your Own Schema"
></Title>
<div class="d-flex justify-content-center align-items-center mt-5">
<div class="col-sm-10 text-center">
<div class="jumbotron grad-dark text-light text-left shadow">
<h2>Get started:</h2>
<SchemaViewerForm></SchemaViewerForm>
</div>
</div>

</div>

</div>
</template>

Expand Down
Loading

0 comments on commit 0c0a034

Please sign in to comment.