From 1a343c0e4b6496875438fab6698ab1eed299a57b Mon Sep 17 00:00:00 2001
From: Edoardo Cavazza <edoardo.cavazza@chialab.it>
Date: Sun, 14 Jun 2020 10:50:41 +0200
Subject: [PATCH 1/5] refactor: responsive layout

---
 components/back-anchor/back-anchor.js | 17 ++-----
 components/file-holder/file-holder.js | 15 ++++--
 components/footer/footer.js           |  4 +-
 components/map/map-elements.js        | 13 +++--
 index.html                            |  2 +-
 pages/location/index.html             |  4 +-
 pages/main/main.css                   | 34 +++++++------
 pages/marker/index.html               | 14 +++---
 pages/marker/marker.css               | 15 ++++--
 pages/publish-confirm/index.html      |  2 +-
 pages/publish/index.html              |  2 +-
 style.css                             | 72 +++++++++++++++++++--------
 12 files changed, 118 insertions(+), 76 deletions(-)

diff --git a/components/back-anchor/back-anchor.js b/components/back-anchor/back-anchor.js
index 789ad5d..9f843dc 100644
--- a/components/back-anchor/back-anchor.js
+++ b/components/back-anchor/back-anchor.js
@@ -1,20 +1,11 @@
-const template = `
-    <a href="javascript:history.back()">
-        <img class="img-back" src="studio/assets/icons/arrow-back.svg" alt="go back" />
-    </a>`;
-
 class BackAnchor extends HTMLElement {
-    constructor() {
-        super();
-
-        var shadow = this.attachShadow({ mode: 'open' });
-        shadow.innerHTML = template;
-    }
-
     connectedCallback() {
         this.classList.add('primary-button');
         this.classList.add('back-anchor');
-        this.shadowRoot.querySelector('.img-back').src = `${this.getAttribute('assetsUrl')}/icons/arrow-back.svg`;
+        var shadow = this.attachShadow({ mode: 'open' });
+        shadow.innerHTML = `<a href="${this.getAttribute('href')}">
+            <img class="img-back" src="${this.getAttribute('assetsUrl')}/icons/arrow-back.svg" alt="go back" />
+        </a>`;
     }
 }
 
diff --git a/components/file-holder/file-holder.js b/components/file-holder/file-holder.js
index 9ea5d4e..b40101c 100644
--- a/components/file-holder/file-holder.js
+++ b/components/file-holder/file-holder.js
@@ -1,11 +1,20 @@
 const fileHolderTemplate = `
   <style>
+    .image-placeholder-wrapper {
+      position: relative;
+      width: 100%;
+      padding-top: 100%;
+    }
+
     .image-placeholder {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 23.75em;
-      width: 23.75em;
       background: var(--passive-color);
       border: 1px solid var(--passive-color-dark);
       box-sizing: border-box;
@@ -20,7 +29,7 @@ const fileHolderTemplate = `
     }
   </style>
 
-  <div>
+  <div class="image-placeholder-wrapper">
     <div class="image-placeholder">
       Click to upload
     </div>
diff --git a/components/footer/footer.js b/components/footer/footer.js
index cc3a4a6..66f6df4 100644
--- a/components/footer/footer.js
+++ b/components/footer/footer.js
@@ -1,7 +1,7 @@
 const FooterContent = `
   <style>
     #footer{
-      padding: 2em 12vw;
+      padding: 2em 1.875em;
     }
 
     .lead {
@@ -14,7 +14,7 @@ const FooterContent = `
 
     .buttons > button,
     .buttons > a {
-        margin-right: 3.125em;
+        margin-right: 2em;
         cursor: pointer;
     }
 
diff --git a/components/map/map-elements.js b/components/map/map-elements.js
index 955c541..540180d 100644
--- a/components/map/map-elements.js
+++ b/components/map/map-elements.js
@@ -7,10 +7,16 @@ crossorigin=""/>`;
 // styles to hold classnames for the main map and additional maps
 const map_styles = `
 <style>
