frio: add intro action buttons for mobile devices
This commit is contained in:
rabuzarus
parent
f3ec28bd73
commit
e34e1f7c2b
2 changed files with 59 additions and 14 deletions
|
|
@ -2200,11 +2200,30 @@ ul li:hover .intro-wrapper button.intro-action-link {
|
|||
ul li:hover .intro-wrapper button.intro-action-link:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.intro-action-buttons {
|
||||
margin-top: 15px;
|
||||
/*display: none;*/
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.1s ease-out;
|
||||
}
|
||||
ul.notif-network-list > li:hover .intro-action-buttons {
|
||||
/*display: block;*/
|
||||
max-height: 30px;
|
||||
transition: max-height 0.1s ease-in;
|
||||
}
|
||||
.intro-desc-label, .intro-url-label, .intro-network-label,
|
||||
.intro-location-label, .intro-gender-label, .intro-keywords-label,
|
||||
.intro-about-label, .intro-knowyou-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.intro-contact-info.xs .intro-url-label, .intro-contact-info.xs .intro-network-label,
|
||||
.intro-contact-info.xs .intro-location-label, .intro-contact-info.xs .intro-gender-label,
|
||||
.intro-contact-info.xs .intro-keywords-label, .intro-contact-info.xs .intro-about-label,
|
||||
.intro-contact-info.xs .intro-knowyou-label {
|
||||
display: block;
|
||||
margin-top: 5px
|
||||
}
|
||||
/*
|
||||
* Overwriting for transparency and other colors
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -8,26 +8,40 @@
|
|||
|
||||
<div class="media-body">
|
||||
{{* The intro actions like approve, ignore, discard intro*}}
|
||||
<div class="intro-actions pull-right nav-pills preferences hidden-xs">
|
||||
<button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$contact_id}}')"><i class="fa fa-check" aria-hidden="true"></i></button>
|
||||
<div class="intro-actions pull-right nav-pills preferences">
|
||||
<button class="btn-link intro-action-link" onclick="addElmToModal('#intro-approve-wrapper-{{$contact_id}}');" title="{{$approve|escape:'html'}}" data-toggle="tooltip"><i class="fa fa-check" aria-hidden="true"></i></button>
|
||||
|
||||
<form class="intro-form" action="notifications/{{$intro_id}}" method="post">
|
||||
<button class="btn-link intro-submit-ignore intro-action-link" type="submit" name="submit" value="{{$ignore|escape:'html'}}"><i class="fa fa-ban" aria-hidden="true"></i></button>
|
||||
<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard|escape:'html'}}"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
|
||||
<button class="btn-link intro-submit-ignore intro-action-link" type="submit" name="submit" value="{{$ignore|escape:'html'}}" title="{{$ignore|escape:'html'}}" data-toggle="tooltip"><i class="fa fa-ban" aria-hidden="true"></i></button>
|
||||
<button class="btn-link intro-submit-discard intro-action-link" type="submit" name="submit" value="{{$discard|escape:'html'}}" title="{{$discard|escape:'html'}}" data-toggle="tooltip"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
<div class='intro-enty-name'><h4 class="media-heading"><a href="{{$zrl}}">{{$fullname}}</a></h4></div>
|
||||
<div class="intro-desc"><span class="intro-desc-label">{{$str_notifytype}}</span>{{$notify_type}}</div>
|
||||
|
||||
{{* Additional information of the contact *}}
|
||||
<div class="intro-url"><span class="intro-url-label">{{$lbl_url}}: </span><a href="{{$zrl}}">{{$url}}</a></div>
|
||||
{{if $network}}<div class="intro-network"><span class="intro-network-label">{{$lbl_network}}</span> {{$network}}</div>{{/if}}
|
||||
{{if $location}}<div class="intro-location"><span class="intro-location-label">{{$lbl_location}}</span> {{$location}}</div>{{/if}}
|
||||
{{if $gender}}<div class="intro-gender"><span class="intro-gender-label">{{$lbl_gender}}</span> {{$gender}}</div>{{/if}}
|
||||
{{if $keywords}}<div class="intro-keywords"><span class="intro-keywords-label">{{$lbl_keywords}}</span> {{$keywords}}</div>{{/if}}
|
||||
{{if $about}}<div class="intro-about"><span class="intro-about-label">{{$lbl_about}}</span> {{$about}}</div>{{/if}}
|
||||
<div class="intro-knowyou"><span class="intro-knowyou-label">{{$lbl_knowyou}}</span>{{$knowyou}}</div>
|
||||
<div class="intro-note" id="intro-note-{{$contact_id}}">{{$note}}</div>
|
||||
<div class="intro-contact-info hidden-xs">
|
||||
<div class="intro-url"><span class="intro-url-label">{{$lbl_url}}: </span><a href="{{$zrl}}">{{$url}}</a></div>
|
||||
{{if $network}}<div class="intro-network"><span class="intro-network-label">{{$lbl_network}}</span> {{$network}}</div>{{/if}}
|
||||
{{if $location}}<div class="intro-location"><span class="intro-location-label">{{$lbl_location}}</span> {{$location}}</div>{{/if}}
|
||||
{{if $gender}}<div class="intro-gender"><span class="intro-gender-label">{{$lbl_gender}}</span> {{$gender}}</div>{{/if}}
|
||||
{{if $keywords}}<div class="intro-keywords"><span class="intro-keywords-label">{{$lbl_keywords}}</span> {{$keywords}}</div>{{/if}}
|
||||
{{if $about}}<div class="intro-about"><span class="intro-about-label">{{$lbl_about}}</span> {{$about}}</div>{{/if}}
|
||||
<div class="intro-knowyou"><span class="intro-knowyou-label">{{$lbl_knowyou}}</span>{{$knowyou}}</div>
|
||||
<div class="intro-note intro-note-{{$contact_id}}">{{$note}}</div>
|
||||
</div>
|
||||
|
||||
{{* Additional information of the contact for mobile view *}}
|
||||
<div class="intro-contact-info xs hidden-lg hidden-md hidden-sm">
|
||||
<div class="intro-url"><span class="intro-url-label">{{$lbl_url}}:</span><a href="{{$zrl}}">{{$url}}</a></div>
|
||||
{{if $network}}<div class="intro-network"><span class="intro-network-label">{{$lbl_network}}</span>{{$network}}</div>{{/if}}
|
||||
{{if $location}}<div class="intro-location"><span class="intro-location-label">{{$lbl_location}}</span>{{$location}}</div>{{/if}}
|
||||
{{if $gender}}<div class="intro-gender"><span class="intro-gender-label">{{$lbl_gender}}</span>{{$gender}}</div>{{/if}}
|
||||
{{if $keywords}}<div class="intro-keywords"><span class="intro-keywords-label">{{$lbl_keywords}}</span>{{$keywords}}</div>{{/if}}
|
||||
{{if $about}}<div class="intro-about"><span class="intro-about-label">{{$lbl_about}}</span>{{$about}}</div>{{/if}}
|
||||
<div class="intro-knowyou"><span class="intro-knowyou-label">{{$lbl_knowyou}}</span>{{$knowyou}}</div>
|
||||
<div class="intro-note intro-note-{{$contact_id}}">{{$note}}</div>
|
||||
</div>
|
||||
|
||||
{{* This sections contains special settings for contact approval. We hide it by default and load this section in
|
||||
a bootstrap modal in the case of approval *}}
|
||||
|
|
@ -44,11 +58,23 @@
|
|||
{{$dfrn_text}}
|
||||
|
||||
<div class="pull-right">
|
||||
<button class="btn btn-default intro-submit-approve" type="submit" name="submit" value="{{$approve|escape:'html'}}">{{$approve|escape:'html'}}</button>
|
||||
<button class="btn btn-primary intro-submit-approve" type="submit" name="submit" value="{{$approve|escape:'html'}}">{{$approve|escape:'html'}}</button>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{* On mobile touch devices we use buttons for approve, ingnore && discard to have a better UX *}}
|
||||
{{if $APP->is_mobile}}
|
||||
<div class="intro-action-buttons">
|
||||
<form class="intro-form pull-left" action="notifications/{{$intro_id}}" method="post">
|
||||
<button class="btn btn-small btn-default intro-submit-ignore" type="submit" name="submit" value="{{$ignore|escape:'html'}}">{{$ignore|escape:'html'}}</button>
|
||||
<button class="btn btn-small btn-default intro-submit-discard" type="submit" name="submit" value="{{$discard|escape:'html'}}">{{$discard|escape:'html'}}</button>
|
||||
</form>
|
||||
<button class="btn btn-small btn-primary intro-submit-approve pull-right" onclick="addElmToModal('#intro-approve-wrapper-{{$contact_id}}')">{{$approve|escape:'html'}}</button>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="intro-end"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue