From 5f9789bd24ec60f8aabea3e8061ac98da67eaff7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 9 Feb 2021 01:27:14 +0300
Subject: [PATCH] Fix styles for settings header and add search in mobile
version
---
src/views/moderation_log/index.vue | 3 --
src/views/settings/index.vue | 16 ++++++++---
src/views/settings/styles/main.scss | 43 ++++++++++-------------------
3 files changed, 27 insertions(+), 35 deletions(-)
diff --git a/src/views/moderation_log/index.vue b/src/views/moderation_log/index.vue
index c8c350c4..5eeef28f 100644
--- a/src/views/moderation_log/index.vue
+++ b/src/views/moderation_log/index.vue
@@ -197,9 +197,6 @@ h1 {
.router-link {
text-decoration: none;
}
-.search-container {
- text-align: right;
-}
.pagination {
text-align: center;
}
diff --git a/src/views/settings/index.vue b/src/views/settings/index.vue
index 1e67af72..7c5d0434 100644
--- a/src/views/settings/index.vue
+++ b/src/views/settings/index.vue
@@ -4,7 +4,7 @@
<reboot-button/>
</div>
<div v-if="isDesktop">
- <div :class="isSidebarOpen" class="settings-header-container">
+ <div :class="isSidebarOpen">
<h1 class="settings-header">{{ $t('settings.settings') }}</h1>
<div class="docs-search-container">
<el-link
@@ -34,8 +34,6 @@
<div v-if="isMobile || isTablet">
<div :class="isSidebarOpen" class="settings-header-container">
<h1 class="settings-header">{{ $t('settings.settings') }}</h1>
- </div>
- <div class="nav-container">
<el-link
:underline="false"
href="https://docs-develop.pleroma.social/backend/administration/CLI_tasks/config/"
@@ -48,7 +46,17 @@
</el-button>
</el-link>
</div>
- <!-- <div class="settings-search-input-container"/> -->
+ <div class="settings-search-container">
+ <el-autocomplete
+ v-model="searchQuery"
+ :fetch-suggestions="querySearch"
+ :trigger-on-focus="false"
+ clearable
+ placeholder="Search"
+ prefix-icon="el-icon-search"
+ class="settings-search-input"
+ @select="handleSearchSelect"/>
+ </div>
<component :is="componentName"/>
</div>
</div>
diff --git a/src/views/settings/styles/main.scss b/src/views/settings/styles/main.scss
index 0f97497b..a49d97fa 100644
--- a/src/views/settings/styles/main.scss
+++ b/src/views/settings/styles/main.scss
@@ -30,7 +30,8 @@
height: 2px;
}
.docs-search-container {
- float: right;
+ display: flex;
+ justify-content: flex-end;
margin-right: 30px;
}
.editable-keyword-container {
@@ -307,9 +308,6 @@
.header-sidebar-closed {
max-width: 1728px;
}
- .settings-header-container {
- height: 87px;
- }
.settings-search-input {
width: 350px;
margin-left: 5px;
@@ -488,13 +486,6 @@
.limit-input {
width: 45%;
}
- .nav-container {
- display: flex;
- height: 36px;
- justify-content: space-between;
- align-items: center;
- margin: 15px;
- }
.proxy-url-input {
flex-direction: column;
align-items: flex-start;
@@ -540,15 +531,9 @@
display: inline-block;
margin: 10px 15px 15px 15px;
}
- .docs-search-container {
- float: right;
- }
.settings-search-input {
- width: 100%;
- margin-left: 0;
- }
- .settings-search-input-container {
- margin: 0 15px 15px 15px;
+ margin: 0 15px 25px 15px;
+ width: stretch;
}
.socks5-checkbox-container {
width: 100%;
@@ -638,7 +623,9 @@
margin-right: 5px
}
.settings-header-container {
- height: 45px;
+ display: flex;
+ justify-content: space-between;
+ margin-right: 15px;
}
.value-input {
width: 60%;
@@ -677,13 +664,6 @@
display: flex;
justify-content: space-between;
}
- .nav-container {
- display: flex;
- height: 36px;
- justify-content: space-between;
- align-items: center;
- margin: 15px 30px 15px 15px;
- }
.rate-limit-content {
width: 65%;
}
@@ -694,7 +674,14 @@
float: right;
}
.settings-header-container {
- height: 36px;
+ display: flex;
+ justify-content: space-between;
+ margin-right: 15px;
+ }
+ .settings-search-container {
+ display: flex;
+ justify-content: flex-end;
+ margin-right: 15px;
}
.settings-search-input {
width: 250px;
--
GitLab