mirror of
https://github.com/BobbyWibowo/lolisafe.git
synced 2024-12-13 16:06:21 +00:00
Updates
* Improved list view. When a row is clicked, as long as it has a thumbnail, a modal will pop-out to show the thumbnail. * Improved image placement in thumb view. * Refactored all instances of id attribute in HTML files to use double quotes instead of single quote.
This commit is contained in:
Bobby Wibowo
parent
66a63ca6d6
commit
7770192ca8
@ -55,13 +55,13 @@
|
||||
<section class="hero is-fullheight">
|
||||
<div class="hero-head">
|
||||
<div class="container">
|
||||
<h1 class="title" id='title' style='margin-top: 1.5rem;'></h1>
|
||||
<h1 class="subtitle" id='count'></h1>
|
||||
<h1 class="title" id="title" style='margin-top: 1.5rem;'></h1>
|
||||
<h1 class="subtitle" id="count"></h1>
|
||||
<hr>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-body">
|
||||
<div class="container" id='container'>
|
||||
<div class="container" id="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -63,7 +63,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<section id='login' class="hero is-fullheight">
|
||||
<section id="login" class="hero is-fullheight">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-centered">
|
||||
|
||||
@ -13,10 +13,10 @@
|
||||
<link rel="stylesheet" type="text/css" href="libs/bulma/bulma.min.css?v=K6t86DbYuR">
|
||||
<link rel="stylesheet" type="text/css" href="libs/fontello/fontello.css?v=V2RnA3Mwhh">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css?v=XcTZuW9fFV">
|
||||
<link rel="stylesheet" type="text/css" href="css/dashboard.css?v=K6t86DbYuR">
|
||||
<link rel="stylesheet" type="text/css" href="css/dashboard.css?v=GBG98Tjuxh">
|
||||
<script type="text/javascript" src="libs/sweetalert/sweetalert.min.js?v=K6t86DbYuR"></script>
|
||||
<script type="text/javascript" src="libs/axios/axios.min.js?v=V2RnA3Mwhh"></script>
|
||||
<script type="text/javascript" src="js/dashboard.js?v=K6t86DbYuR"></script>
|
||||
<script type="text/javascript" src="js/dashboard.js?v=GBG98Tjuxh"></script>
|
||||
|
||||
<!-- Open Graph tags -->
|
||||
<meta property="og:type" content="website" />
|
||||
@ -54,7 +54,7 @@
|
||||
|
||||
<body>
|
||||
|
||||
<section id='auth' class="hero is-light is-fullheight">
|
||||
<section id="auth" class="hero is-light is-fullheight">
|
||||
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
@ -63,8 +63,8 @@
|
||||
</h1>
|
||||
<h2 class="subtitle">
|
||||
<p class="control has-addons">
|
||||
<input id='token' class="input is-danger" type="text" placeholder="Your admin token">
|
||||
<a id='tokenSubmit' class="button is-danger is-outlined">Check</a>
|
||||
<input id="token" class="input is-danger" type="text" placeholder="Your admin token">
|
||||
<a id="tokenSubmit" class="button is-danger is-outlined">Check</a>
|
||||
</p>
|
||||
</h2>
|
||||
</div>
|
||||
@ -86,7 +86,7 @@
|
||||
|
||||
<div class="columns">
|
||||
<div class="column is-one-quarter">
|
||||
<aside class="menu" id="menu">
|
||||
<aside id="menu" class="menu">
|
||||
<p class="menu-label">General</p>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
@ -102,7 +102,7 @@
|
||||
<a id="itemManageGallery" onclick="panel.getAlbums()">Manage your albums</a>
|
||||
</li>
|
||||
<li>
|
||||
<ul id='albumsContainer'></ul>
|
||||
<ul id="albumsContainer"></ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label">Administration</p>
|
||||
@ -122,7 +122,7 @@
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
<div class="column has-text-centered is-third-quarters" id='page'>
|
||||
<div id="page" class="column has-text-centered is-third-quarters">
|
||||
<img src="images/logo.png">
|
||||
</div>
|
||||
</div>
|
||||
@ -130,5 +130,16 @@
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-background" onclick="panel.closeModal()"></div>
|
||||
<div class="modal-content" style="background-color: #31363b; border-radius: 5px; box-shadow: 0 2px 3px rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.1); padding: 20px; width: auto;">
|
||||
<figure class="image" style="width: 200px; height: 200px; display: flex; align-items: center;">
|
||||
<img id="modalImage">
|
||||
</figure>
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close" onclick="panel.closeModal()"></button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -92,11 +92,9 @@ section#dashboard .table {
|
||||
}
|
||||
|
||||
section#dashboard div#table div.column {
|
||||
display:flex;
|
||||
/*
|
||||
display: flex;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
*/
|
||||
margin: 9px;
|
||||
background-color: #31363b;
|
||||
overflow: hidden;
|
||||
@ -104,8 +102,6 @@ section#dashboard div#table div.column {
|
||||
}
|
||||
|
||||
section#dashboard div#table div.column .title {
|
||||
width: 200px;
|
||||
line-height: 200px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@ -113,10 +109,6 @@ section#dashboard div#table div.column a.image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
section#dashboard div#table div.column a.image img {
|
||||
width:200px;
|
||||
}
|
||||
|
||||
section#dashboard div#table div.column.image-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -85,6 +85,10 @@ panel.logout = () => {
|
||||
location.reload('.')
|
||||
}
|
||||
|
||||
panel.closeModal = () => {
|
||||
document.getElementById('modal').className = 'modal'
|
||||
}
|
||||
|
||||
panel.getUploads = (album, page) => {
|
||||
if (page === undefined) page = 0
|
||||
|
||||
@ -207,12 +211,12 @@ panel.getUploads = (album, page) => {
|
||||
|
||||
tr.innerHTML = `
|
||||
<tr>
|
||||
<th><a href="${item.file}" target="_blank">${item.file}</a></th>
|
||||
<th><a href="${item.file}" target="_blank" onclick="event.stopPropagation()">${item.file}</a></th>
|
||||
<th>${displayAlbumOrUser}</th>
|
||||
<td>${item.size}</td>
|
||||
<td>${item.date}</td>
|
||||
<td>
|
||||
<a class="button is-small is-danger is-outlined" title="Delete album" onclick="panel.deleteFile(${item.id}, ${album}, ${page})">
|
||||
<a class="button is-small is-danger is-outlined" title="Delete album" onclick="event.stopPropagation(); panel.deleteFile(${item.id}, ${album}, ${page})">
|
||||
<span class="icon is-small">
|
||||
<i class="fa icon-trash"></i>
|
||||
</span>
|
||||
@ -222,6 +226,13 @@ panel.getUploads = (album, page) => {
|
||||
`
|
||||
|
||||
table.appendChild(tr)
|
||||
|
||||
if (item.thumb) {
|
||||
tr.addEventListener('click', function (event) {
|
||||
document.getElementById('modalImage').src = item.thumb
|
||||
document.getElementById('modal').className += ' is-active'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@ -65,10 +65,10 @@
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1 id='title' class="title">
|
||||
<h1 id="title" class="title">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<h1 id='count' class="subtitle">
|
||||
<h1 id="count" class="subtitle">
|
||||
{{ count }} files
|
||||
</h1>
|
||||
|
||||
@ -78,7 +78,7 @@
|
||||
|
||||
<hr>
|
||||
|
||||
<div id='table' class="columns is-multiline is-mobile is-centered">
|
||||
<div id="table" class="columns is-multiline is-mobile is-centered">
|
||||
{{#each files}}
|
||||
<div class="column is-narrow">
|
||||
<a href="{{ this.file }}" target="_blank">{{{ this.thumb }}}</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user