mirror
/
vk3cpu
kopia lustrzana https://github.com/miguelvaca/vk3cpu
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

CSS cleanup

pull/2/head
miguel 2020-10-21 16:22:43 +11:00
rodzic 3564ff4122
commit 25b496eccc
2 zmienionych plików z 57 dodań i 46 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

99
magloop.css
Wyświetl plik

@ -10,35 +10,15 @@ header {
text-align: center;
}
section.gridLayoutClass {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(5, 1fr);
justify-items: stretch;
}
canvas.chartCanvasClass {
background: rgb(255, 255, 255);
/*width: 100%;*/
height: 100vh;
margin: 0;
border: 1px solid rgb(0, 0, 0);
display: block;
box-sizing: border-box;
}
section div.chart-container {
grid-column-start: 1;
grid-column-end: 7;
grid-row-start: 1;
grid-row-end: 6;
}
section div.slider_container {
grid-column-start: 7;
grid-column-end: 11;
grid-row-start: 4;
grid-row-end: 6;
width: 100%;
height: 100%;
background: rgb(255, 255, 255);
@ -48,15 +28,10 @@ section div.slider_container {
}
section div.antennaFront-container {
grid-column-start: 7;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 4;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
/*display: block;*/
margin: 0;
padding: 0;
background: white;
@ -83,14 +58,10 @@ div label {
div input {
background:lightsalmon;
display: inline-block;
width: auto;
width: 60%;
}
section div.antennaSide-container {
grid-column-start: 9;
grid-column-end: 11;
grid-row-start: 1;
grid-row-end: 4;
width: 100%;
height: 100%;
display: block;
@ -105,35 +76,73 @@ section div.antennaSide-container {
@media (orientation: portrait) {
section.gridLayoutClass {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(10, 1fr);
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, 1fr);
justify-items: stretch;
}
section div.chart-container {
grid-column-start: 1;
grid-column-end: 6;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 7;
grid-row-end: 4;
height: 100vh;
width: 100vw;
}
section div.antennaFront-container {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
}
section div.antennaSide-container {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
}
section div.slider_container {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
}
@media (orientation: landscape) {
section.gridLayoutClass {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
justify-items: stretch;
}
section div.chart-container {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
height: 100vh;
width: 100vw;
}
section div.slider_container {
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 9;
grid-row-end: 11;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
section div.antennaFront-container {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 9;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 4;
}
section div.antennaSide-container {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 7;
grid-row-end: 9;
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 4;
}
}

4
magloop.html
Wyświetl plik

@ -466,6 +466,8 @@
//const win_height = aside_canvas.height;
sctx.clearRect(0, 0, win_width, win_height);
//const loop_radius = win_width < win_height ? 0.40 * win_width : 0.40 * win_height;
const cond_radius = conductor_diameter_slider.value / 5;
const cond_spacing = 2 * cond_radius * loop_spacing_slider.value;
const start_x = win_width/2 - loop_turns_slider.value * cond_spacing * 0.5;
@ -510,7 +512,7 @@
// Draw turns number text:
sctx.font = "12px arial";
sctx.textAlign = "center";
sctx.fillText("N = " + loop_turns_slider.value.toString(), win_width/2, win_height * 0.1);
sctx.fillText("N = " + loop_turns_slider.value.toString(), win_width/2, win_height * 0.1 + 3);
// Draw spacing text:
sctx.textAlign = "left";