Skip to content

Commit

Permalink
first go at styling
Browse files Browse the repository at this point in the history 
This removes a lot of reudundant CSS classes in favor of cascading
selectors. Styling isn't done, yet this is just a first step.

Still to do:

* aria labels
* styling the toggle mechanism
* RTL styling
* making sure everything displays correct when no JS is available
* translations may be missing
* refactoring the rest of search.less to make use of LESS features
  • Loading branch information
@splitbrain
splitbrain committed Mar 27, 2018
1 parent 16ece95 commit 4bdf82b
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 72 deletions.
60 changes: 30 additions & 30 deletions inc/Ui/Search.php
View file
Expand Up @@ -78,7 +78,7 @@ protected function getSearchFormHTML($query)
if ($INPUT->has('srt')) {
$searchForm->setHiddenField('srt', $INPUT->str('srt'));
}
$searchForm->addFieldsetOpen()->addClass('search-results-form__fieldset');
$searchForm->addFieldsetOpen()->addClass('search-form');
$searchForm->addTextInput('q')->val($query)->useInput(false);
$searchForm->addButton('', $lang['btn_search'])->attr('type', 'submit');

Expand Down Expand Up @@ -111,23 +111,23 @@ protected function addSortTool(Form $searchForm)
$activeOption = 'mtime';
}

$searchForm->addTagOpen('div')->addClass('search-tool js-search-tool');
$searchForm->addTagOpen('div')->addClass('toggle');
// render current
$currentWrapper = $searchForm->addTagOpen('div')->addClass('search-tool__current js-current');
$currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
if ($activeOption !== 'hits') {
$currentWrapper->addClass('search-tool__current--changed');
$currentWrapper->addClass('changed');
}
$searchForm->addHTML($options[$activeOption]['label']);
$searchForm->addTagClose('div');

// render options list
$searchForm->addTagOpen('ul')->addClass('search-tool__options-list js-optionsList');
$searchForm->addTagOpen('ul');

