dan/mangaDownloader
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

More work on setting up the webpage. There's now an active and download button. The reponse should populate the main section of the page in a scrolling overflow box. Although it's a long string instead of a nicely parsed json file at this point.

Browse Source
This commit is contained in:
Dan
2020-07-30 02:51:01 -04:00
parent a728d630a0
commit af4c2dc08d
2 changed files with 38 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
static/style.css
View File

@@ -8,8 +8,8 @@
} }
.grid-container{ .grid-container{
display: grid; display: grid;
grid-template-columns: auto auto auto auto; grid-template-columns: min-content auto auto auto;
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto;
grid-gap: 10px; grid-gap: 10px;
// background-color: #2196F3; // background-color: #2196F3;
padding: 10px; padding: 10px;
@@ -21,12 +21,12 @@
fonrt-size: 30px; fonrt-size: 30px;
} }
.header{ .header{
grid-column-start: 2; grid-column-start: 1;
grid-column-end: 4; grid-column-end: 5;
} }
.nav{ .nav{
grid-column:1; grid-column:1;
border-style: dotted; //border-style: dotted;
} }
ul{ ul{
list-style: none; list-style: none;
@@ -35,8 +35,16 @@ ul{
} }
.main{ .main{
grid-column-start: 2; grid-column-start: 2;
grid-column-end: 4; grid-column-end: 5;
grid-row-start: 2; grid-row-start: 2;
grid-row-end: 4; grid-row-end: 2;
background-color: rgba(255,255,0,0.9); //background-color: rgba(255,255,0,0.9);
overflow: scroll;
height: 200px;
}
.footer{
grid-column-start: 1;
grid-column-end: 5;
grid-row: 3;
padding-bottom:2px;
} }

28
templates/index.html
View File

@@ -10,15 +10,31 @@
<div class="header">Super Awesome Mange Downloading and Viewing Thing</div> <div class="header">Super Awesome Mange Downloading and Viewing Thing</div>
<div class="nav" align="left"> <div class="nav" align="left">
<ul> <ul>
<li><a href="/active"><button class=button>Active</button></a></li> <li><button class=button onclick="activeReturn()">Active</button>
<li><a href="/download"><button class=button>Download</button></a></li> <li><button class=button onclick="downloadReturn()">Download</button>
<li><a href="http://google.com"><button class=button>Test</button></a></li> <!-- <li><a href="http://google.com"><button class=button>google<>/button></a></li>
<li><button class=button>asdfl</button></li> <li><button class=button onclick="clickTest()">asdfl</button></li>-->
</ul> </ul>
</div> </div>
<div class="main"> <div class="main" id="main">
main
</div>
<div class="footer">
bottom stuffs
</div> </div>
</div> </div>
</body> </body>
</html> </html>
<script>
function activeReturn() {
fetch('/active')
.then(response => response.json())
.then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
};
function downloadReturn() {
fetch('/download')
.then(response => response.json())
.then(data => document.getElementById("main").innerHTML = JSON.stringify(data));
};
</script>