Make save dropdown menu

[elalish]

Follow-on to #500

This cleans up the UX of ManifoldCAD.org by putting all file types under one dropdown menu, which will also make it easier to add more as necessary without cluttering the UI.

[elalish]

I ran into a problem where __APPLE__ is not defined for a WASM build even on my Mac. However, it looks like C++17 has a much better solution. There are probably some other places we should use this too.

[pca006132]

Interesting. I somehow remember that another issue I encounter is the lack of support for pstl, that is why I put __APPLE__ to those macros using PSTL. I think the <execution> header is there, but it does not contain the required definitions.

[pca006132]

Thinking about it, __APPLE__ is not defined for WASM build sounds fine, as that is cross compilation and the target platform is indeed not apple. It is interesting that it builds correctly for me, as emscripten is using clang, which should not have <memory_resource> as well.

Anyway, this looks fine to me.

[codecov]

Codecov Report

Patch and project coverage have no change.

Comparison is base (59760b3) 90.36% compared to head (f37aaac) 90.36%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #505   +/-   ##
=======================================
  Coverage   90.36%   90.36%           
=======================================
  Files          35       35           
  Lines        4431     4431           
=======================================
  Hits         4004     4004           
  Misses        427      427           

Files Changed	Coverage Δ
src/polygon/src/polygon.cpp	89.81% <ø> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[pca006132]

I think the best practice right now is to avoid using px, and use things like em instead?
As px can behave weirdly on mobiles with different dpi.

[jirihon]

I think it is ok to use px. CSS pixel is not the same as physical pixel. See the docs of devicePixelRatio.

[pca006132]

Oh OK, I haven't done frontend development for years now. Will have a look at the actual result on PC and mobile later today.

[pca006132]

I am fine for the desktop UI. However, the mobile UI seems unreadable (the height of the editor is only a few pixels, and the buttons are not aligned). I did some modification to the css and html file and changed the mobile UI a bit, it now looks something like this (not great but I am not sure how to make it look better):

diff --git a/bindings/wasm/examples/editor.css b/bindings/wasm/examples/editor.css
index b188a39..7b3a1e0 100644
--- a/bindings/wasm/examples/editor.css
+++ b/bindings/wasm/examples/editor.css
@@ -130,7 +130,7 @@ model-viewer {
 
 .header .margin {
   font-size: 16px;
-  margin: 1em;
+  margin: 1em 0.5em;
 }
 
 .dropdown {
@@ -212,6 +212,15 @@ model-viewer {
   background-color: rgb(255, 177, 177);
 }
 
+#file-margin {
+  position: relative;
+  width: 250px;
+}
+
+#save {
+  width: 125px;
+}
+
 @media only screen and (max-width: 600px) {
   .container {
     flex-direction: column;
@@ -220,5 +229,31 @@ model-viewer {
 
   .col {
     width: 100%;
+    height: 50%;
+  }
+
+  #file-margin {
+    width: calc(100% - 32px);
   }
-}
\ No newline at end of file
+
+  p {
+    margin: .2em 1em;
+    text-align: center;
+  }
+
+  .header .margin {
+    margin: 0.2em 16px;
+  }
+
+  #button-container {
+    flex-direction: row;
+    margin-left: 8px;
+    margin-right: 8px;
+    width: calc(100% - 16px);
+  }
+
+  #button-container .margin {
+    width: calc(50% - 16px);
+    margin: 8px;
+  }
+}
diff --git a/bindings/wasm/examples/index.html b/bindings/wasm/examples/index.html
index 0c025d3..20464c8 100644
--- a/bindings/wasm/examples/index.html
+++ b/bindings/wasm/examples/index.html
@@ -40,22 +40,24 @@
   <div class="page">
     <div class="container header" style="background-color: #A288B3;">
       <p style="flex: 2;"><a target="_blank" href="https://github.com/elalish/manifold">Manifold</a>CAD </p>
-      <div class="margin" style="position: relative; width: 250px;">
+      <div class="margin" id="file-margin" >
         <button type="button" id="file" class="blue item"><b class="uparrow"></b>&nbsp;&nbsp;<span
             id="current">Intro</span></button>
         <div class="dropdown" id="fileDropdown">
           <button type="button" class="green item" id="new">New</button>
         </div>
       </div>
-      <button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
-      <div id="save" class="margin" style="position: relative; width: 125px;">
-        <div class="item">
-          <button type="button" id="glb" class="blue item">Save GLB</button>
-          <button type="button" class="icon"><b class="uparrow" style="right: 2px;"></b></button>
-        </div>
-        <div class="dropdown" id="saveDropdown">
+      <div class="container" id="button-container">
+        <button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
+        <div id="save" class="margin" style="position: relative; ">
           <div class="item">
-            <button type="button" id="threemf" class="blue item">Save 3MF</button>
+            <button type="button" id="glb" class="blue item">Save GLB</button>
+            <button type="button" class="icon"><b class="uparrow" style="right: 2px;"></b></button>
+          </div>
+          <div class="dropdown" id="saveDropdown">
+            <div class="item">
+              <button type="button" id="threemf" class="blue item">Save 3MF</button>
+            </div>
           </div>
         </div>
       </div>
@@ -84,4 +86,4 @@
 <script type="module" src="editor.js"></script>
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
 
-</html>
\ No newline at end of file
+</html>

[elalish]

That definitely looks much improved on mobile - I still don't know how anyone would actually use manifoldCAD on mobile, but at least they can if they really want to. Would you like to just add your commit to my PR?

[pca006132]

Sure. I don't expect people to actually use it on mobile either, but just in case they clicked on the url on the phone, they can view some code and run something.