supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

More consistent color scheme and usage

Browse Source 
Only show search by click on search icon (desktop as well)
Improved color scheme
Keep search open search page
This commit is contained in:
Nachtalb 2021-04-13 00:55:57 +02:00
parent 3fb9c8523a
commit 13d4f035df
No known key found for this signature in database
GPG Key ID: E48DF13C07055D92
2 changed files with 40 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
client/components/MessageSearchForm.vue
View File

@ -12,6 +12,7 @@
/> />
</div> </div>
<button <button
v-if="!onSearchPage"
class="search" class="search"
type="button" type="button"
aria-label="Search messages in this channel" aria-label="Search messages in this channel"
@ -29,27 +30,22 @@ form.message-search .input-wrapper {
display: flex; display: flex;
} }
form.message-search button {
display: none !important;
}
form.message-search input { form.message-search input {
width: 100%; width: 100%;
height: auto !important; height: auto !important;
margin: 7px 0; margin: 7px 0;
border: 0; border: 0;
color: inherit; color: inherit;
background-color: rgba(128, 128, 128, 0.15); background-color: #fafafa;
} }
form.message-search input::placeholder { form.message-search input::placeholder {
color: rgba(128, 128, 128, 0.4); color: rgba(0, 0, 0, 0.35);
} }
@media (min-width: 480px) { @media (min-width: 480px) {
form.message-search input { form.message-search input {
min-width: 140px; min-width: 140px;
transition: min-width 0.2s;
} }
form.message-search input:focus { form.message-search input:focus {
@ -57,30 +53,28 @@ form.message-search input::placeholder {
} }
} }
@media (max-width: 768px) { form.message-search .input-wrapper {
form.message-search .input-wrapper { position: absolute;
position: absolute; top: 45px;
top: 45px; left: 0;
left: 0; right: 0;
right: 0; z-index: 1;
z-index: 1; height: 0;
height: 0; overflow: hidden;
transition: height 0.2s; background: var(--window-bg-color);
overflow: hidden; }
background: var(--window-bg-color);
}
form.message-search .input-wrapper input { form.message-search .input-wrapper input {
margin: 7px; margin: 7px;
} }
form.message-search.opened .input-wrapper { form.message-search.opened .input-wrapper {
height: 50px; height: 50px;
} }
form.message-search button { #chat form.message-search button {
display: flex !important; display: flex;
} color: #607992;
} }
</style> </style>
@ -97,6 +91,11 @@ export default {
searchInput: "", searchInput: "",
}; };
}, },
computed: {
onSearchPage() {
return this.$route.name === "SearchResults";
},
},
watch: { watch: {
"$route.query.q"() { "$route.query.q"() {
this.searchInput = this.$route.query.q; this.searchInput = this.$route.query.q;
@ -104,10 +103,13 @@ export default {
}, },
mounted() { mounted() {
this.searchInput = this.$route.query.q; this.searchInput = this.$route.query.q;
this.searchOpened = this.onSearchPage;
}, },
methods: { methods: {
closeSearch() { closeSearch() {
this.searchOpened = false; if (!this.onSearchPage) {
this.searchOpened = false;
}
}, },
toggleSearch() { toggleSearch() {
if (this.searchOpened) { if (this.searchOpened) {
@ -125,8 +127,6 @@ export default {
return; return;
} }
this.searchOpened = false;
this.$router this.$router
.push({ .push({
name: "SearchResults", name: "SearchResults",

9
client/themes/morning.css
View File

@ -118,6 +118,15 @@ body {
color: #b7c5d1; color: #b7c5d1;
} }
/* Search Form */
form.message-search input {
background-color: #28333d;
}
#chat form.message-search button {
color: #b7c5d1;
}
/* Setup text colors */ /* Setup text colors */
#chat .msg[data-type="error"], #chat .msg[data-type="error"],
#chat .msg[data-type="error"] .from { #chat .msg[data-type="error"] .from {