LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Fixed playground styling issues

Browse source
This commit is contained in:
ポール ウェッブ 2019-02-07 15:17:30 -06:00
parent 241926c649
commit 2d0f550789
6 changed files with 70 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/components/client/playground-scripts.js
View file

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

2
app/components/head.js
View file

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

1
app/sass/_layout.scss
View file

@ -8,6 +8,7 @@ body {
html {
background-color: $lbry-white;
font-size: 1rem;
}
body {

119
app/sass/pages/_playground.scss
View file

@ -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
View file

@ -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
View file

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