Skip to content

Commit

Permalink
chore: changed the layout styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Conrad Chan committed Jun 4, 2021
1 parent 4597cab commit 0d02f3f
Showing 1 changed file with 48 additions and 27 deletions.
75 changes: 48 additions & 27 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,18 @@
<style>
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
font-family: sans-serif;
}

.setters-container {
display: flex;
font-size: 75%;
flex-direction: column;
height: 10vh;
justify-content: space-around;
padding: 20px;
overflow: auto;
font-size: 75%;
}

.setters-container button,
Expand All @@ -28,6 +29,7 @@
}

.container {
flex: 1 1 auto;
text-align: center;
}

Expand All @@ -36,43 +38,62 @@
}

.preview-container {
height: 90vh;
width: 100vw;
height: 90vh;
}

.primary-setters,
.secondary-setters {
display: flex;
}

.secondary-setters {
margin-top: 10px;
}

@media only screen and (max-width: 375px) {
/* Hide the collections fields when the viewport is small so the E2E tests don't fail */
#collection {
display: none;
.setters-container {
padding: 0;
}

.input-display {
max-width: 150px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
</style>
</head>

<body>
<div class="setters-container">
<div class="container" id="token">
<div>Token: <span id="token-display"></span></div>
<input id="token-set" data-testid="token" placeholder="Enter token" />
<button onClick="setProperty('token')" data-testid="token-set">Set new token</button>
</div>

<div class="container" id="file">
<div>File ID: <span id="fileid-display"></span></div>
<input id="fileid-set" placeholder="Enter file ID" data-testid="fileid" />
<button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
</div>

<div class="container" id="collection">
<div>Collection: <span id="collection-display"></span></div>
<input id="collection-set" data-testid="collection" placeholder="Enter list of file ids" />
<button onClick="setProperty('collection')" data-testid="collection-set">Set new collection</button>
<button onClick="clearProperty('collection')" data-testid="collection-clear">Clear</button>
<div>Enter 2+ comma separated list of file ids</div>
<div class="primary-setters">
<div class="container" id="token">
<div class="input-display">Token: <span id="token-display"></span></div>
<input id="token-set" data-testid="token" placeholder="Enter token" />
<button onClick="setProperty('token')" data-testid="token-set">Set new token</button>
</div>

<div class="container" id="file">
<div class="input-display">File ID: <span id="fileid-display"></span></div>
<input id="fileid-set" placeholder="Enter file ID" data-testid="fileid" />
<button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
</div>

<div class="container" id="load">
<button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
</div>
</div>

<div class="container" id="load">
<button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
<div class="secondary-setters">
<div class="container" id="collection">
<div class="input-display">Collection: <span id="collection-display"></span></div>
<input id="collection-set" data-testid="collection" placeholder="Enter list of file ids" />
<button onClick="setProperty('collection')" data-testid="collection-set">Set new collection</button>
<button onClick="clearProperty('collection')" data-testid="collection-clear">Clear</button>
<div>Enter 2+ comma separated list of file ids</div>
</div>
</div>
</div>

Expand Down

0 comments on commit 0d02f3f

Please sign in to comment.