Fixed playground styling issues
This commit is contained in:
ポール ウェッブ
parent
241926c649
commit
2d0f550789
6 changed files with 70 additions and 181 deletions
|
|
@ -199,8 +199,7 @@ function getMemeInfo() { // TODO: Error handling
|
||||||
|
|
||||||
function playgroundResponseForExample1(source) {
|
function playgroundResponseForExample1(source) {
|
||||||
return `
|
return `
|
||||||
<pre><code class="language-bash">
|
<pre><code class="language-bash"><span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
||||||
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
|
||||||
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "resolve", "params": { "uri": "${source}" }}'</span> <span class="token url">http://localhost:5279 </span>
|
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "resolve", "params": { "uri": "${source}" }}'</span> <span class="token url">http://localhost:5279 </span>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
|
|
@ -211,10 +210,9 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
||||||
|
|
||||||
function playgroundResponseForExample2(source) {
|
function playgroundResponseForExample2(source) {
|
||||||
return `
|
return `
|
||||||
<pre><code class="language-bash">
|
<pre><code class="language-bash"><span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
||||||
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
|
||||||
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "publish", "params": { "name": "${source.name}", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "${source.description}", "title": "${source.title}", "language": "${source.language}", "license": "${source.license}", "nsfw": ${source.nsfw} }}}'</span> <span class="token url">http://localhost:5279 </span>
|
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "publish", "params": { "name": "${source.name}", "file_path": "ABSOLUTE_PATH_TO_MEDIA_ON_YOUR_COMPUTER", "bid": "0.001", "metadata": { "description": "${source.description}", "title": "${source.title}", "language": "${source.language}", "license": "${source.license}", "nsfw": ${source.nsfw} }}}'</span> <span class="token url">http://localhost:5279 </span>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<div class="loader" id="temp-loader"></div>
|
<div class="loader" id="temp-loader"></div>
|
||||||
<div id="example2-result"></div>
|
<div id="example2-result"></div>
|
||||||
|
|
@ -225,10 +223,9 @@ function playgroundResponseForExample3(source) {
|
||||||
document.querySelector("[data-action='execute claim']").disabled = true;
|
document.querySelector("[data-action='execute claim']").disabled = true;
|
||||||
|
|
||||||
return `
|
return `
|
||||||
<pre><code class="language-bash">
|
<pre><code class="language-bash"><span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
||||||
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
|
||||||
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "claim_tip", "params": { "amount": "0.001", "claim_id": "${source}" }}'</span> <span class="token url">http://localhost:5279 </span>
|
curl --header <span class="token string">"Content-Type: application/json"</span> --data <span class="token string">'{ "method": "claim_tip", "params": { "amount": "0.001", "claim_id": "${source}" }}'</span> <span class="token url">http://localhost:5279 </span>
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<div class="loader" id="temp-loader"></div>
|
<div class="loader" id="temp-loader"></div>
|
||||||
<div id="example3-result"></div>
|
<div id="example3-result"></div>
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,8 @@ export default (state, emit) => {
|
||||||
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
|
<link rel="icon" href="/assets/favicon.svg" type="image/svg+xml"/>
|
||||||
<link rel="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
|
<link rel="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
|
||||||
<link rel="shortcut icon" href="/assets/favicon.ico"/>
|
<link rel="shortcut icon" href="/assets/favicon.ico"/>
|
||||||
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@master/distr/fira_code.css"/>
|
||||||
<link rel="stylesheet" href="/assets/bundle.css"/>
|
<link rel="stylesheet" href="/assets/bundle.css"/>
|
||||||
|
|
||||||
<script src="/assets/scripts/sockets.js"></script>
|
<script src="/assets/scripts/sockets.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,7 @@ body {
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: $lbry-white;
|
background-color: $lbry-white;
|
||||||
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
|
|
||||||
|
|
@ -222,124 +222,7 @@
|
||||||
.playground-content__meme__editor {
|
.playground-content__meme__editor {
|
||||||
width: 50%; min-height: 50vh;
|
width: 50%; min-height: 50vh;
|
||||||
float: right;
|
float: right;
|
||||||
|
font-size: 1rem;
|
||||||
h2 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
&.__metadata {
|
|
||||||
padding-top: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
&:not(:last-of-type) {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
color: $lbry-gray-2;
|
|
||||||
display: block;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.05rem;
|
|
||||||
margin-bottom: 0.025rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:not([type="checkbox"]):not([type="submit"]),
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
@media (min-width: 901px) {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
font-size: 1.05rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
&:not([type="checkbox"]):not([type="file"]):not([type="submit"]) {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
border-bottom: 2px solid;
|
|
||||||
padding-bottom: 0.15rem;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not([type="file"]):not([type="submit"]) {
|
|
||||||
&:not(:hover):not(:active) {
|
|
||||||
border-color: $lbry-black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
border-color: $lbry-teal-3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[type="checkbox"] {
|
|
||||||
width: 1.25rem; height: 1.25rem;
|
|
||||||
top: 0.35rem;
|
|
||||||
|
|
||||||
border: 2px solid;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
width: 100%; height: 100%;
|
|
||||||
|
|
||||||
content: "✓";
|
|
||||||
font-size: 1.3rem;
|
|
||||||
line-height: 1rem;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(:checked)::after {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:checked::after {
|
|
||||||
color: $lbry-teal-3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
width: 100%;
|
|
||||||
border-top: none;
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 2px solid;
|
|
||||||
border-left: none;
|
|
||||||
|
|
||||||
&:not(:hover):not(:active) {
|
|
||||||
border-color: $lbry-black;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
&:active {
|
|
||||||
border-color: $lbry-teal-3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
select {
|
|
||||||
background-image: url("/assets/media/svg/down.svg");
|
|
||||||
background-position: 99% center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 1rem;
|
|
||||||
padding-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
min-height: 100px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.playground-content__trends {
|
.playground-content__trends {
|
||||||
|
|
|
||||||
106
app/sockets.js
106
app/sockets.js
|
|
@ -245,66 +245,72 @@ function generateMemeCreator(socket) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form class="playground-content__meme__editor">
|
<form class="playground-content__meme__editor">
|
||||||
<h2>Image Text</h2>
|
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="meme-top-line">Top line</label>
|
<legend>Image Text</legend>
|
||||||
<input id="meme-top-line" name="meme-top-line" placeholder="${memePlaceholderData.topLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.topLine.value}" required/>
|
|
||||||
|
<fieldset-section>
|
||||||
|
<label for="meme-top-line">Top line</label>
|
||||||
|
<input id="meme-top-line" name="meme-top-line" placeholder="${memePlaceholderData.topLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.topLine.value}" required/>
|
||||||
|
</fieldset-section>
|
||||||
|
|
||||||
|
<fieldset-section>
|
||||||
|
<label for="meme-bottom-line">Bottom line</label>
|
||||||
|
<input id="meme-bottom-line" name="meme-bottom-line" placeholder="${memePlaceholderData.bottomLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.bottomLine.value}" required/>
|
||||||
|
</fieldset-section>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label for="meme-bottom-line">Bottom line</label>
|
<legend>Metadata</legend>
|
||||||
<input id="meme-bottom-line" name="meme-bottom-line" placeholder="${memePlaceholderData.bottomLine.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.bottomLine.value}" required/>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<h2 class="__metadata">Metadata</h2>
|
<fieldset-section>
|
||||||
|
<label for="meme-title">Title</label>
|
||||||
|
<input id="meme-title" name="meme-title" placeholder="${memePlaceholderData.title.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.title.value}" required/>
|
||||||
|
</fieldset-section>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset-section>
|
||||||
<label for="meme-title">Title</label>
|
<label for="meme-description">Description</label>
|
||||||
<input id="meme-title" name="meme-title" placeholder="${memePlaceholderData.title.placeholder}" spellcheck="false" type="text" value="${memePlaceholderData.title.value}" required/>
|
<textarea id="meme-description" name="meme-description" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" type="text" required>${memePlaceholderData.description.value}</textarea>
|
||||||
</fieldset>
|
</fieldset-section>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset-section>
|
||||||
<label for="meme-description">Description</label>
|
<label for="meme-language">Language</label>
|
||||||
<textarea id="meme-description" name="meme-description" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" type="text" required>${memePlaceholderData.description.value}</textarea>
|
<select id="meme-language" name="meme-language">
|
||||||
</fieldset>
|
<option value="ar">Arabic</option>
|
||||||
|
<option value="zh">Chinese (Mandarin)</option>
|
||||||
|
<option value="en">English</option>
|
||||||
|
<option value="fr">French</option>
|
||||||
|
<option value="de">German</option>
|
||||||
|
<option value="it">Italian</option>
|
||||||
|
<option value="jp">Japanese</option>
|
||||||
|
<option value="ru">Russian</option>
|
||||||
|
<option value="es">Spanish</option>
|
||||||
|
<option value="">Not specified</option>
|
||||||
|
</select>
|
||||||
|
</fieldset-section>
|
||||||
|
|
||||||
<fieldset>
|
<fieldset-section>
|
||||||
<label for="meme-language">Language</label>
|
<label for="meme-license">License</label>
|
||||||
<select id="meme-language" name="meme-language">
|
<select id="meme-license" name="meme-license" required>
|
||||||
<option value="ar">Arabic</option>
|
<option value="Public Domain">Public Domain</option>
|
||||||
<option value="zh">Chinese (Mandarin)</option>
|
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
||||||
<option value="en">English</option>
|
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
||||||
<option value="fr">French</option>
|
<option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
|
||||||
<option value="de">German</option>
|
<option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
|
||||||
<option value="it">Italian</option>
|
<option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
|
||||||
<option value="jp">Japanese</option>
|
<option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
|
||||||
<option value="ru">Russian</option>
|
<option value="None">None</option>
|
||||||
<option value="es">Spanish</option>
|
</select>
|
||||||
<option value="">Not specified</option>
|
</fieldset-section>
|
||||||
</select>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
<fieldset-section>
|
||||||
<label for="meme-license">License</label>
|
<checkbox-element>
|
||||||
<select id="meme-license" name="meme-license" required>
|
<input id="meme-nsfw-flag" name="nsfw" type="checkbox">
|
||||||
<option value="Public Domain">Public Domain</option>
|
<label for="meme-nsfw-flag">NSFW</label>
|
||||||
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
<checkbox-toggle/>
|
||||||
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
</checkbox-element>
|
||||||
<option value="Creative Commons Attribution-NoDerivatives 4.0 International">Creative Commons Attribution-NoDerivatives 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-NonCommercial 4.0 International">Creative Commons Attribution-NonCommercial 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</option>
|
|
||||||
<option value="Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International">Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</option>
|
|
||||||
<option value="None">None</option>
|
|
||||||
</select>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
<button data-action="upload image" class="button" type="button">Submit</button>
|
||||||
<label><input id="meme-nsfw-flag" name="nsfw" type="checkbox"/>NSFW</label>
|
</fieldset-section>
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<button data-action="upload image" class="button" type="button">Submit</button>
|
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
10
package.json
10
package.json
|
|
@ -11,7 +11,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/polyfill": "^7.2.5",
|
"@babel/polyfill": "^7.2.5",
|
||||||
"@inc/fastify-ws": "^1.1.0",
|
"@inc/fastify-ws": "^1.1.0",
|
||||||
"@octokit/rest": "^16.13.4",
|
"@octokit/rest": "^16.15.0",
|
||||||
"@slack/client": "^4.8.0",
|
"@slack/client": "^4.8.0",
|
||||||
"async": "^2.6.1",
|
"async": "^2.6.1",
|
||||||
"async-es": "^2.6.1",
|
"async-es": "^2.6.1",
|
||||||
|
|
@ -64,17 +64,17 @@
|
||||||
"@inc/eslint-config": "^1.1.2",
|
"@inc/eslint-config": "^1.1.2",
|
||||||
"@inc/sasslint-config": "^1.1.3",
|
"@inc/sasslint-config": "^1.1.3",
|
||||||
"@lbry/color": "^1.1.0",
|
"@lbry/color": "^1.1.0",
|
||||||
"@lbry/components": "^1.9.0",
|
"@lbry/components": "^2.0.1",
|
||||||
"eslint": "^5.12.1",
|
"eslint": "^5.13.0",
|
||||||
"husky": "^1.3.1",
|
"husky": "^1.3.1",
|
||||||
"nodemon": "^1.18.9",
|
"nodemon": "^1.18.9",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.5",
|
||||||
"pino-pretty": "^2.5.0",
|
"pino-pretty": "^2.5.0",
|
||||||
"sass": "^1.16.1",
|
"sass": "^1.17.0",
|
||||||
"sass-lint": "^1.12.1",
|
"sass-lint": "^1.12.1",
|
||||||
"snazzy": "^8.0.0",
|
"snazzy": "^8.0.0",
|
||||||
"standardx": "^3.0.1",
|
"standardx": "^3.0.1",
|
||||||
"updates": "^6.2.1"
|
"updates": "^7.0.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": "10.2.x"
|
"node": "10.2.x"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue