Skip to content
This repository has been archived by the owner on Feb 4, 2021. It is now read-only.

Commit

Permalink
#319: Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinpoort
robinpoort committed May 15, 2017
1 parent c5b2381 commit 50a5330
Show file tree
Hide file tree
Showing 11 changed files with 263 additions and 121 deletions.
6 changes: 6 additions & 0 deletions web/administrator/log/jcontroller.log.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,9 @@
2017-05-09T16:04:45+00:00 INFO 127.0.0.1 controller Holding edit ID com_users.edit.user.951 Array ( [0] => 951 )
2017-05-09T16:04:45+00:00 INFO 127.0.0.1 controller Checking edit ID com_users.edit.user.951: 1 Array ( [0] => 951 )
2017-05-09T16:04:53+00:00 INFO 127.0.0.1 controller Releasing edit ID com_users.edit.user.951 Array ( )
2017-05-15T09:06:38+00:00 INFO 127.0.0.1 controller Holding edit ID com_templates.edit.style.9 Array ( [0] => 9 )
2017-05-15T09:06:38+00:00 INFO 127.0.0.1 controller Checking edit ID com_templates.edit.style.9: 1 Array ( [0] => 9 )
2017-05-15T09:06:40+00:00 INFO 127.0.0.1 controller Releasing edit ID com_templates.edit.style.9 Array ( )
2017-05-15T09:46:06+00:00 INFO 127.0.0.1 controller Holding edit ID com_users.edit.user.952 Array ( [0] => 952 )
2017-05-15T09:46:06+00:00 INFO 127.0.0.1 controller Checking edit ID com_users.edit.user.952: 1 Array ( [0] => 952 )
2017-05-15T09:46:12+00:00 INFO 127.0.0.1 controller Releasing edit ID com_users.edit.user.952 Array ( )
100 changes: 68 additions & 32 deletions web/administrator/templates/elysio/css/admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6558,6 +6558,74 @@ body.koowa > .koowa { min-height: 100%; overflow: hidden; }
/** Flexbox on .koowa */
@media (min-width: 300px) and (min-height: 391px) { .k-flexbox .koowa, .k-flexboxlegacy .koowa { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } }

.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: left; background-color: #fff; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); white-space: normal; }

.popover.top { margin-top: -10px; }

.popover.right { margin-left: 10px; }

.popover.bottom { margin-top: 10px; }

.popover.left { margin-left: -10px; }

.popover-title { margin: 0; padding: 8px 14px; font-size: 14px; background-color: #f7f7f7; border-bottom: 1px solid #ebebeb; border-radius: 5px 5px 0 0; }

.popover-content { padding: 9px 14px; }

.popover > .arrow, .popover > .arrow:after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; }

.popover > .arrow { border-width: 11px; }

.popover > .arrow:after { border-width: 10px; content: ""; }

.popover.top > .arrow { left: 50%; margin-left: -11px; border-bottom-width: 0; border-top-color: #999999; border-top-color: rgba(0, 0, 0, 0.25); bottom: -11px; }

.popover.top > .arrow:after { content: " "; bottom: 1px; margin-left: -10px; border-bottom-width: 0; border-top-color: #fff; }

.popover.right > .arrow { top: 50%; left: -11px; margin-top: -11px; border-left-width: 0; border-right-color: #999999; border-right-color: rgba(0, 0, 0, 0.25); }

.popover.right > .arrow:after { content: " "; left: 1px; bottom: -10px; border-left-width: 0; border-right-color: #fff; }

.popover.bottom > .arrow { left: 50%; margin-left: -11px; border-top-width: 0; border-bottom-color: #999999; border-bottom-color: rgba(0, 0, 0, 0.25); top: -11px; }

.popover.bottom > .arrow:after { content: " "; top: 1px; margin-left: -10px; border-top-width: 0; border-bottom-color: #fff; }

.popover.left > .arrow { top: 50%; right: -11px; margin-top: -11px; border-right-width: 0; border-left-color: #999999; border-left-color: rgba(0, 0, 0, 0.25); }

.popover.left > .arrow:after { content: " "; right: 1px; border-right-width: 0; border-left-color: #fff; bottom: -10px; }

.tooltip { position: absolute; z-index: 1070; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); }

.tooltip.in { opacity: 0.9; filter: alpha(opacity=90); }

.tooltip.top { margin-top: -3px; padding: 5px 0; }

.tooltip.right { margin-left: 3px; padding: 0 5px; }

.tooltip.bottom { margin-top: 3px; padding: 5px 0; }

.tooltip.left { margin-left: -3px; padding: 0 5px; }

.tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; }

.tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }

.tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; }

.tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; }

.tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; }

.tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; }

.tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; }

.tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }

.tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }

.tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }

.k-ui-namespace { /* ========================================================================== Bootstrap 3 overrides / additions ========================================================================== */ /** Bootstrap 3 navbar overrides 1. Remove gradient 2. No border for a more flat design 3. No margin to connect navbar to toolbar and sidebar 4. Set a normal z-index 5. No shadows for a more flat design 6. Auto height for client logo 7. Align vertically middle to "reset" line-height */ /** No shadows on buttons */ /* Legend */ /* Radio styling */ /* Setting some spacing on Bootstrap rows */ /* Horizontal forms */ /* For the menu item accordions */ /* ========================================================================== Bootstrap 2 modal ========================================================================== */ }

.k-ui-namespace * { box-sizing: border-box; }
Expand Down Expand Up @@ -8030,38 +8098,6 @@ body.koowa > .koowa { min-height: 100%; overflow: hidden; }

.k-ui-namespace button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; }

.k-ui-namespace .tooltip { position: absolute; z-index: 1070; display: block; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; line-height: 1.4; opacity: 0; filter: alpha(opacity=0); }

.k-ui-namespace .tooltip.in { opacity: 0.9; filter: alpha(opacity=90); }

.k-ui-namespace .tooltip.top { margin-top: -3px; padding: 5px 0; }

.k-ui-namespace .tooltip.right { margin-left: 3px; padding: 0 5px; }

.k-ui-namespace .tooltip.bottom { margin-top: 3px; padding: 5px 0; }

.k-ui-namespace .tooltip.left { margin-left: -3px; padding: 0 5px; }

.k-ui-namespace .tooltip-inner { max-width: 200px; padding: 3px 8px; color: #fff; text-align: center; text-decoration: none; background-color: #000; border-radius: 4px; }

.k-ui-namespace .tooltip-arrow { position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; }

.k-ui-namespace .tooltip.top .tooltip-arrow { bottom: 0; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000; }

.k-ui-namespace .tooltip.top-left .tooltip-arrow { bottom: 0; right: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; }

.k-ui-namespace .tooltip.top-right .tooltip-arrow { bottom: 0; left: 5px; margin-bottom: -5px; border-width: 5px 5px 0; border-top-color: #000; }

.k-ui-namespace .tooltip.right .tooltip-arrow { top: 50%; left: 0; margin-top: -5px; border-width: 5px 5px 5px 0; border-right-color: #000; }

.k-ui-namespace .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -5px; border-width: 5px 0 5px 5px; border-left-color: #000; }

.k-ui-namespace .tooltip.bottom .tooltip-arrow { top: 0; left: 50%; margin-left: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }

.k-ui-namespace .tooltip.bottom-left .tooltip-arrow { top: 0; right: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }

.k-ui-namespace .tooltip.bottom-right .tooltip-arrow { top: 0; left: 5px; margin-top: -5px; border-width: 0 5px 5px; border-bottom-color: #000; }

.k-ui-namespace .label { display: inline; padding: .2em .6em .3em; font-size: 75%; font-weight: bold; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; }

.k-ui-namespace .label:empty { display: none; }
Expand Down
22 changes: 1 addition & 21 deletions web/administrator/templates/elysio/html/com_menus/menus/default.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,27 +43,7 @@

<!-- Scopebar -->
<div class="k-scopebar k-js-scopebar">

<!-- Scopebar filters -->
<div class="k-scopebar__item k-scopebar__item--filters"></div><!-- .k-scopebar__item--filters -->

<!-- Search -->
<div class="k-scopebar__item k-scopebar__item--search">
<div class="k-search k-search--has-both-buttons">
<label for="k-search-input">Search</label>
<input class="k-search__field" type="text" name="filter_search" id="filter_search" placeholder="<?php echo JText::_('JSEARCH_FILTER'); ?>" value="<?php echo $this->escape($this->state->get('filter.search')); ?>" />
<button type="submit" class="k-search__submit" title="<?php echo JHtml::tooltipText('JSEARCH_FILTER_SUBMIT'); ?>">
<span class="k-icon-magnifying-glass" aria-hidden="true"></span>
<span class="k-visually-hidden">Search</span>
</button>
<button type="button" class="k-search__empty" title="<?php echo JHtml::tooltipText('JSEARCH_FILTER_CLEAR'); ?>" onclick="document.id('filter_search').value='';this.form.submit();">
<span class="k-search__empty-area">
<span class="k-icon-x" aria-hidden="true"></span>
<span class="k-visually-hidden">Clear search</span>
</span>
</button>
</div>
</div>
<?php echo JLayoutHelper::render('joomla.searchtools.default', array('view' => $this, 'options' => array('filterButton' => false))); ?>
</div><!-- .k-scopebar -->

<!-- Table -->
Expand Down
27 changes: 2 additions & 25 deletions web/administrator/templates/elysio/html/com_templates/styles/default.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,31 +26,8 @@
<!-- Form -->
<form class="k-form-layout -koowa-grid" action="<?php echo JRoute::_('index.php?option=com_templates&view=styles'); ?>" method="post" name="adminForm" id="adminForm">

<!-- Scopebar -->
<div class="k-scopebar" id="filter-bar">

<!-- Filters -->
<div class="k-scopebar__item k-scopebar__item--fluid">

<!-- Search button -->
<button type="button" class="k-toggle-search"><span class="k-icon-magnifying-glass"></span><span class="visually-hidden">Search</span></button>

</div><!-- .k-scopebar__item--fluid -->

<!-- Search -->
<div class="k-scopebar__item k-scopebar__search">
<div class="k-search__container k-search__container--has-both-buttons">
<input class="k-search__field" type="text" name="filter_search" id="filter_search" placeholder="<?php echo JText::_('JSEARCH_FILTER'); ?>" value="<?php echo $this->escape($this->state->get('filter.search')); ?>" />
<button type="submit" class="k-search__button-search" title="<?php echo JHtml::tooltipText('JSEARCH_FILTER_SUBMIT'); ?>">
<span class="k-icon-magnifying-glass"></span>
</button>
<button type="button" class="k-search__button-empty" title="<?php echo JHtml::tooltipText('JSEARCH_FILTER_CLEAR'); ?>" onclick="document.id('filter_search').value='';this.form.submit();">
<span>X</span>
</button>
</div>
</div><!-- .k-scopebar__search -->

</div><!-- .k-scopebar -->
<?php // Scopebar ?>
<?php echo JLayoutHelper::render('joomla.searchtools.default', array('view' => $this)); ?>

<!-- Table -->
<div class="k-table-container">
Expand Down
46 changes: 27 additions & 19 deletions web/administrator/templates/elysio/html/layouts/joomla/searchtools/default.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@

// Set some basic options
$customOptions = array(
'filtersHidden' => isset($data['options']['filtersHidden']) ? $data['options']['filtersHidden'] : empty($data['view']->activeFilters),
'defaultLimit' => isset($data['options']['defaultLimit']) ? $data['options']['defaultLimit'] : JFactory::getApplication()->get('list_limit', 20),
'searchFieldSelector' => '#filter_search',
'orderFieldSelector' => '#list_fullordering'
Expand All @@ -28,23 +27,32 @@

// Load search tools
JHtml::_('searchtools.form', $formSelector, $data['options']);

?>

<div class="k-scopebar__item k-scopebar__item--fluid">
<div class="k-scopebar__item--title">
Filter:
</div>
<div class="k-scopebar__item--filters">
<ul>
<li>
<button type="button" class="k-filter-button" data-filter-toggle="tools">
<?php echo JText::_('JSEARCH_TOOLS');?>
</button>
</li>
</ul>
</div>
<button type="button" class="k-toggle-search"><span class="k-icon-magnifying-glass"></span><span class="visually-hidden">Search</span></button>
</div>

<?php echo JLayoutHelper::render('joomla.searchtools.default.bar', $data); ?>
<!-- Scopebar -->
<div class="k-scopebar" id="filter-bar">

<!-- Toggle buttons -->
<div class="k-scopebar__item k-scopebar__item--toggle-buttons">
<button type="button" class="k-scopebar__button k-toggle-scopebar-search k-js-toggle-search">
<span class="k-icon-magnifying-glass" aria-hidden="true">
<span class="k-visually-hidden">Search toggle</span>
<div class="k-js-search-count k-scopebar__item-label k-scopebar__item-label--numberless" style="display: none"></div>
</span>
</button>
<button type="button" class="k-scopebar__button k-toggle-scopebar-filters k-js-toggle-filters">
<span class="k-icon-filter" aria-hidden="true">
<span class="k-visually-hidden">Filters toggle</span>
<div class="k-js-filter-count k-scopebar__item-label k-scopebar__item-label--numberless"></div>
</span>
</button>
</div>

<!-- Filters -->
<?php echo JLayoutHelper::render('joomla.searchtools.default.filters', $data); ?>
<?php echo JLayoutHelper::render('joomla.searchtools.default.list', $data); ?>

<!-- search -->
<?php echo JLayoutHelper::render('joomla.searchtools.default.bar', $data); ?>

</div><!-- .k-scopebar -->
38 changes: 22 additions & 16 deletions web/administrator/templates/elysio/html/layouts/joomla/searchtools/default/bar.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,22 +24,28 @@
$searchButton = $data['options']->get('searchButton', true);

$filters = $data['view']->filterForm->getGroup('filter');

// Add class to input field
$filters['filter_search']->class = 'k-search__field';
?>

<?php if (!empty($filters['filter_search'])) : ?>
<!-- Search -->
<div class="k-scopebar__item k-scopebar__search">
<?php if (!empty($filters['filter_search'])) : ?>
<?php if ($searchButton) : ?>
<div class="k-search__container k-search__container--has-both-buttons">
<label for="filter_search" class="visually-hidden"><?php echo JText::_('JSEARCH_FILTER'); ?></label>
<?php echo $filters['filter_search']->input; ?>
<button type="submit" class="k-search__button-search">
<span class="k-icon-magnifying-glass"></span>
</button>
<button type="button" class="k-search__button-empty" onclick="document.id('filter_search').value='';this.form.submit();">
<span>X</span>
</button>
</div>
<?php endif; ?>
<?php endif; ?>
</div><!-- .k-scopebar__search -->
<div class="k-scopebar__item k-scopebar__item--search">
<div class="k-search k-search--has-both-buttons">
<label for="k-search-input"><?php echo JText::_('JSEARCH_FILTER'); ?></label>
<?php echo $filters['filter_search']->input; ?>
<button type="submit" class="k-search__submit" title="<?php echo JHtml::tooltipText('JSEARCH_FILTER_SUBMIT'); ?>">
<span class="k-icon-magnifying-glass" aria-hidden="true"></span>
<span class="k-visually-hidden">Search</span>
</button>
<button type="button" class="k-search__empty" title="<?php echo JHtml::tooltipText('JSEARCH_FILTER_CLEAR'); ?>" onclick="document.id('filter_search').value='';this.form.submit();">
<span class="k-search__empty-area">
<span class="k-icon-x" aria-hidden="true"></span>
<span class="k-visually-hidden">Clear search</span>
</span>
</button>
</div>
</div>
<?php endif; ?>

Loading

0 comments on commit 50a5330

Please sign in to comment.