Commit 51d1231c5c2d90b52381c46e428a183c98644772

Authored by Lars Jørgen Fredheim
1 parent 5e1a3567

GUI Updates

css/style.css
... ... @@ -224,7 +224,7 @@ ul li {
224 224 height: 100%;
225 225 }
226 226  
227   -.test-wrapper {
  227 +.custom-terrace-wrapper {
228 228 overflow-y: auto;
229 229 overflow-x: hidden;
230 230 border-top-left-radius: 10px;
... ... @@ -234,10 +234,8 @@ ul li {
234 234 height: 100%;
235 235 width: 275px;
236 236 z-index: 20;
237   - /*background-image: url("../images/wallpapers/seamless_paper_texture.png");*/
  237 + background: url("../images/wallpapers/funky-lines.png");
238 238 border: 1px solid black;
239   - background-color: #f9f9f9;
240   - /*margin: 10px;*/
241 239 }
242 240  
243 241 /* ----------------------------------------------------------- */
... ... @@ -333,7 +331,7 @@ ul li {
333 331 position: fixed;
334 332 bottom: 5px;
335 333 left: 5px;
336   - width: 100px;
  334 + width: 80px;
337 335 z-index: 15;
338 336 text-align: center;
339 337 transition: all 0.2s ease-in-out;
... ... @@ -350,12 +348,12 @@ ul li {
350 348 }
351 349  
352 350 #imgCart {
353   - width: 50px;
  351 + width: 40px;
354 352 bottom: 0;
355 353 }
356 354  
357 355 #subtotal {
358   - font-size: 15px;
  356 + font-size: 10px;
359 357 font-family: Arial, Helvetica, sans-serif;
360 358 }
361 359  
... ... @@ -396,16 +394,34 @@ ul li {
396 394  
397 395 #closeItemList {
398 396 position: absolute;
399   - top: -30px;
  397 + top: -20px;
400 398 right: 10px;
401 399 cursor: pointer;
402 400 font-size: 50px;
403 401 }
404 402  
405   -#itemTableDiv {
  403 +#itemTableHead {
  404 + position: relative;
  405 + margin-top: 10px;
  406 + left: 1%;
406 407 width: 98%;
407   - height: 75%;
  408 + text-align: center;
  409 + background-color: #cccccc;
408 410 border: 1px solid black;
  411 +}
  412 +
  413 +#itemTableHead thead tr th {
  414 + text-align: center;
  415 +}
  416 +
  417 +#itemTableDiv {
  418 + position: relative;
  419 + top: 2%;
  420 + width: 98%;
  421 + height: 70%;
  422 + border-left: 1px solid black;
  423 + border-right: 1px solid black;
  424 + border-top: 1px solid black;
409 425 margin: 0 1%;
410 426 overflow: auto;
411 427 background-color: white;
... ... @@ -424,6 +440,19 @@ ul li {
424 440 vertical-align: top;
425 441 }
426 442  
  443 +#itemTableFoot {
  444 + position: relative;
  445 + top: 2%;
  446 + left: 1%;
  447 + width: 98%;
  448 + background-color: #cccccc;
  449 + border: 1px solid black;
  450 +}
  451 +
  452 +#itemTableFoot tr th div, #itemTableFoot tr th {
  453 + text-align: right;
  454 +}
  455 +
427 456 #itemListFooter {
428 457 position: relative;
429 458 width: 100%;
... ... @@ -432,7 +461,7 @@ ul li {
432 461 #downloadItemListButton {
433 462 position: relative;
434 463 right: -355px;
435   - bottom: -5px;
  464 + top: 20px;
436 465 width: 70px;
437 466 cursor: pointer;
438 467 transition: all 0.2s ease-in-out;
... ... @@ -464,24 +493,41 @@ ul li {
464 493 width: 200px;*/
465 494 }
466 495  
  496 +#home {
  497 + position: fixed;
  498 + top: 0;
  499 + z-index: 20;
  500 + width: 30px;
  501 + display: none;
  502 +}
  503 +
  504 +#helpLinesButton {
  505 + position: fixed;
  506 + top: -1px;
  507 + z-index: 20;
  508 + margin: 5px;
  509 + left: 10px;
  510 + height: 40px;
  511 +}
  512 +
