ya_dim4ik
9 years ago
parent
10592e64b5
commit
a5a21c6c8f
19 changed files with 3368 additions and 28 deletions
@ -0,0 +1,191 @@ |
||||
/*! |
||||
* CSS jQuery.filer |
||||
* Theme: DragDropBox |
||||
* Copyright (c) 2016 CreativeDream |
||||
* Version: 1.3 (14-Sep-2016) |
||||
*/ |
||||
|
||||
/*------------------------- |
||||
Input |
||||
-------------------------*/ |
||||
.jFiler-input-dragDrop { |
||||
display: block; |
||||
/*width: 343px;*/ |
||||
margin: 0 auto 25px auto; |
||||
padding: 25px; |
||||
color: #97A1A8; |
||||
background: #F9FBFE; |
||||
border: 2px dashed #C8CBCE; |
||||
text-align: center; |
||||
-webkit-transition: box-shadow 0.3s, |
||||
border-color 0.3s; |
||||
-moz-transition: box-shadow 0.3s, |
||||
border-color 0.3s; |
||||
transition: box-shadow 0.3s, |
||||
border-color 0.3s; |
||||
} |
||||
|
||||
.jFiler .jFiler-input-dragDrop.dragged { |
||||
border-color: #aaa; |
||||
box-shadow: inset 0 0 20px rgba(0,0,0,.08); |
||||
} |
||||
|
||||
.jFiler .jFiler-input-dragDrop.dragged * { |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.jFiler .jFiler-input-dragDrop.dragged .jFiler-input-icon { |
||||
-webkit-transform: rotate(180deg); |
||||
-ms-transform: rotate(180deg); |
||||
transform: rotate(180deg); |
||||
} |
||||
|
||||
.jFiler .jFiler-input-dragDrop.dragged .jFiler-input-text, |
||||
.jFiler .jFiler-input-dragDrop.dragged .jFiler-input-choose-btn { |
||||
filter: alpha(opacity=30); |
||||
opacity: 0.3; |
||||
} |
||||
|
||||
.jFiler-input-dragDrop .jFiler-input-icon { |
||||
font-size: 48px; |
||||
margin-top: -10px; |
||||
-webkit-transition: all 0.3s ease; |
||||
-moz-transition: all 0.3s ease; |
||||
transition: all 0.3s ease; |
||||
} |
||||
|
||||
.jFiler-input-text h3 { |
||||
margin: 0; |
||||
font-size: 18px; |
||||
} |
||||
|
||||
.jFiler-input-text span { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn { |
||||
display: inline-block; |
||||
padding: 8px 14px; |
||||
outline: none; |
||||
cursor: pointer; |
||||
text-decoration: none; |
||||
text-align: center; |
||||
white-space: nowrap; |
||||
font-size: 12px; |
||||
font-weight: bold; |
||||
color: #8d9496; |
||||
border-radius: 3px; |
||||
border: 1px solid #c6c6c6; |
||||
vertical-align: middle; |
||||
*background-color: #fff; |
||||
box-shadow: 0px 1px 5px rgba(0,0,0,0.05); |
||||
-webkit-transition: all 0.2s; |
||||
-moz-transition: all 0.2s; |
||||
transition: all 0.2s; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn:hover, |
||||
.jFiler-input-choose-btn:active { |
||||
color: inherit; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn:active { |
||||
background-color: #f5f5f5; |
||||
} |
||||
|
||||
/* gray */ |
||||
.jFiler-input-choose-btn.gray { |
||||
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fcfcfc),to(#f5f5f5)); |
||||
background-image: -webkit-linear-gradient(top,#fcfcfc,#f5f5f5); |
||||
background-image: -o-linear-gradient(top,#fcfcfc,#f5f5f5); |
||||
background-image: linear-gradient(to bottom,#fcfcfc,#f5f5f5); |
||||
background-image: -moz-linear-gradient(top,#fcfcfc,#f5f5f5); |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.gray:hover { |
||||
filter: alpha(opacity=87); |
||||
opacity: 0.87; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.gray:active { |
||||
background-color: #f5f5f5; |
||||
background-image: -webkit-gradient(linear,0 0,0 100%,from(#f5f5f5),to(#fcfcfc)); |
||||
background-image: -webkit-linear-gradient(top,#f5f5f5,#fcfcfc); |
||||
background-image: -o-linear-gradient(top,#f5f5f5,#fcfcfc); |
||||
background-image: linear-gradient(to bottom,#f5f5f5,#fcfcfc); |
||||
background-image: -moz-linear-gradient(top,#f5f5f5,#fcfcfc); |
||||
} |
||||
|
||||
/* blue */ |
||||
.jFiler-input-choose-btn.blue { |
||||
color: #48A0DC; |
||||
border: 1px solid #48A0DC; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.blue:hover { |
||||
background: #48A0DC; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.blue:active { |
||||
background: #48A0DC; |
||||
} |
||||
|
||||
/* green */ |
||||
.jFiler-input-choose-btn.green { |
||||
color: #27ae60; |
||||
border: 1px solid #27ae60; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.green:hover { |
||||
background: #27ae60; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.green:active { |
||||
background: #27ae60; |
||||
} |
||||
|
||||
/* red */ |
||||
.jFiler-input-choose-btn.red { |
||||
color: #ed5a5a; |
||||
border: 1px solid #ed5a5a; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.red:hover { |
||||
background: #ed5a5a; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.red:active { |
||||
background: #E05252; |
||||
} |
||||
|
||||
/* black */ |
||||
.jFiler-input-choose-btn.black { |
||||
color: #555; |
||||
border: 1px solid #555; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.black:hover { |
||||
background: #555; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.black:active { |
||||
background: #333; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.blue:hover, |
||||
.jFiler-input-choose-btn.green:hover, |
||||
.jFiler-input-choose-btn.red:hover, |
||||
.jFiler-input-choose-btn.black:hover { |
||||
border-color: transparent; |
||||
color: #fff; |
||||
} |
||||
|
||||
.jFiler-input-choose-btn.blue:active, |
||||
.jFiler-input-choose-btn.green:active, |
||||
.jFiler-input-choose-btn.red:active, |
||||
.jFiler-input-choose-btn.black:active { |
||||
border-color: transparent; |
||||
color: #fff; |
||||
filter: alpha(opacity=87); |
||||
opacity: 0.87; |
||||
} |
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,421 @@ |
||||
/*! |
||||
* CSS jQuery.filer |
||||
* Copyright (c) 2016 CreativeDream |
||||
* Version: 1.3 (14-Sep-2016) |
||||
*/ |
||||
@import url('jquery.filer-icons/jquery-filer.css'); |
||||
|
||||
/*------------------------- |
||||
Basic configurations |
||||
-------------------------*/ |
||||
.jFiler * { |
||||
-webkit-box-sizing: border-box; |
||||
-moz-box-sizing: border-box; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.jFiler { |
||||
font-family: sans-serif; |
||||
font-size: 14px; |
||||
color: #494949; |
||||
} |
||||
|
||||
/* Helpers */ |
||||
.jFiler ul.list-inline li { |
||||
display: inline-block; |
||||
padding-right: 5px; |
||||
padding-left: 5px; |
||||
} |
||||
|
||||
.jFiler .pull-left { |
||||
float: left; |
||||
} |
||||
|
||||
.jFiler .pull-right { |
||||
float: right; |
||||
} |
||||
|
||||
/* File Icons */ |
||||
span.jFiler-icon-file { |
||||
position: relative; |
||||
display: block; |
||||
background: #e1e1e1 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMQAAAEACAYAAADsqNl9AAAD5klEQVR42u3azUqUURjA8bHAEpIK+9hlRBGC0QfVustI+oAo2nQJgYGFFEUhJF1NUVAXEC6iSyhIDCoX5js9Z5xpXmxsRjOdmfP7wfPqwtWZ589xhqlUN2Y5Zi5mJmYi5lzMgZhdFbpavEb32sxsURSfq5mqrPPv52MexYxZrb4NIusoOgoiDudb/JiMGbZSWQSRbRSdBPEqZtQqZRdEllFU2rxPuB8zYI2yDSK7KNYKYinmlvURRG5RVNa4GW5aHUHkGEWrIKasjSByjWJ1EC+tjCByjqKy6qPVI1ZGEDlHUb4h7loXQeQeRSOILzF7rIsgco+iEcS0VRGEKFaCSB+znrQqghDFShDvrYkgRNEM4pk1EYQomkFctiaCEEUziDPWRBCiaAYxYk0EIYpmEIPWRBCiqAeBIEQhCEGIQhBsWxA9E4UNEYQoBCEIUQiC7giiq6OwIYIQhSAEIQpB0H1BdF0UNkQQohCEIEQhCLo7iFoUMZ8EgSC6JAobIghRCEIQohAEvRXEtkRhQwQhCkEIQhSCoHeD2LIobIggRCEIQYhCEPRHEP81ChsiCFEIQhCiEAT9F8SmR2FDBCEKQQhCFIKgv4PYlChsiCD6bZ7/SxQ2RBCiEIQgRCEI8gpiQ1HYEEGIQhCCEIUgyDeIjqOwIYIQhSAEIQpBsBLEKVGsHYUNcUuIQhCCMK2jsB2CEEUpCtshClOKwmYIwpSisBn5BjEqgj+jsBluCVMaWyEKIQiCUhCXhCAI3BKC4K9RXBeEIHBbCALvKwTBRuO4IQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAyEi1Wh10ClBrYXd6jDgKqAVxMD3OOgqoBXE+PSYcBdSCuJIeM44CakHMpseco4BKpSiKDymI5Zgxx0Hmt8N4TDX9kjx0JGQexONyEPMxw46FTGPYF7NQDiKZdDRkGsSDRgTlIL7HHHU8ZBbD8ZjFVkEkr2MGHBOZxLAj5m05gNVBJNOOipzeSLcLIn0Me9tx0ecx3KnvetsgkiVR0Ocx/Gy1+GsF0bgppr2noI9C2BnzpNXN0EkQDW9ijjlOejyGEzHv2i17J0EkP2KmYvY6WnoshP31/3QWO1n0ToNoWKhfOeOOmi4P4XTM06Iovq5nwdcbxG/pm4Hp67IxV2MuxByKGfJSsMWLPxRzOOZizLWYF7GbHze6178AQI59RSRyAJkAAAAASUVORK5CYII=') no-repeat; |
||||
background-size: cover; |
||||
width: 57px; |
||||
height: 74px; |
||||
line-height: 90px; |
||||
text-align: center; |
||||
margin: 0 auto; |
||||
color: #fff; |
||||
font-size: 14px; |
||||
font-weight: bold; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
span.jFiler-icon-file i[class*="icon-jfi-"] { |
||||
font-size: 24px; |
||||
} |
||||
|
||||
span.jFiler-icon-file.f-image { |
||||
background-color: #e15955; |
||||
} |
||||
|
||||
span.jFiler-icon-file.f-video { |
||||
background-color: #4183d7; |
||||
} |
||||
|
||||
span.jFiler-icon-file.f-audio { |
||||
background-color: #5bab6e; |
||||
} |
||||
|
||||
/* Progress Bar */ |
||||
.jFiler-jProgressBar { |
||||
height: 8px; |
||||
background: #f1f1f1; |
||||
margin-top: 3px; |
||||
margin-bottom: 0; |
||||
overflow: hidden; |
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.jFiler-jProgressBar .bar { |
||||
float: left; |
||||
width: 0; |
||||
height: 100%; |
||||
font-size: 12px; |
||||
color: #ffffff; |
||||
text-align: center; |
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
background-color: #50A1E9; |
||||
box-sizing: border-box; |
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
border-radius: 4px; |
||||
-webkit-transition: width 0.3s ease; |
||||
-moz-transition: width 0.3s ease; |
||||
-o-transition: width 0.3s ease; |
||||
transition: width 0.3s ease; |
||||
} |
||||
|
||||
.jFiler-jProgressBar .bar.dark { |
||||
background-color: #555; |
||||
} |
||||
|
||||
.jFiler-jProgressBar .bar.blue { |
||||
background-color: #428bca; |
||||
} |
||||
|
||||
.jFiler-jProgressBar .bar.green { |
||||
background-color: #5cb85c; |
||||
} |
||||
|
||||
.jFiler-jProgressBar .bar.orange { |
||||
background-color: #f7a923; |
||||
} |
||||
|
||||
.jFiler-jProgressBar .bar.red { |
||||
background-color: #d9534f; |
||||
} |
||||
|
||||
/* Thumbs */ |
||||
.jFiler-row:after, |
||||
.jFiler-item:after { |
||||
display: table; |
||||
line-height: 0; |
||||
content: ""; |
||||
clear: both; |
||||
} |
||||
|
||||
.jFiler-items ul { |
||||
margin: 0; |
||||
padding: 0; |
||||
list-style: none; |
||||
} |
||||
|
||||
/*------------------------- |
||||
Default Theme |
||||
-------------------------*/ |
||||
.jFiler-theme-default .jFiler-input { |
||||
position: relative; |
||||
display: block; |
||||
width: 400px; |
||||
height: 35px; |
||||
margin: 0 0 15px 0; |
||||
background: #fefefe; |
||||
border: 1px solid #cecece; |
||||
font-size: 12px; |
||||
font-family: sans-serif; |
||||
color: #888; |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
overflow: hidden; |
||||
-webkit-box-shadow: rgba(0,0,0,.25) 0 4px 5px -5px inset; |
||||
-moz-box-shadow: rgba(0,0,0,.25) 0 4px 5px -5px inset; |
||||
box-shadow: rgba(0,0,0,.25) 0 4px 5px -5px inset; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input.focused { |
||||
outline: none; |
||||
-webkit-box-shadow: 0 0 7px rgba(0,0,0,0.1); |
||||
-moz-box-shadow: 0 0 7px rgba(0,0,0,0.1); |
||||
box-shadow: 0 0 7px rgba(0,0,0,0.1); |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input.dragged { |
||||
border: 1px dashed #aaaaaa; |
||||
background: #f9f9f9; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-inpu.draggedt:hover { |
||||
background: #FFF8D0; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input.dragged * { |
||||
pointer-events: none; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input.dragged .jFiler-input-caption { |
||||
width: 100%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input.dragged .jFiler-input-button { |
||||
display: none; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input-caption { |
||||
display: block; |
||||
float: left; |
||||
height: 100%; |
||||
padding-top: 8px; |
||||
padding-left: 10px; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input-button { |
||||
display: block; |
||||
float: right; |
||||
height: 100%; |
||||
padding-top: 8px; |
||||
padding-left: 15px; |
||||
padding-right: 15px; |
||||
border-left: 1px solid #ccc; |
||||
color: #666666; |
||||
text-align: center; |
||||
background-color: #fefefe; |
||||
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fefefe),to(#f1f1f1)); |
||||
background-image: -webkit-linear-gradient(top,#fefefe,#f1f1f1); |
||||
background-image: -o-linear-gradient(top,#fefefe,#f1f1f1); |
||||
background-image: linear-gradient(to bottom,#fefefe,#f1f1f1); |
||||
background-image: -moz-linear-gradient(top,#fefefe,#f1f1f1); |
||||
-webkit-transition: all .1s ease-out; |
||||
-moz-transition: all .1s ease-out; |
||||
-o-transition: all .1s ease-out; |
||||
transition: all .1s ease-out; |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input-button:hover { |
||||
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.07); |
||||
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.07); |
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.07); |
||||
} |
||||
|
||||
.jFiler-theme-default .jFiler-input-button:active { |
||||
background-image: -webkit-gradient(linear,0 0,0 100%,from(#f1f1f1),to(#fefefe)); |
||||
background-image: -webkit-linear-gradient(top,#f1f1f1,#fefefe); |
||||
background-image: -o-linear-gradient(top,#f1f1f1,#fefefe); |
||||
background-image: linear-gradient(to bottom,#f1f1f1,#fefefe); |
||||
background-image: -moz-linear-gradient(top,#f1f1f1,#fefefe); |
||||
} |
||||
|
||||
/*------------------------- |
||||
Thumbnails |
||||
-------------------------*/ |
||||
.jFiler-items-default .jFiler-items { |
||||
|
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item { |
||||
position: relative; |
||||
padding: 16px; |
||||
margin-bottom: 16px; |
||||
background: #f7f7f7; |
||||
color: #4d4d4c; |
||||
} |
||||
|
||||
|
||||
.jFiler-items-default .jFiler-item .jFiler-item-icon { |
||||
font-size: 32px; |
||||
color: #48A0DC; |
||||
|
||||
margin-right: 15px; |
||||
margin-top: -3px; |
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item .jFiler-item-title { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item .jFiler-item-others { |
||||
font-size: 12px; |
||||
color: #777; |
||||
margin-left: -5px; |
||||
margin-right: -5px; |
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item .jFiler-item-others span { |
||||
padding-left: 5px; |
||||
padding-right: 5px; |
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item-assets { |
||||
position: absolute; |
||||
display: block; |
||||
right: 16px; |
||||
top: 50%; |
||||
margin-top: -10px; |
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item-assets a { |
||||
padding: 8px 9px 8px 12px; |
||||
cursor: pointer; |
||||
background: #fafafa; |
||||
color: #777; |
||||
border-radius: 4px; |
||||
border: 1px solid #e3e3e3 |
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item-assets .jFiler-item-trash-action:hover, |
||||
.jFiler-items-default .jFiler-item-assets .jFiler-item-trash-action:active { |
||||
color: #d9534f; |
||||
} |
||||
|
||||
.jFiler-items-default .jFiler-item-assets .jFiler-item-trash-action:active { |
||||
background: transparent; |
||||
} |
||||
|
||||
/* Thumbnails: Grid */ |
||||
.jFiler-items-grid .jFiler-item { |
||||
float: left; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container { |
||||
position: relative; |
||||
margin: 0 20px 30px 0; |
||||
padding: 10px; |
||||
border: 1px solid #e1e1e1; |
||||
border-radius: 3px; |
||||
background: #fff; |
||||
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.06); |
||||
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.06); |
||||
box-shadow: 0px 0px 3px rgba(0,0,0,0.06); |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item.not_loaded .jFiler-item-container{ |
||||
background-color: rgba(0,0,0,.05); |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb { |
||||
display: block; |
||||
position: relative; |
||||
width: 190px; |
||||
height: 145px; |
||||
min-height: 115px; |
||||
border: 1px solid #e1e1e1; |
||||
overflow: hidden; |
||||
cursor: default; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb .jFiler-item-thumb-image { |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.jFiler-item .jFiler-item-container .jFiler-item-thumb img { |
||||
max-width: none; |
||||
max-height: 100%; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb span.jFiler-icon-file { |
||||
margin-top: 32px; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item-thumb-image.fi-loading { |
||||
background: url('data:image/gif;base64,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') no-repeat center; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb-overlay { |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
color: #fff; |
||||
background: rgba(76, 76, 77, 0.8); |
||||
opacity: 0; |
||||
filter: alpha(opacity=0); |
||||
z-index: 10; |
||||
overflow-y: auto; |
||||
-webkit-transition: all 0.12s; |
||||
-moz-transition: all 0.12s; |
||||
transition: all 0.12s; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-thumb:hover .jFiler-item-thumb-overlay { |
||||
opacity: 1; |
||||
filter: aplpha(opacity(100)); |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-info { |
||||
display: table; |
||||
padding: 0 10px; |
||||
overflow: auto; |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-info .jFiler-item-title { |
||||
display: block; |
||||
font-weight: bold; |
||||
word-break: break-all; |
||||
line-height: 1; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-info .jFiler-item-others { |
||||
display: inline-block; |
||||
font-size: 10px; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets { |
||||
margin-top: 10px; |
||||
color: #999; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .text-success { |
||||
color: #3C763D |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .text-error { |
||||
color: #A94442 |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .jFiler-jProgressBar { |
||||
width: 120px; |
||||
margin-left: -5px; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item .jFiler-item-container .jFiler-item-assets .jFiler-item-others { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.jFiler-items-grid .jFiler-item-trash-action:hover { |
||||
cursor: pointer; |
||||
color: #d9534f; |
||||
} |
||||
@ -0,0 +1,195 @@ |
||||
function init_filer($target) { |
||||
$target.find('.file_uploader').filer({ |
||||
limit: null, |
||||
maxSize: null, |
||||
extensions: null, |
||||
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>', |
||||
showThumbs: true, |
||||
theme: "dragdropbox", |
||||
afterRender: function(l, p, o, s){ |
||||
s[0].name = s[0].name.replace('[]', '') |
||||
}, |
||||
templates: { |
||||
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>', |
||||
item: '<li class="jFiler-item not_loaded">\ |
||||
<div class="jFiler-item-container">\ |
||||
<div class="jFiler-item-inner">\ |
||||
<a href="javascript:void(0);" class="jFiler-item-thumb">\ |
||||
<div class="jFiler-item-status"></div>\ |
||||
<div class="jFiler-item-thumb-overlay">\ |
||||
<div class="jFiler-item-info">\ |
||||
<div style="display:table-cell;vertical-align: middle;">\ |
||||
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\ |
||||
<span class="jFiler-item-others">{{fi-size2}}</span>\ |
||||
</div>\ |
||||
</div>\ |
||||
</div>\ |
||||
{{fi-image}}\ |
||||
</a>\ |
||||
<div class="jFiler-item-assets jFiler-row">\ |
||||
<ul class="list-inline pull-left">\ |
||||
<li>{{fi-progressBar}}</li>\ |
||||
</ul>\ |
||||
<ul class="list-inline pull-right">\ |
||||
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\ |
||||
</ul>\ |
||||
</div>\ |
||||
</div>\ |
||||
</div>\ |
||||
</li>', |
||||
itemAppend: '<li class="jFiler-item">\ |
||||
<div class="jFiler-item-container">\ |
||||
<div class="jFiler-item-inner">\ |
||||
<a href="javascript:void(0);" class="jFiler-item-thumb">\ |
||||
<div class="jFiler-item-status"></div>\ |
||||
<div class="jFiler-item-thumb-overlay">\ |
||||
<div class="jFiler-item-info">\ |
||||
<div style="display:table-cell;vertical-align: middle;">\ |
||||
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\ |
||||
<span class="jFiler-item-others">{{fi-size2}}</span>\ |
||||
</div>\ |
||||
</div>\ |
||||
</div>\ |
||||
{{fi-image}}\ |
||||
</a>\ |
||||
<div class="jFiler-item-assets jFiler-row">\ |
||||
<ul class="list-inline pull-left">\ |
||||
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\ |
||||
</ul>\ |
||||
<ul class="list-inline pull-right">\ |
||||
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a>{{fi-remove}}</li>\ |
||||
</ul>\ |
||||
</div>\ |
||||
</div>\ |
||||
</div>\ |
||||
</li>', |
||||
progressBar: '<div class="bar"></div>', |
||||
itemAppendToEnd: true, |
||||
canvasImage: true, |
||||
removeConfirmation: true, |
||||
_selectors: { |
||||
list: '.jFiler-items-list', |
||||
//item: '.jFiler-item',
|
||||
progressBar: '.bar', |
||||
remove: '.jFiler-item-trash-action' |
||||
} |
||||
}, |
||||
dragDrop: { |
||||
dragEnter: null, |
||||
dragLeave: null, |
||||
drop: null, |
||||
dragContainer: null |
||||
}, |
||||
uploadFile: { |
||||
url: $target.data('upload-url'), |
||||
//data: null,
|
||||
type: 'POST', |
||||
enctype: 'multipart/form-data', |
||||
synchron: true, |
||||
beforeSend: function() {}, |
||||
success: function(data, itemEl, listEl, boxEl, newInputEl, inputEl, id){ |
||||
console.log(data); |
||||
console.log(itemEl); |
||||
console.log(listEl); |
||||
console.log(boxEl); |
||||
console.log(newInputEl); |
||||
console.log(inputEl); |
||||
console.log(id); |
||||
console.log('----------------------------'); |
||||
var parent = itemEl.find(".jFiler-jProgressBar").parent(); |
||||
|
||||
itemEl.find(".jFiler-jProgressBar").fadeOut("slow", function(){ |
||||
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow"); |
||||
}); |
||||
}, |
||||
error: function(el){ |
||||
var parent = el.find(".jFiler-jProgressBar").parent(); |
||||
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){ |
||||
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow"); |
||||
}); |
||||
}, |
||||
statusCode: null, |
||||
onProgress: null, |
||||
onComplete: null |
||||
}, |
||||
files: [ |
||||
{ |
||||
name: "appended_file.jpg", |
||||
size: 5453, |
||||
type: "image", |
||||
file: "http://127.0.0.1:8000/media/photologue/photos/cache/am_admin_thumbnail.jpg", // 188x143 crop="center"
|
||||
url: "google.com.ua", |
||||
remove_url: '/remove-url/1/', |
||||
detail_link: '/detail_link/1/' |
||||
}, |
||||
{ |
||||
name: "appended_file_2.jpg", |
||||
size: 9453, |
||||
type: "image", |
||||
file: "http://127.0.0.1:8000/media/photologue/photos/cache/am_admin_thumbnail.jpg", // 188x143 crop="center"
|
||||
url: "/qwerty/qwerty/", |
||||
remove_url: '/remove-url/2/', |
||||
detail_link: '/detail_link/1/' |
||||
}, |
||||
{ |
||||
name: "appended_file_2.jpg", |
||||
size: 9453, |
||||
type: "image", |
||||
file: "http://127.0.0.1:8000/media/photologue/photos/cache/am_admin_thumbnail.jpg", // 188x143 crop="center"
|
||||
url: "/qwerty/qwerty/", |
||||
remove_url: '/remove-url/3/', |
||||
detail_link: '/detail_link/1/' |
||||
} |
||||
], |
||||
addMore: false, |
||||
allowDuplicates: true, |
||||
clipBoardPaste: true, |
||||
excludeName: null, |
||||
beforeRender: null, |
||||
beforeShow: null, |
||||
beforeSelect: null, |
||||
onSelect: null, |
||||
afterShow: null, |
||||
onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){ |
||||
var filerKit = inputEl.prop("jFiler"), |
||||
file_name = filerKit.files_list[id].name; |
||||
|
||||
$.post('./php/ajax_remove_file.php', {file: file_name}); |
||||
}, |
||||
onEmpty: null, |
||||
options: null, |
||||
dialogs: { |
||||
alert: function(text) { |
||||
return alert(text); |
||||
}, |
||||
confirm: function (text, callback) { |
||||
confirm(text) ? callback() : null; |
||||
} |
||||
}, |
||||
captions: { |
||||
button: "Выберите файлы", |
||||
feedback: "Выберите файлы для загрузки", |
||||
feedback2: "выбранные файлы", |
||||
drop: "Перетяните файлы для загрузки", |
||||
removeConfirmation: "Вы уверены что хотите удалить этот файл?", |
||||
errors: { |
||||
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.", |
||||
filesType: "Only Images are allowed to be uploaded.", |
||||
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.", |
||||
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB." |
||||
} |
||||
} |
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
var $uploaders = $('.file_upload_container'); |
||||
|
||||
$uploaders.each(function (i, uploader) { |
||||
var $uploader = $(uploader), |
||||
fields = $uploader.data('fields').split('|'), // Массив названий полей для создания фото
|
||||
languages = $uploader.data('languages').split('|'); // Массив языков, будет использоватся для генерации инпутов
|
||||
|
||||
init_filer($uploader); |
||||
}); |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1,34 +1,82 @@ |
||||
{% load static %} |
||||
<div class="box span8"> |
||||
<div class="box-header well"> |
||||
<h2><i class="icon-pencil"></i>Фотогалерея</h2> |
||||
</div> |
||||
|
||||
<div class="box-content"> |
||||
{% if object %} |
||||
<a class="btn btn-success" href="#photopopup" data-toggle="modal"><i class="icon-plus-sign icon-white"></i> Фото</a> |
||||
<a href="{{ object.photogallery.admin_url }}" role="button" class="btn btn-info" data-toggle="modal">Просмотреть галерею</a><br><br> |
||||
{% else %} |
||||
<p>Фото можна добавлять только после введения основных даных</p> |
||||
{% endif %} |
||||
{% if object %} |
||||
<a class="btn btn-success" href="#photopopup" data-toggle="modal"><i class="icon-plus-sign icon-white"></i> Фото</a> |
||||
<a href="{{ object.photogallery.admin_url }}" role="button" class="btn btn-info" data-toggle="modal">Просмотреть галерею</a><br><br> |
||||
{% else %} |
||||
<p>Фото можна добавлять только после введения основных даных</p> |
||||
{% endif %} |
||||
|
||||
{% with photos=object.photogallery.photos.all %} |
||||
{% for photo in photos %} |
||||
<div class="clearfix"> |
||||
{% for photo in photos %} |
||||
|
||||
<div class="photo" style="float: left;margin-right: 15px;"> |
||||
<div class="hover"> |
||||
<a href="{{ photo.get_delete_url }}" class="btn-small btn-danger delete-photo">удалить</a> |
||||
</div> |
||||
<div> |
||||
<a href="/admin/photogallery/photo/{{ photo.slug }}/"> |
||||
<img src="{{ photo.get_admin_thumbnail_url }}" class="thumbnail" alt="{{ photo.title }}"> |
||||
</a> |
||||
</div> |
||||
<div class="photo" style="float: left;margin-right: 15px;"> |
||||
<div class="hover"> |
||||
<a href="{{ photo.get_delete_url }}" class="btn-small btn-danger delete-photo">удалить</a> |
||||
</div> |
||||
<div> |
||||
<a href="/admin/photogallery/photo/{{ photo.slug }}/"> |
||||
<img src="{{ photo.get_admin_thumbnail_url }}" class="thumbnail" alt="{{ photo.title }}"> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
{% endwith %} |
||||
|
||||
|
||||
{# <form method="post" class="form-horizontal" id="photo_form" enctype="multipart/form-data" action="{{ object.upload_photo_url }}">#} |
||||
{# {% csrf_token %}#} |
||||
|
||||
{# <div class="control-group{% if form.image.errors %}error{% endif %}">#} |
||||
{# <label class="control-label">{{ form.image.label }}:</label>#} |
||||
{# <div class="controls">#} |
||||
{# {{ form.image }}#} |
||||
{# <span class="help-inline">{{ form.image.errors }}</span>#} |
||||
{# </div>#} |
||||
{# </div>#} |
||||
|
||||
</div> |
||||
{% endfor %} |
||||
{% endwith %} |
||||
{# <div class="control-group{% if form.sort.errors %}error{% endif %}">#} |
||||
{# <label class="control-label">{{ form.sort.label }}:</label>#} |
||||
{# <div class="controls">{{ form.sort }}#} |
||||
{# <span class="help-inline">{{ form.sort.errors }}</span>#} |
||||
{# </div>#} |
||||
{# </div>#} |
||||
|
||||
{# {% with field='caption' form=form languages=languages %}#} |
||||
{# {% include 'c_admin/forms/multilang.html' %}#} |
||||
{# {% endwith %}#} |
||||
{##} |
||||
{# {% with field='title' form=form languages=languages %}#} |
||||
{# {% include 'c_admin/forms/multilang.html' %}#} |
||||
{# {% endwith %}#} |
||||
{##} |
||||
{# <div class="controls">#} |
||||
{# <input class="btn btn-primary" type="submit" value="Добавить">#} |
||||
{# </div>#} |
||||
{# </form>#} |
||||
|
||||
<div class="file_upload_container" |
||||
data-upload-url="{{ object.upload_photo_url }}" |
||||
data-get-url="{{ object.upload_photo_url }}" |
||||
data-languages="ru|en" |
||||
data-fields="title|caption"> |
||||
|
||||
<input type="file" name="image" class="file_uploader"> |
||||
|
||||
<a href="#" class="btn btn-success upload_loaded_files">Загрузить файлы</a> |
||||
</div> |
||||
|
||||
<link rel="stylesheet" href="{% static 'jQuery-filer/css/jquery.filer.css' %}"> |
||||
<link rel="stylesheet" href="{% static 'jQuery-filer/css/jquery.filer-dragdropbox-theme.css' %}"> |
||||
|
||||
<script src="{% static 'jQuery-filer/js/jquery.filer.js' %}"></script> |
||||
<script src="{% static 'jQuery-filer/js/init.js' %}"></script> |
||||
</div> |
||||
</div> |
||||
Loading…
Reference in new issue