diff options
Diffstat (limited to 'src/components')
19 files changed, 315 insertions, 62 deletions
diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js index e175e90c..d7238641 100644 --- a/src/components/chat_panel/chat_panel.js +++ b/src/components/chat_panel/chat_panel.js @@ -1,6 +1,7 @@ import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' const chatPanel = { + props: [ 'floating' ], data () { return { currentMessage: '', @@ -22,7 +23,7 @@ const chatPanel = { this.collapsed = !this.collapsed }, userProfileLink (user) { - return generateProfileLink(user.id, user.screen_name) + return generateProfileLink(user.id, user.username) } } } diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index 1b9c63ff..bf65efc5 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -1,10 +1,10 @@ <template> - <div class="chat-panel" v-if="!this.collapsed"> + <div class="chat-panel" v-if="!this.collapsed || !this.floating"> <div class="panel panel-default"> - <div class="panel-heading timeline-heading chat-heading" @click.stop.prevent="togglePanel"> + <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel"> <div class="title"> {{$t('chat.title')}} - <i class="icon-cancel" style="float: right;"></i> + <i class="icon-cancel" style="float: right;" v-if="floating"></i> </div> </div> <div class="chat-window" v-chat-scroll> @@ -52,6 +52,7 @@ right: 0px; bottom: 0px; z-index: 1000; + max-width: 25em; } .chat-heading { @@ -63,10 +64,13 @@ } .chat-window { - width: 345px; - max-height: 40vh; overflow-y: auto; overflow-x: hidden; + max-height: 20em; +} + +.chat-window-container { + height: 100%; } .chat-message { diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js index 19ce56c3..ea5d7ea4 100644 --- a/src/components/nav_panel/nav_panel.js +++ b/src/components/nav_panel/nav_panel.js @@ -1,5 +1,4 @@ const NavPanel = { - props: [ 'activatePanel' ], computed: { currentUser () { return this.$store.state.users.currentUser diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index c52d1e52..ad7c53f9 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -3,32 +3,32 @@ <div class="panel panel-default"> <ul> <li v-if='currentUser'> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'friends' }"> + <router-link :to="{ name: 'friends' }"> {{ $t("nav.timeline") }} </router-link> </li> <li v-if='currentUser'> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> + <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> {{ $t("nav.mentions") }} </router-link> </li> <li v-if='currentUser'> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> + <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> {{ $t("nav.dms") }} </router-link> </li> <li v-if='currentUser && currentUser.locked'> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'friend-requests' }"> + <router-link :to="{ name: 'friend-requests' }"> {{ $t("nav.friend_requests") }} </router-link> </li> <li> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-timeline' }"> + <router-link :to="{ name: 'public-timeline' }"> {{ $t("nav.public_tl") }} </router-link> </li> <li> - <router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-external-timeline' }"> + <router-link :to="{ name: 'public-external-timeline' }"> {{ $t("nav.twkn") }} </router-link> </li> diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index 9ab870b6..8b48ef1d 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -11,10 +11,7 @@ const Notification = { betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, - props: [ - 'notification', - 'activatePanel' - ], + props: [ 'notification' ], components: { Status, StillImage, UserCardContent }, diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 56791d45..f91c90cc 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -1,5 +1,5 @@ <template> - <status :activatePanel="activatePanel" v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> + <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else> <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> <StillImage class='avatar-compact' :class="{'better-shadow': betterShadow}" :src="notification.action.user.profile_image_url_original"/> @@ -25,15 +25,15 @@ <small>{{$t('notifications.followed_you')}}</small> </span> </div> - <small class="timeago"><router-link @click.native="activatePanel('timeline')" v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> + <small class="timeago"><router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small> </span> <div class="follow-text" v-if="notification.type === 'follow'"> - <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(notification.action.user)"> + <router-link :to="userProfileLink(notification.action.user)"> @{{notification.action.user.screen_name}} </router-link> </div> <template v-else> - <status :activatePanel="activatePanel" class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status> + <status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status> </template> </div> </div> diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 4b7a591d..ea32bbd0 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -1,10 +1,12 @@ import Notification from '../notification/notification.vue' import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js' - -import { sortBy, filter } from 'lodash' +import { + notificationsFromStore, + visibleNotificationsFromStore, + unseenNotificationsFromStore +} from '../../services/notification_utils/notification_utils.js' const Notifications = { - props: [ 'activatePanel' ], created () { const store = this.$store const credentials = store.state.users.currentUser.credentials @@ -12,28 +14,17 @@ const Notifications = { notificationsFetcher.startFetching({ store, credentials }) }, computed: { - visibleTypes () { - return [ - this.$store.state.config.notificationVisibility.likes && 'like', - this.$store.state.config.notificationVisibility.mentions && 'mention', - this.$store.state.config.notificationVisibility.repeats && 'repeat', - this.$store.state.config.notificationVisibility.follows && 'follow' - ].filter(_ => _) - }, notifications () { - return this.$store.state.statuses.notifications.data + return notificationsFromStore(this.$store) }, error () { return this.$store.state.statuses.notifications.error }, unseenNotifications () { - return filter(this.visibleNotifications, ({seen}) => !seen) + return unseenNotificationsFromStore(this.$store) }, visibleNotifications () { - // Don't know why, but sortBy([seen, -action.id]) doesn't work. - let sortedNotifications = sortBy(this.notifications, ({action}) => -action.id) - sortedNotifications = sortBy(sortedNotifications, 'seen') - return sortedNotifications.filter((notification) => this.visibleTypes.includes(notification.type)) + return visibleNotificationsFromStore(this.$store) }, unseenCount () { return this.unseenNotifications.length diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index bef48567..64f18720 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -14,7 +14,7 @@ <div class="panel-body"> <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'> <div class="notification-overlay"></div> - <notification :activatePanel="activatePanel" :notification="notification"></notification> + <notification :notification="notification"></notification> </div> </div> <div class="panel-footer"> diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js new file mode 100644 index 00000000..82d6d209 --- /dev/null +++ b/src/components/side_drawer/side_drawer.js @@ -0,0 +1,47 @@ +import UserCardContent from '../user_card_content/user_card_content.vue' +import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' + +const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] + +const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) + +const SideDrawer = { + props: [ 'logout' ], + data: () => ({ + closed: true, + touchCoord: [0, 0] + }), + components: { UserCardContent }, + computed: { + currentUser () { + return this.$store.state.users.currentUser + }, + chat () { return this.$store.state.chat.channel.state === 'joined' }, + unseenNotifications () { + return unseenNotificationsFromStore(this.$store) + }, + unseenNotificationsCount () { + return this.unseenNotifications.length + } + }, + methods: { + toggleDrawer () { + this.closed = !this.closed + }, + doLogout () { + this.logout() + this.toggleDrawer() + }, + touchStart (e) { + this.touchCoord = touchEventCoord(e) + }, + touchMove (e) { + const delta = deltaCoord(this.touchCoord, touchEventCoord(e)) + if (delta[0] < -30 && Math.abs(delta[1]) < Math.abs(delta[0]) && !this.closed) { + this.toggleDrawer() + } + } + } +} + +export default SideDrawer diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue new file mode 100644 index 00000000..156c4934 --- /dev/null +++ b/src/components/side_drawer/side_drawer.vue @@ -0,0 +1,188 @@ +<template> + <div class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"> + <div class="side-drawer" + :class="{'side-drawer-closed': closed}" + @touchstart="touchStart" + @touchmove="touchMove" + > + <div class="side-drawer-heading" @click="toggleDrawer"> + <user-card-content :user="currentUser" :switcher="false" :hideBio="true"> + </user-card-content> + </div> + <ul> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'new-status', params: { username: currentUser.screen_name } }"> + {{ $t("post_status.new_status") }} + </router-link> + </li> + <li v-else @click="toggleDrawer"> + <router-link :to="{ name: 'login' }"> + {{ $t("login.login") }} + </router-link> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'notifications', params: { username: currentUser.screen_name } }"> + {{ $t("notifications.notifications") }} {{ unseenNotificationsCount > 0 ? `(${unseenNotificationsCount})` : '' }} + </router-link> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> + {{ $t("nav.dms") }} + </router-link> + </li> + <li> + <div class="divider"></div> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'friends' }"> + {{ $t("nav.timeline") }} + </router-link> + </li> + <li v-if="currentUser && currentUser.locked" @click="toggleDrawer"> + <router-link to='/friend-requests'> + {{ $t("nav.friend_requests") }} + </router-link> + </li> + <li @click="toggleDrawer"> + <router-link to='/main/public'> + {{ $t("nav.public_tl") }} + </router-link> + </li> + <li @click="toggleDrawer"> + <router-link to='/main/all'> + {{ $t("nav.twkn") }} + </router-link> + </li> + <li v-if="currentUser && chat" @click="toggleDrawer"> + <router-link :to="{ name: 'chat' }"> + {{ $t("nav.chat") }} + </router-link> + </li> + <li> + <div class="divider"></div> + </li> + <li @click="toggleDrawer"> + <router-link :to="{ name: 'user-search'}"> + {{ $t("nav.user_search") }} + </router-link> + </li> + <li @click="toggleDrawer"> + <router-link :to="{ name: 'settings'}"> + {{ $t("settings.settings") }} + </router-link> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <a @click="doLogout" href="#"> + {{ $t("login.logout") }} + </a> + </li> + </ul> + </div> + <div class="side-drawer-click-outside" @click.stop.prevent="toggleDrawer" :class="{'side-drawer-click-outside-closed': closed}"></div> + </div> +</template> + +<script src="./side_drawer.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.side-drawer-container { + position: fixed; + z-index: 1000; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: stretch; +} + +.side-drawer-container-open { + transition-delay: 0.0s; + transition-property: left; +} + +.side-drawer-container-closed { + left: -100%; + transition-delay: 0.5s; + transition-property: left; +} + +.side-drawer-click-outside { + flex: 1 1 100%; +} + +.side-drawer { + overflow-x: hidden; /* Disable horizontal scroll */ + transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ + transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + margin: 0 0 0 -100px; + padding: 0 0 1em 100px; + width: 80%; + max-width: 20em; + flex: 0 0 80%; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); + box-shadow: var(--panelShadow); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); +} + +.side-drawer-click-outside-closed { + flex: 0 0 0; +} + +.side-drawer-closed { + margin: 0 0 0 calc(-100% - 100px); +} + +.side-drawer-heading { + background: transparent; + flex-direction: column; + align-items: stretch; + display: flex; + min-height: 7em; + padding: 0; + margin: 0; + + .profile-panel-background { + border-radius: 0; + .panel-heading { + background: transparent; + flex-direction: column; + align-items: stretch; + } + } +} + +.side-drawer ul { + list-style: none; + margin: 0; + padding: 0; +} + +.side-drawer li { + padding: 0; + + .divider { + border-top: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + margin: 0.2em 0; + } + + a { + display: block; + padding: 0.5em 0.85em; + + &:hover { + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + } + } +} + +.side-drawer li:last-child { + border: none; +} +</style> diff --git a/src/components/status/status.js b/src/components/status/status.js index e683056f..71fd0af6 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -21,8 +21,7 @@ const Status = { 'replies', 'noReplyLinks', 'noHeading', - 'inlineExpanded', - 'activatePanel' + 'inlineExpanded' ], data () { return { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1b102d93..af756801 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -3,7 +3,7 @@ <template v-if="muted && !noReplyLinks"> <div class="media status container muted"> <small> - <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.user.id, status.user.screen_name)"> + <router-link :to="userProfileLink(status.user.id, status.user.screen_name)"> {{status.user.screen_name}} </router-link> </small> @@ -38,12 +38,12 @@ <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4> <h4 class="user-name" v-else>{{status.user.name}}</h4> <span class="links"> - <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.user.id, status.user.screen_name)"> + <router-link :to="userProfileLink(status.user.id, status.user.screen_name)"> {{status.user.screen_name}} </router-link> <span v-if="status.in_reply_to_screen_name" class="faint reply-info"> <i class="icon-right-open"></i> - <router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.in_reply_to_user_id, status.in_reply_to_screen_name)"> + <router-link :to="userProfileLink(status.in_reply_to_user_id, status.in_reply_to_screen_name)"> {{status.in_reply_to_screen_name}} </router-link> </span> @@ -60,7 +60,7 @@ </h4> </div> <div class="media-heading-right"> - <router-link class="timeago" @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }"> + <router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }"> <timeago :since="status.created_at" :auto-update="60"></timeago> </router-link> <div class="button-icon visibility-icon" v-if="status.visibility"> @@ -79,7 +79,7 @@ </div> <div v-if="showPreview" class="status-preview-container"> - <status :activatePanel="activatePanel" class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status> + <status class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status> <div class="status-preview status-preview-loading" v-else> <i class="icon-spin4 animate-spin"></i> </div> diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js index 75185053..c0d5c515 100644 --- a/src/components/user_card_content/user_card_content.js +++ b/src/components/user_card_content/user_card_content.js @@ -3,7 +3,7 @@ import { hex2rgb } from '../../services/color_convert/color_convert.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' export default { - props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ], + props: [ 'user', 'switcher', 'selected', 'hideBio' ], data () { return { followRequestInProgress: false, diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index c76c41a9..3804302b 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -3,14 +3,14 @@ <div class="panel-heading text-center"> <div class='user-info'> <div class='container'> - <router-link @click.native="activatePanel && activatePanel('timeline')" :to="userProfileLink(user)"> + <router-link :to="userProfileLink(user)"> <StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/> </router-link> <div class="name-and-screen-name"> <div class="top-line"> <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> <div :title="user.name" class='user-name' v-else>{{user.name}}</div> - <router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" v-if="!isOtherUser"> + <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser"> <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i> </router-link> <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser"> @@ -18,7 +18,7 @@ </a> </div> - <router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name' :to="userProfileLink(user)"> + <router-link class='user-screen-name' :to="userProfileLink(user)"> <span class="handle">@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span> <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> </router-link> diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index eeb76c35..37d628fa 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,14 +1,16 @@ <template> - <div class="user-finder-container"> - <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> - <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> - <template v-else> - <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/> - <button class="btn search-button" @click="findUser(username)"> - <i class="icon-search"/> - </button> - <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> - </template> + <div> + <div class="user-finder-container"> + <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> + <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> + <template v-else> + <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/> + <button class="btn search-button" @click="findUser(username)"> + <i class="icon-search"/> + </button> + <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> + </template> + </div> </div> </template> diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js index eb7cb09c..15804b88 100644 --- a/src/components/user_panel/user_panel.js +++ b/src/components/user_panel/user_panel.js @@ -3,7 +3,6 @@ import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCardContent from '../user_card_content/user_card_content.vue' const UserPanel = { - props: [ 'activatePanel' ], computed: { user () { return this.$store.state.users.currentUser } }, diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue index 83eb099f..2d5cb500 100644 --- a/src/components/user_panel/user_panel.vue +++ b/src/components/user_panel/user_panel.vue @@ -1,7 +1,7 @@ <template> <div class="user-panel"> <div v-if='user' class="panel panel-default" style="overflow: visible;"> - <user-card-content :activatePanel="activatePanel" :user="user" :switcher="false" :hideBio="true"></user-card-content> + <user-card-content :user="user" :switcher="false" :hideBio="true"></user-card-content> <div class="panel-footer"> <post-status-form v-if='user'></post-status-form> </div> diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js index 1e488f0c..9c026276 100644 --- a/src/components/user_search/user_search.js +++ b/src/components/user_search/user_search.js @@ -9,6 +9,7 @@ const userSearch = { ], data () { return { + username: '', users: [] } }, @@ -21,7 +22,14 @@ const userSearch = { } }, methods: { + newQuery (query) { + this.$router.push({ name: 'user-search', query: { query } }) + }, search (query) { + if (!query) { + this.users = [] + return + } userSearchApi.search({query, store: this.$store}) .then((res) => { this.users = res diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue index 20ae84fc..3c2bd3fb 100644 --- a/src/components/user_search/user_search.vue +++ b/src/components/user_search/user_search.vue @@ -3,6 +3,12 @@ <div class="panel-heading"> {{$t('nav.user_search')}} </div> + <div class="user-search-input-container"> + <input class="user-finder-input" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/> + <button class="btn search-button" @click="newQuery(username)"> + <i class="icon-search"/> + </button> + </div> <div class="panel-body"> <user-card v-for="user in users" :key="user.id" :user="user" :showFollows="true"></user-card> </div> @@ -10,3 +16,15 @@ </template> <script src="./user_search.js"></script> + +<style lang="scss"> +.user-search-input-container { + margin: 0.5em; + display: flex; + justify-content: center; + + .search-button { + margin-left: 0.5em; + } +} +</style> |