467 513 .view-nav {
468 514 position: relative;
469 515 top: 0;
470   - left: -20px;
471   - width: 60px;
  516 + left: 28px;
  517 + width: 45px;
472 518 }
473 519  
474   -/* https://bit.ly/2L2k2qd */
  520 +/************ https://bit.ly/2L2k2qd **************/
475 521 .view-nav li ul {
476 522 position:absolute;
477 523 left: 0;
478   - top:36px;
  524 + top: 36px;
479 525 z-index:1;
480 526 }
481 527 .view-nav li ul li {
482 528 overflow:hidden;
483 529 max-height:0;
484   - width: 70px;
  530 + width: 55px;
485 531 -webkit-transition:max-height 500ms ease;
486 532 -moz-transition:max-height 500ms ease;
487 533 -o-transition:max-height 500ms ease;
... ... @@ -490,18 +536,19 @@ ul li {
490 536 .view-nav ul > li:hover ul li {
491 537 max-height:100px;
492 538 }
  539 +/**************************************************/
493 540  
494 541 .view {
495   - width: 60px;
  542 + width: 45px;
496 543 }
497 544  
498 545 .dropdown-view {
499   - padding-top: 20px;
  546 + padding-top: 5px;
500 547 padding-left: 40px
501 548 }
502 549  
503 550 .cameraButtons {
504   - width: 45px;
  551 + width: 35px;
505 552 margin-left: 5px;
506 553 margin-top: 5px;
507 554 }
... ... @@ -510,20 +557,30 @@ ul li {
510 557 transform: scale(1.05);
511 558 }
512 559  
513   -#helpLinesButton {
  560 +
  561 +#zoom-out {
514 562 position: fixed;
515   - top:0;
  563 + top: 0;
516 564 z-index: 20;
517   - margin: 5px;
518   - left: 90px;
519   - height: 50px;
  565 + margin-top: 10px;
  566 + height: 30px;
  567 + left: 125px;
  568 +}
  569 +
  570 +#zoom-in {
  571 + position: fixed;
  572 + top: 0;
  573 + z-index: 20;
  574 + margin-top: 10px;
  575 + height: 30px;
  576 + left: 170px;
520 577 }
521 578  
522 579 #helpButton {
523 580 position: fixed;
524   - top: 2px;
525   - left: 150px;
526   - height: 45px;
  581 + top: 6px;
  582 + left: 210px;
  583 + height: 25px;
527 584 margin: 5px;
528 585 }
529 586  
... ... @@ -734,12 +791,11 @@ ul li {
734 791 height: 40px;
735 792 }
736 793  
737   -/*******************************************************/
738   -/************ AutoGen ********************/
739   -/*******************************************************/
  794 +/************************************************/
  795 +/***************** Autogen **********************/
