Commit 66de6691 authored by Josh's avatar Josh
Browse files

fixing format

parent e918907a
static/GeoEye-0.jpg

232 KB | W: | H:

static/GeoEye-0.jpg

1.2 MB | W: | H:

static/GeoEye-0.jpg
static/GeoEye-0.jpg
static/GeoEye-0.jpg
static/GeoEye-0.jpg
  • 2-up
  • Swipe
  • Onion skin
......@@ -23,13 +23,19 @@ function showDBViewer( data=false )
/* Mask Toolbar template */
const DBViewerTemplate = document.createElement( "template" );
DBViewerTemplate.innerHTML = `
<div class="mask-toolbar-container">
<div class="db-view-container">
<!--
<div id="image-file-list">
<ul>
</div>
-->
<div id="image-view">
<img id="original-image" src="static/default.jpg">
</img>
<div id="original-image">
<img src="static/GeoEyeLarge-2.jpg">
</div>
<div id="slice-image">
<img src="static/default.jpg">
</div>
</div>
</div>
`;
......
......@@ -6,17 +6,16 @@
db-viewer {
width: 100%;
height: 100%;
overflow: scroll;
}
.mask-toolbar-container {
width: 100%;
height: 100%;
.db-view-container {
display: grid;
grid-template-columns: 20% 80%;
grid-template-rows: 100%;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas:
"image-list image-view"
"image-view";
}
#image-file-list {
......@@ -43,17 +42,21 @@ db-viewer {
padding: 10px;
display: grid;
grid-template-columns: auto;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"original-img"
"slice-img original-img"
}
#original-image {
grid-area: original-img;
}
#slice-image {
grid-area: slice-img;
}
/*
* DB List Element
*/
......
......@@ -19,42 +19,44 @@ html, body {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto 1fr; /* 3 lines */
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr; /* 3 lines */
grid-template-rows: 75px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
"header"
"content";
}
.header {
background-color: #333;
grid-area: header;
padding: 30px;
}
.header #headerContainer {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
color: white;
box-sizing: border-box;
padding-left: 3%;
padding-top: 25px;
}
.header #headerContainer #siteName {
.header #headerContainer div {
font-size: large;
font-weight: bold;
margin-right: 50px;
}
.content {
background-color: #ecf0f1;
grid-area: content;
padding: 3%;
box-sizing: border-box;
padding: 2%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
overflow: hidden;
}
.sideBar {
......@@ -78,8 +80,9 @@ html, body {
}
.jobPrompt {
width: 200px;
width: 225px;
height: 250px;
box-sizing: border-box;
padding: 30px;
background-color: white;
display: flex;
......
......@@ -25,18 +25,20 @@
</div>
</div>
<div id="main-content" class="content">
<div class="jobPrompt">
<!--
<!--
<button class="button jobPromptButton">Process Image</button>
<button class="button jobPromptButton" onclick="loadMaskCreator()">Create Mask</button>
<button class="button jobPromptButton">Create Model</button>
-->
-->
<button class="button jobPromptButton" onclick="loadImageList( showDBViewer )">View Database</button>
<button class="button jobPromptButton">Import Image</button>
</div>
</div>
<div class="sideBar"></div>
<div class="footer"> FOOTER </div>
</div>
</div>
<!--<div class="sideBar"></div>-->
<!--<div class="footer"> FOOTER </div>-->
</div>
</body>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment