добавление адаптации нового дизайна для разных устройств
This commit is contained in:
Professional
parent
cc53c49f9e
commit
e0ed26d0de
46
src/App.vue
46
src/App.vue
@ -96,6 +96,12 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Global Responsive Styles */
|
||||
.app {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-header .navbar-brand {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -110,6 +116,42 @@ main.container {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Можно добавить стили для .app-footer, если нужно, чтобы он был прижат к низу */
|
||||
/* Либо используй классы Bootstrap для flex-grow-1 на main и mt-auto на footer */
|
||||
/* Адаптивные глобальные стили */
|
||||
@media (max-width: 576px) {
|
||||
.app-header .navbar-brand {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.app-header .btn {
|
||||
min-width: 80px;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small phones */
|
||||
@media (max-width: 375px) {
|
||||
.app-header .navbar-brand {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.app-header .btn {
|
||||
min-width: 70px;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.35rem 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape orientation on mobile */
|
||||
@media (max-height: 450px) and (orientation: landscape) {
|
||||
.app-header {
|
||||
padding-top: 0.25rem !important;
|
||||
padding-bottom: 0.25rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -776,11 +776,11 @@ const getDialogsCountText = (count) => {
|
||||
/* Responsive */
|
||||
@media (max-width: 576px) {
|
||||
.chatlist-title h1 {
|
||||
font-size: 2rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 1.25rem 1.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@ -792,12 +792,130 @@ const getDialogsCountText = (count) => {
|
||||
}
|
||||
|
||||
.user-photo-container {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1rem;
|
||||
font-size: 0.95rem;
|
||||
max-width: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.last-message {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.empty-chats-content p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Малые телефоны */
|
||||
@media (max-width: 375px) {
|
||||
.chatlist-title h1 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.conversation-card {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
.user-photo-container {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.last-message {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Большие телефоны и малые планшеты */
|
||||
@media (min-width: 577px) and (max-width: 767px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
|
||||
.chatlist-card {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.conversation-card {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Планшеты */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Малые настольные */
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.chatlist-card {
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Большие настольные */
|
||||
@media (min-width: 1200px) {
|
||||
.chatlist-card {
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ландшафтная ориентация на мобильных устройствах */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.chatlist-header {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.chatlist-title h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.conversations-list {
|
||||
max-height: calc(100vh - 180px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1282,5 +1282,127 @@ const handleClickOutsideContextMenu = (event) => {
|
||||
.messages-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 0.7rem 0.9rem;
|
||||
}
|
||||
|
||||
.message-meta {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.scroll-bottom-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
.participant-name {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small phones */
|
||||
@media (max-width: 375px) {
|
||||
.message-wrapper {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
padding: 0.6rem;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.message-typing {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.chat-info {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 0.6rem 1rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large phones and small tablets */
|
||||
@media (min-width: 577px) and (max-width: 767px) {
|
||||
.chat-card {
|
||||
height: calc(100vh - 130px);
|
||||
}
|
||||
|
||||
.message-wrapper {
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.message-actions {
|
||||
opacity: 0.7; /* Always visible but slightly transparent */
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablets */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.chat-card {
|
||||
height: calc(100vh - 140px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Small desktops */
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.container {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape orientation on mobile */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.chat-header {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.chat-card {
|
||||
height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
.messages-container {
|
||||
padding: 0.8rem;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
padding: 0.5rem;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.message-item {
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1536,96 +1536,205 @@ onMounted(async () => {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Стили кнопок действий */
|
||||
.action-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
/* Адаптивные стили для разных устройств */
|
||||
@media (max-width: 576px) {
|
||||
.profile-card {
|
||||
padding: 1.5rem;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.profile-photo {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 0.8rem 1.2rem;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.edit-btn, .save-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.photo-item, .add-photo-btn {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.form-input, .form-textarea {
|
||||
padding: 0.6rem 0.8rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
/* Малые телефоны */
|
||||
@media (max-width: 375px) {
|
||||
.profile-photo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
}
|
||||
|
||||
.photo-item, .add-photo-btn {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.edit-btn, .save-btn {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: linear-gradient(45deg, #f5365c, #f56036);
|
||||
color: white;
|
||||
/* Большие телефоны и малые планшеты */
|
||||
@media (min-width: 577px) and (max-width: 767px) {
|
||||
.profile-photo {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.photo-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
}
|
||||
|
||||
.info-item.full-width {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn.small {
|
||||
padding: 0.3rem 0.6rem;
|
||||
font-size: 0.8rem;
|
||||
/* Планшеты */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.container {
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
display: grid;
|
||||
grid-template-columns: 180px 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.profile-photo-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
/* Малые настольные */
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.profile-photo-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
/* Большие настольные */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
.profile-photo-section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
text-align: left;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.add-photo-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
background: linear-gradient(45deg, #667eea, #764ba2);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.add-photo-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
/* Стили для предупреждений и сообщений */
|
||||
.alert {
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.alert.error {
|
||||
background-color: rgba(220, 53, 69, 0.1);
|
||||
color: #dc3545;
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
|
||||
.alert.success {
|
||||
background-color: rgba(40, 167, 69, 0.1);
|
||||
color: #28a745;
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
|
||||
.alert.info {
|
||||
background-color: rgba(102, 126, 234, 0.1);
|
||||
color: #667eea;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
/* Ландшафтная ориентация на мобильных */
|
||||
@media (max-height: 500px) and (orientation: landscape) {
|
||||
.modern-profile-view {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.profile-photo {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1247,5 +1247,155 @@ watch(suggestions, () => {
|
||||
.bio-container {
|
||||
max-height: 60px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.like-indicator, .pass-indicator {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.carousel-nav {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.match-popup {
|
||||
width: 95%;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small phones */
|
||||
@media (max-width: 375px) {
|
||||
.swipe-area {
|
||||
height: 55vh;
|
||||
min-height: 350px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.user-gender {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.bio-text {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.like-indicator, .pass-indicator {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large phones and small tablets */
|
||||
@media (min-width: 577px) and (max-width: 767px) {
|
||||
.swipe-area {
|
||||
height: 65vh;
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablets */
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.swipe-area {
|
||||
height: 70vh;
|
||||
max-height: 700px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small desktops */
|
||||
@media (min-width: 992px) and (max-width: 1199px) {
|
||||
.container {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.swipe-area {
|
||||
max-height: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large desktops */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 850px;
|
||||
}
|
||||
|
||||
.swipe-area {
|
||||
max-height: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Landscape orientation on mobile */
|
||||
@media (max-height: 576px) and (orientation: landscape) {
|
||||
.swipe-area {
|
||||
height: 80vh;
|
||||
min-height: 280px;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.bio-container {
|
||||
max-height: 40px;
|
||||
}
|
||||
|
||||
.card-details-section {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.user-info-overlay {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.match-popup {
|
||||
width: 80%;
|
||||
max-width: 350px;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user