Joomlaeventmanager.net - J3+Styling - Backend - Events view

J3+Styling - Backend - Events view 7 years 3 months ago #20468

Bluefox
Topic Author
Offline
Moderator
Posts: 4523
Thank you received: 493

Joomla 3.4.6
JEM 2.1.5

be aware: changes will be overwritten in case of an update, but maybe it's usefull to someone.

When viewing the events view there are some things that are not looking that nicely

Left-icon

There is no icon displayed as the way for it was changed in Joomla 3
Currently there is a <span class="icon-events"></span> so it's possible to
address it.

The thing here is that it is having the icon class applied to it and therefore you have
to alter a bit of code/css.

File: ....administrator/components/com_jem/views/events/view.html.php
Function: "addToolbar"

there you will see

JToolBarHelper::title(JText::_('COM_JEM_EVENTS'), 'events');

change it to

JToolBarHelper::title('<span class="view_title">'.JText::_('COM_JEM_EVENTS').'</span>', 'events');

the "events" text is the part after the "icon-" and you can change it to something else if you want.
For example you can change it to "calendar" and it would show a calender icon as it's build in.
Build in icons of Joomla: docs.joomla.org/J3.x:Joomla_Standard_Icomoon_Fonts/nl
--> as you can see there is no "events" in the list.

File: ....media/com_jem/css/backend.css

basicly the class for the icon was changed to icon-events. It's possible to alter the view.html.php
and to change events to 48-events but it would be better to add a class to backend.css

.icon-events
{ 
	background-image: url(../images/icon-48-events.png); 
}

When that is added the icon won't be displayed nicely as the css to display things is
expecting a different icon so you need to alter a bit more.

you could add

.container-title {
	height: 50px;
}

.container-title h1.page-title {
	display: block;
}

.view_title {
	position: absolute;
	top: 40px;
}


.page-title [class^="icon-"], 
.page-title [class*=" icon-"] {
    height: 48px;
     width: 48px;
}

the class view_title was used so it wouldn't interfere with the page_title class.

just an example

to be continued.....

