Issue #1044 : Picture edition redesign

* Add a larger and responsive image preview
 * Use Jconfirm popin for deletion confirmation
 * Change general actions to icons on the image preview
This commit is contained in:
Zacharie
2020-06-09 16:25:17 +02:00
committed by plegall
parent 5aef3ebbbd
commit 97ef03eead
4 changed files with 206 additions and 62 deletions
+105 -12
View File
@@ -1760,26 +1760,118 @@ a#showPermissions:hover {text-decoration: none;}
border:2px solid #ddd;
}
#albumLinks {
vertical-align:top;
border-left:2px solid #ddd;
padding-left:10px;
#pictureModify {
display: flex;
margin: 0;
justify-content: space-evenly;
}
#albumLinks ul, .photoLinks ul {
padding-left:0;
#picture-preview {
width: 35vw;
position: relative;
background-color: #3c3c3c;
height: 35vw;
flex-shrink: 0;
overflow: hidden;
}
#albumLinks li, .photoLinks li {
list-style:none;
#picture-preview .preview-box{
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
left: 50%;
}
.photoLinks {
vertical-align:top;
.picture-preview-actions {
position: absolute;
padding: 10px;
right: 0;
top: 0;
font-size: 18px;
z-index: 100;
}
.photoLinks ul {
margin:0;
.picture-preview-actions a {
color: #ffffff;
padding: 5px;
}
#picture-content {
width: 50%;
}
#picture-content * {
text-align: left;
}
#picture-content input[type=text], #picture-content textarea {
width: 100%;
background-color: #f8f8f8;
padding: 8px;
border-radius: 4px;
border-color: #DDD;
transition: ease 0.2s;
}
#picture-content .date-input {
position: relative;
}
#picture-content .date-input input{
padding-left: 35px;
width: calc(100% - 28px);
}
#picture-content .date-input i{
position: absolute;
font-size: 20px;
top: 50%;
transform: translate(6px, -50%);
opacity: 0.6;
}
#picture-content input:focus {
border-color: #888;
}
#picture-infos {
display: flex;
justify-content: space-around;
}
.picture-infos-category {
display: flex;
border: #EEE solid 2px;
padding: 20px;
border-radius: 5px;
margin: 5px;
}
.picture-infos-icon {
font-size: 34px;
margin-right: 20px;
display: flex;
color: #3c3c3c;
}
.picture-infos-icon span {
margin: auto;
}
.picture-infos-container {
margin: 0;
}
.picture-infos-container div {
margin: 0;
}
.picture-infos-title {
color: #3c3c3c;
font-weight: bold;
}
/* Album Manager */
@@ -2914,6 +3006,7 @@ a.group_users {
display:block;
position:relative;
}
.preview-box.icon-zoom-in:before {
opacity:0;
position:absolute;