740 796  
741 797 .autoGenPoleButton {
742   - height: 125px;
  798 + height: 80px;
743 799 border: 1px solid black;
744 800 border-radius: 5px;
745 801 }
... ... @@ -944,17 +1000,30 @@ ul li {
944 1000  
945 1001 .pdf {
946 1002 height: 55px;
  1003 + right: -30px;
947 1004 }
948 1005  
949 1006 .perspective {
950   - height: 50px;
  1007 + height: 45px;
951 1008 }
952 1009  
953 1010 .ruler {
954   - height: 45px;
  1011 + height: 40px;
  1012 +}
  1013 +
  1014 +.zoom {
  1015 + height: 30px;
955 1016 margin-bottom: 50px;
956 1017 }
957 1018  
  1019 +.offset5 {
  1020 + margin-top: 5px;
  1021 +}
  1022 +
  1023 +.offset10 {
  1024 + margin-top: 10px;
  1025 +}
  1026 +
958 1027 .offset15 {
959 1028 margin-top: 15px;
960 1029 }
... ...
images/icons/help.png

6.02 KB | W: | H:

2.6 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/home.png 0 → 100644

759 Bytes

images/icons/ruler_2.png

10.6 KB | W: | H:

848 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/ruler_3.png 0 → 100644

10.6 KB

images/icons/ruler_inverted.png 0 → 100644

1.92 KB

images/icons/ruler_outlined.png 0 → 100644

3.38 KB

images/icons/view.png

2.01 KB | W: | H:

1.85 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
images/icons/view_.png 0 → 100644

2.01 KB

images/icons/view_inverted.png 0 → 100644

2.04 KB

images/icons/zoom_in.png 0 → 100644

2.73 KB

images/icons/zoom_in_inverted.png 0 → 100644

2.2 KB

images/icons/zoom_out.png 0 → 100644

2.6 KB

images/icons/zoom_out_inverted.png 0 → 100644

2.18 KB

images/menu_terrace_texture_9.png 0 → 100644

76.7 KB

images/psd/terrace_diamond_labeled.psd 0 → 100644
No preview for this file type
images/psd/terrace_l_shape_labeled.psd 0 → 100644
No preview for this file type
images/psd/terrace_square_labeled.psd 0 → 100644
No preview for this file type
images/psd/terrace_triangle_labeled.psd 0 → 100644
No preview for this file type
images/references.txt
... ... @@ -8,11 +8,19 @@ ruler.png https://www.iconfinder.com/icons/296913/design_ruler_icon#si
8 8 plus.png https://www.iconfinder.com/icons/126583/add_plus_icon#size=128
9 9 shoppingcart.png https://www.iconfinder.com/icons/1608412/cart_shopping_icon#size=128
10 10 view.png https://www.iconfinder.com/icons/216550/view_icon#size=128
11   -help.png https://www.iconfinder.com/icons/40797/blue_help_icon#size=128
  11 +help.png https://www.iconfinder.com/icons/183285/help_mark_question_icon#size=128
12 12 double_arrow.png https://www.iconfinder.com/icons/383079/arrow_double_right_icon#size=128
13 13 cancel.png https://www.iconfinder.com/icons/646197/cancel_close_cross_delete_remove_stop_wrong_icon#size=128
14 14 finished.png https://www.iconfinder.com/icons/646195/done_ok_right_success_tick_valid_yes_icon#size=128
15 15 pdf.png https://www.iconfinder.com/icons/511559/document_download_file_files_pdf_icon#size=128
16 16 close.png https://www.iconfinder.com/icons/216470/close_icon#size=128
  17 +zoom_out.png https://www.iconfinder.com/icons/106233/out_zoom_icon#size=128
  18 +zoom_in.png https://www.iconfinder.com/icons/106237/in_zoom_icon#size=128
  19 +camera.png https://www.iconfinder.com/icons/211634/camera_icon#size=128
  20 +home.png https://www.iconfinder.com/icons/183566/home_icon#size=128
17 21  
18   -graySpecularHDR.dds https://github.com/sbtron/BabylonJS-glTFLoader/blob/master/src/images/graySpecularHDR.dds
19 22 \ No newline at end of file
  23 +
  24 +graySpecularHDR.dds https://github.com/sbtron/BabylonJS-glTFLoader/blob/master/src/images/graySpecularHDR.dds
  25 +
  26 +terrace texture https://www.sketchuptextureclub.com/textures/architecture/wood-planks/wood-decking/laminated-beech-wood-decking-texture-seamless-09323
  27 +funky lines https://www.toptal.com/designers/subtlepatterns/funky-lines/
20 28 \ No newline at end of file
... ...
index.html
... ... @@ -7,7 +7,7 @@
7 7 <!-- Bootstrap CSS -->
8 8 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
9 9  
10   - <!-- My CSS -->
  10 + <!-- Custom CSS -->
11 11 <link rel="stylesheet" type="text/css" href="css/style.css">
12 12  
13 13 <!------------------------------------------------------ SCRIPT ------------------------------------------------------->
... ... @@ -36,18 +36,18 @@
36 36  
37 37 <script src="js/HTMLGUI.js"></script>
38 38  
39   - <!------------------------------------------------>
40   - <script src="js/gui/GUI.js"></script>
41   - <script src="js/gui/CustomTerraceGUI.js"></script>
42   - <script src="js/gui/NotificationMessage.js"></script>
43   - <script src="js/gui/LayoutSelectionGUI.js"></script>
44   - <!------------------------------------------------>
45   -
46 39 <script src="js/PDF/PDF.js"></script>
47 40 <script src="js/PDF/ImageURLS.js"></script>
48 41  
49 42 <script src="js/Constants.js"></script>
50 43 <script src="js/Setup.js"></script>
  44 +
  45 + <!-- Warn user on page refresh/exit -->
  46 + <script type="text/javascript">
  47 + window.onbeforeunload = function() {
  48 + return "Verify page refresh";
  49 + }
  50 + </script>
51 51 <!--------------------------------------------------------------------------------------------------------------------->
52 52  
53 53 </head>
... ... @@ -187,8 +187,8 @@
187 187  
188 188 </div>
189 189  
190   - <!-- Testing -->
191   - <div class="test-wrapper hide" id="testWrapper">
  190 + <!-- Custom terrace wrapper -->
  191 + <div class="custom-terrace-wrapper hide" id="testWrapper">
192 192  
193 193 <!-- Custom terrace GUI -->
194 194 <div id="customTerraceGUI" class="center hide">
... ... @@ -326,11 +326,12 @@
326 326 <input id="glassButton" type="image" src="images/menu_glass_clear.png" title="Glass (høyde = 840mm)" onmousedown="addGlassFromMenu()" ondragstart="return false;" />
327 327 <input id="increaseGlassWidth" type="image" src="images/icons/left_arrow.png" title="Øk glassbredde" onclick="increaseGlassSize()" ondragstart="return false;" />
328 328 </div>
329   - <!--<p class ="moduleMenuHeader" id="fpsCounter">fps: </p>-->
330 329 </div>
331 330  
332 331 <!-- Top left toolbar -->
333 332 <div id="topButtons">
  333 + <input id="home" type="image" src="images/icons/home.png">
  334 + <input id="helpLinesButton" type="image" src="images/icons/ruler_2.png" onclick="toggleHelplines()" ondragstart="return false;" />
334 335 <div class="view-nav">
335 336 <ul>
336 337 <li>
... ... @@ -346,11 +347,12 @@
346 347 </li>
347 348 </ul>
348 349 </div>
349   - <input id="helpLinesButton" type="image" src="images/icons/ruler_2.png" onclick="toggleHelplines()" ondragstart="return false;" />
  350 + <input id="zoom-out" type="image" src="images/icons/zoom_out.png" onmousedown="zoomOutCamera()" onmouseup="noZoom()" ondragstart="return false;">
  351 + <input id="zoom-in" type="image" src="images/icons/zoom_in.png" onmousedown="zoomInCamera()" onmouseup="noZoom()" ondragstart="return false;">
350 352 <input id="helpButton" type="image" src="images/icons/help.png" onclick="displayInfo()"/>
351 353 </div>
352 354  
353   - <!-- Shopping cart -->
  355 + <!-- Shopping cart button -->
354 356 <div id="shoppingCart" onclick="displayItemList()">
355 357 <img src="images/icons/shoppingCart.png" id="imgCart">
356 358 <div id="subtotal">0 kr</div>
... ... @@ -361,21 +363,49 @@
361 363 <div id="itemListHeader">
362 364 <div class="menuHeader">Utstyrsliste</div>
363 365 <div id="closeItemList" onclick="hideItemList()" title="Lukk">&times;</div>
  366 + <table id="itemTableHead">
  367 + <col width="12%">
  368 + <col width="18%">
  369 + <col width="45%">
  370 + <col width="13%">
  371 + <col width="12%">
  372 + <tr>
  373 + <th>Varenr</th>
  374 + <th>Nobbnr</th>
  375 + <th>Artikkel</th>
  376 + <th>Antall</th>
  377 + <th>Pris</th>
  378 + </tr>
  379 + </table>
364 380 </div>
365 381 <div id="itemTableDiv">
366 382 <table id="itemTable" cellpadding="5">
367 383 <thead>
368   - <tr>
  384 + <!-- <tr>
369 385 <th>Varenr</th>
370 386 <th>Nobbnr</th>
371 387 <th>Artikkel</th>
372 388 <th>Antall</th>
373 389 <th>Pris</th>
374   - </tr>
  390 + </tr> -->
375 391 </thead>
376 392 <tbody id="itemTableBody"></tbody>
377 393 </table>
378 394 </div>
  395 + <table id="itemTableFoot">
  396 + <col width="13%">
  397 + <col width="13%">
  398 + <col width="44%">
  399 + <col width="14%">
  400 + <col width="16%">
  401 + <tr>
  402 + <th></th>
  403 + <th></th>
  404 + <th></th>
  405 + <th>Sum:</th>
  406 + <th><div id="totalCost">0,-</div></th>
  407 + </tr>
  408 + </table>
379 409 <div id="itemListFooter">
380 410 <img id="downloadItemListButton" src="images/icons/pdf.png" onclick="downloadItemList()" title="Last ned som PDF">
381 411 </div>
... ... @@ -387,6 +417,7 @@
387 417  
388 418 </div>
389 419  
  420 + <!-- Pole mesh controls -->
390 421 <div id="poleMenu">
391 422 <div class="meshControlsButtonsDiv" style="margin-left: 8px;">
392 423 <input class="meshControlsButtons" id="pole-rot-left" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" title="Roter mot venstre" ondragstart="return false;" />
... ... @@ -402,6 +433,7 @@
402 433 </div>
403 434 </div>
404 435  
  436 + <!-- Glass mesh controls -->
405 437 <div id="glassMenu">
406 438 <div class="meshControlsButtonsDiv">
407 439 <input class="meshControlsButtons" type="image" src="images/menu_pole_rotate_left.png" onclick="rotateMeshLeft()" title="Roter mot venstre" ondragstart="return false;" />
... ... @@ -421,22 +453,20 @@
421 453 </div>
422 454 </div>
423 455  
  456 + <!-- Autogenerate railing -->
424 457 <div id="autoGenInfo">
425 458 <p id="autoGenInfoHeader">Automatisk generering av rekkverk</p>
426 459 <p id="autoGenHelp" class="grey">Trykk på en av pilene for å velge hvilken retning du vil ha rekkverk i</p>
427 460  
428 461 <div id="autoGenPoleSelect" style="display: none">
429 462 <div class="autoGenPoleRow">
  463 + <input class="autoGenPoleButton" type="image" src="images/poles/end_labeled.png" title="Endestolpe" onclick="onAutoGenPoleSelected('end')" ondragstart="return false;" />
  464 + <input class="autoGenPoleButton" type="image" src="images/poles/wall_labeled.png" title="Veggfeste" onclick="onAutoGenPoleSelected('wall')" ondragstart="return false;" />
430 465 <input class="autoGenPoleButton" type="image" src="images/poles/180_labeled.png" title="180&#176; Stolpe" onclick="onAutoGenPoleSelected('180')" ondragstart="return false;" />
431 466 <input class="autoGenPoleButton" type="image" src="images/poles/90_labeled.png" title="90&#176; Stolpe" onclick="onAutoGenPoleSelected('90')" ondragstart="return false;" />
432 467 <input class="autoGenPoleButton" type="image" src="images/poles/45_labeled.png" title="45&#176; Stolpe" onclick="onAutoGenPoleSelected('45')" ondragstart="return false;" />
433 468 </div>
434   - <div class="autoGenPoleRow">
435   - <input class="autoGenPoleButton" type="image" src="images/poles/end_labeled.png" title="Endestolpe" onclick="onAutoGenPoleSelected('end')" ondragstart="return false;" />
436   - <input class="autoGenPoleButton" type="image" src="images/poles/wall_labeled.png" title="Veggfeste" onclick="onAutoGenPoleSelected('wall')" ondragstart="return false;" />
437   - </div>
438 469 </div>
439   -
440 470 <div id="autoGenSuggestions">
441 471 <table id="suggestionsTable">
442 472 <thead>
... ... @@ -458,14 +488,7 @@
458 488 </div>
459 489 </div>
460 490  
461   - <!--<div class="init-info hide" id="init-info">
462   - <div class="init-info-box">
463   - <div style="margin-top: 10px">Ønsker du en gjennomgang av programmets funksjoner?</div>
464   - <button class="btn btn-yes" id="btYes" onclick="displayInfo()">Ja</button>
465   - <button class="btn btn-no" id="btNo" onclick="hidePopup()">Nei</button>
466   - </div>
467   - </div>-->
468   -
  491 + <!-- Help menu overlay -->
469 492 <div class="info hide" id="info">
470 493  
471 494 <div class="close" onclick="closeInfo()" title="Lukk">&times;</div>
... ... @@ -474,7 +497,7 @@
474 497  
475 498 <!-- Poles -->
476 499 <div class="row element-row" style="margin-top: 50px">
477   - <div class="col-sm-6">
  500 + <div class="col-sm-5">
478 501 <div class="right">
479 502 <img class="img-fluid info-pole-buttons" src="images/poles/end_labeled.png">
480 503 <img class="img-fluid info-pole-buttons" src="images/poles/wall_labeled.png">
... ... @@ -483,7 +506,7 @@
483 506 <img class="img-fluid info-pole-buttons" src="images/poles/180_labeled.png">
484 507 </div>
485 508 </div>
486   - <div class="col-sm-6">
  509 + <div class="col-sm-7">
487 510 <div class="infotext offset20">
488 511 Klikk og dra stolper fra menyen for å plassere de på terrassen
489 512 </div>
... ... @@ -492,10 +515,10 @@
492 515  
493 516 <!-- Glass type -->
494 517 <div class="row element-row">
495   - <div class="col-sm-6">
  518 + <div class="col-sm-5">
496 519 <img class="img-fluid select-img" src="images/icons/type.png">
497 520 </div>
498   - <div class="col-sm-6">
  521 + <div class="col-sm-7">
499 522 <div class="infotext">
500 523 Endre glasstype
501 524 </div>
... ... @@ -504,10 +527,10 @@
504 527  
505 528 <!-- Glass width -->
506 529 <div class="row element-row">
507   - <div class="col-sm-6">
  530 + <div class="col-sm-5">
508 531 <img class="img-fluid select-img" src="images/icons/width.png">
509 532 </div>
510   - <div class="col-sm-6">
  533 + <div class="col-sm-7">
511 534 <div class="infotext">
512 535 Endre glassbredde
513 536 </div>
... ... @@ -516,14 +539,14 @@
516 539  
517 540 <!-- Glass -->
518 541 <div class="row element-row">
519   - <div class="col-sm-6">
  542 + <div class="col-sm-5">
520 543 <div class="glass-row">
521 544 <img class="img-fluid scaled-img" src="images/menu_glass_clear.png">
522 545 <img class="img-fluid scaled-img" src="images/menu_glass_frosted.png">
523 546 <img class="img-fluid scaled-img" src="images/menu_glass_darkened.png">
524 547 </div>
525 548 </div>
526   - <div class="col-sm-6">
  549 + <div class="col-sm-7">
527 550 <div class="infotext offset20" >
528 551 Klikk og dra glass fra menyen for å plassere de på terrassen
529 552 </div>
... ... @@ -532,13 +555,13 @@
532 555  
533 556 <!-- Rotate -->
534 557 <div class="row element-row">
535   - <div class="col-sm-6">
  558 + <div class="col-sm-5">
536 559 <div class="right">
537 560 <img class="img-fluid img" src="images/menu_pole_rotate_left.png">
538 561 <img class="img-fluid img" src="images/menu_pole_rotate_right.png">
539 562 </div>
540 563 </div>
541   - <div class="col-sm-6">
  564 + <div class="col-sm-7">
542 565 <div class="infotext">
543 566 Roter markert stolpe eller glass til venstre/høyre
544 567 </div>
... ... @@ -547,12 +570,12 @@
547 570  
548 571 <!-- Delete -->
549 572 <div class="row element-row">
550   - <div class="col-sm-6">
  573 + <div class="col-sm-5">
551 574 <div class="right">
552 575 <img class="img-fluid img" src="images/menu_pole_delete.png">
553 576 </div>
554 577 </div>
555   - <div class="col-sm-6">
  578 + <div class="col-sm-7">
556 579 <div class="infotext">
557 580 Fjern markert stolpe eller glass fra terrassen
558 581 </div>
... ... @@ -561,12 +584,12 @@
561 584  
562 585 <!-- Auto -->
563 586 <div class="row element-row">
564   - <div class="col-sm-6">
  587 + <div class="col-sm-5">
565 588 <div class="right">
566 589 <img class="img-fluid img" src="images/icons/auto.png">
567 590 </div>
568 591 </div>
569   - <div class="col-sm-6">
  592 + <div class="col-sm-7">
570 593 <div class="infotext">
571 594 Start automatisk generering av rekkverk
572 595 </div>
... ... @@ -575,12 +598,12 @@
575 598  
576 599 <!-- Shopping cart -->
577 600 <div class="row element-row">
578   - <div class="col-sm-6">
  601 + <div class="col-sm-5">
579 602 <div class="right">
580 603 <img class="img-fluid shopping-cart" src="images/icons/shoppingCart.png">
581 604 </div>
582 605 </div>
583   - <div class="col-sm-6">
  606 + <div class="col-sm-7">
584 607 <div class="infotext">
585 608 Åpne handlekurven
586 609 </div>
... ... @@ -589,12 +612,12 @@
589 612  
590 613 <!-- PDF -->
591 614 <div class="row element-row">
592   - <div class="col-sm-6">
  615 + <div class="col-sm-5">
593 616 <div class="right">
594 617 <img class="img-fluid pdf" src="images/icons/pdf_2.png">
595 618 </div>
596 619 </div>
597   - <div class="col-sm-6">
  620 + <div class="col-sm-7">
598 621 <div class="infotext offset15">
599 622 Last ned utstyrslisten som et PDF-dokument
600 623 </div>
... ... @@ -603,12 +626,12 @@
603 626  
604 627 <!-- View -->
605 628 <div class="row element-row">
606   - <div class="col-sm-6">
  629 + <div class="col-sm-5">
607 630 <div class="right">
608   - <img class="img-fluid perspective" src="images/icons/view_outlined.png">
  631 + <img class="img-fluid perspective" src="images/icons/view_inverted.png">
609 632 </div>
610 633 </div>
611   - <div class="col-sm-6">
  634 + <div class="col-sm-7">
612 635 <div class="infotext offset15">
613 636 Beveg musepekeren over for å velge mellom 2D og 3D-perspektiv
614 637 </div>
... ... @@ -617,40 +640,36 @@
617 640  
618 641 <!-- Help lines -->
619 642 <div class="row element-row">
620   - <div class="col-sm-6">
  643 + <div class="col-sm-5">
621 644 <div class="right">
622   - <img class="img-fluid ruler" src="images/icons/ruler_2.png">
  645 + <img class="img-fluid ruler" src="images/icons/ruler_inverted.png">
623 646 </div>
624 647 </div>
625   - <div class="col-sm-6">
626   - <div class="infotext offset15">
  648 + <div class="col-sm-7">
  649 + <div class="infotext offset10">
627 650 Skru av og på hjelpelinjer
628 651 </div>
629 652 </div>
630 653 </div>
631 654  
632   - </div>
633   -
634   - <!-- Module menu --
635   - <p class="infotext" id="info-close-menu">Klikk her for å skjule/vise menyen</p>
636   - <p class="infotext" id="info-pole-buttons">Klikk og dra stolper fra menyen<br>for å plassere de på terrrassen</p>
637   - <p class="infotext" id="info-glass-type">Endre glasstype her</p>
638   - <p class="infotext" id="info-glass-width">Endre glassbredde her</p>
639   - <p class="infotext" id="info-glass-button">Klikk og dra glass fra menyen<br>for å plassere de på terrrassen</p>
640   -
641   - <!-- Pole tool menu --
642   - <p class="infotext" id="info-pole-rotate-left">Roter til venstre</p>
643   - <p class="infotext" id="info-pole-rotate-right">Roter til høyre</p>
644   - <p class="infotext" id="info-pole-delete">Slett stolpe</p>
645   - <p class="infotext" id="info-pole-auto">Start automatisk generering av rekkverk</p>
646   -
647   - <!-- Glass tool menu --
648   - <p class="infotext" id="info-glass-menu-type">Endre glasstype</p>
649   - -->
  655 + <!-- Zoom -->
  656 + <div class="row element-row">
  657 + <div class="col-sm-5">
  658 + <div class="right">
  659 + <img class="img-fluid zoom" src="images/icons/zoom_out_inverted.png">
  660 + <img class="img-fluid zoom" src="images/icons/zoom_in_inverted.png">
  661 + </div>
  662 + </div>
  663 + <div class="col-sm-7">
  664 + <div class="infotext offset10">
  665 + Juster kamerazoom (du kan også bruke scrollehjulet på musen din)
  666 + </div>
  667 + </div>
  668 + </div>
650 669  
  670 + </div>
651 671 </div>
652 672  
653   -
654 673 </div>
655 674  
656 675 <!-- jQuery -->
... ... @@ -660,4 +679,4 @@
660 679 <script src="lib/bootstrap.min.js"></script>
661 680  
662 681 </body>
663   -</html>
664 682 \ No newline at end of file
  683 +</html>
... ...
js/HTMLGUI.js
... ... @@ -126,11 +126,11 @@ function updateTotalCost() {
126 126 }
127 127  
128 128 function displayItemList() {
129   - if (shoppingCart.length > 0) {
130   - document.getElementById("itemList").style.display = "inline";
  129 + document.getElementById("itemList").style.display = "inline";
131 130  
132   - document.getElementById("fade-background").style.display = "inline";
  131