(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3

Please Log in or Create an account to join the conversation.

Last edit: by Bluefox.

J3+Styling - Backend - Events view 7 years 3 months ago #20469

Bluefox
Topic Author
Offline
Moderator
Posts: 4523
Thank you received: 493

Spacing between elements
And with that i'm referring to the spacing between filter_type + search and date+ filters

It's happening as the class "inputbox" is added to the elements.
Within backend.css we are defining a margin for that class and doing so it's causing a problem.

So you can try to do this in file: .../media/com_jem/css/backend.css

/* align radio buttons horizontally */
.inputbox {
	/* margin:5px; */
	cursor:pointer;
}

it's will disable the line of the margin.

(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3

Please Log in or Create an account to join the conversation.

J3+Styling - Backend - Events view 7 years 3 months ago #20470

Bluefox
Topic Author
Offline
Moderator
Posts: 4523
Thank you received: 493

Make date fields smaller

It looks to me that the date fields are a bit to large. It happens as we are limiting the format (%Y-%m-%d) instead of also outputting the time but as default the calendar field will get a input-medium attached to it.

To change that you can do the following..
File: ...administrator/components/com_jem/views/events/tmpl/default.php

change

<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

To

<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

in that case we are defining a new class to be used for the date field elements.

(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3

Please Log in or Create an account to join the conversation.

J3+Styling - Backend - Events view 7 years 3 months ago #20471

Bluefox
Topic Author
Offline
Moderator
Posts: 4523
Thank you received: 493

Search / Clear to icons

To change the clear/search you can do this
File: ..../administrator/components/com_jem/views/events/tmpl/default.php

change

	<fieldset id="filter-bar">
		<div class="filter-search fltlft">
			<?php echo $this->lists['filter']; ?>
			<input type="text" name="filter_search" id="filter_search" placeholder="<?php echo JText::_('COM_JEM_SEARCH');?>" value="<?php echo $this->escape($this->state->get('filter_search')); ?>" class="text_area" onChange="document.adminForm.submit();" />
			<button type="submit"><?php echo JText::_('JSEARCH_FILTER_SUBMIT'); ?></button>
			<button type="button" onclick="document.id('filter_search').value='';this.form.submit();"><?php echo JText::_('JSEARCH_FILTER_CLEAR'); ?></button>
		</div>
		<div class="filter-select fltrt">
			<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<select name="filter_state" class="inputbox" onchange="this.form.submit()">
			<option value=""><?php echo JText::_('JOPTION_SELECT_PUBLISHED');?></option>
			<?php echo JHtml::_('select.options', JHtml::_('jgrid.publishedOptions'), 'value', 'text', $this->state->get('filter_state'), true);?>
			</select>

			<select name="filter_access" class="inputbox" onchange="this.form.submit()">
				<option value=""><?php echo JText::_('JOPTION_SELECT_ACCESS');?></option>
				<?php echo JHtml::_('select.options', JHtml::_('access.assetgroups'), 'value', 'text', $this->state->get('filter.access'));?>
			</select>
		</div>
	</fieldset>
	<div class="clr"> </div>

To:

<fieldset id="filter-bar">
		<div class="filter-search pull-left btn-wrapper input-append">
			<?php echo $this->lists['filter']; ?>
			<input type="text" name="filter_search" id="filter_search" placeholder="<?php echo JText::_('COM_JEM_SEARCH');?>" value="<?php echo $this->escape($this->state->get('filter_search')); ?>" class="text_area" onChange="document.adminForm.submit();" />
			<button class="btn" type="submit"><span class="icon-search"></span></button>
			<button class="btn" type="button" onclick="document.id('filter_search').value='';this.form.submit();"><span class="icon-delete"></span></button>
		</div>
		<div class="filter-select pull-right">
			<label class="filter-hide-lbl" for="filter_begin"><?php echo JText::_('COM_JEM_EVENTS_FILTER_STARTDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_begin'), 'filter_begin', 'filter_begin', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<label class="filter-hide-lbl" for="filter_end"><?php echo JText::_('COM_JEM_EVENTS_FILTER_ENDDATE'); ?></label>
			<?php echo JHtml::_('calendar', $this->state->get('filter_end'), 'filter_end', 'filter_end', '%Y-%m-%d' , array('class'=>'input-small','size'=>10, 'onchange'=>"this.form.fireEvent('submit');this.form.submit()"));?>

			<select name="filter_state" class="inputbox" onchange="this.form.submit()">
			<option value=""><?php echo JText::_('JOPTION_SELECT_PUBLISHED');?></option>
			<?php echo JHtml::_('select.options', JHtml::_('jgrid.publishedOptions'), 'value', 'text', $this->state->get('filter_state'), true);?>
			</select>

			<select name="filter_access" class="inputbox" onchange="this.form.submit()">
				<option value=""><?php echo JText::_('JOPTION_SELECT_ACCESS');?></option>
				<?php echo JHtml::_('select.options', JHtml::_('access.assetgroups'), 'value', 'text', $this->state->get('filter.access'));?>
			</select>
		</div>
	</fieldset>
	<div class="clearfix"> </div>

it wil add things like input-append and the btn class.

You can also add a bit of spacing between filter_type and search

#filter-bar input#filter_search {
	margin-left: 10px;
}

(won't respond to PM)
==================================================================
running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3

Please Log in or Create an account to join the conversation.

Last edit: by Bluefox.

J3+Styling - Backend - Events view 7 years 3 months ago #20472

Bluefox Topic Author Offline Moderator Posts: 4523 Thank you received: 493	JLayout Ofcourse we can work with JLayout: docs.joomla.org/J3.x:JLayout_Improvements_for_Joomla! but that's for someone else. (won't respond to PM) ================================================================== running: pre-alpha JEM 4.x (custom version) + Joomla 4.0.0-beta7 + PHP 7.3
	Please Log in or Create an account to join the conversation. Last edit: by Bluefox.

TOPIC:

J3+Styling - Backend - Events view 7 years 3 months ago #20468

Attachments:

J3+Styling - Backend - Events view 7 years 3 months ago #20469

J3+Styling - Backend - Events view 7 years 3 months ago #20470

J3+Styling - Backend - Events view 7 years 3 months ago #20471

Attachments:

J3+Styling - Backend - Events view 7 years 3 months ago #20472

Downloads

Donate

Private Messages

Follow us......