web/satellite: users page made responsive

v-table visual bug with name fixed
v-header search position fixed
v-search expands 100% on smaller screens

Change-Id: Iadd6ecea4fba3d39af5b4ea48705f2e199810080
This commit is contained in:
NickolaiYurchenko 2022-09-05 20:12:23 +03:00 committed by Nikolay Yurchenko
parent 54eaf79b5f
commit c619ff45d8
4 changed files with 79 additions and 8 deletions

View File

@ -6,7 +6,7 @@
<div class="header-container__buttons-area">
<slot />
</div>
<div v-if="styleType === 'common'">
<div v-if="styleType === 'common'" class="search-container">
<VSearch
ref="search"
:placeholder="placeholder"
@ -73,5 +73,23 @@ export default class VHeader extends Vue {
align-items: center;
justify-content: space-between;
}
.search-container {
position: relative;
}
}
@media screen and (max-width: 1150px) {
.header-container {
flex-direction: column;
align-items: flex-start;
margin-bottom: 75px;
.search-container {
width: 100%;
margin-top: 30px;
}
}
}
</style>

View File

@ -86,7 +86,8 @@ export default class VSearch extends Vue {
.common-search-input {
position: absolute;
right: 0;
bottom: 0;
bottom: 50%;
transform: translateY(50%);
padding: 0 38px 0 18px;
border: 1px solid #f2f2f2;
box-sizing: border-box;
@ -102,4 +103,11 @@ export default class VSearch extends Vue {
background-size: 22px 22px;
background-position: top 16px right 16px;
}
@media screen and (max-width: 1150px) {
.common-search-input {
width: 100% !important;
}
}
</style>

View File

@ -31,10 +31,6 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
import TablePagination from "@/components/common/TablePagination.vue";
import { OnPageClickCallback } from "@/types/pagination";
export type SelectableItem<T> = T & {
isSelected: boolean;
}
// @vue/component
@Component({
components: {
@ -152,10 +148,59 @@ export default class VTable extends Vue {
}
}
@media screen and (max-width: 970px) {
tbody tr > .data p {
max-width: 25rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
@media screen and (max-width: 870px) {
tbody tr > .data p {
max-width: 20rem;
}
}
@media screen and (max-width: 768px) {
.select {
display: none;
}
tbody tr > .data p {
max-width: 25rem;
}
}
@media screen and (max-width: 660px) {
tbody tr > .data p {
max-width: 15rem;
}
}
@media screen and (max-width: 550px) {
tbody tr > .data p {
max-width: 15rem;
}
}
@media screen and (max-width: 440px) {
tbody tr > .data p {
max-width: 10rem;
}
}
@media screen and (max-width: 350px) {
tbody tr > .data p {
max-width: 8rem;
}
}
</style>

View File

@ -3,7 +3,7 @@
exports[`HeaderComponent.vue renders correctly 1`] = `
<div class="header-container">
<div class="header-container__buttons-area"></div>
<div>
<div class="search-container">
<vsearch-stub placeholder="" search="[Function]"></vsearch-stub>
</div>
<!---->