danolo
/
deemix-webui
mirror of https://gitlab.com/RemixDev/deemix-webui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

started styling about tab; made some changes to about tab

This commit is contained in:
Roberto Tonino 2020-07-24 00:07:57 +02:00
parent c9d9c29af7
commit ea7641d277
7 changed files with 290 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/js/bundle.js
View File

File diff suppressed because one or more lines are too long

1
public/js/vendor/i18n.min.js vendored
View File

@ -1 +0,0 @@
(function(){var e,t,n,r=function(e,t){return function(){return e.apply(t,arguments)}};e=function(){function e(){this.translate=r(this.translate,this);this.data={values:{},contexts:[]};this.globalContext={}}e.prototype.translate=function(e,t,n,r,i){var s,o,u,a;if(i==null){i=this.globalContext}u=function(e){var t;t=typeof e;return t==="function"||t==="object"&&!!e};if(u(t)){s=null;a=null;o=t;i=n||this.globalContext}else{if(typeof t==="number"){s=null;a=t;o=n;i=r||this.globalContext}else{s=t;if(typeof n==="number"){a=n;o=r;i=i}else{a=null;o=n;i=r||this.globalContext}}}if(u(e)){if(u(e["i18n"])){e=e["i18n"]}return this.translateHash(e,i)}else{return this.translateText(e,a,o,i,s)}};e.prototype.add=function(e){var t,n,r,i,s,o,u,a;if(e.values!=null){o=e.values;for(n in o){r=o[n];this.data.values[n]=r}}if(e.contexts!=null){u=e.contexts;a=[];for(i=0,s=u.length;i<s;i++){t=u[i];a.push(this.data.contexts.push(t))}return a}};e.prototype.setContext=function(e,t){return this.globalContext[e]=t};e.prototype.clearContext=function(e){return this.lobalContext[e]=null};e.prototype.reset=function(){this.data={values:{},contexts:[]};return this.globalContext={}};e.prototype.resetData=function(){return this.data={values:{},contexts:[]}};e.prototype.resetContext=function(){return this.globalContext={}};e.prototype.translateHash=function(e,t){var n,r;for(n in e){r=e[n];if(typeof r==="string"){e[n]=this.translateText(r,null,null,t)}}return e};e.prototype.translateText=function(e,t,n,r,i){var s,o;if(r==null){r=this.globalContext}if(this.data==null){return this.useOriginalText(i||e,t,n)}s=this.getContextData(this.data,r);if(s!=null){o=this.findTranslation(e,t,n,s.values,i)}if(o==null){o=this.findTranslation(e,t,n,this.data.values,i)}if(o==null){return this.useOriginalText(i||e,t,n)}return o};e.prototype.findTranslation=function(e,t,n,r){var i,s,o,u,a;o=r[e];if(o==null){return null}if(t==null){if(typeof o==="string"){return this.applyFormatting(o,t,n)}}else{if(o instanceof Array||o.length){for(u=0,a=o.length;u<a;u++){s=o[u];if((t>=s[0]||s[0]===null)&&(t<=s[1]||s[1]===null)){i=this.applyFormatting(s[2].replace("-%n",String(-t)),t,n);return this.applyFormatting(i.replace("%n",String(t)),t,n)}}}}return null};e.prototype.getContextData=function(e,t){var n,r,i,s,o,u,a,f;if(e.contexts==null){return null}a=e.contexts;for(o=0,u=a.length;o<u;o++){n=a[o];r=true;f=n.matches;for(i in f){s=f[i];r=r&&s===t[i]}if(r){return n}}return null};e.prototype.useOriginalText=function(e,t,n){if(t==null){return this.applyFormatting(e,t,n)}return this.applyFormatting(e.replace("%n",String(t)),t,n)};e.prototype.applyFormatting=function(e,t,n){var r,i;for(r in n){i=new RegExp("%{"+r+"}","g");e=e.replace(i,n[r])}return e};return e}();n=new e;t=n.translate;t.translator=n;t.create=function(n){var r;r=new e;if(n!=null){r.add(n)}r.translate.create=t.create;return r.translate};(typeof module!=="undefined"&&module!==null?module.exports=t:void 0)||(this.i18n=t)}).call(this)

