kiwix/kiwix-desktop
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-desktop.git synced 2025-09-23 03:58:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add a bit of styling.

Browse Source 
Still need a lot of works
This commit is contained in:
Matthieu Gautier 2018-10-17 14:47:09 +02:00
parent 7a83a1038d
commit 235b82166e
1 changed files with 90 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
resources/texts/_contentManager.html
View File

@ -94,9 +94,60 @@ function init() {
} }
</script> </script>
<style> <style>
body {
padding: 0;
margin: 0;
}
#app { #app {
display: flex; display: flex;
} }
#sideBar {
flex-grow: 0;
flex-basis: 284px;
flex-shrink: 0;
}
#mainContent {
flex-grow: 1;
}
#bookList {
width:100%;
}
.tablerow {
display: flex;
flex-direction: row;
width: 100%;
}
.tablecell{
flex-basis:20%;
}
.cell0 {
flex-basis: 60px;
flex-grow: 0;
flex-shrink: 0;
}
.cell0 > img {
width: 24px;
height: 24px;
}
.cell1 {
flex-grow: 1;
}
summary::-webkit-details-marker {
display: none
}
summary {
height: 64px;
}
.book {
border-top: 1px solid #99F;
padding: 10px;
}
button {
color: blue;
border: 0px;
background: transparent;
}
</style> </style>
</head> </head>
<body onload="init()"> <body onload="init()">
@ -110,46 +161,52 @@ function init() {
<li><a>Content type:</a></li> <li><a>Content type:</a></li>
</ul> </ul>
</div> </div>
<div> <div id="mainContent">
<div id="searchBar"> <div id="searchBar">
<form> <form>
<input /> <input />
</form> </form>
</div> </div>
<div id="bookList"> <div id="bookList">
<div class="header"> <div class="header tablerow">
<span>File name</span><span>Size</span><span>Date</span><span>Content type</span> <span class="tablecell cell0"></span>
<span class="tablecell cell1">File name</span>
<span class="tablecell cell1">Size</span>
<span class="tablecell cell1">Date</span>
<span class="tablecell cell1">Content type</span>
<span class="tablecell cell1"></span>
</div> </div>
<ul> <details v-for="book in books" class="book">
<li v-for="book in books"> <summary class="tablerow">
<div class="book header"> <span class="tablecell cell0">
<span> <img v-bind:src="'data:image/png;base64,' + book.favicon"/>
<img v-bind:src="'data:image/png;base64,' + book.favicon"/> {{ book.title }}
</span> </span>
<span> <span class="tablecell cell1">
{{ book.title }}
</span>
<span class="tablecell cell1">
{{ niceBytes(book.size) }} {{ niceBytes(book.size) }}
</span> </span>
<span> <span class="tablecell cell1">
{{ book.date }} {{ book.date }}
</span> </span>
<span> <span class="tablecell cell1">
{{ book.tags }} {{ book.tags }}
</span> </span>
<span> <span class="tablecell cell1">
<template v-if="book.downloadId"> <template v-if="book.downloadId">
<span v-if="downloads[book.id]"> <span v-if="downloads[book.id]">
{{ niceBytes(downloads[book.id].completedLength) }} / {{ niceBytes(downloads[book.id].totalLength) }} {{ niceBytes(downloads[book.id].completedLength) }} / {{ niceBytes(downloads[book.id].totalLength) }}
</span> </span>
</template> </template>
<button v-else-if="book.path" v-on:click="openBook(book)">Open</button> <button v-else-if="book.path" v-on:click="openBook(book)">Open</button>
<button v-else v-on:click="downloadBook(book)">Download ({{niceBytes(book.size)}})</button> <button v-else v-on:click="downloadBook(book)">Download</button>
</span> </span>
</div> </summary>
<div class="book content"> <p class="content">
{{ book.description }} {{ book.description }}
</div> </p>
</li> </details>
</ul>
<div class="footer"> <div class="footer">
<button v-on:click="contentManager.currentPage = 0">First</button> <button v-on:click="contentManager.currentPage = 0">First</button>
<button v-on:click="changePage(-1)">Previous</button> <button v-on:click="changePage(-1)">Previous</button>