Responsive layout

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>`;
     }
 }
 

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>

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;
     }
 

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;

index.html

@@ -30,8 +30,7 @@
             You can start creating your first AR project right now.
         </p>
 
-        <img class="splashscreen" src="./assets/img/splashscreen.png" alt="Demo image home page"/>
-
+        <img draggable="false" class="splashscreen" src="./assets/img/splashscreen.png"/>
         <p class="lead">Pick your project type</p>
 
         <div>

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=""
@@ -49,7 +50,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>
@@ -113,7 +114,8 @@
                 </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>
     </div>

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;
+}
+

pages/main/main.css

@@ -2,27 +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-bottom: 0;
-}
-
-.content .title {
-    margin-top: 2em;
+  padding: 1.5em 1.875em;
+  width: 75ch;
+  max-width: 100%;
 }
 
 .splashscreen {
-  top: 0%;
-  position: absolute;
-  right: 8vw;
+  top: 10%;
+  position: fixed;
+  right: 10vw;
+  width: 40vw;
   height: 90%;
+  object-position: top center;
+  object-fit: contain;
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
 }
 
 .main-content {
@@ -54,24 +55,22 @@
 }
 
 .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;
 }
 
 /* Create a custom radio button */
 .checkmark {
   position: absolute;
-  top: 0;
+  top: 0.125em;
   left: 0;
   height: 1.3em;
   width: 1.3em;
@@ -114,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;
   }

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
@@ -43,7 +43,7 @@
     <page-header assetsUrl="../../assets"></page-header>
     <img class="default-marker-hidden" style="position: absolute; top: 0; right: -1000px;" src="../../assets/default-marker-no-border.png"/>
     <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>
@@ -71,9 +71,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" alt="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">
@@ -110,12 +112,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>
     <feedback-button></feedback-button>

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;

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">

pages/publish/index.html

@@ -28,7 +28,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">