3
src/assets/bitcoin.svg Normal file
View File

@ -0,0 +1,3 @@
<svg viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
<path d="M37.4984 36.7246C37.7727 37.3718 37.822 38.0823 37.6813 38.9194C37.4984 39.8901 37.0763 40.6499 36.408 41.2408C35.7327 41.8106 35.0011 42.1552 34.1922 42.2326C33.3762 42.31 32.3843 42.2326 31.2166 42.0216L29.1977 41.6277C28.5294 41.494 28.1284 41.3955 27.9807 41.29C27.84 41.1915 27.7626 41.0508 27.7274 40.8539C27.7134 40.7061 27.7696 40.1856 27.9103 39.3485L29.0288 33.3691L32.6094 34.0304C34.1781 34.3329 35.3177 34.6987 36.0211 35.1207C36.7316 35.5428 37.217 36.0915 37.4984 36.7246ZM37.6883 24.1539C37.0552 23.8022 35.8453 23.4645 34.0726 23.1339L31.0477 22.5641L29.7815 29.2962L32.8134 29.8659C34.3962 30.1544 35.592 30.2458 36.401 30.1192C37.21 29.9855 37.8431 29.6971 38.3355 29.2399C38.8068 28.7967 39.1234 28.1988 39.25 27.4953C39.3907 26.7637 39.3203 26.1236 39.053 25.5327C38.7998 24.9629 38.3496 24.4916 37.6883 24.1539ZM64.5179 32.518C64.5179 50.2027 50.1886 64.518 32.5109 64.518C14.8402 64.518 0.517944 50.2027 0.517944 32.518C0.517944 14.8332 14.8402 0.51796 32.5109 0.51796C50.1886 0.51796 64.5179 14.8332 64.5179 32.518ZM45.6866 24.0625C45.1449 22.8807 44.2304 21.8818 42.9712 21.0587C42.4929 20.7351 41.8809 20.4538 41.2126 20.1935L42.1201 15.3326L37.4491 14.4533L36.5909 18.9976L33.5872 18.4349L34.4454 13.8906L29.7675 13.0113L28.9092 17.5626L21.7692 16.226L21.0587 20.0458L22.1491 20.2498C22.8807 20.3764 23.359 20.5382 23.5841 20.7211C23.8233 20.8899 23.964 21.108 24.0273 21.3542C24.0906 21.6004 24.0484 22.128 23.8936 22.9581L21.0095 38.3496C20.8618 39.1515 20.7211 39.665 20.5663 39.869C20.4115 40.073 20.2005 40.2278 19.9191 40.3052C19.6378 40.3825 19.1383 40.3544 18.4137 40.1996L17.3164 40.0168L16.6059 43.8224L23.7389 45.1449L22.8947 49.6892L27.5727 50.5685L28.4168 46.0242L31.0759 46.5166C31.1955 46.5448 31.301 46.5518 31.4206 46.5799L30.5764 51.1242L35.2473 51.9895L36.1759 47.0724C36.9849 47.0583 37.7094 46.988 38.3496 46.8824C40.0871 46.5377 41.5081 45.8272 42.6265 44.751C43.738 43.6958 44.4344 42.4296 44.7017 40.9594C44.9339 39.7213 44.8494 38.5536 44.4555 37.4702C44.0545 36.3588 43.4144 35.4373 42.5281 34.6916C41.9231 34.1711 40.9945 33.6224 39.7705 33.0596C41.0508 32.8697 42.113 32.5391 42.9642 32.0396C43.8224 31.5472 44.5188 30.9282 45.0534 30.1755C45.5951 29.4298 45.9609 28.5927 46.1227 27.6852C46.3759 26.4894 46.2282 25.2513 45.6866 24.0625Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

1
src/assets/ethereum.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="-116 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m140.28125 333.582031-140.28125-66.734375 140.28125 245.152344 140.285156-245.152344zm0 0"/><path d="m265.289062 217.117188-125.007812-217.117188-125.148438 217.367188 125.148438-59.367188zm0 0"/><path d="m25.980469 245.535156 114.300781 54.140625 114.492188-54.230469-114.492188-54.136718zm0 0"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

38
src/assets/it.svg
View File

@ -1,38 +0,0 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<circle style="fill:#F0F0F0;" cx="256" cy="256" r="256"/>
<path style="fill:#D80027;" d="M512,256c0-110.071-69.472-203.906-166.957-240.077v480.155C442.528,459.906,512,366.071,512,256z"/>
<path style="fill:#6DA544;" d="M0,256c0,110.071,69.472,203.906,166.957,240.077V15.923C69.472,52.094,0,145.929,0,256z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 803 B

44
src/assets/paypal.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<path style="fill:#03A9F4;" d="M425.457,117.739c-3.121-1.838-6.961-1.966-10.197-0.341c-3.231,1.629-5.416,4.786-5.803,8.384
c-0.384,3.499-0.981,6.997-1.728,10.667c-20.885,94.784-62.827,140.885-128.256,140.885h-96c-5.062,0.009-9.42,3.574-10.432,8.533
l-32,149.995l-5.717,38.187c-3.287,17.365,8.125,34.107,25.489,37.394c1.915,0.362,3.858,0.549,5.807,0.558h64.213
c14.718,0.045,27.55-10,31.04-24.299l25.941-103.701h55.659c65.685,0,111.083-52.373,127.829-147.477l0,0
C482.356,191.238,464.068,143.856,425.457,117.739z"/>
<path style="fill:#283593;" d="M405.339,38.017c-21.078-23.909-51.327-37.731-83.2-38.016h-176.64
C119.064-0.141,96.558,19.2,92.721,45.355L37.873,411.243c-2.627,17.477,9.41,33.774,26.887,36.402
c1.586,0.239,3.189,0.357,4.793,0.356h81.92c5.062-0.009,9.42-3.574,10.432-8.533l30.187-140.8h87.467
c75.904,0,126.059-53.056,149.099-157.867c0.926-4.178,1.638-8.4,2.133-12.651C436.139,95.815,426.81,62.778,405.339,38.017z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

307
src/components/TheAboutTab.vue
View File

