Commit f8c2907e authored by yPhil's avatar yPhil
Browse files

Big sideMenu refactoring + updated JS licences page

parent e81eefcb
Pipeline #396888 passed with stage
in 43 seconds
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?47708348');
src: url('../font/fontello.eot?47708348#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?47708348') format('woff2'),
url('../font/fontello.woff?47708348') format('woff'),
url('../font/fontello.ttf?47708348') format('truetype'),
url('../font/fontello.svg?47708348#fontello') format('svg');
src: url('../font/fontello.eot?96765373');
src: url('../font/fontello.eot?96765373#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?96765373') format('woff2'),
url('../font/fontello.woff?96765373') format('woff'),
url('../font/fontello.ttf?96765373') format('truetype'),
url('../font/fontello.svg?96765373#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?47708348#fontello') format('svg');
src: url('../font/fontello.svg?96765373#fontello') format('svg');
}
}
*/
......@@ -85,4 +85,6 @@
.icon-buoy:before { content: '\e828'; } /* '' */
.icon-video:before { content: '\e829'; } /* '' */
.icon-w3c:before { content: '\e830'; } /* '' */
.icon-sun:before { content: '\e832'; } /* '' */
.icon-moon:before { content: '\e833'; } /* '' */
.icon-reset:before { content: '\f831'; } /* '' */
\ No newline at end of file
......@@ -584,19 +584,6 @@ input {
padding: 0.4em;
}
/* div#searchPrefix { */
/* display: flex; */
/* } */
#searchPrefixInput {
box-sizing: border-box;
width: min-content;
flex-shrink: 1;
margin: 0 0.4em 0.4em 0;
}
.dead-center {
height: 300px;
left: 50%;
......@@ -659,10 +646,14 @@ nav#sideMenu,
border-color: var(--color-ui-qua);
}
nav#sideMenu .ui-button,
#sync-box {
margin-bottom: 0.3em;
}
/* nav#sideMenu .ui-button, */
/* #sync-box { */
/* margin-bottom: 0.3em; */
/* } */
/* .left { */
/* margin-right: 0.3em; */
/* } */
.results {
outline: 1px solid var(--color-fg7) !important;
......@@ -676,10 +667,6 @@ nav#sideMenu.expanded {
left: 0;
}
.left {
margin-right: 0.3em;
}
#progress-bar {
color: var(--color-ui-sec);
}
......@@ -807,13 +794,9 @@ fieldset.feedsMenuForm {
margin-right: 0;
}
.ui-button.last {
margin-right: 0;
}
.grow {
flex: 1 0 auto !important;
}
/* .ui-button.last { */
/* margin-right: 0; */
/* } */
.ui-widget-header,
th {
......@@ -935,6 +918,7 @@ ul.help li.cloud::before {
width: -moz-available; /* WebKit-based browsers will ignore this. */
width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
width: fill-available;
align-items: center;
}
.flex-box > label {
......@@ -946,18 +930,22 @@ ul.help li.cloud::before {
margin-top: 2px;
}
.grow {
margin: 0.1em;
flex: 1 1;
}
.shrink {
flex: 0 1 4em !important;
}
.unique {
flex: 1 100%;
margin-right: 0 !important;
}
.twin {
flex: 1;
}
/* .twin { */
/* flex: 1; */
/* } */
span.ui-spinner,
.last {
......@@ -1199,6 +1187,7 @@ i.feedIcon {
table tr {
padding: 0.5em;
text-align: left;
}
li.feed-item {
......
......@@ -199,6 +199,18 @@
"css": "reset",
"code": 63537,
"src": "mfglabs"
},
{
"uid": "95fb2e5fdd1ea7e4a420b6ed330e6b08",
"css": "sun",
"code": 59442,
"src": "meteocons"
},
{
"uid": "34e68aa8fbf61f02a748043ccf448a3b",
"css": "moon",
"code": 59443,
"src": "meteocons"
}
]
}
\ No newline at end of file
No preview for this file type
......@@ -66,6 +66,10 @@
<glyph glyph-name="w3c" unicode="&#xe830;" d="M0 84l0 766 1000 0 0-766-500-234z m84 461l63-275q3-14 17-14l47 0q14 0 18 14l23 113 21-113q4-14 18-14l49 0q14 0 17 14l61 275q2 10-3 16t-13 6l-50 0q-14 0-16-14l-23-121-26 121q-4 14-17 14l-38 0q-13 0-15-14l-26-121-25 121q-2 14-16 14l-50 0q-20 0-16-22z m344-242q37-51 103-53 45 2 76 30t32 68q-2 43-34 68 30 28 30 63-2 45-32 68t-72 24q-64 0-99-51-8-12 2-23l27-26q14-12 25 2 18 24 41 24 20 0 24-10 6-12 0-26-8-9-45-9-20 0-20-16l0-41q2-21 20-18 45 0 49-9t4-16q0-25-28-25-29 0-47 25-11 16-25 2l-29-29q-10-10-2-22z m232 108q0-73 36-117t95-44q70 0 104 75 3 19-10 23l-37 18q-6 2-14-1t-10-9q-12-29-33-29t-35 23-14 62 14 61 35 24q21-2 33-28 8-13 24-10l37 18q17 10 10 25-34 71-104 71-59 0-95-45t-36-117z" horiz-adv-x="1000" />
<glyph glyph-name="sun" unicode="&#xe832;" d="M94 350q0 13 9 22t22 9h62q14 0 23-9t9-22-9-23-23-8h-62q-14 0-22 8t-9 23z m119-287q-11 11-11 22t11 23l45 43q10 12 22 12l21-11q10-12 10-23t-10-21l-43-45q-12-11-23-11t-22 11z m0 529q-11 12-11 23t11 22 22 10 23-10l43-45q10-11 10-22t-10-21-22-11l-21 11z m68-242q0 90 65 154t154 64 154-64 64-154-64-154-154-65-154 65-65 154z m63 0q0-65 45-111t111-45 109 44q47 47 47 112t-46 110-110 46-111-46-45-110z m125-375v62q0 14 8 23t23 9 22-9 9-23v-62q0-14-9-23t-22-8-23 8-8 23z m0 687v63q0 13 8 22t23 9 22-9 9-22v-63q0-14-9-22t-22-9-23 9-8 22z m230-554q-11 10-11 21t11 22 21 10l22-10 45-43q10-12 10-23t-10-22-22-11-23 11z m0 441q-11 11-11 21t11 22l43 45q12 10 23 10t22-10 10-22-10-23l-45-43q-11-11-22-11z m82-199q0 13 9 22t22 9h63q13 0 22-9t9-22-9-23-22-8h-63q-14 0-22 8t-9 23z" horiz-adv-x="1000" />
<glyph glyph-name="moon" unicode="&#xe833;" d="M256 356q0 103 74 177 39 39 94 59 5 2 10 2 12 0 21-10t10-22q0-5-2-11-11-30-11-62 0-21 5-42 12-52 50-90t90-50q21-5 42-5 32 0 62 11 6 2 11 2 12 0 22-10t10-21q0-5-2-10-20-55-59-94-74-74-177-74t-177 73-73 177z m62 1q0-78 55-134 54-54 131-54 6 0 12 0 86 6 136 71-10 0-20 0-98 0-170 72t-72 170q0 10 0 20-10-6-17-14-55-54-55-131z" horiz-adv-x="1000" />
<glyph glyph-name="reset" unicode="&#xf831;" d="M0 350q0 95 37 182t100 149 150 100 182 37 182-37 149-100 100-149 37-182-37-182-100-150-149-100-182-37-182 37-150 100-100 150-37 182z m261-155q0-22 15-38 15-15 37-15 22 0 37 15l119 119 118-119q15-15 37-15 22 0 37 15 15 16 15 38t-15 37l-118 118 118 119q15 15 15 37t-15 37-37 15-37-15l-118-119-119 119q-15 15-37 15t-37-15q-15-15-15-37t15-37l118-119-118-118q-15-15-15-37z" horiz-adv-x="937.5" />
</font>
</defs>
......
No preview for this file type
......@@ -5,6 +5,57 @@ PTL.dialog = {
$dialog.dialog('destroy');
$('#dialogs').empty();
},
resetTabs:function($button) {
$('#dialogs').load('/static/templates/dialogs.html #questionDialog', function() {
console.log('plop: %s (%s)');
var $dialog = $(this),
$icon = $dialog.find('div.dialogImage > i');
$icon.addClass('icon-trash-empty danger');
$dialog.dialog({
title: PTL.tr('Hard reset'),
buttons: [
{
text: PTL.tr('Cancel'),
title: PTL.tr('Cancel'),
class: 'translate',
click: function() {
PTL.dialog.kill($dialog);
}
},
{
text: PTL.tr('Reset'),
title: PTL.tr('Wait! Are you sure?'),
class: 'dangerous translate',
click: function() {
localStorage.clear();
PTL.util.say(PTL.tr('All tabs and feeds restored to defaults'), 'success', true);
PTL.dialog.kill($dialog);
}
}
],
open: function () {
$('.ui-widget-overlay').on('click', function() {
PTL.dialog.kill($dialog);
});
$dialog.find('h1').text(PTL.tr('Reset all tabs and feeds to defaults'));
$dialog.find('h2#name').text(PTL.tr('Warning'));
$dialog.find('p#name').text(PTL.tr('This operation cannot be undone') + '.');
}
});
$dialog.dialog('open');
});
},
beg:function() {
$('#dialogs').load('/static/templates/dialogs.html #beggarDialog', function() {
......@@ -699,8 +750,6 @@ PTL.dialog = {
$('#dialogs').load('/static/templates/dialogs.html #questionDialog', function() {
console.log('plop: %s (%s)');
var $dialog = $(this),
$thisFeed = $button.parent().parent().parent().parent(),
thisFeedId = $button.parent().parent().parent().parent().attr('id'),
......
......@@ -49,6 +49,7 @@ PTL.i18n.translations = {
"Position": { fr: "Position", ja: "ポジション", es: "Posición" },
"Menu": { fr: "Menu", ja: "メニュー", es: "Menú" },
"Sorry": { fr: "Désolé", ja: "ごめんなさい", es: "Perdón" },
"Warning": { fr: "Avertissement", ja: "警告", es: "Advertencia" },
// Pétrolette
......@@ -343,33 +344,23 @@ PTL.i18n.translations = {
"and Pétrolette in general." : { fr: "et Pétrolette en général." , ja: "Pétroletteの使い方を学んでください。", es: "y Pétrolette en general." },
"the tabs and the feeds" : { fr: "les onglets et les flux" , ja: "フォルダとフィード", es: "las carpetas y las fuentes" },
"Open / import tabs and feeds" : { fr: "Ouvrir / importer onglets et flux" , ja: "フォルダとフィードを開く/インポートする", es: "Abrir / importar carpetas y canales RSS" },
"Save / export tabs and feeds" : { fr: "Enregistrer / exporter onglets et flux" , ja: "タブとフィードを保存/エクスポートする", es: "Guardar archivo de carpetas y feeds" },
"Reset all tabs and feeds to defaults" : { fr: "Réinitialiser tous les onglets et flux aux valeurs par défaut" , ja: "すべてのタブとフィードをデフォルトにリセットします", es: "Restablecer todas las pestañas y fuentes a los valores predeterminados" },
// Profile
"Are you" : { fr: "Es-tu" , ja: "あなたは", es: "¿Eres un" },
"a FASCIST" : { fr: "un FASCISTE" , ja: "ファシスト", es: "un FASCISTA" },
"a LEFTIST" : { fr: "un GAUCHISTE" , ja: "左派", es: "un IZQUIERDISTA" },
"ALL OF THAT" : { fr: "TOUT ÇA À LA FOIS" , ja: "すべての", es: "TODO DE ESO" },
"NONE OF THAT" : { fr: "RIEN DE TOUT ÇA" , ja: "そのどれも", es: "NADA DE ESO" },
"What? No" : { fr: "Quoi? Non" , ja: "何? いいえ", es: "¿Qué? No" },
"Hell, Yeah" : { fr: "Peste, Ouais" , ja: "地獄、うん。", es: "Diablos, Sí" },
"Huh, Next question" : { fr: "Euh, Question suivante" , ja: "あ、次の質問", es: "Eh, Siguiente pregunta" },
"Reset" : { fr: "Réinitialiser" , ja: "リセット", es: "Restablecer" },
"Open / import tabs and feeds" : { fr: "Ouvrir / importer onglets et flux" , ja: "フォルダとフィードを開く/インポートする", es: "Abrir / importar carpetas y canales RSS" },
"Save / export tabs and feeds" : { fr: "Enregistrer / exporter onglets et flux" , ja: "タブとフィードを保存/エクスポートする", es: "Guardar archivo de carpetas y feeds" },
"This operation cannot be undone" : { fr: "Cette opération ne peut pas être annulée" , ja: "この操作は元に戻せません", es: "Esta operación no se puede deshacer" },
"Open group on feed drop" : { fr: "Ouvrir nouveau groupe" , ja: "ドロップ時にタブを開く", es: "Abrir grupo en drop" },
"All tabs and feeds restored to defaults" : { fr: "Tous les onglets et flux restaurés aux valeurs par défaut" , ja: "すべてのタブとフィードがデフォルトに復元されました", es: "Todas las pestañas y fuentes restaurados a los valores predeterminados" },
"If this is set, when you drag & drop one or more feed(s) in a group, said group opens" : { fr: "Ouvrir le groupe où un flux est déposée" , ja: "魔法使いのタブを開いて餌を入れる", es: "Abrir grupo en donde se pone un canal" },
// Messages d'erreurs
"Empty feed" : { fr: "Source vide" , ja: "空のソース", es: "fuente vacía" },
"View Pétrolette according to the time of day." : { fr: "Voir Pétrolette selon l'heure de la journée." , ja: "時刻に応じてPétroletteを表示する", es: "Ver Pétrolette según la hora del día." },
"Reset Pétrolette according to your political mood of the week." : { fr: "Réinitialiser Pétrolette selon votre humeur politique de la semaine." , ja: "今週のあなたの政治的な気分に合わせてPétroletteをリセットする", es: "Restablece Pétrolette según tu estado de ánimo político de la semana." },
"When you click an image, you can view it in a gallery, and start a slideshow." : { fr: "Un clic sur une image l'affiche dans une galerie." , ja: "イメージをクリックすると、ギャラリーでそのイメージを表示し、スライドショーを開始できます", es: "Cuando hace clic en una imagen, puede verla en una galería." },
"Help Pétrolette according to your spiritual mood of the day." : { fr: "Aider (en vrai) Pétrolette." , ja: "あなたの精神的な日の気分に応じてPétroletteを助けてください", es: "Ayuda a Pétrolette de acuerdo con tu estado de ánimo espiritual del día." },
"This file is bad [%1]" : { fr: "Ce fichier est chelou [%1]" , ja: "[%1]このファイルは悪いです", es: "Este archivo es malo [%1]" },
......
......@@ -16,6 +16,7 @@ var PTL = (function() {
$importButton = $("button#fileImportButton"),
$fileImportInput = $("input#fileImport"),
$saveButton = $('#saveTabs'),
$resetButton = $('#resetTabs'),
$langMenu = $('select#language'),
$slider = $('div#gallerySpeedSlider'),
$searchField = $('#ptlSearch input').val(''),
......@@ -167,10 +168,14 @@ var PTL = (function() {
return false;
});
$resetButton.click(function () {
PTL.dialog.resetTabs();
});
var $themeBox = $('div#themeBox'),
$dayLabel = $('<label>')
.attr('for', 'day')
.attr('class', 'translate left')
.attr('class', 'translate grow')
.data('content', PTL.tr('Day'))
.text(PTL.tr('Day')),
$dayInput = $('<input>')
......@@ -181,7 +186,7 @@ var PTL = (function() {
.attr('value', 'day'),
$nightLabel = $('<label>')
.attr('for', 'night')
.attr('class', 'translate last')
.attr('class', 'translate grow')
.data('content', PTL.tr('Night'))
.text(PTL.tr('Night')),
$nightInput = $('<input>')
......@@ -206,7 +211,7 @@ var PTL = (function() {
var $brokenImagesBox = $('div#brokenImagesBox'),
$showLabel = $('<label>')
.attr('class', 'translate left')
.attr('class', 'translate grow')
.attr('for', 'show')
.data('content', PTL.tr('Show'))
.text(PTL.tr('Show')),
......@@ -217,7 +222,7 @@ var PTL = (function() {
.attr('name', 'radio-2')
.attr('value', 'show'),
$hideLabel = $('<label>')
.attr('class', 'translate last')
.attr('class', 'translate grow')
.attr('for', 'hide')
.data('content', PTL.tr('Hide'))
.text(PTL.tr('Hide')),
......@@ -294,7 +299,7 @@ var PTL = (function() {
$slider.slider({
classes: {
"ui-slider": "grow ui-corner-all",
"ui-slider": "ui-corner-all",
"ui-slider-handle": "ui-corner-all",
"ui-slider-range": "ui-corner-all ui-widget-header"
},
......
......@@ -437,10 +437,6 @@ PTL.util = {
element: 'fieldset#galleryBox',
intro: PTL.tr('When you click an image, you can view it in a gallery, and start a slideshow.')
},
{
element: 'button#profile',
intro: PTL.tr('Reset Pétrolette according to your political mood of the week.')
},
{
element: 'button#donate',
intro: PTL.tr('Help Pétrolette according to your spiritual mood of the day.')
......
......@@ -152,17 +152,17 @@
<nav style="display:none;" id="sideMenu" class="menu">
<div id="sideMenu" class="plip">
<div id="sideMenu">
<legend class="ui-corner-top hover first">
<legend class="ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Language">Language
</span>
</legend>
<fieldset class="menuForm">
<fieldset class="menuForm flex-box">
<select id="language"
class="unique translate"
class="grow translate"
name="language"
data-title="Language"
title="Language">
......@@ -243,7 +243,8 @@
<legend class="ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Feeds">Feeds
data-content="Feeds">
Feeds
</span>
</legend>
<fieldset class="feedsMenuForm">
......@@ -252,22 +253,35 @@
type="file"
style="display: none;" />
<button id="fileImportButton"
class="grow translate left"
data-title="Open / import tabs and feeds"
data-content="Open">
class="grow translate"
data-title="Open / import tabs and feeds">
<i class="icon-upload"></i>
Open
<span class="translate"
data-content="Open">
Open
</span>
</button>
<button id="saveTabs"
class="grow translate last"
data-title="Save / export tabs and feeds"
data-content="Save">
class="grow translate"
data-title="Save / export tabs and feeds">
<i class="icon-download"></i>
Save
<span class="translate"
data-content="Save">
Save
</span>
</button>
<button id="resetTabs"
class="grow translate"
data-title="Reset all tabs and feeds to defaults">
<i class="icon-refresh"></i>
<span class="translate"
data-content="Reset">
Reset
</span>
</button>
</div>
<div id="sync-box"></div>
<div id="progress-bar"><div class="progress-label"></div></div>
<div id="sync-box" class="grow"></div>
<div id="progress-bar" class="grow"><div class="progress-label"></div></div>
</fieldset>
<legend class="ui-corner-top hover">
......@@ -321,11 +335,11 @@
</div>
<label for="spinner" class="ui-helper-hidden">Select a value:</label>
<input id="gallerySpeedSpinner"
class="translate shrink"
data-title="Slideshow speed"
class="translate"
name="value">
<select id="gallerySlideTransition"
class="unique translate"
class="grow unique translate"
data-title="Slide transition">
<option class="translate"
data-content="None"
......@@ -360,16 +374,15 @@
</legend>
<fieldset class="menuForm">
<div class="flex-box">
<!-- <input type="text" id="searchPrefix" class="grow" /> -->
<input name="searchPrefix"
id="searchPrefixInput"
class="unique ui-widget-content ui-corner-all translate"
class="unique grow ui-widget-content ui-corner-all translate"
placeholder="Search prefix"
data-title="Search prefix"
title="Search prefix"
value="" />
<button id="searchPrefixOkButton"
class="translate ui-button ui-corner-all ui-widget left"
class="shrink translate ui-button ui-corner-all ui-widget"
data-title="OK"
data-content="OK"
title="OK"
......@@ -380,7 +393,7 @@
<button id="searchPrefixRestoreButton"
data-title="Restore default search prefix"
data-content="Restore default"
class="last grow translate ui-button ui-corner-all"
class="grow translate ui-button ui-corner-all"
type="button"
title="Restore default search prefix">
Restore default
......@@ -412,11 +425,13 @@
</span>
</legend>
<fieldset class="menuForm ui-widget-content">
<div
class="unique"
data-title="Click to toggle"
title="Click to toggle"
id="console">
<div class="flex-box">
<div
class="grow"
data-title="Click to toggle"
title="Click to toggle"
id="console">
</div>
</div>
</fieldset>
</div>
......@@ -430,7 +445,6 @@
</ul>
</div>
<noscript>
<div id="no-script">
<h1 color="blue">Pétrolette</h1>
......@@ -491,5 +505,6 @@
</div>
<script async src="/bower/responsively-lazy/responsivelyLazy.min.js"></script>
</body>
</html>
......@@ -33,16 +33,33 @@
<body id="js">
<div id="logo-title">
<div class="logo-title">
<a href="/">Pétrolette</a>
</div>
<div class="logoType">
<a href="/">
<i class="icon-petrolette"></i>
</a>
<nav id="top-menu" class="menu">
<div class="topnav" id="topnav">
<div id="menuButton"
class="menuBarItem menuBarButton translate js-enabled-only navLeft"
title="Main menu"
data-title="Main menu">
<i class="icon-menu topMenuIcon"></i>
</div>
<div class="menuBarItem navCenter">
</div>
<div id="logo-title"
class="navRight"
title="Pétrolette">
<div class="logo-title">
<a href="/">Pétrolette</a>
</div>
<div class="logoType">
<i class="icon-petrolette"></i>
</div>
</div>
</div>
</div>
</nav>
<h1>JavaScript license information</h1>
......@@ -71,7 +88,7 @@
<tr>
<td><a href="/bower/DOMPurify/dist/purify.min.js">purify.min.js</a></td>
<td><a href="/bower/DOMPurify/LICENSE">Apache License Version 2.0 / Mozilla Public License Version 2.0</a></td>
<td><a href="/bower/DOMPurify/src/purify.js">remotestorage.js</a></td>
<td><a href="/bower/DOMPurify/src/purify.js">purify.js</a></td>
</tr>
<tr>
......
Supports Markdown
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