Commit 5fb26376 authored by yPhil's avatar yPhil
Browse files

Flex menu OK + search field proto OK

parent 27411c35
......@@ -59,7 +59,7 @@
@media screen and (max-width: 700px) {
:root {
--side-menu-width-expanded: 100%;
--side-menu-width-expanded: 90%;
--side-menu-width: -999px;
--header-height: 2.2em;
--controls-width: 75%;
......@@ -123,10 +123,6 @@ a:active {
font-size: 12pt;
}
.topnav i {
transition: all 0.2s linear;
}
.fold {
display: inline-block;
......@@ -140,12 +136,14 @@ a:active {
transform: rotate(90deg);
}
/* MenuBar */
/* TOP Menu navBar */
.topnav {
position: relative;
/* position: relative; */
z-index: 20;
background-color: var(--color-ui-qua);
display: flex;
flex-direction: row;
/* color: var(--color-ui-sec); */
overflow: hidden;
height: 45px;
......@@ -154,19 +152,93 @@ a:active {
.topnav > div.menuBarItem {
color: var(--color-ui-pri);
cursor: pointer;
float: left;
margin: 0;
min-width: 60px;
padding: 16px 6px;
position: relative;
text-align: center;
}
.topnav .navLeft {
order: 1;
}
.topnav .navCenter {
order: 2;
flex-grow: 5;
}
.topnav .navRight {
order: 3;
}
.topnav > div.menuBarItem > i {
display: block;
color: var(--color-ui-sec);
font-size: 16pt;
margin: 8px 8px 8px 12px;
}
.topnav > div.menuBarItem > input {
margin: 8px 8px 8px 12px;
}
.topnav > div.menuBarItem:hover {
background-color: var(--color-ui-qua);
}
.topnav > div.menuBarItem:hover i {
color: var(--color-ui-pri);
}
.topnav > div.menuBarItem:hover .text {
/* display: none; */
visibility: hidden;
}
.topnav > div.menuBarItem > .text {
position: relative;
z-index: 10;
}
div#logo-title {
display: flex;
}
.icon-petrolette {
color: var(--color-ui-sec);
}
.logoType i.icon-petrolette {
display: block;
cursor: pointer;
font-size: 24pt;
margin: 6px 12px 6px 6px;
color: var(--color-ui-sec);
}
i.icon-petrolette:hover,
i.icon-petrolette.writing {
color: var(--color-ui-pri);
}
i.icon-petrolette::before {
font-style: italic !important;
}
i.icon-petrolette:hover {
font-style: normal !important;
}
div#logo-title > div {
flex: 1 0;
}
div#logo-title > .logo-title {
color: var(--color-ui-pri);
display: var(--logo-display);
font-family: LobsterRegular, Helvetica, Arial, sans-serif;
font-size: 36pt;
}
.introjs-tooltiptext a {
color: var(--color-ui-sen) !important;
}
......@@ -185,32 +257,10 @@ a:active {
color: var(--color-fg1);
}
.topnav > div.menuBarItem > i {
color: var(--color-ui-qua);
font-size: 32pt;
left: 21px;
position: absolute;
top: 0;
z-index: 5;
}
.ui-tab.ui-state-active i:hover {
color: var(--color-fg2);
}
.topnav > div.menuBarItem:hover .text {
/* display: none; */
visibility: hidden;
}
.topnav > div.menuBarItem:hover {
background-color: var(--color-ui-qua);
}
.topnav > div.menuBarItem:hover i {
color: var(--color-ui-sec);
}
[class ^= "icon-"]::before,
[class *= " icon-"]::before {
display: initial;
......@@ -591,7 +641,7 @@ nav#sideMenu {
border: none;
height: 100%;
left: var(--side-menu-width);
padding: 45px 0 0 0;
padding: 0;
position: fixed;
top: 0;
transition: left 0.1s ease-out;
......@@ -603,7 +653,7 @@ nav#sideMenu {
}
nav#sideMenu,
#topnav,
.topnav,
.ui-dialog,
.ui-dialog .ui-dialog-buttonpane {
background: var(--color-ui-qua);
......@@ -732,10 +782,18 @@ fieldset.feedsMenuForm {
background-color: var(--color-ui-qua) !important;
}
.ui-button:not(.ui-spinner-button, .feedGuessButton, .feedErrorReportButton) {
/* .ui-button:not(.ui-spinner-button, .feedGuessButton, .feedErrorReportButton) { */
/* margin-right: 0.4em; */
/* } */
.buttonLeft {
margin-right: 0.4em;
}
.buttonRight {
margin-left: 0.4em;
}
.rs-button {
margin-right: 0;
}
......@@ -881,10 +939,6 @@ ul.help li.cloud::before {
flex-grow: 4;
}
nav#sideMenu .flex-box > * {
margin-bottom: 0.4em;
}
#gallerySlideTransition {
margin-top: 2px;
}
......@@ -963,14 +1017,6 @@ label:last-child {
margin: 0 0.2em;
}
/* .column:first-child { margin-left: 0 !important; } */
/* .column:last-child { margin-right: 0 !important; } */
.new-feed-button {
margin-bottom: 0 !important;
}
.ui-dialog.ui-corner-all {
border-radius: 0 !important;
}
......@@ -1326,47 +1372,6 @@ div.fancybox-caption a.ui-button.ui-corner-all:hover {
background-color: #EDEDED;
}
div#logo-title {
display: flex;
float: right;
}
.icon-petrolette {
color: var(--color-ui-sec);
}
.logoType i.icon-petrolette {
display: block;
cursor: pointer;
font-size: 24pt;
margin: 6px 12px 6px 6px;
color: var(--color-ui-sec);
}
i.icon-petrolette:hover,
i.icon-petrolette.writing {
color: var(--color-ui-pri);
}
i.icon-petrolette::before {
font-style: italic !important;
}
i.icon-petrolette:hover {
font-style: normal !important;
}
div#logo-title > div {
flex: 1 0;
}
div#logo-title > .logo-title {
color: var(--color-ui-pri);
display: var(--logo-display);
font-family: LobsterRegular, Helvetica, Arial, sans-serif;
font-size: 36pt;
}
#liberapay {
flex-wrap: nowrap;
}
......@@ -1491,3 +1496,50 @@ video {
div.itemDiv {
max-width: auto;
}
#ptlSearch {
display: flex;
flex-direction: row;
}
#ptlSearch .ptlSearchButton {
flex: 1;
}
#ptlSearch input {
transition: opacity 0.2s linear;
flex: 2;
}
/* .ptlSearch .search { */
/* width: 100%; */
/* display: flex; */
/* } */
/* .ptlSearch .searchTerm { */
/* width: 100%; */
/* border: 1px solid var(--color-ui-qua); */
/* background-color: var(--color-ui-qua); */
/* border-right: none; */
/* border-radius: 3px 0 0 3px; */
/* outline: none; */
/* color: var(--color-ui-pri); */
/* } */
/* .ptlSearch .searchTerm:focus { */
/* color: var(--color-ui-sec); */
/* border: 1px solid var(--color-ui-qui); */
/* background-color: var(--color-ui-pri); */
/* } */
/* .ptlSearch .searchButton { */
/* width: 40px; */
/* /\* height: 15px; *\/ */
/* border: 1px solid var(--color-ui-qui); */
/* background: var(--color-ui-qua); */
/* text-align: center; */
/* color: var(--color-ui-pri); */
/* border-radius: 0 3px 3px 0; */
/* cursor: pointer; */
/* /\* font-size: 20px; *\/ */
/* } */
......@@ -120,7 +120,6 @@ PTL.dialog = {
$dialog.dialog({
title: isNewFeed ? PTL.tr('New feed') : PTL.tr('Feed'),
width: 600,
buttons: [
{
text: PTL.tr('Cancel'),
......
......@@ -58,6 +58,12 @@ var PTL = (function() {
$(this).next().toggle(50);
});
$('#ptlSearch').hover(function() {
$(this).children('input').css({'opacity': '1'});
}, function() {
$(this).children('input').css({'opacity': '0'});
});
PTL.sync.attachWidget();
$('button').button();
......
......@@ -111,38 +111,42 @@
<div class="topnav" id="topnav">
<div id="menuButton"
class="menuBarItem logoType translate js-enabled-only"
class="menuBarItem translate js-enabled-only navLeft"
title="Set Pétrolette preferences/options"
data-title="Set Pétrolette preferences/options">
<i class="logoType icon-menu"></i>
<span class="text translate"
data-content="Menu">
Menu
</span>
</div>
<div class="menuBarItem logoType translate help-button js-enabled-only"
title="Documentation"
data-title="Documentation">
<i class="logoType icon-question"></i>
<span class="text translate"
data-content="Help">
Help
</span>
<i class="icon-menu"></i>
<!-- <span class="text translate"
data-content="Menu">
Menu
</span> -->
</div>
<div id="newFeedButton"
class="menuBarItem logoType translate new-feed-button js-enabled-only"
class="menuBarItem translate new-feed-button js-enabled-only navLeft"
title="Add a feed"
data-title="Add a feed">
<i class="logoType icon-plus"></i>
<span class="text translate"
data-content="Feed">
Feed
</span>
<i class="icon-plus"></i>
<!-- <span class="text translate"
data-content="Feed">
Feed
</span> -->
</div>
<div id="ptlSearch" class="menuBarItem navLeft">
<i class="icon-search"></i>
<input
class="ui-widget-content ui-corner-all translate"
style="opacity:0"
type="text"
placeholder="What are you looking for?">
</div>
<div class="menuBarItem navCenter">
</div>
<div id="logo-title" title="Pétrolette <%= version %>">
<div id="logo-title"
class="navRight"
title="Pétrolette <%= version %>">
<div class="logo-title">
<a href="#">Pétrolette</a>
</div>
......@@ -154,12 +158,51 @@
</div>
</nav>
<nav style="display:none;" id="sideMenu" class="menu">
<div id="sideMenu" class="plip">
<legend class="ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Help">Help
</span>
</legend>
<fieldset class="menuForm ui-widget ui-widget-content ui-corner-all">
<div class="flex-box">
<a href="https://framagit.org/yphil/petrolette"
class="ui-button ui-widget ui-corner-all unique translate"
data-title="Use the force - read the Source"
title="Use the force - read the Source"
data-content="Source code">
Source code
</a>
<button id="help"
class="grow translate help-button"
data-title="Documentation"
data-content="Help"
title="Documentation">
Help
</button>
<a href="https://liberapay.com/yPhil/donate"
class="ui-button ui-widget ui-corner-all translate last"
data-title="Send your love to Pétrolette"
title="Send your love to Pétrolette"
data-content="Donate">
Donate
</a>
<a href="/about/javascript"
data-jslicense="1"
class="ui-button ui-widget ui-corner-all unique translate"
data-title="JavaScript license information"
title="JavaScript license information"
data-content="JS Licences">
JS Licence info
</a>
</div>
</fieldset>
<legend class="ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
......@@ -304,48 +347,6 @@
</div>
</fieldset>
<legend class="ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
data-content="Help">Help
</span>
</legend>
<fieldset class="menuForm ui-widget ui-widget-content ui-corner-all">
<div class="flex-box">
<a href="https://framagit.org/yphil/petrolette"
class="ui-button ui-widget ui-corner-all unique translate"
data-title="Use the force - read the Source"
title="Use the force - read the Source"
data-content="Source code">
Source code
</a>
<button id="help"
class="grow translate help-button"
data-title="Documentation"
data-content="Help"
title="Documentation">
Help
</button>
<a href="https://liberapay.com/yPhil/donate"
class="ui-button ui-widget ui-corner-all translate last"
data-title="Send your love to Pétrolette"
title="Send your love to Pétrolette"
data-content="Donate">
Donate
</a>
<a href="/about/javascript"
data-jslicense="1"
class="ui-button ui-widget ui-corner-all unique translate"
data-title="JavaScript license information"
title="JavaScript license information"
data-content="JS Licences">
JS Licence info
</a>
</div>
</fieldset>
<legend class="ui-corner-top hover">
<i class="icon-right rotate unfold"></i>
<span class="translate"
......
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