Skip to content

Commit

Permalink
fix 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aweiro
Aweiro committed Nov 22, 2024
1 parent 8a12381 commit c5a4210
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 138 deletions.
10 changes: 6 additions & 4 deletions admin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,12 @@ <h2 class="title admin-card-title">Список фото</h2>
<div id="photoList" class="testimonials__row"></div>
</section>

<h1 class="admin-reviews-title">Відгуки</h1>
<div id="reviewsContainer" class="container">
<!-- Тут будуть відображатися несхвалені відгуки -->
</div>
<section class="container">
<h1 class="admin-reviews-title">Відгуки</h1>
<div id="reviewsContainer">
<!-- Тут будуть відображатися несхвалені відгуки -->
</div>
</section>

<footer class="footer">
<div class="container">
Expand Down
1 change: 0 additions & 1 deletion css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2620,7 +2620,6 @@ header.main-header .menu-icon .line:last-child {
gap: 20px;
max-width: 100%;
margin: 40px auto;
padding: 0 20px;
}

.review {
Expand Down
264 changes: 131 additions & 133 deletions sass/blocks/_reviews.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,153 +9,151 @@ $accent-color: #007acc;

// Заголовок секції
#reviewsHeader {
text-align: center;
font-size: 24px;
font-weight: bold;
color: $primary-color;
margin-bottom: 20px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: $primary-color;
margin-bottom: 20px;
}

// Форма для залишення відгуку
#reviewForm {
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px $shadow-color;

label {
font-weight: bold;
color: $primary-color;
}

input[type="text"],
textarea {
padding: 12px;
font-size: 16px;
border: 1px solid $border-color;
border-radius: 5px;
transition: border-color 0.3s;
max-width: 100%;


&:focus {
border-color: $secondary-color;
outline: none;
}
}

button {
padding: 12px;
font-size: 16px;
background-color: $primary-color;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;

&:hover {
background-color: darken($primary-color, 10%);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
transform: scale(1.05);
}
}
display: flex;
flex-direction: column;
gap: 15px;
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px $shadow-color;

label {
font-weight: bold;
color: $primary-color;
}

input[type='text'],
textarea {
padding: 12px;
font-size: 16px;
border: 1px solid $border-color;
border-radius: 5px;
transition: border-color 0.3s;
max-width: 100%;

&:focus {
border-color: $secondary-color;
outline: none;
}
}

button {
padding: 12px;
font-size: 16px;
background-color: $primary-color;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;

&:hover {
background-color: darken($primary-color, 10%);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
transform: scale(1.05);
}
}
}


// Повідомлення про успішне відправлення
#successMessage {
display: flex;
align-items: center;
justify-content: center;
max-width: 600px;
margin: 20px auto;
padding: 15px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 5px;
text-align: center;

&::before {
content: "✔️ ";
font-size: 20px;
margin-right: 5px;
}
display: flex;
align-items: center;
justify-content: center;
max-width: 600px;
margin: 20px auto;
padding: 15px;
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
border-radius: 5px;
text-align: center;

&::before {
content: '✔️ ';
font-size: 20px;
margin-right: 5px;
}
}

// Контейнер для відгуків
#reviewsContainer {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
max-width: 100%;
margin: 40px auto;
padding: 0 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
max-width: 100%;
margin: 40px auto;
// padding: 0 20px;
}

// Картка відгуку
.review {
background-color: #fff;
border: 1px solid $border-color;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 12px $shadow-color;
transition: transform 0.3s, box-shadow 0.3s;

&:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

h3 {
margin: 0 0 10px;
color: $primary-color;
font-weight: bold;

&::before {
content: "👤 ";
font-size: 18px;
margin-right: 5px;
}
}

.review-text {
max-height: 60px; // Висота для двох рядків тексту
overflow: hidden;
transition: max-height 0.3s ease;
&.expanded {
max-height: none; // Знімає обмеження висоти
}
}
.read-more-btn {
// background-color: $secondary-color;
background: none;
color: #949494;
border: none;
padding: 0;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
// transition: background-color 0.3s;

// &:hover {
// background-color: darken($secondary-color, 10%);
// }
}

.review-date {
font-size: 12px;
color: darken($text-color, 20%);
margin-top: 10px;
text-align: right;
display: block;
}
background-color: #fff;
border: 1px solid $border-color;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 12px $shadow-color;
transition: transform 0.3s, box-shadow 0.3s;

&:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

h3 {
margin: 0 0 10px;
color: $primary-color;
font-weight: bold;

&::before {
content: '👤 ';
font-size: 18px;
margin-right: 5px;
}
}

.review-text {
max-height: 60px; // Висота для двох рядків тексту
overflow: hidden;
transition: max-height 0.3s ease;

&.expanded {
max-height: none; // Знімає обмеження висоти
}
}

.read-more-btn {
// background-color: $secondary-color;
background: none;
color: #949494;
border: none;
padding: 0;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
// transition: background-color 0.3s;

// &:hover {
// background-color: darken($secondary-color, 10%);
// }
}

.review-date {
font-size: 12px;
color: darken($text-color, 20%);
margin-top: 10px;
text-align: right;
display: block;
}
}

0 comments on commit c5a4210

Please sign in to comment.