tjb1982/medtrace-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revise with layout, etc.

Browse Source
This commit is contained in:
Tom Brennan
2024-04-22 20:46:36 -04:00
parent 5015e79d85
commit 9891ba5b49
18 changed files with 1637 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/App/App.html Normal file
View File

@@ -0,0 +1,178 @@
<template id="app-template">
<link
href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
rel="stylesheet">
<style>
:host {
color: var(--main-text-color);
width: 100%;
}
#cards {
padding: 20px;
display: grid;
grid-template-columns: repeat(auto-fill, 150px);
grid-gap: 2rem 1rem;
justify-content: space-between;
}
a {
background-color: var(--theme-secondary-dark);
text-decoration: none;
transition: all 150ms ease-in-out;
}
a:hover {
background-color: var(--theme-secondary-dark-hover);
}
.hidden {
display: none !important;
}
.context-menu {
display: flex;
justify-content: end;
}
.context-menu-item {
/* nothing yet */
}
.context-menu-item > a {
display: block;
font-size: 25pt;
padding: 5px;
padding-left: 6px;
border-radius: 50%;
box-shadow: 0 0 4px #55a;
color: var(--theme-ink-color);
}
.context-menu-item > a:hover {
box-shadow: 0 0 10px #55a;
}
#main-menu {
cursor: pointer;
}
#not-found {
margin: 0;
padding: 0;
}
#main {
margin-bottom: 100px;
margin-top: 5px;
}
#breadcrumbs {
list-style: none;
margin: 0;
padding: 0 var(--main-side-margin) 0 5px;
display: block;
overflow: auto;
white-space: nowrap;
}
#breadcrumbs li {
margin: 0 6px 0 0;
padding: 10px 0;
margin: 0;
display: none;
}
#breadcrumbs li.show {
display: inline-block;
}
#breadcrumbs li i {
margin: 0 1px;
vertical-align: bottom;
}
#breadcrumbs li a {
text-decoration: none;
color: inherit;
margin-bottom: 2px;
}
[slot] paper-button {
margin: 0;
text-decoration: none;
color: var(--main-text-color);
padding: 0 5px 0 0;
min-width: 0px;
border-radius: 50%;
background: #ffffff55;
height: 32px;
border: 1px solid white;
box-shadow: 0 0 5px #aaa;
box-shadow: 0 0 3px #ddd;
box-shadow: none;
}
[slot] paper-button i {
font-size: var(--icon-size);
}
.context-menu-spacer {
border-right: 1px dotted #fff;
margin: 0 5px;
}
#hamburger {
/* display: none; */
}
#hamburger.show {
display: initial;
}
#breadcrumbs li.show {
padding: 0;
/* margin-top: -20px; */
font-weight: lighter;
}
#breadcrumbs li.show:last-child a {
/* font-size: 1.5em; */
font-weight: bold;
}
#breadcrumbs li.show a {
font-size: .9em;
}
@media screen and (min-width: 700px) {
#breadcrumbs {
padding: 0;
}
}
</style>
<pj-layout id="layout">
<a slot="main-title" href="/"><div id="logo"></div></a>
<div class="context-menu" slot="context-menu">
<div class="context-menu-item">
<a id="main-menu" class="material-icons" tabindex="0">&#xe5d2;</a>
</div>
</div>
<div id="main" slot="main">
<pj-pages id="pages" attr-for-selected="name" default-selection="not-found">
<div name="cards">
<section id="cards">
<my-card>
<span slot="headline">Custom headline</span>
<button id="my-button">click me</button>
</my-card>
<my-card>hello world</my-card>
<my-card>hello world</my-card>
<my-card>hello world</my-card>
<my-card>hello world</my-card>
<my-card>hello world</my-card>
<my-card>hello world</my-card>
<my-card>hello world</my-card>
<my-card>hello world</my-card>
</section>
</div>
<h1 name="not-found" id="not-found">Not found</h1>
<h1 name="bad-route">Bad route</h1>
<h1 name="not-implemented">Not implemented yet</h1>
<h1 name="server-error">Server error</h1>
</pj-pages>
</div>
<pj-nav id="nav" slot="right-drawer" display-mode="stack"></pj-nav>
</pj-layout>
</template>