pixelfed/resources/assets/components/groups/partials/SelfRemoteSearch.vue

48 lines
1.8 KiB
Vue

<template>
<div class="col-12 col-md-9" style="height: 100vh - 51px !important;overflow:hidden">
<div class="row h-100 bg-lighter">
<div class="col-12 col-md-8 border-left">
<div class="d-flex justify-content-center">
<div class="p-4 mb-4">
<p class="h4 font-weight-bold mb-1">Find a Remote Group</p>
<p class="lead text-muted">Search and explore remote federated groups.</p>
</div>
</div>
<div class="mb-5">
<div class="p-4 mb-4">
<div class="form-group">
<label>Group URL</label>
<input type="text" class="form-control form-control-lg rounded-pill bg-white border" placeholder="https://pixelfed.social/groups/328323406233735168" v-model="q">
</div>
<button class="btn btn-primary btn-block btn-lg rounded-pill font-weight-bold">Search</button>
</div>
</div>
</div>
<div class="col-12 col-md-4 bg-white border-left">
<div class="my-4">
<h4 class="font-weight-bold">Tips</h4>
<ul class="pl-3">
<li class="font-weight-bold">Some remote groups are not supported*</li>
<li>Read and comply with group rules defined by group admins</li>
<li>Use the full <span class="font-weight-bold">Group URL</span> including <code>https://</code></li>
<li>Joining private groups requires manual approval from group admins, you will recieve a notification when your membership is approved</li>
<li>Inviting people to remote groups is not supported yet</li>
<li>Your group membership may be terminated at any time by group admins</li>
</ul>
<p class="small">* Some remote groups may not be compatible, we are working to support other group implementations</p>
</div>
</div>
</div>
</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
q: undefined
}
}
}
</script>