First layout prototype
This commit is contained in:
parent
61f0598093
commit
9eb6a6f2a5
9 changed files with 260 additions and 160 deletions
|
|
@ -15,10 +15,7 @@ func main() {
|
|||
}))
|
||||
r.GET("/ping", func(c *gin.Context) {
|
||||
c.JSON(200, gin.H{
|
||||
"userId": 1,
|
||||
"id": 1,
|
||||
"title": "delectus aut autem",
|
||||
"completed": false,
|
||||
"message": "pong",
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,14 @@ var app = (function () {
|
|||
function safe_not_equal(a, b) {
|
||||
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
|
||||
}
|
||||
let src_url_equal_anchor;
|
||||
function src_url_equal(element_src, url) {
|
||||
if (!src_url_equal_anchor) {
|
||||
src_url_equal_anchor = document.createElement('a');
|
||||
}
|
||||
src_url_equal_anchor.href = url;
|
||||
return element_src === src_url_equal_anchor.href;
|
||||
}
|
||||
function is_empty(obj) {
|
||||
return Object.keys(obj).length === 0;
|
||||
}
|
||||
|
|
@ -51,9 +59,11 @@ var app = (function () {
|
|||
function empty() {
|
||||
return text('');
|
||||
}
|
||||
function listen(node, event, handler, options) {
|
||||
node.addEventListener(event, handler, options);
|
||||
return () => node.removeEventListener(event, handler, options);
|
||||
function attr(node, attribute, value) {
|
||||
if (value == null)
|
||||
node.removeAttribute(attribute);
|
||||
else if (node.getAttribute(attribute) !== value)
|
||||
node.setAttribute(attribute, value);
|
||||
}
|
||||
function children(element) {
|
||||
return Array.from(element.childNodes);
|
||||
|
|
@ -265,6 +275,9 @@ var app = (function () {
|
|||
: typeof globalThis !== 'undefined'
|
||||
? globalThis
|
||||
: global);
|
||||
function create_component(block) {
|
||||
block && block.c();
|
||||
}
|
||||
function mount_component(component, target, anchor, customElement) {
|
||||
const { fragment, on_mount, on_destroy, after_update } = component.$$;
|
||||
fragment && fragment.m(target, anchor);
|
||||
|
|
@ -406,18 +419,12 @@ var app = (function () {
|
|||
dispatch_dev('SvelteDOMRemove', { node });
|
||||
detach(node);
|
||||
}
|
||||
function listen_dev(node, event, handler, options, has_prevent_default, has_stop_propagation) {
|
||||
const modifiers = options === true ? ['capture'] : options ? Array.from(Object.keys(options)) : [];
|
||||
if (has_prevent_default)
|
||||
modifiers.push('preventDefault');
|
||||
if (has_stop_propagation)
|
||||
modifiers.push('stopPropagation');
|
||||
dispatch_dev('SvelteDOMAddEventListener', { node, event, handler, modifiers });
|
||||
const dispose = listen(node, event, handler, options);
|
||||
return () => {
|
||||
dispatch_dev('SvelteDOMRemoveEventListener', { node, event, handler, modifiers });
|
||||
dispose();
|
||||
};
|
||||
function attr_dev(node, attribute, value) {
|
||||
attr(node, attribute, value);
|
||||
if (value == null)
|
||||
dispatch_dev('SvelteDOMRemoveAttribute', { node, attribute });
|
||||
else
|
||||
dispatch_dev('SvelteDOMSetAttribute', { node, attribute, value });
|
||||
}
|
||||
function set_data_dev(text, data) {
|
||||
data = '' + data;
|
||||
|
|
@ -453,12 +460,12 @@ var app = (function () {
|
|||
$inject_state() { }
|
||||
}
|
||||
|
||||
/* src/App.svelte generated by Svelte v3.42.4 */
|
||||
/* src/Inner.svelte generated by Svelte v3.42.4 */
|
||||
|
||||
const { Error: Error_1, console: console_1 } = globals;
|
||||
const file = "src/App.svelte";
|
||||
const file$1 = "src/Inner.svelte";
|
||||
|
||||
// (30:0) {:catch error}
|
||||
// (31:0) {:catch error}
|
||||
function create_catch_block(ctx) {
|
||||
let p;
|
||||
let t_value = /*error*/ ctx[3].message + "";
|
||||
|
|
@ -469,7 +476,7 @@ var app = (function () {
|
|||
p = element("p");
|
||||
t = text(t_value);
|
||||
set_style(p, "color", "red");
|
||||
add_location(p, file, 30, 1, 564);
|
||||
add_location(p, file$1, 31, 1, 698);
|
||||
},
|
||||
m: function mount(target, anchor) {
|
||||
insert_dev(target, p, anchor);
|
||||
|
|
@ -487,26 +494,26 @@ var app = (function () {
|
|||
block,
|
||||
id: create_catch_block.name,
|
||||
type: "catch",
|
||||
source: "(30:0) {:catch error}",
|
||||
source: "(31:0) {:catch error}",
|
||||
ctx
|
||||
});
|
||||
|
||||
return block;
|
||||
}
|
||||
|
||||
// (28:0) {:then data}
|
||||
// (29:0) {:then data}
|
||||
function create_then_block(ctx) {
|
||||
let p;
|
||||
let t0;
|
||||
let t1_value = /*data*/ ctx[2].title + "";
|
||||
let t1_value = /*data*/ ctx[2].message + "";
|
||||
let t1;
|
||||
|
||||
const block = {
|
||||
c: function create() {
|
||||
p = element("p");
|
||||
t0 = text("The number is ");
|
||||
t0 = text("Message from the server is ");
|
||||
t1 = text(t1_value);
|
||||
add_location(p, file, 28, 1, 514);
|
||||
add_location(p, file$1, 29, 1, 633);
|
||||
},
|
||||
m: function mount(target, anchor) {
|
||||
insert_dev(target, p, anchor);
|
||||
|
|
@ -514,7 +521,7 @@ var app = (function () {
|
|||
append_dev(p, t1);
|
||||
},
|
||||
p: function update(ctx, dirty) {
|
||||
if (dirty & /*promise*/ 1 && t1_value !== (t1_value = /*data*/ ctx[2].title + "")) set_data_dev(t1, t1_value);
|
||||
if (dirty & /*promise*/ 1 && t1_value !== (t1_value = /*data*/ ctx[2].message + "")) set_data_dev(t1, t1_value);
|
||||
},
|
||||
d: function destroy(detaching) {
|
||||
if (detaching) detach_dev(p);
|
||||
|
|
@ -525,14 +532,14 @@ var app = (function () {
|
|||
block,
|
||||
id: create_then_block.name,
|
||||
type: "then",
|
||||
source: "(28:0) {:then data}",
|
||||
source: "(29:0) {:then data}",
|
||||
ctx
|
||||
});
|
||||
|
||||
return block;
|
||||
}
|
||||
|
||||
// (26:16) <p>...waiting</p> {:then data}
|
||||
// (27:16) <p>...waiting</p> {:then data}
|
||||
function create_pending_block(ctx) {
|
||||
let p;
|
||||
|
||||
|
|
@ -540,7 +547,7 @@ var app = (function () {
|
|||
c: function create() {
|
||||
p = element("p");
|
||||
p.textContent = "...waiting";
|
||||
add_location(p, file, 26, 1, 482);
|
||||
add_location(p, file$1, 27, 1, 601);
|
||||
},
|
||||
m: function mount(target, anchor) {
|
||||
insert_dev(target, p, anchor);
|
||||
|
|
@ -555,20 +562,22 @@ var app = (function () {
|
|||
block,
|
||||
id: create_pending_block.name,
|
||||
type: "pending",
|
||||
source: "(26:16) <p>...waiting</p> {:then data}",
|
||||
source: "(27:16) <p>...waiting</p> {:then data}",
|
||||
ctx
|
||||
});
|
||||
|
||||
return block;
|
||||
}
|
||||
|
||||
function create_fragment(ctx) {
|
||||
function create_fragment$1(ctx) {
|
||||
let form;
|
||||
let div;
|
||||
let input;
|
||||
let t0;
|
||||
let button;
|
||||
let t1;
|
||||
let t2;
|
||||
let await_block_anchor;
|
||||
let promise_1;
|
||||
let mounted;
|
||||
let dispose;
|
||||
|
||||
let info = {
|
||||
ctx,
|
||||
|
|
@ -586,28 +595,41 @@ var app = (function () {
|
|||
|
||||
const block = {
|
||||
c: function create() {
|
||||
form = element("form");
|
||||
div = element("div");
|
||||
input = element("input");
|
||||
t0 = space();
|
||||
button = element("button");
|
||||
button.textContent = "generate random number";
|
||||
t1 = space();
|
||||
button.textContent = "Download";
|
||||
t2 = space();
|
||||
await_block_anchor = empty();
|
||||
info.block.c();
|
||||
add_location(button, file, 21, 0, 397);
|
||||
attr_dev(input, "type", "url");
|
||||
attr_dev(input, "class", "form-control");
|
||||
attr_dev(input, "placeholder", "Insert a Youtube url here...");
|
||||
attr_dev(input, "aria-label", "URL for the Youtube video to download.");
|
||||
add_location(input, file$1, 21, 4, 356);
|
||||
attr_dev(button, "class", "btn btn-outline-primary");
|
||||
attr_dev(button, "type", "button");
|
||||
add_location(button, file$1, 22, 4, 495);
|
||||
attr_dev(div, "class", "input-group");
|
||||
add_location(div, file$1, 20, 2, 326);
|
||||
add_location(form, file$1, 19, 0, 317);
|
||||
},
|
||||
l: function claim(nodes) {
|
||||
throw new Error_1("options.hydrate only works if the component was compiled with the `hydratable: true` option");
|
||||
},
|
||||
m: function mount(target, anchor) {
|
||||
insert_dev(target, button, anchor);
|
||||
insert_dev(target, t1, anchor);
|
||||
insert_dev(target, form, anchor);
|
||||
append_dev(form, div);
|
||||
append_dev(div, input);
|
||||
append_dev(div, t0);
|
||||
append_dev(div, button);
|
||||
insert_dev(target, t2, anchor);
|
||||
insert_dev(target, await_block_anchor, anchor);
|
||||
info.block.m(target, info.anchor = anchor);
|
||||
info.mount = () => await_block_anchor.parentNode;
|
||||
info.anchor = await_block_anchor;
|
||||
|
||||
if (!mounted) {
|
||||
dispose = listen_dev(button, "click", /*handleClick*/ ctx[1], false, false, false);
|
||||
mounted = true;
|
||||
}
|
||||
},
|
||||
p: function update(new_ctx, [dirty]) {
|
||||
ctx = new_ctx;
|
||||
|
|
@ -620,14 +642,133 @@ var app = (function () {
|
|||
i: noop,
|
||||
o: noop,
|
||||
d: function destroy(detaching) {
|
||||
if (detaching) detach_dev(button);
|
||||
if (detaching) detach_dev(t1);
|
||||
if (detaching) detach_dev(form);
|
||||
if (detaching) detach_dev(t2);
|
||||
if (detaching) detach_dev(await_block_anchor);
|
||||
info.block.d(detaching);
|
||||
info.token = null;
|
||||
info = null;
|
||||
mounted = false;
|
||||
dispose();
|
||||
}
|
||||
};
|
||||
|
||||
dispatch_dev("SvelteRegisterBlock", {
|
||||
block,
|
||||
id: create_fragment$1.name,
|
||||
type: "component",
|
||||
source: "",
|
||||
ctx
|
||||
});
|
||||
|
||||
return block;
|
||||
}
|
||||
|
||||
async function ping() {
|
||||
const res = await fetch(`http://localhost:8080/ping`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
return data;
|
||||
} else {
|
||||
console.log(res);
|
||||
throw new Error(data);
|
||||
}
|
||||
}
|
||||
|
||||
function instance$1($$self, $$props, $$invalidate) {
|
||||
let { $$slots: slots = {}, $$scope } = $$props;
|
||||
validate_slots('Inner', slots, []);
|
||||
let promise = ping();
|
||||
|
||||
function handleClick() {
|
||||
$$invalidate(0, promise = ping());
|
||||
}
|
||||
|
||||
const writable_props = [];
|
||||
|
||||
Object.keys($$props).forEach(key => {
|
||||
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<Inner> was created with unknown prop '${key}'`);
|
||||
});
|
||||
|
||||
$$self.$capture_state = () => ({ ping, promise, handleClick });
|
||||
|
||||
$$self.$inject_state = $$props => {
|
||||
if ('promise' in $$props) $$invalidate(0, promise = $$props.promise);
|
||||
};
|
||||
|
||||
if ($$props && "$$inject" in $$props) {
|
||||
$$self.$inject_state($$props.$$inject);
|
||||
}
|
||||
|
||||
return [promise];
|
||||
}
|
||||
|
||||
class Inner extends SvelteComponentDev {
|
||||
constructor(options) {
|
||||
super(options);
|
||||
init(this, options, instance$1, create_fragment$1, safe_not_equal, {});
|
||||
|
||||
dispatch_dev("SvelteRegisterComponent", {
|
||||
component: this,
|
||||
tagName: "Inner",
|
||||
options,
|
||||
id: create_fragment$1.name
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* src/App.svelte generated by Svelte v3.42.4 */
|
||||
const file = "src/App.svelte";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let div1;
|
||||
let img;
|
||||
let img_src_value;
|
||||
let t;
|
||||
let div0;
|
||||
let inner;
|
||||
let current;
|
||||
inner = new Inner({ $$inline: true });
|
||||
|
||||
const block = {
|
||||
c: function create() {
|
||||
div1 = element("div");
|
||||
img = element("img");
|
||||
t = space();
|
||||
div0 = element("div");
|
||||
create_component(inner.$$.fragment);
|
||||
attr_dev(img, "width", "200px");
|
||||
attr_dev(img, "class", "rounded mx-auto d-block p-3");
|
||||
if (!src_url_equal(img.src, img_src_value = "newpipe_logo.svg")) attr_dev(img, "src", img_src_value);
|
||||
add_location(img, file, 5, 2, 84);
|
||||
attr_dev(div0, "class", "container");
|
||||
add_location(div0, file, 6, 2, 166);
|
||||
attr_dev(div1, "class", "container");
|
||||
add_location(div1, file, 4, 0, 58);
|
||||
},
|
||||
l: function claim(nodes) {
|
||||
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
|
||||
},
|
||||
m: function mount(target, anchor) {
|
||||
insert_dev(target, div1, anchor);
|
||||
append_dev(div1, img);
|
||||
append_dev(div1, t);
|
||||
append_dev(div1, div0);
|
||||
mount_component(inner, div0, null);
|
||||
current = true;
|
||||
},
|
||||
p: noop,
|
||||
i: function intro(local) {
|
||||
if (current) return;
|
||||
transition_in(inner.$$.fragment, local);
|
||||
current = true;
|
||||
},
|
||||
o: function outro(local) {
|
||||
transition_out(inner.$$.fragment, local);
|
||||
current = false;
|
||||
},
|
||||
d: function destroy(detaching) {
|
||||
if (detaching) detach_dev(div1);
|
||||
destroy_component(inner);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -642,46 +783,17 @@ var app = (function () {
|
|||
return block;
|
||||
}
|
||||
|
||||
async function ping() {
|
||||
const res = await fetch(`http://localhost:8080/ping`);
|
||||
|
||||
// const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
return data;
|
||||
} else {
|
||||
console.log(res);
|
||||
throw new Error(data);
|
||||
}
|
||||
}
|
||||
|
||||
function instance($$self, $$props, $$invalidate) {
|
||||
let { $$slots: slots = {}, $$scope } = $$props;
|
||||
validate_slots('App', slots, []);
|
||||
let promise = ping();
|
||||
|
||||
function handleClick() {
|
||||
$$invalidate(0, promise = ping());
|
||||
}
|
||||
|
||||
const writable_props = [];
|
||||
|
||||
Object.keys($$props).forEach(key => {
|
||||
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<App> was created with unknown prop '${key}'`);
|
||||
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<App> was created with unknown prop '${key}'`);
|
||||
});
|
||||
|
||||
$$self.$capture_state = () => ({ ping, promise, handleClick });
|
||||
|
||||
$$self.$inject_state = $$props => {
|
||||
if ('promise' in $$props) $$invalidate(0, promise = $$props.promise);
|
||||
};
|
||||
|
||||
if ($$props && "$$inject" in $$props) {
|
||||
$$self.$inject_state($$props.$$inject);
|
||||
}
|
||||
|
||||
return [promise, handleClick];
|
||||
$$self.$capture_state = () => ({ Inner });
|
||||
return [];
|
||||
}
|
||||
|
||||
class App extends SvelteComponentDev {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -4,13 +4,21 @@
|
|||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
|
||||
<title>Svelte app</title>
|
||||
<title>Youtube Download Service</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<!-- CSS only -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<!-- <link rel='stylesheet' href='/global.css'> -->
|
||||
<!-- <link rel='stylesheet' href='/build/bundle.css'> -->
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
20
frontend/public/newpipe_logo.svg
Normal file
20
frontend/public/newpipe_logo.svg
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#CD201F;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Alapkor">
|
||||
<circle id="XMLID_23_" class="st0" cx="50" cy="50" r="50"/>
|
||||
</g>
|
||||
<g id="Elemek">
|
||||
<path id="XMLID_19_" class="st1" d="M47,28.2c-9-5.3-15.3-9-15.3-9v61.7c0,0,30.4-18,52.3-30.9C72.1,43,57.7,34.5,47,28.2z"/>
|
||||
</g>
|
||||
<g id="Fedo">
|
||||
<path id="XMLID_5_" class="st0" d="M48.4,40.1c-4.1-2.4-7-4.1-7-4.1V64c0,0,13.9-8.2,23.8-14C59.8,46.8,53.3,42.9,48.4,40.1z"/>
|
||||
<rect id="XMLID_4_" x="41.4" y="55.6" class="st0" width="6.2" height="21"/>
|
||||
</g>
|
||||
<g id="Vonalak">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 887 B |
|
|
@ -1,32 +1,10 @@
|
|||
<script>
|
||||
async function ping() {
|
||||
const res = await fetch(`http://localhost:8080/ping`);
|
||||
// const res = await fetch(`https://jsonplaceholder.typicode.com/todos/1`);
|
||||
const data = await res.json();
|
||||
|
||||
if (res.ok) {
|
||||
return data;
|
||||
} else {
|
||||
console.log(res);
|
||||
throw new Error(data);
|
||||
}
|
||||
}
|
||||
|
||||
let promise = ping();
|
||||
|
||||
function handleClick() {
|
||||
promise = ping();
|
||||
}
|
||||
import Inner from './Inner.svelte';
|
||||
</script>
|
||||
|
||||
<button on:click={handleClick}>
|
||||
generate random number
|
||||
</button>
|
||||
|
||||
{#await promise}
|
||||
<p>...waiting</p>
|
||||
{:then data}
|
||||
<p>The number is {data.title}</p>
|
||||
{:catch error}
|
||||
<p style="color: red">{error.message}</p>
|
||||
{/await}
|
||||
<div class="container">
|
||||
<img width="200px" class="rounded mx-auto d-block p-3" src="newpipe_logo.svg"/>
|
||||
<div class="container">
|
||||
<Inner/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,33 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
async function ping() {
|
||||
const res = await fetch(`http://localhost:8080/ping`);
|
||||
const data = await res.json();
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
if (res.ok) {
|
||||
return data;
|
||||
} else {
|
||||
console.log(res);
|
||||
throw new Error(data);
|
||||
}
|
||||
}
|
||||
|
||||
function sayHello() {
|
||||
dispatch('message', {
|
||||
text: 'Hello!'
|
||||
});
|
||||
let promise = ping();
|
||||
|
||||
function handleClick() {
|
||||
promise = ping();
|
||||
}
|
||||
</script>
|
||||
<form>
|
||||
<div class="input-group">
|
||||
<input type="url" class="form-control" placeholder="Insert a Youtube url here..." aria-label="URL for the Youtube video to download.">
|
||||
<button class="btn btn-outline-primary" type="button">Download</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<button on:click={sayHello}>
|
||||
Click to say hello
|
||||
</button>
|
||||
{#await promise}
|
||||
<p>...waiting</p>
|
||||
{:then data}
|
||||
<p>Message from the server is {data.message}</p>
|
||||
{:catch error}
|
||||
<p style="color: red">{error.message}</p>
|
||||
{/await}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<p>Questo è un paragrafo</p>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
<script>
|
||||
const emojis = {
|
||||
apple: "🍎",
|
||||
banana: "🍌",
|
||||
carrot: "🥕",
|
||||
doughnut: "🍩",
|
||||
egg: "🥚"
|
||||
}
|
||||
|
||||
// the name is updated whenever the prop value changes...
|
||||
export let name;
|
||||
|
||||
// ...but the "emoji" variable is fixed upon initialisation of the component
|
||||
const emoji = emojis[name];
|
||||
</script>
|
||||
|
||||
<p>
|
||||
<span>The emoji for { name } is { emoji }</span>
|
||||
</p>
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0.2em 1em 0.3em;
|
||||
text-align: center;
|
||||
border-radius: 0.2em;
|
||||
background-color: #FFDFD3;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue