Commit a3e64af5 authored by yPhil's avatar yPhil

Help: Translations and stuff

parent c0d5288e
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?46014740');
src: url('../font/fontello.eot?46014740#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?46014740') format('woff2'),
url('../font/fontello.woff?46014740') format('woff'),
url('../font/fontello.ttf?46014740') format('truetype'),
url('../font/fontello.svg?46014740#fontello') format('svg');
src: url('../font/fontello.eot?85026967');
src: url('../font/fontello.eot?85026967#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?85026967') format('woff2'),
url('../font/fontello.woff?85026967') format('woff'),
url('../font/fontello.ttf?85026967') format('truetype'),
url('../font/fontello.svg?85026967#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
......@@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?46014740#fontello') format('svg');
src: url('../font/fontello.svg?85026967#fontello') format('svg');
}
}
*/
......@@ -57,6 +57,8 @@
.icon-arrows-cw:before { content: '\e800'; } /* '' */
.icon-cancel-circled:before { content: '\e801'; } /* '' */
.icon-globe:before { content: '\e802'; } /* '' */
.icon-cloud:before { content: '\e803'; } /* '' */
.icon-up:before { content: '\e804'; } /* '' */
.icon-pencil:before { content: '\e806'; } /* '' */
.icon-ok:before { content: '\e807'; } /* '' */
......@@ -71,4 +73,6 @@
.icon-volume-down:before { content: '\e81a'; } /* '' */
.icon-right-open:before { content: '\f006'; } /* '' */
.icon-left-open:before { content: '\f007'; } /* '' */
.icon-uncheck:before { content: '\f096'; } /* '' */
\ No newline at end of file
.icon-export:before { content: '\f02e'; } /* '' */
.icon-uncheck:before { content: '\f096'; } /* '' */
.icon-rss-squared:before { content: '\f143'; } /* '' */
\ No newline at end of file
......@@ -4,6 +4,7 @@
--ui-color-ter: #C0B283;
--ui-color-qua: #22313F;
--ui-color-qui: #808080;
--ui-color-sen: #f26522;
--var-header-height: 26px;
--var-controls-width: 150px;
......@@ -87,6 +88,17 @@ h2,
h3,
h4 {
color: var(--ui-color-sec);
margin-bottom: .3em;
margin-top: .6em
}
h1 {
margin-top: 0
}
div.dialog {
line-height: 1.5em;
/* color: red; */
}
.ui-widget-content:not(input) {
......@@ -316,11 +328,13 @@ legend {
#menu,
#topnav,
.ui-dialog,
.ui-dialog .ui-dialog-buttonpane,
.handle {
.ui-dialog .ui-dialog-buttonpane {
background: var(--ui-color-qua);
border-color: var(--ui-color-qua) !important;
}
.ui-dialog .ui-dialog-buttonpane {
margin: 0 !important;
}
......@@ -430,7 +444,7 @@ button.ui-state-success {
background-color: var(--ui-color-success) !important;
}
button#aide-un {
button.helpIntroUI {
background-color: var(--ui-color-success);
border-color: var(--ui-color-success);
color: var(--ui-color-pri);
......@@ -438,16 +452,64 @@ button#aide-un {
padding: .4em;
}
button.helpIntroUI:hover {
background-color: var(--ui-color-success);
}
.ui-dialog-titlebar-help {
right: 30px !important;
background-color: var(--ui-color-success);
color: var(--ui-color-qua);
color: var(--ui-color-pri) !important;
}
.ui-visual-focus {
box-shadow: none;
}
ul.help {
/* list-style-type: circle; */
list-style-type: none;
list-style-position: outside;
margin: 0 0 0 1em;
}
ul.help li {
margin: 1em 0 0 1em;
}
ul.help li:before {
font-family: 'fontello';
margin: 0 .5em 0 0;
color: var(--ui-color-sen);
font-size: 1.5em;
}
ul.help li.rss:before {
content: '\f143';
color: var(--ui-color-sen);
}
ul.help li.www:before {
content: '\e802';
color: var(--ui-color-pri);
}
ul.help li.search:before {
content: '\e812';
color: var(--ui-color-success);
}
ul.help li.export:before {
content: '\f02e';
color: var(--ui-color-sen);
}
ul.help li.cloud:before {
content: '\e803';
color: var(--ui-color-success);
}
#killFeed.ui-state-active {
/* color: var(--ui-color-qua) !important; */
background-color: var(--ui-color-danger) !important;
......@@ -614,16 +676,16 @@ p.dialog-warning {
font-size:26pt;
}
div.dialog {
div.dialogWithIcon {
display:flex;
flex-direction: var(--dialog-flex-direction);
}
div.dialog > div {
div.dialogWithIcon > div {
flex: 1 1 auto;
}
div.dialog > div.icon {
div.dialogWithIcon > div.icon {
text-align: center;
flex: 0 0 200px;
}
......@@ -752,7 +814,7 @@ li.feed {
flex-basis: auto;
flex-grow: 4;
flex-shrink: 1;
font-family: 'BebasNeueRegular' !important;
font-family: BebasNeueRegular, Helvetica, Arial, sans-serif !important;
margin-left: var(--title-margin-left);
font-size: var(--var-controls-font-size);
font-style: italic;
......@@ -1115,7 +1177,7 @@ div.introjs-helperLayer {
.topnav > div#logoTitle > .logoTitle {
color: var(--ui-color-pri);
display:var(--logo-display);
font-family: 'LobsterRegular';
font-family: LobsterRegular, Helvetica, Arial, sans-serif;
font-size: 36pt;
margin: -6px 0 0 0 !important;
}
......
No preview for this file type
......@@ -10,6 +10,10 @@
<glyph glyph-name="cancel-circled" unicode="&#xe801;" d="M420 770q174 0 297-123t123-297-123-297-297-123-297 123-123 297 123 297 297 123z m86-420l154 154-86 86-154-152-152 152-88-86 154-154-154-152 88-86 152 152 154-152 86 86z" horiz-adv-x="840" />
<glyph glyph-name="globe" unicode="&#xe802;" d="M0 366q0 201 142 342t342 142 343-142 142-342-142-343-343-142-342 142-142 343z m63-16q7-166 125-283 52 37 109 60-43 106-47 223l-187 0z m0 31l187 0q4 104 37 196-62 25-117 68-102-113-107-264z m128 287q51-39 108-62 43 101 117 176-131-22-225-114z m20-623q88-76 205-95-64 64-105 148-53-19-100-53z m70 305q4-111 45-213 69 22 143 26l0 187-188 0z m0 31l188 0 0 157q-78 3-153 29-31-88-35-186z m47 215q69-23 141-27l0 218-2 0q-90-76-139-191z m12-486q49-100 127-166l2 0 0 187q-69-4-129-21z m160-166l2 0q78 66 127 166-61 17-129 21l0-187z m0 219q74-4 143-26 41 102 45 213l-188 0 0-187z m0 218l188 0q-4 98-36 186-74-26-152-29l0-157z m0 188q72 4 141 27-49 115-139 191l-2 0 0-218z m53-619q117 19 205 95-47 34-100 53-41-84-105-148z m0 832q74-75 117-176 57 23 107 62-93 92-224 114z m119-655q57-23 109-60 117 117 125 283l-187 0q-4-117-47-223z m10 450q33-92 37-196l187 0q-6 151-107 264-55-43-117-68z" horiz-adv-x="969" />
<glyph glyph-name="cloud" unicode="&#xe803;" d="M781 506q108 0 184-76t76-184-76-184-184-77l-208 0 0 239 67-66q16-17 38-17 20 0 36 17 15 15 15 36t-15 36l-156 156q-14 14-37 15t-37-15l-156-156q-15-15-15-36t15-36q16-17 37-17 20 0 36 17l68 66 0-239-260 0q-86 0-148 61t-61 148q0 72 44 128t112 73l0 8q0 130 92 221t221 91q100 0 180-58t114-152q2 0 8 1t10 0z" horiz-adv-x="1041" />
<glyph glyph-name="up" unicode="&#xe804;" d="M366 790l334-334q31-31 31-73t-31-74-74-31-73 31l-83 82 0-377q0-44-31-74t-73-30q-43 0-74 31t-31 73l0 377-82-82q-31-31-74-31t-74 31-31 74 31 73z" horiz-adv-x="731" />
<glyph glyph-name="pencil" unicode="&#xe806;" d="M718 680q32-32 47-64t15-48l0-16-252-252-290-288-238-52 50 240 290 288 252 252q54 12 126-60z m-494-640l24 24q-2 44-52 94-22 22-45 35t-35 13l-14 2-22-24-18-80q28-16 46-34 24-24 36-48z" horiz-adv-x="780" />
......@@ -38,7 +42,11 @@
<glyph glyph-name="left-open" unicode="&#xf007;" d="M0 353l391 391q18 18 43 18 24 0 43-18 18-18 18-44t-18-43l-304-304 304-305q18-17 18-43t-18-43q-18-18-43-18t-43 18z" horiz-adv-x="495.1" />
<glyph glyph-name="export" unicode="&#xf02e;" d="M0 84v73q0 33 24 56t57 24 56-24 24-56v-73q0-17 12-29t30-13h531q18 0 30 13t12 29v73q0 33 24 56t56 24 57-24 24-56v-73q0-84-59-143t-144-60h-531q-84 0-144 60t-59 143z m155 359q0 33 24 57 23 23 56 23t57-23l105-106v344q0 33 24 57t56 23 57-23 24-57v-344l110 110q24 24 57 24t56-24q24-23 24-56t-24-57l-247-247q-24-25-57-25-32 0-56 25l-242 242q-24 24-24 57z" horiz-adv-x="937.5" />
<glyph glyph-name="uncheck" unicode="&#xf096;" d="M625 707h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v464q0 37-26 63t-63 26z m161-89v-464q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q66 0 114-48t47-113z" horiz-adv-x="785.7" />
<glyph glyph-name="rss-squared" unicode="&#xf143;" d="M286 136q0 29-21 50t-51 21-50-21-21-50 21-51 50-21 51 21 21 51z m196-53q-8 130-99 222t-221 98q-8 1-14-5t-5-13v-71q0-7 5-12t12-6q86-6 147-68t67-147q1-7 6-12t12-5h72q7 0 13 6t5 13z m214 0q-3 86-31 166t-78 145-115 114-145 78-166 31q-7 1-13-5-5-5-5-13v-71q0-7 5-12t12-6q114-4 211-62t156-155 62-211q0-8 5-13t13-5h71q7 0 13 6 6 5 5 13z m161 535v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
</font>
</defs>
</svg>
\ No newline at end of file
No preview for this file type
......@@ -35,7 +35,7 @@ MOB.dialog = {
MOB.dialog.kill($dialog);
});
$('#aide-un').button().on('click', function() {
$('.helpIntroUI').button().on('click', function() {
MOB.dialog.kill($dialog);
$('#overlay').removeClass('visible');
$('#menu').removeClass('expanded');
......
This diff is collapsed.
......@@ -113,7 +113,7 @@
</div>
<div id="killDialog">
<div class="dialog">
<div class="dialogWithIcon">
<div class="icon">
<i class="icon-trash-empty danger huge"></i>
</div>
......@@ -128,23 +128,29 @@
</div>
<div id="questionDialog" title="Just answer the question">
<p class="ui">
<div class="dialog">
Yo!
</p>
</div>
</div>
<div id="helpDialog" title="Pétrolette">
<h1 class="translate"
data-title="What exactly is Pétrolette?"
data-content="What exactly is Pétrolette?">What exactly is Pétrolette?</h1>
<p class="translate ui"
data-content="Pétrolette is a news reader focused on preventing anyone to know what you are reading.">
Pétrolette is a news reader focused on preventing anyone to know what you are reading.
</p>
<div class="dialog">
<span class="translate ui"
data-content="Pétrolette is a news reader focused on preventing anyone to know what you are reading.">
Pétrolette is a news reader focused on preventing anyone to know what you are reading.
</span>
<button class="helpIntroUI translate"
data-content="Take the tour">
Take the tour
</button>
</div>
<h2 class="translate"
data-title="How does it work?"
data-content="How does it work?">How does it work?</h2>
<p class="ui">
<div class="dialog">
<span class="translate"
data-content="Pétrolette uses a time-tested technology">
Pétrolette uses a time-tested technology
......@@ -155,38 +161,83 @@
</span>
<h3 class="translate"
data-title="What is a group?"
data-content="What is a group?">What is a group?</h3>
data-content="Why didn't I have to register? Where are my groups and sources saved?">Why didn't I have to register? Where are my groups and sources saved?</h3>
<span class="translate"
data-content="Your sources are saved in your browser. Go ahead, try to visit http://petrolette.space with another web browser, and you'll see other sources.">
Your sources are saved in your browser. Go ahead, try to visit http://petrolette.space with another web browser, and you'll see other sources.
</span>
<h4 class="translate"
data-title="How can I view the same sources on all my devices (like my phone)?"
data-content="How can I view the same sources on all my devices (like my phone)?">How can I view the same sources on all my devices (like my phone)?</h4>
<span class="translate"
data-content="Two ways:">
Two ways:
</span>
<ul class="help">
<li class="export translate"
data-content="Use the «Export» button in the menu to save your sources file, then on the other device, use the «Import» button to load this file.">Use the «Export» button in the menu to save your sources file, then on the other device, use the «Import» button to load this file.</li>
<li class="cloud translate"
data-content="Or (recommended, much easier) use the synchronize button in the main menu to connect to the cloud (5Apps, DropBox and Google Drive, only 5Apps is enabled on this instance for now, but you should use it anyway as it is FLOSS software) Each change you make will then be reflected on all devices.">Or (recommended, much easier) use the synchronize button in the main menu to connect to the cloud (5Apps, DropBox and Google Drive, only 5Apps is enabled on this instance for now, but you should use it anyway as it is FLOSS software) Each change you make will then be reflected on all devices.</li>
</ul>
</div>
<h3 class="translate"
data-title="What is a group?"
data-content="What is a group?">What is a group?</h3>
<div class="dialog">
<span class="translate"
data-content="Just a container for your sources. Specifically, a tab that you can create, (re)name, move, and delete just like usual.">
Just a container for your sources. Specifically, a tab that you can create, (re)name, move, and delete just like usual.
</span>
<h3 class="translate"
data-title="What is a source?"
data-content="What is a source?">What is a source?</h3>
</div>
<h3 class="translate"
data-title="What is a source?"
data-content="What is a source? How do I create one?">What is a source? How do I create one?</h3>
<div class="dialog">
<span class="translate"
data-content="Click the «New source» button ; If you enter the URL of a valid source (see «RSS feed» above), such as «https://news.google.com/news/rss/rss» Petrolette will display it. Now, if you simply enter the URL of a website, like «https://www.rt.com», Petrolette will try to find the source of this website and display it. And finally, if you enter anything other than a URL, like the expression «bitcoin crash» or «zombie attack», Petrolette will build a source using a free and open source proxy search engine, which will display the latest news on fluctuations in digital currency (or incidents involving undead) every time you update it.">
Click the «New source» button ; If you enter the URL of a valid source (see «RSS feed» above), such as «https://news.google.com/news/rss/rss» Petrolette will display it. Now, if you simply enter the URL of a website, like «https://www.rt.com», Petrolette will try to find the source of this website and display it. And finally, if you enter anything other than a URL, like the expression «bitcoin crash» or «zombie attack», Petrolette will build a source using a free and open source proxy search engine, which will display the latest news on fluctuations in digital currency (or incidents involving undead) every time you update it.
data-content="Click the «New source» button.">
Click the «New source» button.
</span>
</p>
<ul class="help">
<li class="rss translate"
data-content="If you enter the URL of a valid source (see «RSS feed» above), such as «https://news.google.com/news/rss/rss» Petrolette will display it">If you enter the URL of a valid source (see «RSS feed» above), such as «https://news.google.com/news/rss/rss» Petrolette will display it</li>
<li class="www translate"
data-content="Now, if you simply enter the URL of a website, like «https://www.rt.com», Petrolette will try to find the source of this website and display it">Now, if you simply enter the URL of a website, like «https://www.rt.com», Petrolette will try to find the source of this website and display it</li>
<li class="search translate"
data-content="And finally, if you enter anything other than a URL, like the expression «bitcoin crash» or «zombie attack», Petrolette will build a source using a free and open source proxy search engine, which will display the latest news on fluctuations in digital currency (or incidents involving undead) every time you update it">And finally, if you enter anything other than a URL, like the expression «bitcoin crash» or «zombie attack», Petrolette will build a source using a free and open source proxy search engine, which will display the latest news on fluctuations in digital currency (or incidents involving undead) every time you update it</li>
</ul>
</div>
<h2 class="translate"
data-title="How do I use it?"
data-content="Ok, where do I start?">
Ok, where do I start?
</h2>
<p class="ui">
<span class="dialog translate"
data-content="Learn how to use">
Learn how to use
</span>
<button id="aide-un"
class="translate"
data-content="the groups and the sources">
the groups and the sources
</button>
<span class="dialog translate"
data-content="and Pétrolette in general.">and Pétrolette in general.</span>
</p>
Ok, where do I start?
</h2>
<div class="dialog">
<span class="dialog translate"
data-content="Learn how to use">
Learn how to use
</span>
<button class="helpIntroUI translate"
data-content="the groups and the sources">
the groups and the sources
</button>
<span class="dialog translate"
data-content="and Pétrolette in general.">and Pétrolette in general.</span>
</div>
</div>
<div id="editGroupDialog">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment