Skip to content

Commit

Permalink
Merge pull request #280 from biothings/redesign
Browse files Browse the repository at this point in the history
fix: 🔨 editor HTML, citation page and links, fonts
  • Loading branch information
marcodarko authored Aug 14, 2024
2 parents a62f889 + eb262a0 commit 58c1fc3
Show file tree
Hide file tree
Showing 16 changed files with 427 additions and 178 deletions.
4 changes: 4 additions & 0 deletions nuxt-app/app.vue
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,10 @@ useHead({
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap",
},
{
src: "https://code.jquery.com/jquery-3.3.1.slim.min.js",
integrity:
Expand Down
3 changes: 2 additions & 1 deletion nuxt-app/assets/css/bootstrap.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions nuxt-app/assets/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@
--font-family-sans-serif: "Quicksand", sans-serif;
}

body{
body {
font-family: "Quicksand", sans-serif;
font-optical-sizing: auto;
font-weight: 600;
font-weight: 500;
font-style: normal;
}

Expand Down Expand Up @@ -512,6 +512,7 @@ body {
.tippy-box[data-theme~="ddeDark"] {
background-color: var(--dde-dark);
color: white;
font-weight: 400;
}

.tippy-box[data-theme~="ddeDark"][data-placement^="top"]
Expand Down
62 changes: 62 additions & 0 deletions nuxt-app/components/CodeEditorHTML.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<template>
<div id="CM-WP" class="text-left"></div>
</template>

<script>
import { basicSetup, EditorView } from "codemirror";
import { EditorState } from "@codemirror/state";
import { html } from "@codemirror/lang-html";
import { keymap } from "@codemirror/view";
import { defaultKeymap } from "@codemirror/commands";
export default {
name: "CodeEditorHTML",
props: ["item"],
data: function () {
return {
editor: null,
};
},
methods: {
openEditor() {
let self = this;
let state = EditorState.create({
doc: self.item,
extensions: [basicSetup, html(), keymap.of(defaultKeymap)],
});
this.editor = new EditorView({
state,
parent: document.body.querySelector("#CM-WP"),
});
this.$store.commit("setLoading", { value: false });
},
},
watch: {
item: function (v) {
if (this.editor) {
this.editor.dispatch({
changes: {
from: 0,
to: this.editor.state.doc.length,
insert: JSON.stringify(v, null, 2),
},
});
}
},
},
mounted: function () {
this.$store.commit("setLoading", { value: true });
setTimeout(() => {
this.openEditor();
}, 1000);
},
};
</script>

<style>
#CM-WP > .cm-editor {
height: 100vh;
}
</style>
29 changes: 0 additions & 29 deletions nuxt-app/components/CodeEditorWithProp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,6 @@ export default {
};
},
methods: {
SaveDefinition() {
let self = this;
let value = self.editor.state.doc;
let copy = Object.assign({}, self.item);
try {
copy.validation = JSON.parse(value);
this.$store.commit("editValidationItem", {
item: copy,
});
} catch (error) {
new Notify({
status: "",
title: "Validation Editor Error",
text: error.toString(),
effect: "fade",
speed: 300,
customClass: null,
customIcon: null,
showIcon: true,
showCloseButton: true,
autoclose: true,
autotimeout: 3000,
gap: 20,
distance: 20,
type: 1,
position: "right top",
});
}
},
openEditor() {
let self = this;
let language = new Compartment(),
Expand Down
7 changes: 6 additions & 1 deletion nuxt-app/components/Footer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
</li>
<li>
<nuxt-link class="d-block text-light" to="/portal"
>Data Portals</nuxt-link
>Data portals</nuxt-link
>
</li>
<li>
Expand Down Expand Up @@ -77,6 +77,11 @@
>FAQ</nuxt-link
>
</li>
<li>
<nuxt-link class="d-block text-light" to="/how-to-cite"
>How to Cite</nuxt-link
>
</li>
</ul>
</div>
<div class="p-2">
Expand Down
96 changes: 44 additions & 52 deletions nuxt-app/components/Nav.vue
Original file line number Diff line number Diff line change
Expand Up @@ -46,67 +46,35 @@ let menu = ref(false);
<li class="nav-item">
<nuxt-link class="nav-link h-link" to="/about">About</nuxt-link>
</li>
<li
class="nav-item"
data-tippy-content="Create discoverable metadata"
>
<nuxt-link class="nav-link h-link" to="/best-practices"
>Discovery Guide</nuxt-link
>
</li>
<li class="nav-item">
<nuxt-link
class="nav-link h-link"
to="/schema-playground"
data-tippy-content="Create and Visualize a Schema"
>Schema Playground</nuxt-link
>
</li>
<!-- <li class="nav-item">
<nuxt-link
class="nav-link h-link"
to="/validator"
data-tippy-content="Validate metadata against a chosen schema"
>Metadata Validator</nuxt-link
>
</li> -->
<li class="nav-item dropdown d-inline">
<nuxt-link
class="nav-link dropdown-toggle"
to="/metadata-playground"
id="metaDropdown"
to="/registries"
id="navbarDropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
Metadata Toolkit
Registry
</nuxt-link>
<div
class="dropdown-menu p-1"
aria-labelledby="metaDropdown"
aria-labelledby="navbarDropdown"
style="max-width: none"
>
<nuxt-link
class="dropdown-item mainTextLight text-left"
to="/validator"
to="/resource"
>
<img
:src="validator_img"
width="20"
height="20"
alt="Validator" />
Metadata Validator <i class="fas fa-chevron-right"></i
<img :src="res_reg" width="20" height="20" alt="Validator" />
Resource Registry <i class="fas fa-chevron-right"></i
></nuxt-link>
<nuxt-link
class="dropdown-item mainTextDark text-left"
to="/markup-generator"
to="/registry"
>
<img
:src="generator_img"
width="20"
height="20"
alt="Generator" />
Markup Generator<i class="fas fa-chevron-right"></i
<img :src="schema_reg" width="20" height="20" alt="Validator" />
Schema Registry <i class="fas fa-chevron-right"></i
></nuxt-link>
</div>
</li>
Expand Down Expand Up @@ -143,35 +111,59 @@ let menu = ref(false);
<li class="nav-item dropdown d-inline">
<nuxt-link
class="nav-link dropdown-toggle"
to="/registries"
id="navbarDropdown"
to="/metadata-playground"
id="metaDropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
Registry
Metadata Toolkit
</nuxt-link>
<div
class="dropdown-menu p-1"
aria-labelledby="navbarDropdown"
aria-labelledby="metaDropdown"
style="max-width: none"
>
<nuxt-link
class="dropdown-item mainTextLight text-left"
to="/resource"
to="/validator"
>
<img :src="res_reg" width="20" height="20" alt="Validator" />
Resource Registry <i class="fas fa-chevron-right"></i
<img
:src="validator_img"
width="20"
height="20"
alt="Validator" />
Metadata Validator <i class="fas fa-chevron-right"></i
></nuxt-link>
<nuxt-link
class="dropdown-item mainTextDark text-left"
to="/registry"
to="/markup-generator"
>
<img :src="schema_reg" width="20" height="20" alt="Validator" />
Schema Registry <i class="fas fa-chevron-right"></i
<img
:src="generator_img"
width="20"
height="20"
alt="Generator" />
Markup Generator<i class="fas fa-chevron-right"></i
></nuxt-link>
</div>
</li>
<li
class="nav-item"
data-tippy-content="Create discoverable metadata"
>
<nuxt-link class="nav-link h-link" to="/best-practices"
>Discovery Guide</nuxt-link
>
</li>
<li class="nav-item">
<nuxt-link
class="nav-link h-link"
to="/schema-playground"
data-tippy-content="Create and Visualize a Schema"
>Schema Playground</nuxt-link
>
</li>
<login></login>
</ul>
</div>
Expand Down
Loading

0 comments on commit 58c1fc3

Please sign in to comment.