vmario
/
doodle3d-client
mirror of https://github.com/Doodle3D/doodle3d-client.git
0
0
Fork 0
Code Issues Releases Wiki Activity

fixed Firefox layouting issue of settings popup

This commit is contained in:
Adriaan Wormgoor 2013-10-11 23:33:19 +02:00
parent 632a0a0895
commit 613be4e619
6 changed files with 64 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/settings.css
View File

@ -1,5 +1,6 @@
form {
margin: 10px;
max-width: 600px;
}
form input {
margin: 1px;
@ -11,7 +12,6 @@ body,th,td {
}
.settingsContainer {
position:relative;
max-width: 600px;
/*min-width: 370px;*/
width: 100%;
height: 100%;

55
css/styles.css
View File

@ -422,20 +422,13 @@ top: 0px;
height: auto;
float: right;
}
.btnPrint.disabled {
opacity: 0.3;
}
.btnStop {
margin: 5% 10% 1% 5%;
float: right;
width: 90%;
max-width: 98px;
height: auto;
display: block;
}
.btnStop.disabled {
display: none;
}
.btnsSettingsInfo {
@ -563,7 +556,7 @@ SETTINGS POPUP
right: 0;
bottom: 0;
z-index: 15;
max-width: 835px;
max-width: 775px;
max-height: 540px;
width: 80%;
height: 75%;
@ -573,58 +566,60 @@ SETTINGS POPUP
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
border: 2px solid #222;
border-radius: 15px;
overflow: hidden;
display: table;
padding: 2%;
}
#contentOverlay #settings .settingsLabelContainer {
#contentOverlay #settings .toppanel {
height: 10%;
}
#contentOverlay #settings .toppanel .settingsLabelContainer {
width: 100%;
height: auto;
margin-bottom: 1%;
}
#contentOverlay #settings .settingsLabelImg {
#contentOverlay #settings .toppanel .settingsLabelContainer .settingsLabelImg {
width: 45%;
max-width: 373px;
height: auto;
}
#contentOverlay #settings > .content {
display: table-row;
#contentOverlay #settings .bottompanel {
width: 100%;
height: 90%;
}
#contentOverlay #settings > .content > .settings {
#contentOverlay #settings .bottompanel > .settingsContainer {
float: left;
width: 83%;
height: 98%;
margin: .5%;
-ms-overflow-y: scroll;
overflow-y: scroll;
border: 1px solid #bbbbbb;
border-radius: 5px;
overflow: scroll;
-ms-overflow-x: hidden;
overflow-x: hidden;
}
#contentOverlay #settings > .content > .btnContainer {
#contentOverlay #settings .bottompanel > .btnContainer {
width: 15%;
height: 100%;
float: right;
position: relative;
display: table-cell;
right: 0;
}
#contentOverlay #settings > .content > .btnContainer > .btnOK {
#contentOverlay #settings .bottompanel > .btnContainer > .btnOK {
position: absolute;
bottom: 3%;
right: 3%;
right: 7%;
max-width: 85px;
min-width: 42px;
width: 91%;
width: 88%;
height: auto;
margin: 0 2% 2% 0;
cursor: pointer;
float: right;
}
#contentOverlay #settings > .content > div {
height: 100%;
}
@media only screen and (max-width: 480px),only screen and (max-width: 720px) and (min-device-pixel-ratio: 1.5),only screen and (max-width: 720px) and (-webkit-min-device-pixel-ratio: 1.5) {

2
css/styles.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
index.html
View File

@ -101,11 +101,13 @@
</div>
<div id="contentOverlay">
<div id="settings">
<div class="settingsLabelContainer">
<img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
<div class="toppanel">
<div class="settingsLabelContainer">
<img class="settingsLabelImg" src="img/settings_lable.png" alt="settings" />
</div>
</div>
<div class="content">
<div class="settings"></div>
<div class="bottompanel">
<div class="settingsContainer"></div>
<div class="btnContainer">
<img src="img/buttons/btnOk_settings.png" class="btnOK" alt="settings"/>
</div>

2
js/SettingsWindow.js
View File

@ -83,7 +83,7 @@ function SettingsWindow() {
this.window = $("#settings");
this.window.find(".btnOK").click(this.submitwindow);
this.window.find(".settings").load("settings.html", function() {
this.window.find(".settingsContainer").load("settings.html", function() {
console.log("Settings:finished loading settings.html, now loading settings...");
self.form = self.window.find("form");

59
less/settingsPopup.less
View File

@ -23,7 +23,7 @@
right: 0;
bottom: 0;
z-index: 15;
max-width: 835px;
max-width: 775px;
max-height: 540px;
width: 80%;
height: 75%;
@ -31,55 +31,56 @@
box-shadow: 0px 2px 6px 0px rgba(16, 16, 16, 0.65);
border: 2px solid #222;
border-radius: 15px;
overflow: hidden;
display: table;
padding: 2%;
.settingsLabelContainer {
width: 100%;
height: auto;
margin-bottom: 1%;
}
.settingsLabelImg {
width: 45%;
max-width: 373px;
height: auto;
}
.toppanel {
height: 10%;
> .content {
// margin: 3% 12%;
// margin-top: 12%;
// max-height: 388px;
display: table-row;
width: 100%;
.settingsLabelContainer {
width: 100%;
height: auto;
margin-bottom: 1%;
> .settings {
.settingsLabelImg {
width: 45%;
max-width: 373px;
height: auto;
}
}
}
.bottompanel {
width: 100%;
height: 90%;
> .settingsContainer {
float:left;
width: 83%;
height: 98%;
margin: .5%;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid rgb(187, 187, 187);
border-radius: 5px;
overflow: scroll;
overflow-x: hidden;
}
> .btnContainer {
width: 15%;
height: 100%;
float:right;
position:relative;
display: table-cell;
right: 0;
> .btnOK {
position: absolute;
bottom: 3%;
right: 3%;
right: 7%;
max-width: 85px;
min-width: 42px;
width: 91%;
width: 88%;
height: auto;
margin: 0 2% 2% 0;
cursor: pointer;
float: right;
}
}
> div {
height: 100%;
}
}
}
}