mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-08-10 18:53:01 +02:00
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:
+105
-12
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user