initial work for contact page
This commit is contained in:
		
					parent
					
						
							
								09daf2de26
							
						
					
				
			
			
				commit
				
					
						b59c0648bc
					
				
			
		
					 4 changed files with 217 additions and 1 deletions
				
			
		| 
						 | 
				
			
			@ -1414,6 +1414,19 @@ ul.dropdown-menu li:hover {
 | 
			
		|||
    font-size: 11px;
 | 
			
		||||
    color: #bebebe;
 | 
			
		||||
}
 | 
			
		||||
.media-list > li {
 | 
			
		||||
    padding: 10px;
 | 
			
		||||
    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
 | 
			
		||||
    position: relative;
 | 
			
		||||
/*    border-left: 3px solid rgba(255,255,255,$contentbg_transp);*/
 | 
			
		||||
    border-left: 3px solid rgba(255,255,255,0);
 | 
			
		||||
    font-size: 12px;
 | 
			
		||||
}
 | 
			
		||||
.media-list > li:hover,
 | 
			
		||||
.media-list > li.selected {
 | 
			
		||||
    border-left: 3px solid $link_color;
 | 
			
		||||
    background-color: rgba(247, 247, 247, $contentbg_transp);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* Forms */
 | 
			
		||||
.form-control {
 | 
			
		||||
| 
						 | 
				
			
			@ -1462,7 +1475,9 @@ ul.dropdown-menu li:hover {
 | 
			
		|||
/* PAGES */
 | 
			
		||||
 | 
			
		||||
/* Profile-page */
 | 
			
		||||
#profile-page, .photos-content-wrapper, .settings-content-wrapper {
 | 
			
		||||
#profile-page, .photos-content-wrapper, .settings-content-wrapper,
 | 
			
		||||
.contacts-content-wrapper, .suggest-content-wrapper, .common-content-wrapper,
 | 
			
		||||
.allfriends-content-wrapper, .match-content-wrapper {
 | 
			
		||||
    padding: 15px;
 | 
			
		||||
    padding-bottom: 20px;
 | 
			
		||||
    margin-bottom: 20px;
 | 
			
		||||
| 
						 | 
				
			
			@ -1489,6 +1504,36 @@ ul.dropdown-menu li:hover {
 | 
			
		|||
    float: left;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* contacts page */
 | 
			
		||||
ul.viewcontact_wrapper {
 | 
			
		||||
    margin-left: -15px;
 | 
			
		||||
    margin-right: -15px;
 | 
			
		||||
}
 | 
			
		||||
ul.viewcontact_wrapper > li {
 | 
			
		||||
    padding-left: 15px;
 | 
			
		||||
}
 | 
			
		||||
.contact-wrapper {
 | 
			
		||||
/*    padding: 10px;
 | 
			
		||||
    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);;
 | 
			
		||||
    position: relative;*/
 | 
			
		||||
    /*border-left: 3px solid white;*/
 | 
			
		||||
}
 | 
			
		||||
.contact-wrapper.media {
 | 
			
		||||
    overflow: visible;
 | 
			
		||||
    word-wrap: break-word;
 | 
			
		||||
}
 | 
			
		||||
.contact-entry-desc {
 | 
			
		||||
    color: #555;
 | 
			
		||||
}
 | 
			
		||||
.contact-entry-checkbox {
 | 
			
		||||
    margin-top: -20px;
 | 
			
		||||
}
 | 
			
		||||
.contact-wrapper .media-body .contact-entry-name h4.media-heading {
 | 
			
		||||
    font-weight: bold;
 | 
			
		||||
    color: #777;
 | 
			
		||||
    font-size: 15px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/*
 | 
			
		||||
* Overwriting for transparency and other colors
 | 
			
		||||
*/
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										59
									
								
								templates/contact_template.tpl
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										59
									
								
								templates/contact_template.tpl
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,59 @@
 | 
			
		|||
 | 
			
		||||
<div class="contact-wrapper media" id="contact-entry-wrapper-{{$id}}" >
 | 
			
		||||
	
 | 
			
		||||
		<div class="contact-photo-wrapper dropdown pull-left" >
 | 
			
		||||
			<div class="contact-photo mframe" id="contact-entry-photo-{{$contact.id}}" >
 | 
			
		||||
 | 
			
		||||
				<a class="dropdown-toggle" id="contact-photo-menu-{{$contact.id}}" type="button"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
 | 
			
		||||
					<div class="contact-photo-image-wrapper">
 | 
			
		||||
						<img class="contact-photo media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
 | 
			
		||||
 | 
			
		||||
						{{* Overlay background on hover the avatar picture *}}
 | 
			
		||||
						<div class="contact-photo-overlay">
 | 
			
		||||
							<span class="contact-photo-overlay-content"><i class="fa fa-angle-down"></i></span>
 | 
			
		||||
						</div>
 | 
			
		||||
					</div>
 | 
			
		||||
				</a>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
				{{if $contact.photo_menu}}
 | 
			
		||||
				<ul class="contact-photo-menu menu-popup dropdown-menu " id="contact-photo-menu-{{$contact.id}}" role="menu" aria-labelledby="contact-photo-menu-{{$contact.id}}">
 | 
			
		||||
					{{foreach $contact.photo_menu as $c}}
 | 
			
		||||
					{{if $c.2}}
 | 
			
		||||
					<li role="menuitem"><a target="redir" href="{{$c.1}}">{{$c.0}}</a></li>
 | 
			
		||||
					{{else}}
 | 
			
		||||
					<li role="menuitem"><a href="{{$c.1}}">{{$c.0}}</a></li>
 | 
			
		||||
					{{/if}}
 | 
			
		||||
					{{/foreach}}
 | 
			
		||||
				</ul>
 | 
			
		||||
 | 
			
		||||
				{{/if}}
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
		</div>
 | 
			
		||||
 | 
			
		||||
		<div class="media-body">
 | 
			
		||||
			<div class="contact-entry-desc">
 | 
			
		||||
				<div class="contact-entry-name" id="contact-entry-name-{{$contact.id}}" >
 | 
			
		||||
					<h4 class="media-heading">{{$contact.name}}
 | 
			
		||||
					{{if $contact.account_type}} <small class="contact-entry-details" id="contact-entry-accounttype-{{$contact.id}}">({{$contact.account_type}})</small>{{/if}}
 | 
			
		||||
					</h4>
 | 
			
		||||
				</div>
 | 
			
		||||
				{{if $contact.alt_text}}<div class="contact-entry-details" id="contact-entry-rel-{{$contact.id}}" >{{$contact.alt_text}}</div>{{/if}}
 | 
			
		||||
				{{if $contact.itemurl}}<div class="contact-entry-details" id="contact-entry-url-{{$contact.id}}" >{{$contact.itemurl}}</div>{{/if}}
 | 
			
		||||
				{{if $contact.tags}}<div class="contact-entry-details" id="contact-entry-tags-{{$contact.id}}" >{{$contact.tags}}</div>{{/if}}
 | 
			
		||||
				{{if $contact.details}}<div class="contact-entry-details" id="contact-entry-details-{{$contact.id}}" >{{$contact.details}}</div>{{/if}}
 | 
			
		||||
				{{if $contact.network}}<div class="contact-entry-details" id="contact-entry-network-{{$contact.id}}" >{{$contact.network}}</div>{{/if}}
 | 
			
		||||
			</div>
 | 
			
		||||
 | 
			
		||||
			{{* if !$no_contacts_checkbox *}}
 | 
			
		||||
			{{if $multiselect}}
 | 
			
		||||
			<div class="checkbox contact-entry-checkbox pull-right">
 | 
			
		||||
				<input id="checkbox-{{$contact.id}}" type="checkbox" class="contact-select pull-right" name="contact_batch[]" value="{{$contact.id}}">
 | 
			
		||||
				<label for="checkbox-{{$contact.id}}"></label>
 | 
			
		||||
			</div>
 | 
			
		||||
			{{/if}}
 | 
			
		||||
		</div>
 | 
			
		||||
	
 | 
			
		||||
 | 
			
		||||
</div>
 | 
			
		||||
							
								
								
									
										98
									
								
								templates/contacts-template.tpl
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										98
									
								
								templates/contacts-template.tpl
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,98 @@
 | 
			
		|||
 | 
			
		||||
<div id="contacts" class="standard-page">
 | 
			
		||||
 | 
			
		||||
	{{$tabs}}
 | 
			
		||||
 | 
			
		||||
	<h2 class="headding">{{$header}} {{if $total}} ({{$total}}) {{/if}}</h2>
 | 
			
		||||
 | 
			
		||||
	{{if $finding}}<h4>{{$finding}}</h4>{{/if}}
 | 
			
		||||
 | 
			
		||||
	<div id="contacts-search-wrapper">
 | 
			
		||||
		<form id="contacts-search-form" class="navbar-form" action="{{$cmd}}" method="get" >
 | 
			
		||||
			<label for="contacts-search" class="contacts-search-desc">{{$desc}}</label><br/>
 | 
			
		||||
			<div class="input-group">
 | 
			
		||||
				<input type="text" name="search" id="contacts-search" class="search-input form-control" onfocus="this.select();" value="{{$search|escape:'html'}}" />
 | 
			
		||||
				<div class="input-group-btn">
 | 
			
		||||
					<button class="btn btn-default" type="submit" name="submit" id="contacts-search-submit" value="{{$submit|escape:'html'}}"><i class="fa fa-search"></i></button>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</form>
 | 
			
		||||
	</div>
 | 
			
		||||
 | 
			
		||||
	<hr>
 | 
			
		||||
	<div id="contacts-search-end"></div>
 | 
			
		||||
 | 
			
		||||
	<form action="{{$baseurl}}/contacts/batch/" method="POST">
 | 
			
		||||
		<ul class="nav nav-pills preferences">
 | 
			
		||||
			<li class="dropdown pull-right">
 | 
			
		||||
				<a class="btn btn-link dropdown-toggle" type="button" id="BatchActionDropdownMenuTools" data-toggle="dropdown" aria-expanded="true">
 | 
			
		||||
					<i class="fa fa-angle-down"></i>
 | 
			
		||||
				</a>
 | 
			
		||||
				<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">
 | 
			
		||||
				{{foreach $batch_actions as $n=>$l}}
 | 
			
		||||
					<li role="presentation">
 | 
			
		||||
						<input class="batch-action no-input fakelist" name="{{$n}}" value="{{$l|escape:'html'}}" type="submit">
 | 
			
		||||
					</li>
 | 
			
		||||
				{{/foreach}}
 | 
			
		||||
				</ul>
 | 
			
		||||
			</li>
 | 
			
		||||
		</ul>
 | 
			
		||||
		<div class="clear">
 | 
			
		||||
 | 
			
		||||
		<ul id="viewcontact_wrapper" class="viewcontact_wrapper media-list">
 | 
			
		||||
		{{foreach $contacts as $contact}}
 | 
			
		||||
			<li>{{include file="contact_template.tpl"}}</li>
 | 
			
		||||
		{{/foreach}}
 | 
			
		||||
		</ul>
 | 
			
		||||
		<div id="contact-edit-end"></div>
 | 
			
		||||
	</form>
 | 
			
		||||
 | 
			
		||||
	{{$paginate}}
 | 
			
		||||
</div>
 | 
			
		||||
 | 
			
		||||
<div class="modal" id="PokeModal" tabindex="-1" role="dialog" aria-labelledby="PokeModal" aria-hidden="true">
 | 
			
		||||
	<div class="modal-dialog">
 | 
			
		||||
		<div class="modal-content">
 | 
			
		||||
		</div> <!-- /.modal-content -->
 | 
			
		||||
	</div> <!-- /.modal-dialog -->
 | 
			
		||||
</div> <!-- /.modal -->
 | 
			
		||||
 | 
			
		||||
<div class="modal" id="MailModal" tabindex="-1" role="dialog" aria-labelledby="MailModal" aria-hidden="true">
 | 
			
		||||
	<div class="modal-dialog">
 | 
			
		||||
		<div class="modal-content">
 | 
			
		||||
		</div> <!-- /.modal-content -->
 | 
			
		||||
	</div> <!-- /.modal-dialog -->
 | 
			
		||||
</div> <!-- /.modal -->
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
 $(document).ready(function() {
 | 
			
		||||
  // replace data target for poke & private Message to make Modal Dialog possible
 | 
			
		||||
  $('li a[href^="{{$baseurl}}/poke/?f"]').attr('data-target','#PokeModal').attr('data-toggle', 'modal');
 | 
			
		||||
  $('li a[href^="{{$baseurl}}/message/new"]').attr('data-target','#MailModal').attr('data-toggle', 'modal');
 | 
			
		||||
 
 | 
			
		||||
  // javascript dialog to batch actions
 | 
			
		||||
  $(".batch-action").click(function(e){
 | 
			
		||||
    if (confirm($(this).attr('value')+" ?")) {
 | 
			
		||||
     return true;
 | 
			
		||||
    } else {
 | 
			
		||||
     e.preventDefault();
 | 
			
		||||
     return false;
 | 
			
		||||
    }
 | 
			
		||||
  });
 | 
			
		||||
 
 | 
			
		||||
  // add javascript confirm dialog to "drop" links. Plain html url have "?confirm=1" to show confirmation form, we need to remove it
 | 
			
		||||
  $(".drop").each(function() {
 | 
			
		||||
   $(this).attr('href', $(this).attr('href').replace("confirm=1","") );
 | 
			
		||||
   $(this).click(function(e){
 | 
			
		||||
    if (confirm("{{$contact_drop_confirm}}")) {
 | 
			
		||||
     return true;
 | 
			
		||||
    } else {
 | 
			
		||||
     e.preventDefault();
 | 
			
		||||
     return false;
 | 
			
		||||
    }
 | 
			
		||||
   });
 | 
			
		||||
   
 | 
			
		||||
  });
 | 
			
		||||
 });
 | 
			
		||||
 </script>
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										14
									
								
								templates/viewcontact_template.tpl
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										14
									
								
								templates/viewcontact_template.tpl
									
										
									
									
									
										Normal file
									
								
							| 
						 | 
				
			
			@ -0,0 +1,14 @@
 | 
			
		|||
 | 
			
		||||
{{include file="section_title.tpl"}}
 | 
			
		||||
 | 
			
		||||
{{$tab_str}}
 | 
			
		||||
 | 
			
		||||
<ul id="viewcontact_wrapper{{if $id}}-{{$id}}{{/if}}" class="viewcontact_wrapper media-list">
 | 
			
		||||
{{foreach $contacts as $contact}}
 | 
			
		||||
	<li>{{include file="contact_template.tpl"}}</li>
 | 
			
		||||
{{/foreach}}
 | 
			
		||||
</ul>
 | 
			
		||||
<div class="clear"></div>
 | 
			
		||||
<div id="view-contact-end"></div>
 | 
			
		||||
 | 
			
		||||
{{$paginate}}
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue