imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reorganized elements

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2020-12-19 09:26:09 +01:00
parent d3be7b79df
commit 8aabe1f330
2 changed files with 54 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

114
res/css/views/elements/_ImageView.scss
View file

@ -22,45 +22,46 @@ limitations under the License.
display: flex;
width: 100%;
height: 100%;
align-items: center;
}
.mx_ImageView_lhs {
order: 1;
flex: 1 1 10%;
min-width: 60px;
// background-color: #080;
// height: 20px;
}
.mx_ImageView_content {
order: 2;
/* min-width hack needed for FF */
min-width: 0px;
height: 90%;
flex: 15 15 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.mx_ImageView_imageBox {
overflow: auto;
margin: 0 50px 50px 50px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.mx_ImageView_content img {
max-width: 100%;
flex: 1;
//max-width: 100%;
/* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
max-height: 100%;
//max-height: 100%;
/* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
object-fit: contain;
/* background-image: url('$(res)/img/trans.png'); */
pointer-events: all;
}
.mx_ImageView_labelWrapper {
position: absolute;
top: 0px;
right: 0px;
height: 100%;
overflow: auto;
pointer-events: all;
.mx_ImageView_panel {
display: flex;
justify-content: space-between;
padding: 50px;
}
.mx_ImageView_toolbar {
display: flex;
}
.mx_ImageView_button {
padding: 5px;
}
.mx_ImageView_label {
@ -68,39 +69,11 @@ limitations under the License.
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 30px;
padding-right: 30px;
min-height: 100%;
max-width: 240px;
color: $lightbox-fg-color;
}
.mx_ImageView_cancel {
position: absolute;
// hack for mx_Dialog having a top padding of 40px
top: 40px;
right: 0px;
padding-top: 35px;
padding-right: 35px;
cursor: pointer;
}
.mx_ImageView_rotateClockwise {
position: absolute;
top: 40px;
right: 70px;
padding-top: 35px;
cursor: pointer;
}
.mx_ImageView_rotateCounterClockwise {
position: absolute;
top: 40px;
right: 105px;
padding-top: 35px;
cursor: pointer;
}
.mx_ImageView_name {
font-size: $font-18px;
margin-bottom: 6px;
@ -112,41 +85,6 @@ limitations under the License.
opacity: 0.5;
}
.mx_ImageView_download {
display: table;
margin-top: 24px;
margin-bottom: 6px;
border-radius: 5px;
background-color: $lightbox-bg-color;
font-size: $font-14px;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
font-size: $font-11px;
}
.mx_ImageView_link {
color: $lightbox-fg-color !important;
text-decoration: none !important;
}
.mx_ImageView_button {
font-size: $font-15px;
opacity: 0.5;
margin-top: 18px;
cursor: pointer;
}
.mx_ImageView_shim {
height: 30px;
}
.mx_ImageView_rhs {
order: 3;
flex: 1 1 10%;
min-width: 300px;
// background-color: #800;
// height: 20px;
}