mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-17 21:04:11 +00:00
8423974c6a
* make top of "below-the-fold" be actually above the fold * put all above-the-fold content except title and more details button into that area * kep below-the-fold area in fullscreen mode when title/credit gets untruncated * increase title length to 180 (140 before reducing font size) - works nicely on my 1600x900 laptop * remove old styles which were intended to make the button smaller when the panel is close but were mostly broken anyway and only caused the button to twitch To avoid redoing all the size calculation logic, we cheat and use a negative margin to pull the below-the-fold content above the fold. Change-Id: I18d7bdb7dbbdfb8201c0d66257731febfac31263 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/833
107 lines
2 KiB
Plaintext
107 lines
2 KiB
Plaintext
@import "mmv.globals";
|
|
@import "mmv.mixins";
|
|
|
|
@metadata-background: rgb(248, 248, 248);
|
|
|
|
.mw-mmv-wrapper {
|
|
top: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
z-index: 1001;
|
|
position: absolute;
|
|
bottom: auto;
|
|
|
|
.skin-monobook & {
|
|
font-size: medium;
|
|
}
|
|
}
|
|
|
|
.mw-mmv-main {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
|
|
.jq-fullscreened {
|
|
background-color: black;
|
|
}
|
|
}
|
|
|
|
.mw-mmv-image-wrapper {
|
|
position: fixed;
|
|
top: 0px;
|
|
bottom: @metadatabar-above-fold-height;
|
|
left: 0px;
|
|
right: 0px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.mw-mmv-image-inner-wrapper {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.mw-mmv-pre-image {
|
|
position: absolute;
|
|
top: 0px;
|
|
height: 32px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mw-mmv-post-image {
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: auto;
|
|
height: auto;
|
|
color: #333333;
|
|
background-color: #ffffff;
|
|
min-height: (@metadatabar-above-fold-inner-height + 1);
|
|
z-index: 1005;
|
|
}
|
|
|
|
// above-the-fold part of the metadata panel
|
|
.mw-mmv-above-fold {
|
|
width: 100%;
|
|
height: @metadatabar-above-fold-inner-height;
|
|
// min-height is used when the height is changed to auto to display long texts, to make sure the layout
|
|
// is not messed up wheen the text is short and does not fill the available place. It is also used by
|
|
// Javascript to get the "default" height.
|
|
min-height: @metadatabar-above-fold-inner-height;
|
|
position: relative;
|
|
// make sure there is no content in the part which is overlapped by the revealed part of the below-fold content
|
|
padding-bottom: @metadatabar-below-fold-pushup-height;
|
|
|
|
.mw-mmv-untruncated & {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
// Fullscreen styles
|
|
|
|
.cursor-hidden {
|
|
cursor: none;
|
|
}
|
|
|
|
.mw-mmv-main.jq-fullscreened {
|
|
background-color: black;
|
|
}
|
|
|
|
.jq-fullscreened {
|
|
.mw-mmv-image-wrapper, // make the image occupy the whole screen
|
|
.mw-mmv-post-image { // make sure the panel fits in the screen and does not cause scrollbars to appear
|
|
bottom: 0px;
|
|
}
|
|
|
|
.mw-mmv-post-image {
|
|
position: fixed;
|
|
min-height: 0;
|
|
.opacity(0);
|
|
transition: opacity 0.25s;
|
|
|
|
&:hover {
|
|
.opacity(1);
|
|
}
|
|
}
|
|
}
|