doohoyi/chatty-pub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

instructions on how to use auto-embedded font

Browse source
This commit is contained in:
Heerko 2021-07-16 11:02:16 +02:00
parent 7ab14ae034
commit bf9e2ebccd
1 changed files with 41 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
front/src/components/Rules/Rule.vue
View file

@ -3,14 +3,20 @@
<pre v-if="rule.type === 'raw'" <pre v-if="rule.type === 'raw'"
>{{ contentFiltered }} >{{ contentFiltered }}
</pre> </pre>
<template v-else-if="rule.type === 'font'"> <span v-else-if="rule.type === 'font'">
<pre> <pre>
@font-face { @font-face {
font-family: "{{ font.family }}"; font-family: "{{ font.family }}";
src: "{{ font.src }}" format({{ "font.format" }}); src: "{{ font.src }}" format({{ "font.format" }});
} }</pre
</pre> >
</template> <div class="instructions">
<span
>Add the follow to your rule to use this font:<br />
font-family: "{{ font.family }}";
</span>
</div>
</span>
<template v-else> <template v-else>
<p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p> <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
<p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p> <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
@ -36,11 +42,7 @@ export default {
return c; return c;
}, },
classes() { classes() {
let style = ""; return "type-" + this.rule.type;
if (this.rule.type == "raw") {
style += " raw";
}
return style;
}, },
font() { font() {
return this.rule.content; return this.rule.content;
@ -56,13 +58,15 @@ export default {
<style scoped> <style scoped>
.rule { .rule {
margin: 1em 0; margin: 1em 0;
position: relative;
} }
.rule p { .rule p {
margin: 0; margin: 0;
} }
.rule.raw { .rule.type-raw,
.rule.type-font {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
padding: 10px; padding: 10px;
@ -71,7 +75,8 @@ export default {
position: relative; position: relative;
} }
.rule.raw:after { .rule.type-font:after,
.rule.type-raw:after {
all: revert; all: revert;
content: "raw css"; content: "raw css";
background-color: #333; background-color: #333;
@ -81,8 +86,32 @@ export default {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
padding: 0 10px; padding: 0 10px;
border: 1px solid white; /* border: 1px solid white; */
font-family: initial; font-family: initial;
font-size: 1rem; font-size: 1rem;
} }
.rule.type-font:after {
content: "generated font rule";
}
.rule.type-font .instructions {
display: none;
position: absolute;
top: 0;
left: 0;
align-content: center;
justify-content: center;
align-items: center;
font-family: initial;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 10px;
}
.rule.type-font:hover .instructions {
display: flex;
}
</style> </style>