mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1209632 - Removing footer from Loop Standalone, moved Logo to mediaLayoutView. r=Standard8,ui-review=Sevaan
This commit is contained in:
David Critchley
parent
c9c7d06d9a
commit
0d5beae063
@ -15,10 +15,10 @@ button::-moz-focus-inner {
|
||||
z-index: 1020; /* required to have it superimposed to the video element */
|
||||
border: 0;
|
||||
left: 1.2rem;
|
||||
right: .7rem;
|
||||
height: 2.6rem;
|
||||
right: 1.2rem;
|
||||
height: 2.4rem;
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
bottom: 1.2rem;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .conversation-toolbar {
|
||||
@ -48,11 +48,11 @@ html[dir="rtl"] .conversation-toolbar > li {
|
||||
|
||||
.conversation-toolbar .btn {
|
||||
background-position: center;
|
||||
background-size: 28px;
|
||||
background-size: 24px;
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
height: 28px;
|
||||
width: 33px;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.conversation-toolbar-media-btn-group-box {
|
||||
@ -855,8 +855,8 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
|
||||
}
|
||||
|
||||
.standalone-room-wrapper > .media-layout {
|
||||
/* 50px is the header, 3em is the footer. */
|
||||
height: calc(100% - 50px - 3em);
|
||||
/* 50px is the header, 10px is the bottom margin. */
|
||||
height: calc(100% - 50px - 10px);
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@ -977,8 +977,8 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
|
||||
|
||||
@media screen and (max-width:640px) {
|
||||
.standalone-room-wrapper > .media-layout {
|
||||
/* 50px is height of header, 25px is height of footer. */
|
||||
height: calc(100% - 50px - 25px);
|
||||
/* 50px is height of header, 10px is bottom margin. */
|
||||
height: calc(100% - 50px - 10px);
|
||||
}
|
||||
|
||||
.media-layout > .media-wrapper {
|
||||
@ -1427,8 +1427,8 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
|
||||
left: 0;
|
||||
}
|
||||
.standalone .room-conversation-wrapper .video-layout-wrapper {
|
||||
/* 50px: header's height; 25px: footer's height */
|
||||
height: calc(100% - 50px - 25px);
|
||||
/* 50px: header's height; 10px: bottom margin */
|
||||
height: calc(100% - 50px - 10px);
|
||||
}
|
||||
.standalone .room-conversation .video_wrapper.remote_wrapper {
|
||||
width: 100%;
|
||||
|
||||
@ -57,74 +57,27 @@ body,
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
/* Mozilla Logo */
|
||||
|
||||
.footer-logo {
|
||||
width: 100px;
|
||||
margin: 0 auto;
|
||||
height: 30px;
|
||||
.focus-stream > .standalone-moz-logo {
|
||||
width: 50px;
|
||||
height: 13px;
|
||||
background-size: contain;
|
||||
background-image: url("../img/mozilla-logo.svg#logo-white");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.rooms-footer {
|
||||
background: #000;
|
||||
margin: 0 10px;
|
||||
text-align: left;
|
||||
height: 3em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .rooms-footer {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.rooms-footer p {
|
||||
/* Right-margin offset to account for .footer-logo plus 20px. */
|
||||
/* Zero other margins due to 1em margin from reset.css. */
|
||||
margin: 0 120px 0 0;
|
||||
/* Vertically align in the middle. */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
bottom: 1.2rem;
|
||||
right: 1.2rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .rooms-footer p {
|
||||
margin: 0 0 0 120px;
|
||||
}
|
||||
|
||||
.rooms-footer a {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.rooms-footer .footer-logo {
|
||||
/* Vertically-align in the middle. */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
/* Align to the right. */
|
||||
right: 0;
|
||||
}
|
||||
|
||||
html[dir="rtl"] .rooms-footer .footer-logo {
|
||||
left: 0;
|
||||
html[dir="rtl"] .focus-stream > .standalone-moz-logo {
|
||||
left: 1.2rem;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width:640px) {
|
||||
.rooms-footer {
|
||||
font-size: 80%;
|
||||
height: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rooms-footer p {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rooms-footer .footer-logo {
|
||||
.focus-stream > .standalone-moz-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -416,20 +416,6 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneRoomFooter = React.createClass({displayName: "StandaloneRoomFooter",
|
||||
propTypes: {
|
||||
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
React.createElement("footer", {className: "rooms-footer"},
|
||||
React.createElement("div", {className: "footer-logo"})
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneRoomView = React.createClass({displayName: "StandaloneRoomView",
|
||||
mixins: [
|
||||
Backbone.Events,
|
||||
@ -678,14 +664,26 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
||||
publishStream: this.publishStream,
|
||||
show: true,
|
||||
video: {enabled: !this.state.videoMuted,
|
||||
visible: this._roomIsActive()}})
|
||||
),
|
||||
React.createElement(StandaloneRoomFooter, {dispatcher: this.props.dispatcher})
|
||||
visible: this._roomIsActive()}}),
|
||||
React.createElement(StandaloneMozLogo, {dispatcher: this.props.dispatcher})
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneMozLogo = React.createClass({displayName: "StandaloneMozLogo",
|
||||
propTypes: {
|
||||
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
React.createElement("div", {className: "standalone-moz-logo"})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneRoomControllerView = React.createClass({displayName: "StandaloneRoomControllerView",
|
||||
mixins: [
|
||||
loop.store.StoreMixin("activeRoomStore")
|
||||
@ -726,7 +724,6 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
||||
StandaloneHandleUserAgentView: StandaloneHandleUserAgentView,
|
||||
StandaloneRoomControllerView: StandaloneRoomControllerView,
|
||||
StandaloneRoomFailureView: StandaloneRoomFailureView,
|
||||
StandaloneRoomFooter: StandaloneRoomFooter,
|
||||
StandaloneRoomHeader: StandaloneRoomHeader,
|
||||
StandaloneRoomInfoArea: StandaloneRoomInfoArea,
|
||||
StandaloneRoomView: StandaloneRoomView,
|
||||
|
||||
@ -416,20 +416,6 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneRoomFooter = React.createClass({
|
||||
propTypes: {
|
||||
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<footer className="rooms-footer">
|
||||
<div className="footer-logo" />
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneRoomView = React.createClass({
|
||||
mixins: [
|
||||
Backbone.Events,
|
||||
@ -679,13 +665,25 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
||||
show={true}
|
||||
video={{enabled: !this.state.videoMuted,
|
||||
visible: this._roomIsActive()}} />
|
||||
<StandaloneMozLogo dispatcher={this.props.dispatcher}/>
|
||||
</sharedViews.MediaLayoutView>
|
||||
<StandaloneRoomFooter dispatcher={this.props.dispatcher} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneMozLogo = React.createClass({
|
||||
propTypes: {
|
||||
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div className="standalone-moz-logo" />
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var StandaloneRoomControllerView = React.createClass({
|
||||
mixins: [
|
||||
loop.store.StoreMixin("activeRoomStore")
|
||||
@ -726,7 +724,6 @@ loop.standaloneRoomViews = (function(mozL10n) {
|
||||
StandaloneHandleUserAgentView: StandaloneHandleUserAgentView,
|
||||
StandaloneRoomControllerView: StandaloneRoomControllerView,
|
||||
StandaloneRoomFailureView: StandaloneRoomFailureView,
|
||||
StandaloneRoomFooter: StandaloneRoomFooter,
|
||||
StandaloneRoomHeader: StandaloneRoomHeader,
|
||||
StandaloneRoomInfoArea: StandaloneRoomInfoArea,
|
||||
StandaloneRoomView: StandaloneRoomView,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user