foreach ($options as $key => $option) {
$listItem = $searchForm->addTagOpen('li')->addClass('search-tool__options-list-item');
$listItem = $searchForm->addTagOpen('li');

if ($key === $activeOption) {
$listItem->addClass('search-tool__options-list-item--active');
$listItem->addClass('active');
$searchForm->addHTML($option['label']);
} else {
$this->searchState->addSearchLinkSort(
Expand Down Expand Up @@ -171,13 +171,13 @@ protected function isFragmentAssistanceAvailable(array $parsedQuery) {
*/
protected function addSearchAssistanceElements(Form $searchForm)
{
// FIXME localize
$searchForm->addButton('toggleAssistant', 'toggle search assistant')
->attr('type', 'button')
->id('search-results-form__show-assistance-button')
->addClass('search-results-form__show-assistance-button');
->addClass('toggleAssistant');

$searchForm->addTagOpen('div')
->addClass('js-advancedSearchOptions')
->addClass('advancedOptions')
->attr('style', 'display: none;');

$this->addFragmentBehaviorLinks($searchForm);
Expand Down Expand Up @@ -247,23 +247,23 @@ protected function addFragmentBehaviorLinks(Form $searchForm)
]], $options);
}

$searchForm->addTagOpen('div')->addClass('search-tool js-search-tool');
$searchForm->addTagOpen('div')->addClass('toggle');
// render current
$currentWrapper = $searchForm->addTagOpen('div')->addClass('search-tool__current js-current');
$currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
if ($activeOption !== 'exact') {
$currentWrapper->addClass('search-tool__current--changed');
$currentWrapper->addClass('changed');
}
$searchForm->addHTML($options[$activeOption]['label']);
$searchForm->addTagClose('div');

// render options list
$searchForm->addTagOpen('ul')->addClass('search-tool__options-list js-optionsList');
$searchForm->addTagOpen('ul');

foreach ($options as $key => $option) {
$listItem = $searchForm->addTagOpen('li')->addClass('search-tool__options-list-item');
$listItem = $searchForm->addTagOpen('li');

if ($key === $activeOption) {
$listItem->addClass('search-tool__options-list-item--active');
$listItem->addClass('active');
$searchForm->addHTML($option['label']);
} else {
$this->searchState->addSearchLinkFragment(
Expand Down Expand Up @@ -298,23 +298,23 @@ protected function addNamespaceSelector(Form $searchForm)
$baseNS = empty($this->parsedQuery['ns']) ? '' : $this->parsedQuery['ns'][0];
$extraNS = $this->getAdditionalNamespacesFromResults($baseNS);

$searchForm->addTagOpen('div')->addClass('search-tool js-search-tool');
$searchForm->addTagOpen('div')->addClass('toggle');
// render current
$currentWrapper = $searchForm->addTagOpen('div')->addClass('search-tool__current js-current');
$currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
if ($baseNS) {
$currentWrapper->addClass('search-tool__current--changed');
$currentWrapper->addClass('changed');
$searchForm->addHTML('@' . $baseNS);
} else {
$searchForm->addHTML($lang['search_any_ns']);
}
$searchForm->addTagClose('div');

// render options list
$searchForm->addTagOpen('ul')->addClass('search-tool__options-list js-optionsList');
$searchForm->addTagOpen('ul');

$listItem = $searchForm->addTagOpen('li')->addClass('search-tool__options-list-item');
$listItem = $searchForm->addTagOpen('li');
if ($baseNS) {
$listItem->addClass('search-tool__options-list-item--active');
$listItem->addClass('active');
$this->searchState->addSeachLinkNS(
$searchForm,
$lang['search_any_ns'],
Expand All @@ -326,11 +326,11 @@ protected function addNamespaceSelector(Form $searchForm)
$searchForm->addTagClose('li');

foreach ($extraNS as $ns => $count) {
$listItem = $searchForm->addTagOpen('li')->addClass('search-tool__options-list-item');
$listItem = $searchForm->addTagOpen('li');
$label = $ns . ($count ? " ($count)" : '');

if ($ns === $baseNS) {
$listItem->addClass('search-tool__options-list-item--active');
$listItem->addClass('active');
$searchForm->addHTML($label);
} else {
$this->searchState->addSeachLinkNS(
Expand Down Expand Up @@ -416,23 +416,23 @@ protected function addDateSelector(Form $searchForm)
}
}

$searchForm->addTagOpen('div')->addClass('search-tool js-search-tool');
$searchForm->addTagOpen('div')->addClass('toggle');
// render current
$currentWrapper = $searchForm->addTagOpen('div')->addClass('search-tool__current js-current');
$currentWrapper = $searchForm->addTagOpen('div')->addClass('current');
if ($INPUT->has('dtb') || $INPUT->has('dta')) {
$currentWrapper->addClass('search-tool__current--changed');
$currentWrapper->addClass('changed');
}
$searchForm->addHTML($options[$activeOption]['label']);
$searchForm->addTagClose('div');

// render options list
$searchForm->addTagOpen('ul')->addClass('search-tool__options-list js-optionsList');
$searchForm->addTagOpen('ul');

foreach ($options as $key => $option) {
$listItem = $searchForm->addTagOpen('li')->addClass('search-tool__options-list-item');
$listItem = $searchForm->addTagOpen('li');

if ($key === $activeOption) {
$listItem->addClass('search-tool__options-list-item--active');
$listItem->addClass('active');
$searchForm->addHTML($option['label']);
} else {
$this->searchState->addSearchLinkTime(
Expand Down
20 changes: 10 additions & 10 deletions lib/scripts/search.js
View file
Expand Up @@ -5,25 +5,25 @@ jQuery(function () {
if (!$searchForm.length) {
return;
}
if (!$searchForm.find('#search-results-form__show-assistance-button').length){

const $toggleAssistanceButton = $searchForm.find('button.toggleAssistant');
if (!$toggleAssistanceButton.length){
return;
}
const $toggleAssistanceButton = $searchForm.find('#search-results-form__show-assistance-button');

$toggleAssistanceButton.on('click', function () {
jQuery('.js-advancedSearchOptions').toggle();
DokuCookie.setValue('showSearchAssistant', !DokuCookie.getValue('showSearchAssistant'));
jQuery('.advancedOptions').toggle();
DokuCookie.setValue('sa', !DokuCookie.getValue('sa'));
});

if (DokuCookie.getValue('showSearchAssistant')) {
if (DokuCookie.getValue('sa')) {
$toggleAssistanceButton.click();
}

$searchForm.find('.js-search-tool .js-current').on('click', function() {
$searchForm.find('.js-current').show();
$searchForm.find('.js-optionsList').hide();
jQuery(this).hide();
jQuery(this).next('.js-optionsList').show();
$searchForm.find('.advancedOptions .toggle div.current').on('click', function() {
var $me = jQuery(this);
$me.parent().siblings().removeClass('open');
$me.parent().toggleClass('open');
});

});
94 changes: 63 additions & 31 deletions lib/tpl/dokuwiki/css/_search.css → lib/tpl/dokuwiki/css/_search.less
View file
Expand Up @@ -12,37 +12,69 @@
margin-bottom: 1.4em;
}

.search-results-form .search-results-form__fieldset {
width: 80%;
}

.search-results-form__show-assistance-button {
float: right;
}

.search-results-form__no-assistance-message {
color: grey;
float: right;
font-size: 80%;
margin-top: -0.3em;
}

.search-tool__current {
cursor: pointer;
}

.search-tool__current--changed {
font-weight: bold;
}

.search-tool__options-list {
display: none;

border: 1px solid @ini_border;
}

.search-tool__options-list-item {
list-style: none;
.search-results-form fieldset.search-form {
width: 100%;

input[name="q"] {
width: 50%;
}

button.toggleAssistant {
float: right;
}

.advancedOptions {
padding: 1em 0;

div {
display: inline-block;
position: relative;
margin: 0 0.25em 0 0.5em;
}

div.toggle {
// default closed toggle state
&::after {
content: '▼';
font-size: smaller;
color: @ini_text_alt;
}
div.current {
cursor: pointer;
}
div.changed {
font-weight: bold;
}
ul {
display: none;
position: absolute;
border: 1px solid @ini_border;
background-color: @ini_background;
padding: 0.2em;
text-align: left;
width: 10em;
li {
margin: 0.2em 0;
list-style: none;

a {
display: block;
}
}
}

// open toggle state
&.open {
&::after {
content: '▲';
}

ul {
display: block;
}
}
}
}
}


Expand Down
2 changes: 1 addition & 1 deletion lib/tpl/dokuwiki/style.ini
View file
Expand Up @@ -25,7 +25,7 @@ css/_tabs.css = screen
css/_links.css = screen
css/_toc.css = screen
css/_footnotes.css = screen
css/_search.css = screen
css/_search.less = screen
css/_recent.css = screen
css/_diff.css = screen
css/_edit.css = screen
Expand Down

0 comments on commit 4bdf82b

Please sign in to comment.