@ -1,80 +1,245 @@
<template functional> <template>
<div id="about_tab" class="main_tabcontent"> <div id="about_tab" class="main_tabcontent">
<h2 class="page_heading">About</h2> <h2 class="page_heading">{{ $t('sidebar.about') }}</h2>
<p> <ul>
This app uses the <a href="https://deemix.app" target="_blank">deemix</a> library, you can use this <li>This app uses the <strong>deemix</strong> library, which you can use to make your own UI for deemix.</li>
library to make your own UI for deemix.</br> <!-- <li>
Here's the <a href="https://codeberg.org/RemixDev/deemix" target="_blank">official repo</a> for the Here's the <a href="https://codeberg.org/RemixDev/deemix" target="_blank">official repo</a> for the library.
library. </li> -->
</p> <li>
<p> Thanks to <strong>rtonno</strong>, <strong>uhwot</strong> and <strong>lollilol</strong> for helping me with this
Thanks to rtonno, uhwot and lollilol for helping me with this project.<br> project and to <strong>BasCurtiz</strong> and <strong>scarvimane</strong> for making the icon.
Also thanks to BasCurtiz and scarvimane for making the icon. </li>
</p> <li>
<p> Stay up to date with the updates by following the
Stay up to date with the updates by following the <a href="https://t.me/RemixDevNews" <a href="https://t.me/RemixDevNews" target="_blank">news channel</a> on Telegram.
target="_blank">news channel</a> on Telegram. </li>
</p> </ul>
<br />
<h1>Bug Reports</h1> <h2>Useful Links</h2>
<p> <ul class="no-dots">
<li>
<a href="https://deemix.app" target="_blank">🌍 Official Website</a>
</li>
<li>
<a href="https://codeberg.org/RemixDev/deemix" target="_blank">🚀 Official Library Repository</a>
</li>
<li>
<a href="https://codeberg.org/RemixDev/deemix-webui" target="_blank">💻 Official WebUI Repository</a>
</li>
<li>
<a href="https://www.reddit.com/r/deemix" target="_blank">🤖 Official Subreddit</a>
</li>
<li>
<a href="https://t.me/RemixDevNews" target="_blank">📰 News Channel</a>
</li>
</ul>
<h2>
Bug Reports
<span class="subheading">
Is there something that isn't working in deemix? Tell us!
</span>
</h2>
<ul>
<li>
If you have questions or problems with the app, search for a solution in the If you have questions or problems with the app, search for a solution in the
<a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't <a href="https://www.reddit.com/r/deemix" target="_blank">subreddit</a> first and then, if you don't find
find anything anything you can make a post with your issue on the subreddit.
you can make a post with your issue on the subreddit. </li>
</p> <li>
<p> Before reporting a bug make sure you're running the latest version of the app and that the thing you want to
Before reporting a bug make sure you're running the latest version of the app and that the thing you report is actually a bug and not something that's wrong only on your end.
want </li>
to report is actually a bug and not something that's wrong only on your end.<br /> <li>
Make sure the bug is reproducible on another machines and also <b>DO NOT</b> report a bug if it's been Make sure the bug is reproducible on another machines and also <strong>DO NOT</strong> report a bug if it's been
already reported. already reported.
</p> </li>
<p> <li><strong>DO NOT</strong> open issues for asking questions, there is a subreddit for that.</li>
<b>DO NOT</b> open issues for asking questions, there is a subreddit for that. </ul>
</p>
<br /> <h2>
<h2>Donations</h2> Contributing
<h3>You want to contribute to this project? You can do that <b>in different ways!</b></h3> <span class="subheading">
<p> You want to contribute to this project? You can do it in different ways!
If you're fluent in python you could try to make a new UI for the app using the base library, or fix </span>
bugs in the library with a pull request on the <a href="https://codeberg.org/RemixDev/deemix" </h2>
target="_blank">repo</a>.<br> <ul>
I accept features as well, but no complex things, as they can be implementend directly in the app and <li>
not the library.</p> If you're fluent in python you could try to make a new UI for the app using the base library, or fix bugs in the
<p> library with a pull request on the <a href="https://codeberg.org/RemixDev/deemix" target="_blank">repo</a>.
If you're fluent in another programming language you could try to port deemix into other programming </li>
languages!<br> <li>
You need help understanding the code? Just hit RemixDev up on Telegram or Reddit.</p> I accept features as well, but no complex things, as they can be implementend directly in the app and not the
<p>If you know JavaScript, HTML or CSS you could contribute to the <a library.
href="https://codeberg.org/RemixDev/deemix-webui" target="_blank">webui</a>.</p> </li>
<p> <li>
If you find some bugs you can report them in the repo, just make sure your bug isn't something that If you're fluent in another programming language you could try to port deemix into other programming languages!
only </li>
affects you and it can be reproducible by other users as well.<br> <li>
Duplicate bug reports will be closed, so keep an eye out on that.</p> You need help understanding the code? Just hit RemixDev up on Telegram or Reddit.
<hr> </li>
<h3>You want to contribute monetarily? You could make a donation!</h3> <li>
<p> If you know Vue.js (JavaScript), HTML or CSS you could contribute to the
If you can donate you can do that with this links.<br> <a href="https://codeberg.org/RemixDev/deemix-webui" target="_blank">webui</a>.
You shoud remember that <b>this is a free project</b> and <b>you should support the artists you </li>
love</b> <li>
before supporting the developers.<br> If you find some bugs you can report them in the repo, just make sure your bug isn't something that only affects
Don't feel obligated to donate, I appreciate you anyway!</p> you and it can be reproducible by other users as well.
<p> </li>
<b>PayPal:</b> <a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a><br> <li>
<b>Bitcoin:</b> 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1<br> Duplicate bug reports will be closed, so keep an eye out on that.
<b>Ethereum:</b> 0x1d2aa67e671485CD4062289772B662e0A6Ff976c </li>
</p> </ul>
<br />
<h2>
Donations
<span class="subheading">
You want to contribute monetarily? You could make a donation!
</span>
</h2>
<ul>
<li>
If you can donate you can do it with this links.
</li>
<li>
You shoud remember that <strong>this is a free project</strong> and
<strong>you should support the artists you love</strong> before supporting the developers.
</li>
<li>
Don't feel obligated to donate, I appreciate you anyway!
</li>
</ul>
<ul>
<li>
<i v-html="paypal" />
<strong>PayPal:</strong>
<a href="https://paypal.me/RemixDev" target="_blank">PayPal.me/RemixDev</a>
</li>
<li>
<i v-html="bitcoin" />
<strong>Bitcoin:</strong> 1sdNymSJrMBWyHM4u2m9uco5nv6uV4Qs1
</li>
<li>
<i v-html="ethereum" />
<strong>Ethereum:</strong> 0x1d2aa67e671485CD4062289772B662e0A6Ff976c
</li>
</ul>
<h2>License</h2> <h2>License</h2>
<p> <p>
<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank"> <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank">
<img alt="GNU General Public License" style="border-width:0" <img
src="https://www.gnu.org/graphics/gplv3-127x51.png" /> alt="GNU General Public License"
</a><br /> style="border-width: 0;"
This work is licensed under a <a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" src="https://www.gnu.org/graphics/gplv3-127x51.png"
target="_blank">GNU General Public License 3.0</a>. />
</a>
</p>
<p>
This work is licensed under a
<a rel="license" href="https://www.gnu.org/licenses/gpl-3.0.en.html" target="_blank"
>GNU General Public License 3.0</a
>.
</p> </p>
</div> </div>
</template> </template>
<style lang="scss" scoped>
li,
p,
a {
letter-spacing: 0.4px;
font-size: 20px;
line-height: 1.2;
}
i {
vertical-align: middle;
}
i /deep/ svg {
fill: white;
width: 20px;
// height: 20px;
}
:link {
text-decoration: none;
}
#about_tab {
margin-bottom: 40px;
}
h2 {
text-transform: capitalize;
&:not(.page_heading) {
font-size: 2rem;
border-bottom: 1px solid hsla(0, 0%, 20%, 0.25);
padding: {
top: 2rem;
bottom: 1rem;
}
}
.subheading {
display: block;
font-size: 0.5em;
margin-top: 0.5em;
font-weight: normal;
opacity: 0.8;
text-transform: none;
}
}
p {
margin: 0 !important;
}
ul {
li {
margin-bottom: 7px;
}
h2 + & {
margin-top: 1rem;
}
ul + & {
margin-top: 1.25rem;
}
&.no-dots {
list-style-type: none;
}
&:not(.no-dots) {
list-style-type: none;
li {
position: relative;
&::before {
content: '—';
position: absolute;
left: -30px;
opacity: 0.25;
}
}
}
}
</style>
<script>
import paypal from '@/assets/paypal.svg'
import bitcoin from '@/assets/bitcoin.svg'
import ethereum from '@/assets/ethereum.svg'
export default {
data: () => ({
paypal,
ethereum,
bitcoin
})
}
</script>