-    .map-pick-location{
+    :host {
+        display: block;
+        width: 100%;
+    }
+
+    .map-pick-location {
+        width: 100%;
         height: 380px;
-        width: 800px;
     }
+
     .map-foo-bar {
         height: 100px;
         width: 200px;
@@ -31,8 +37,7 @@ const map_styles = `
         padding-top: 0.3em;
     }
     .location-set-display {
-        visibility: hidden;
-        padding-top: 0;
+        display: none;
     }
     .use-my-location-button{
         background-color: white;
diff --git a/index.html b/index.html
index 61de2cf..9868888 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
             You can start creating your first AR project right now.
         </p>
 
-        <img class="splashscreen" src="./assets/img/splashscreen.png"/>
+        <img draggable="false" class="splashscreen" src="./assets/img/splashscreen.png"/>
 
         <p class="lead">Pick your project type</p>
 
diff --git a/pages/location/index.html b/pages/location/index.html
index 3a4b064..e374894 100644
--- a/pages/location/index.html
+++ b/pages/location/index.html
@@ -48,7 +48,7 @@
     <page-header assetsUrl="../../assets"></page-header>
 
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/" assetsUrl="../../assets"></back-anchor>
         <div class="pages-content-container">
             <div class="pages-content-element">
                 <p class="title">Location-based</p>
@@ -107,7 +107,7 @@
                 </label>
                 <p id="content-error" class="error"></p>
             </div>
-            <div id="content-preview" target="content-file">
+            <div id="content-preview" class="pages-content-element" target="content-file">
                 <file-holder></file-holder>
             </div>
         </div>
diff --git a/pages/main/main.css b/pages/main/main.css
index 1c8e677..d1e1274 100644
--- a/pages/main/main.css
+++ b/pages/main/main.css
@@ -2,22 +2,28 @@
 .background {
   display: flex;
   flex-direction: column;
+  flex: 1 auto;
   width: 70vw;
-  min-height: 100vh;
   background: var(--secondary-color);
 }
 
 .content {
-  margin-left: 1.5em;
-  padding: 1.5em;
-  padding-right: 20vw;
+  padding: 1.5em 1.875em;
+  width: 75ch;
+  max-width: 100%;
 }
 
 .splashscreen {
-  top: 12%;
-  position: absolute;
-  right: 8vw;
+  top: 10%;
+  position: fixed;
+  right: 9vw;
+  width: 40vw;
   height: 90%;
+  object-position: top center;
+  object-fit: cover;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
 }
 
 .main-content {
@@ -49,16 +55,14 @@
 }
 
 .radio-container .radio-title {
-    font-weight: bold;
-}
-
-.radio-container span {
-    margin-top: 1em;
+  font-weight: bold;
 }
 
 /* Hide the browser's default radio button */
 .radio-container input {
   position: absolute;
+  width: 0;
+  height: 0;
   opacity: 0;
   cursor: pointer;
 }
@@ -66,7 +70,7 @@
 /* Create a custom radio button */
 .checkmark {
   position: absolute;
-  top: 0;
+  top: 0.125em;
   left: 0;
   height: 1.3em;
   width: 1.3em;
@@ -109,13 +113,11 @@
 }
 
 /* Responsive */
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 1280px) {
   .background {
     width: 100%;
   }
-}
 
-@media screen and (max-width: 1280px) {
   .splashscreen {
     display: none;
   }
diff --git a/pages/marker/index.html b/pages/marker/index.html
index 955f038..5514b35 100644
--- a/pages/marker/index.html
+++ b/pages/marker/index.html
@@ -42,7 +42,7 @@
     <page-header assetsUrl="../../assets"></page-header>
 
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/" assetsUrl="../../assets"></back-anchor>
         <div class="pages-content-container">
             <div class="pages-content-element">
                 <p class="title">Marker-based</p>
@@ -70,9 +70,11 @@
                 </label>
                 <p id="marker-error" class="error"></p>
             </div>
-            <div id="marker-preview" target="marker-file">
-                <div class="marker">
-                    <img src="../../assets/default-marker.png"/>
+            <div id="marker-preview" class="pages-content-element" target="marker-file">
+                <div class="marker-wrapper">
+                    <div class="marker">
+                        <img src="../../assets/default-marker.png"/>
+                    </div>
                 </div>
                 <div class="download-marker" style="display: flex; justify-content: flex-end; padding: 1em 0;">
                     <div class="download-default-marker">
@@ -105,12 +107,10 @@
                 </label>
                 <p id="content-error" class="error"></p>
             </div>
-            <div id="content-preview" target="content-file">
+            <div id="content-preview" class="pages-content-element" target="content-file">
                 <file-holder></file-holder>
             </div>
         </div>
-
-        <hr>
     </div>
     <page-footer></page-footer>
 </body>
diff --git a/pages/marker/marker.css b/pages/marker/marker.css
index b9e1f78..6e6ce7e 100644
--- a/pages/marker/marker.css
+++ b/pages/marker/marker.css
@@ -1,16 +1,23 @@
 #marker-preview {
     display: flex;
     flex-direction: column;
-    padding: 1em;
+}
+
+.marker-wrapper {
+    position: relative;
+    width: 100%;
+    padding-top: 100%;
 }
 
 .marker {
-    margin: 0 auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 23.75em;
-    width: 23.75em;
     background: var(--passive-color);
     border: 1px solid var(--passive-color-dark);
     box-sizing: border-box;
diff --git a/pages/publish-confirm/index.html b/pages/publish-confirm/index.html
index 179dd86..9c23e29 100644
--- a/pages/publish-confirm/index.html
+++ b/pages/publish-confirm/index.html
@@ -26,7 +26,7 @@
     <page-header assetsUrl="../../assets"></page-header>
 
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/publish/index.html" assetsUrl="../../assets"></back-anchor>
 
         <div class="pages-content-container">
             <div class="pages-content-element">
diff --git a/pages/publish/index.html b/pages/publish/index.html
index bd72a82..8747115 100644
--- a/pages/publish/index.html
+++ b/pages/publish/index.html
@@ -26,7 +26,7 @@
     <page-header assetsUrl="../../assets"></page-header>
 
     <div class="pages-content">
-        <back-anchor assetsUrl="../../assets"></back-anchor>
+        <back-anchor href="/" assetsUrl="../../assets"></back-anchor>
 
         <div class="pages-content-container">
             <div class="pages-content-element">
diff --git a/style.css b/style.css
index 0ebb6d6..b0d8d55 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,20 @@
 @import url("https://fonts.googleapis.com/css?family=Chakra+Petch&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
 
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+* {
+  box-sizing: border-box;
+}
+
 /* Color Variables */
 :root {
   --primary-color: #fff700;
@@ -130,35 +144,42 @@ hr {
 
 page-header {
   display: flex;
+  flex: none;
   align-items: center;
-  position: fixed;
+  position: sticky;
+  top: 0;
   width: 100%;
   background: var(--passive-color);
   z-index: var(--max-z-index);
 }
 
 page-footer {
-  position: absolute;
   background: var(--secondary-color);
   width: 100%;
 }
 
 .pages-content {
   font-family: Source Sans Pro;
-  padding: 4em 12vw;
+  padding: 1.875em;
 }
 
 .pages-content-container {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 2em;
+  width: 110ch;
+  max-width: 100%;
+}
+
+.pages-content-container + .pages-content-container{
+  margin-top: 2em;
 }
 
 .pages-content-element {
-  width: 50%;
-  padding: 1em;
-  max-width: 30em;
-  margin-right: 1em;
+  flex: 1;
+}
+
+.pages-content-element + * {
+  margin-left: 2em;
 }
 
 /* TODO: move this to location.css */
@@ -173,28 +194,20 @@ page-footer {
 
 /* TODO: resolve duplicate conflict. move this to the back-anchor component. */
 .back-anchor {
-  padding: 1em 0em;
   height: 3rem;
+  padding: 1em;
+  font-size: 1em;
 }
 .coordinates-input-wrapper {
   margin-bottom: 1rem;
 }
 
-.back-anchor {
-  padding: 1em;
-  font-size: 1em;
-}
-
 /* TODO: move .coordinates-input-container to location.css */
 .coordinates-input-container {
   display: flex;
   margin-bottom: 1em;
 }
 
-.coordinates-input-container .input-number-tags {
-    padding-left: 0;
-}
-
 .add-location-container {
     width: fit-content;
     cursor: pointer;
@@ -208,6 +221,11 @@ page-footer {
   text-align: justify;
 }
 
+.coordinates-input-container .input-number-tags {
+  padding-top: 2.5rem;
+  padding-left: 0;
+}
+
 .delete-coordinates-container > svg {
   margin-top: 2.5rem;
 }
@@ -253,21 +271,26 @@ input:focus {
 #content-preview {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .download-default-marker {
   display: flex;
-  vertical-align: middle;
-  font-style: italic;
+  align-items: center;
   font-weight: bold;
   font-size: 18px;
+  line-height: 1;
+}
+
+.download-default-marker svg {
+  display: block;
+  margin-right: 0.5em;
 }
 
 .beta {
   font-family: Source Sans Pro;
-  margin-top: 5em;
   background-color: #fff700;
-  padding: 1em;
+  padding: 1em 1.875em;
 }
 
 .repo-url {
@@ -299,6 +322,11 @@ input:focus {
   .pages-content-container {
     flex-direction: column;
   }
+
+  .pages-content-container > * {
+    margin-left: 0;
+  }
+
   .pages-content-element {
     width: 100%;
   }

From 38affef9ecf4aa43ce825f16c778686c93d67816 Mon Sep 17 00:00:00 2001
From: Edoardo Cavazza <edoardo.cavazza@chialab.it>
Date: Sun, 14 Jun 2020 10:54:49 +0200
Subject: [PATCH 2/5] fix: splashscreen alignment

---
 pages/main/main.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pages/main/main.css b/pages/main/main.css
index d1e1274..f2c5547 100644
--- a/pages/main/main.css
+++ b/pages/main/main.css
@@ -16,11 +16,11 @@
 .splashscreen {
   top: 10%;
   position: fixed;
-  right: 9vw;
+  right: 10vw;
   width: 40vw;
   height: 90%;
   object-position: top center;
-  object-fit: cover;
+  object-fit: contain;
   user-select: none;
   -webkit-user-select: none;
   -webkit-user-drag: none;

From 191324fcd6f77076ac10ab2b439faf02425086d0 Mon Sep 17 00:00:00 2001
From: mingir2 <mingir2@illinois.edu>
Date: Sat, 20 Jun 2020 14:06:35 -0500
Subject: [PATCH 3/5] Create location.css and remove TODO comments

---
 pages/location/location.css | 46 ++++++++++++++++++++++++++++++++
 style.css                   | 52 +++----------------------------------
 2 files changed, 49 insertions(+), 49 deletions(-)
 create mode 100644 pages/location/location.css

diff --git a/pages/location/location.css b/pages/location/location.css
new file mode 100644
index 0000000..ce98baf
--- /dev/null
+++ b/pages/location/location.css
@@ -0,0 +1,46 @@
+.coordinates-input-container {
+    display: flex;
+    margin-bottom: 1em;
+}
+
+.coordinates-input-container > div {
+    padding: 1rem;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    text-align: justify;
+}
+
+.coordinates-input-container .input-number-tags {
+    padding-top: 2.5rem;
+    padding-left: 0;
+}
+
+.coordinates-input-wrapper {
+    margin-bottom: 1rem;
+}
+
+/* TODO: Remove duplicate */
+.add-location-container {
+    width: fit-content;
+    cursor: pointer;
+}
+
+/* TODO: Remove duplicate */
+.add-location-container {
+    display: flex;
+}
+
+.delete-coordinates-container > svg {
+margin-top: 2.5rem;
+}
+
+.remove-location-container {
+    display: flex;
+    cursor: pointer;
+}
+
+.add-location-icon {
+    margin-right: 0.4rem;
+}
+  
\ No newline at end of file
diff --git a/style.css b/style.css
index b0d8d55..0029d36 100644
--- a/style.css
+++ b/style.css
@@ -182,66 +182,20 @@ page-footer {
   margin-left: 2em;
 }
 
-/* TODO: move this to location.css */
 .pages-content-element .lead {
   margin-top: 0;
 }
 
-/* TODO: move this to location.css */
 .pages-content-container:first-of-type {
   margin-bottom: 2.25em;
 }
 
-/* TODO: resolve duplicate conflict. move this to the back-anchor component. */
+/* TODO: move this to the back-anchor component. */
 .back-anchor {
   height: 3rem;
   padding: 1em;
   font-size: 1em;
 }
-.coordinates-input-wrapper {
-  margin-bottom: 1rem;
-}
-
-/* TODO: move .coordinates-input-container to location.css */
-.coordinates-input-container {
-  display: flex;
-  margin-bottom: 1em;
-}
-
-.add-location-container {
-    width: fit-content;
-    cursor: pointer;
-}
-
-.coordinates-input-container > div {
-  padding: 1rem;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  text-align: justify;
-}
-
-.coordinates-input-container .input-number-tags {
-  padding-top: 2.5rem;
-  padding-left: 0;
-}
-
-.delete-coordinates-container > svg {
-  margin-top: 2.5rem;
-}
-
-.remove-location-container {
-    display: flex;
-    cursor: pointer;
-}
-
-.add-location-container {
-  display: flex;
-}
-
-.add-location-icon {
-  margin-right: 0.4rem;
-}
 
 .input-container label {
   font-family: Source Sans Pro;
@@ -249,8 +203,8 @@ page-footer {
 }
 
 .map-buttons-container {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .text-input {

From 1e87eee5933318e7bce0c7bc272db7ae6c7c3b98 Mon Sep 17 00:00:00 2001
From: mingir2 <mingir2@illinois.edu>
Date: Sat, 20 Jun 2020 14:06:59 -0500
Subject: [PATCH 4/5] Update stylesheet path

---
 pages/location/index.html | 1 +
 pages/marker/index.html   | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/location/index.html b/pages/location/index.html
index e374894..7db1423 100644
--- a/pages/location/index.html
+++ b/pages/location/index.html
@@ -9,6 +9,7 @@
 
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="../../style.css" />
+    <link rel="stylesheet" href="./location.css" />
 
     <!-- import the leaflet css and script -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" crossorigin=""
diff --git a/pages/marker/index.html b/pages/marker/index.html
index 5514b35..4c7331f 100644
--- a/pages/marker/index.html
+++ b/pages/marker/index.html
@@ -9,7 +9,7 @@
 
     <!-- import the webpage's stylesheet -->
     <link rel="stylesheet" href="../../style.css" />
-    <link rel="stylesheet" href="../../pages/marker/marker.css" />
+    <link rel="stylesheet" href="./marker.css" />
 
     <!-- import studio-backend api -->
     <script

From 1b51660dc4a36322e0d7444b05840d1f2bf6f441 Mon Sep 17 00:00:00 2001
From: mingir2 <mingir2@illinois.edu>
Date: Sat, 20 Jun 2020 14:09:12 -0500
Subject: [PATCH 5/5] Merge body and update wildcard

---
 style.css | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/style.css b/style.css
index 0029d36..6ddd990 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,7 @@
 @import url("https://fonts.googleapis.com/css?family=Chakra+Petch&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
 
+/* HTML & body */
 html, body {
   width: 100%;
   height: 100%;
@@ -10,9 +11,10 @@ html, body {
 body {
   display: flex;
   flex-direction: column;
+  margin: 0;
 }
 
-* {
+body * {
   box-sizing: border-box;
 }
 
@@ -132,11 +134,6 @@ body {
   cursor: pointer;
 }
 
-/* body */
-body {
-  margin: 0;
-}
-
 hr {
   margin: 2.25em 0.625em;
   border: 1px solid var(--passive-color);