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) {
|
||||
return `
|
||||
<pre><code class="language-bash">
|
||||
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
||||
<pre><code class="language-bash"><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>
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -211,10 +210,9 @@ curl --header <span class="token string">"Content-Type: application/json"</span>
|
|||
|
||||
function playgroundResponseForExample2(source) {
|
||||
return `
|
||||
<pre><code class="language-bash">
|
||||
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
||||
<pre><code class="language-bash"><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>
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<div class="loader" id="temp-loader"></div>
|
||||
<div id="example2-result"></div>
|
||||
|
|
@ -225,10 +223,9 @@ function playgroundResponseForExample3(source) {
|
|||
document.querySelector("[data-action='execute claim']").disabled = true;
|
||||
|
||||
return `
|
||||
<pre><code class="language-bash">
|
||||
<span class="token comment"># With the LBRY app/daemon running locally, you can use this in your Terminal</span>
|
||||
<pre><code class="language-bash"><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>
|
||||
</code></pre>
|
||||
</code></pre>
|
||||
|
||||
<div class="loader" id="temp-loader"></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="mask-icon" href="/assets/favicon.svg" color="${config.meta.color}"/>
|
||||
<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"/>
|
||||
|
||||
<script src="/assets/scripts/sockets.js"></script>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ body {
|
|||
|
||||
html {
|
||||
background-color: $lbry-white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -222,124 +222,7 @@
|
|||
.playground-content__meme__editor {
|
||||
width: 50%; min-height: 50vh;
|
||||
float: right;
|
||||
|
||||
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;
|
||||
}
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.playground-content__trends {
|
||||
|
|
|
|||
106
app/sockets.js
106
app/sockets.js
|
|
@ -245,66 +245,72 @@ function generateMemeCreator(socket) {
|
|||
</div>
|
||||
|
||||
<form class="playground-content__meme__editor">
|
||||
<h2>Image Text</h2>
|
||||
|
||||
<fieldset>
|
||||
<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/>
|
||||
<legend>Image Text</legend>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<legend>Metadata</legend>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<fieldset-section>
|
||||
<label for="meme-description">Description</label>
|
||||
<textarea id="meme-description" name="meme-description" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" type="text" required>${memePlaceholderData.description.value}</textarea>
|
||||
</fieldset-section>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-description">Description</label>
|
||||
<textarea id="meme-description" name="meme-description" placeholder="${memePlaceholderData.description.placeholder}" spellcheck="false" type="text" required>${memePlaceholderData.description.value}</textarea>
|
||||
</fieldset>
|
||||
<fieldset-section>
|
||||
<label for="meme-language">Language</label>
|
||||
<select id="meme-language" name="meme-language">
|
||||
<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>
|
||||
<label for="meme-language">Language</label>
|
||||
<select id="meme-language" name="meme-language">
|
||||
<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>
|
||||
<fieldset-section>
|
||||
<label for="meme-license">License</label>
|
||||
<select id="meme-license" name="meme-license" required>
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
||||
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
||||
<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-section>
|
||||
|
||||
<fieldset>
|
||||
<label for="meme-license">License</label>
|
||||
<select id="meme-license" name="meme-license" required>
|
||||
<option value="Public Domain">Public Domain</option>
|
||||
<option value="Creative Commons Attribution 4.0 International">Creative Commons Attribution 4.0 International</option>
|
||||
<option value="Creative Commons Attribution-ShareAlike 4.0 International">Creative Commons Attribution-ShareAlike 4.0 International</option>
|
||||
<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-section>
|
||||
<checkbox-element>
|
||||
<input id="meme-nsfw-flag" name="nsfw" type="checkbox">
|
||||
<label for="meme-nsfw-flag">NSFW</label>
|
||||
<checkbox-toggle/>
|
||||
</checkbox-element>
|
||||
|
||||
<fieldset>
|
||||
<label><input id="meme-nsfw-flag" name="nsfw" type="checkbox"/>NSFW</label>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<button data-action="upload image" class="button" type="button">Submit</button>
|
||||
<button data-action="upload image" class="button" type="button">Submit</button>
|
||||
</fieldset-section>
|
||||
</fieldset>
|
||||
</form>
|
||||
`;
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -11,7 +11,7 @@
|
|||
"dependencies": {
|
||||
"@babel/polyfill": "^7.2.5",
|
||||
"@inc/fastify-ws": "^1.1.0",
|
||||
"@octokit/rest": "^16.13.4",
|
||||
"@octokit/rest": "^16.15.0",
|
||||
"@slack/client": "^4.8.0",
|
||||
"async": "^2.6.1",
|
||||
"async-es": "^2.6.1",
|
||||
|
|
@ -64,17 +64,17 @@
|
|||
"@inc/eslint-config": "^1.1.2",
|
||||
"@inc/sasslint-config": "^1.1.3",
|
||||
"@lbry/color": "^1.1.0",
|
||||
"@lbry/components": "^1.9.0",
|
||||
"eslint": "^5.12.1",
|
||||
"@lbry/components": "^2.0.1",
|
||||
"eslint": "^5.13.0",
|
||||
"husky": "^1.3.1",
|
||||
"nodemon": "^1.18.9",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"pino-pretty": "^2.5.0",
|
||||
"sass": "^1.16.1",
|
||||
"sass": "^1.17.0",
|
||||
"sass-lint": "^1.12.1",
|
||||
"snazzy": "^8.0.0",
|
||||
"standardx": "^3.0.1",
|
||||
"updates": "^6.2.1"
|
||||
"updates": "^7.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "10.2.x"
|
||||
|
|
|
|||
Loading…
Reference in a new issue