Survey Slate | Technical OverviewSurvey Slate | Common ComponentsSurvey Slate | Survey ComponentsSurvey Slate | Admin ToolsSurvey Slate | Designer ToolsSurvey Slate | Designer UISurvey Slate | Survey Filler UIUser Guide for Survey Slate DesignerSurvey Slate | StylingTachyons CSS and some extras
Survey Slate | Admin UI
viewof loginView = html`<div class="flex flex-column brand-font bg-near-white" style="overflow-y: auto; height:600px;">
<header class="solid-shadow-y-1">
${pageHeader(["GESI Survey", "Admin", "Users"])}
</header>
<main class="pa3 space-y-3">
<div class="[ card ][ solid-shadow-1 mt4 ml-auto mr-auto mw6 space-y-3 ]">
${Inputs.text({label: "Secret Access Key"})}
${Inputs.button("Login")}
</div>
</main>
<div style="margin-top: auto">${pageFooter()}</div>
`
viewof usersPage = html`<div class="flex flex-column brand-font bg-near-white" style="overflow-y: auto; height:600px;">
<header class="solid-shadow-y-1">
${pageHeader(["GESI Survey", "Admin", "Users"])}
${nav([
{label: "Users", href:"#users", active: true},
{label: "Accounts", href:"#accounts"},
{label: "Surveys", href:"#surveys"},
])}
</header>
<main class="pa3 space-y-3">
<div class="toolbar flex justify-end">
<div class="button-group">
${Inputs.button(buttonLabel({label: "Add user", iconLeft: "plus"}))}
</div>
</div>
<div class="[ card ][ solid-shadow-1 ]">
<div class="c-table">${usersTable}</div>
</div>
</main>
<div style="margin-top: auto">${pageFooter()}</div>
`
usersTable = md`|User | Accounts |
|:--|:--|
|[James Moriarty](#)| BM-ABC, UO-MATH|
|[John Watson](#)| BE-SY|
|[Mycroft Holmes](#)| BE-SY|`
nav([
{label: "Users", href:"#", active: true},
{label: "Accounts", href:"#"},
{label: "Surveys", href:"#"},
])
stylesForNotebooks = html`<style>
a[href].nav {
color: var(--text-on-brand);
}
a[href].nav:hover {
text-decoration: none;
}`
html`
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<style type="text/css" media="screen, print">
body {
font-family: var(--brand-font);
}
</style>
`
tachyonsExt({
colors: {
brand: mainColors[900], // or, provide and color hex code
accent: accentColors[900], // or, provide and color hex code
// The color of text which are usually displayed on top of the brand or accent colors.
"text-on-brand": "#ffffff",
},
fonts: {
"brand-font": `"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`
}
})
styles
prototypeStyles = html`<style>
.c-table table {
margin: 0;
max-width: 100%;
}
</style>`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.