Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Responsive layout #70

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Responsive layout #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1a343c0
refactor: responsive layout
edoardocavazza Jun 14, 2020
38affef
fix: splashscreen alignment
edoardocavazza Jun 14, 2020
c92ffee
Merge branch 'master' into responsive
nicolocarpignoli Jun 15, 2020
191324f
Create location.css and remove TODO comments
mingiryu Jun 20, 2020
1e87eee
Update stylesheet path
mingiryu Jun 20, 2020
1b51660
Merge body and update wildcard
mingiryu Jun 20, 2020
b372de9
Merge branch 'master' into responsive
thauska Jul 2, 2020
ae219b1
Merge branch 'master' into responsive
thauska Jul 7, 2020
7f3dc52
Merge branch 'master' into responsive
thauska Apr 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 4 additions & 13 deletions components/back-anchor/back-anchor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>`;
}
}

Expand Down
15 changes: 12 additions & 3 deletions components/file-holder/file-holder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -20,7 +29,7 @@ const fileHolderTemplate = `
}
</style>

<div>
<div class="image-placeholder-wrapper">
<div class="image-placeholder">
Click to upload
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/footer/footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const FooterContent = `
<style>
#footer{
padding: 2em 12vw;
padding: 2em 1.875em;
}

.lead {
Expand All @@ -14,7 +14,7 @@ const FooterContent = `

.buttons > button,
.buttons > a {
margin-right: 3.125em;
margin-right: 2em;
cursor: pointer;
}

Expand Down
13 changes: 9 additions & 4 deletions components/map/map-elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"/>
mingiryu marked this conversation as resolved.
Show resolved Hide resolved
<p class="lead">Pick your project type</p>

<div>
Expand Down
6 changes: 4 additions & 2 deletions pages/location/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/dist/leaflet.css" crossorigin=""
Expand Down Expand Up @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The works for local dev, but unfortunately, it doesn't work for the prod. The reason is because the root URL on prod is https://github.com/AR-js-org/studio

<div class="pages-content-container">
<div class="pages-content-element">
<p class="title">Location-based</p>
Expand Down Expand Up @@ -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>
Expand Down
46 changes: 46 additions & 0 deletions pages/location/location.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

39 changes: 18 additions & 21 deletions pages/main/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
16 changes: 8 additions & 8 deletions pages/marker/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
15 changes: 11 additions & 4 deletions pages/marker/marker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
2 changes: 1 addition & 1 deletion pages/publish-confirm/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion pages/publish/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading