medvedych/fotostore
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Pagination #9

Merged
alpha6 merged 2 commits from pagination into master 2017-08-04 10:01:35 +03:00
Conversation 0 Commits 2 Files changed 3 +53 -19
4 changed files with 53 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d2d31fd8c3 - Show all commits

26
public/css/main.css
View file

@ -1,16 +1,40 @@
.progress-bar {
height: 18px;
background: green;
}
.foto-block { .foto-block {
/* border: 1px solid black; */ /* border: 1px solid black; */
} }
.foto-block .image { .foto-block .image {
padding: 5px; padding: 5px;
} }
.foto-block .foto-notes { .foto-block .foto-notes {
padding: 5px; padding: 5px;
} }
.copy-img { .copy-img {
content:url(/img/copy_icon.png); content: url(/img/copy_icon.png);
width: 32px; width: 32px;
height: 32px; height: 32px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
position: relative;
}
.copy-bb-more {
content: url(/img/more_icon.png);
width: 32px;
height: 32px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.image-scale {
float: left;
padding-right: 5px;
position: relative;
} }

BIN
public/img/more_icon.png Normal file
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

36
templates/includes/images_list.html.ep
View file

@ -28,7 +28,7 @@
</div> </div>
<div id="progress"> <div id="progress">
<div class="bar" style="width: 0%;"></div> <div class="progress-bar" style="width: 0%;"></div>
</div> </div>
<div id="lastUploadLog"></div> <div id="lastUploadLog"></div>
</div> </div>
@ -39,15 +39,33 @@
<div class="foto-block row" v-for="image in imagesList"> <div class="foto-block row" v-for="image in imagesList">
<div class="image col-md-3"> <div class="image col-md-3">
<img v-bind:src="image.thumbnail_url"> <img v-bind:src="image.thumbnail_url">
<div class="image_title">{{ image.id }} - {{ image.filename }}</div> <div class="image_title">
{{ image.filename }}
</div>
</div> </div>
<div class="foto-notes col-md-3"> <div class="foto-notes col-md-3">
<ul> <div class="image-scale image-original">
<li><a v-bind:href="image.original_url">Original</a> <div @click="copyText" class="copy-img">{{ hostname+image.original_url }}</div></li> <div class="image-scale-url">
<li v-for="scale in image.scales"> <a v-bind:href="image.original_url">Original</a>
<a v-bind:href="scale.url">{{ scale.size }}</a> <div @click="copyText" class="copy-img">{{ hostname+scale.url }}</div> </div>
</li> <div @click="copyText" class="copy-img">
</ul> &lt;img src={{ hostname+image.original_url }}&gt;
</div>
<div @click="copyText" class="copy-bb-more">
[MORE=&lt;img src={{ hostname+image.thumbnail_url }}&gt;]&lt;img src={{ hostname+image.original_url }}&gt;[/MORE]
</div>
</div>
<div class="image-scale" v-for="scale in image.scales">
<div class="image-scale-url">
<a v-bind:href="scale.url">{{ scale.size }}</a>
</div>
<div @click="copyText" class="copy-img">
&lt;img src={{ hostname+scale.url }}&gt;
</div>
<div @click="copyText" class="copy-bb-more">
[MORE=&lt;img src={{ hostname+image.thumbnail_url }}&gt;]&lt;img src={{ hostname+scale.url }}&gt;[/MORE]
</div>
</div>
</div> </div>
</div> </div>
<div class="container paginator"> <div class="container paginator">
@ -100,7 +118,7 @@
//TODO: rewrite it to vue or pure JS from jQuery //TODO: rewrite it to vue or pure JS from jQuery
var $temp = $("<input>"); var $temp = $("<input>");
$("body").append($temp); $("body").append($temp);
$temp.val("<img src="+$(event.target).text()+">").select(); $temp.val($(event.target).text().trim()).select();
document.execCommand("copy"); document.execCommand("copy");
$temp.remove(); $temp.remove();
}, },

10
templates/layouts/base.html.ep
View file

@ -14,15 +14,7 @@
<link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui.css"> <link rel="stylesheet" href="/file_uploader/css/jquery.fileupload-ui.css">
<link rel="stylesheet" href="/css/main.css"> <link rel="stylesheet" href="/css/main.css">
<script src="https://vuejs.org/js/vue.min.js"></script> <script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vuejs-paginator/2.0.1/vuejs-paginator.min.js"></script>
<style>
.bar {
height: 18px;
background: green;
}
</style>
</head> </head>
<body> <body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">