Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
Forum
JEM - an Event Manager for Joomla
General JEM topics, -help and -tutorials
Tutorials
J3+Styling - Backend - Attendees view

TOPIC:

J3+Styling - Backend - Attendees view 7 years 9 months ago #20473

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4529
  • Thank you received: 493
Joomla 3.4.6
JEM 2.1.5

Be aware: changes will be overwitten in case of an update but it might be usefull to someone.


When viewing the attendees-view (by column reg Users, events-view) you will see this screen.




There are a couple of things you can see:
- height of icon-area
- Text "search" before "filter_type"
- No placeholder for search
- the description part above the table can be done better
- there are no buttons for print/export

//
p.s.
the mail button is not there (it's something i'm currently testing)
Attachments:

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

Last edit: by Bluefox.

J3+Styling - Backend - Attendees view 7 years 9 months ago #20474

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4529
  • Thank you received: 493
Icon area

This happens as In my example, see info events-view, did add a bit of css to the backend.css to use the icons of Joomla 2.x. maybe it was better to target the body class (for example: body.view-attendees) but for now it's expecting icons of width:48px/height: 48px
--> The icon you are currently seeing is a icomoon font and is there as there is a icon-users class.

As we want to display the icon as it was in J2.x we are going to do the following.

.../administrator/components/com_jem/views/attendees/view.html.php

change
JToolBarHelper::title(JText::_('COM_JEM_REGISTERED_USERS'), 'users');

to
JToolBarHelper::title('<span class="view_title">'.JText::_('COM_JEM_REGISTERED_USERS').'</span>', 'users');


..media/com_jem/css/backend.css

Add
.icon-users 	{ 
	background-image: url(../images/icon-48-users.png); 
}
.icon-users::before {
    content: normal !important;
}

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

J3+Styling - Backend - Attendees view 7 years 9 months ago #20475

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4529
  • Thank you received: 493
Removal of text Search before "filter_type" box

Would say that that text is unneeded so better to remove it.

That can be done by editing file: ..../administrator/components/com_jem/views/attendees/tmpl/default.php

Find
<?php echo JText::_('COM_JEM_SEARCH').' '.$this->lists['filter']; ?>

and change it to
<?php echo $this->lists['filter']; ?>

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

J3+Styling - Backend - Attendees view 7 years 9 months ago #20476

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4529
  • Thank you received: 493
Add placeholder "Search:"

To have it inline with the other views i guess it's good to add a placeholder to the input field.

File: .../administrator/com_jem/components/com_jem/views/attendees/tmpl/default.php

Find
<input type="text" name="filter_search" id="filter_search" value="<?php echo $this->lists['search']; ?>" class="text_area" onChange="document.adminForm.submit();" />

and change it to
<input type="text" name="filter_search" id="filter_search" placeholder="<?php echo JText::_('COM_JEM_SEARCH');?>" value="<?php echo $this->lists['search']; ?>" class="text_area" onChange="document.adminForm.submit();" />
The following user(s) said Thank You: jojo12

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

J3+Styling - Backend - Attendees view 7 years 9 months ago #20477

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4529
  • Thank you received: 493
decrease length of Username/name select box

Would say that that box is to large as it will only mention username/name.

File: .../administrator/components/com_jem/views/attendees/view.html.php

Find
$lists['filter'] = JHtml::_('select.genericlist', $filters, 'filter_type', array('size'=>'1','class'=>'inputbox'), 'value', 'text', $filter_type);

and change to
$lists['filter'] = JHtml::_('select.genericlist', $filters, 'filter_type', array('size'=>'1','class'=>'input-medium'), 'value', 'text', $filter_type);
or you can change input-medium to something else, just what you want.
The following user(s) said Thank You: jojo12

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

J3+Styling - Backend - Attendees view 7 years 9 months ago #20479

  • Bluefox
  • Bluefox's Avatar Topic Author
  • Offline
  • Moderator
  • Moderator
  • Posts: 4529
  • Thank you received: 493
search/clear to icons
<table class="adminform">
		<tr>
			<td width="100%">
				<?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->lists['search']; ?>" class="text_area" onChange="document.adminForm.submit();" />
			<button class="buttonfilter" type="submit"><?php echo JText::_('JSEARCH_FILTER_SUBMIT'); ?></button>
			<button class="buttonfilter" type="button" onclick="document.id('filter_search').value='';this.form.submit();"><?php echo JText::_('JSEARCH_FILTER_CLEAR'); ?></button>
			</td>
			<?php if ($this->event->waitinglist): ?>
			<td style="text-align:right; white-space:nowrap;">
				<?php echo JText::_('COM_JEM_STATUS').' '.$this->lists['waiting']; ?>
			</td>
			<?php endif; ?>
		</tr>
	</table>

to
<div id="filter-bar" class="clearfix">
	<div class="clearfix">
		<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->lists['search']; ?>" class="text_area" onChange="document.adminForm.submit();" />
			<button class="buttonfilter btn" type="submit"><span class="icon-search"></span></button>
			<button class="buttonfilter btn" type="button" onclick="document.id('filter_search').value='';this.form.submit();"><span class="icon-delete"></span></button>
		</div>
		<div class=pull-right>
		<?php if ($this->event->waitinglist): ?>
				<?php echo $this->lists['waiting']; ?>
		<?php endif; ?>
		</div>
	</div>
	</div>
	<div class="clearfix"></div>

as you can see the table was changed to a div and some other changes have been done.

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

Last edit: by Bluefox.
Forum
JEM - an Event Manager for Joomla
General JEM topics, -help and -tutorials
Tutorials
J3+Styling - Backend - Attendees view
Time to create page: 0.586 seconds

Downloads

Donate

If you find JEM useful and if you use it on your site, please consider a donation to the project.

Private Messages

You are not logged in.

Follow us......