<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>