Skip to content
Snippets Groups Projects
Commit 925a139a authored by VIktorGrev's avatar VIktorGrev
Browse files

style: Adding icons on menu and friends

parent 349d463f
No related branches found
No related tags found
No related merge requests found
Pipeline #276019 failed
Stage: install_dependencies
Stage: lint
Stage: build_project
Show whitespace changes
Inline Side-by-side
src/assets/icons/admin.svg 0 → 100644
+ 1
− 0
View file @ 925a139a
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M680-280q25 0 42.5-17.5T740-340q0-25-17.5-42.5T680-400q-25 0-42.5 17.5T620-340q0 25 17.5 42.5T680-280Zm0 120q31 0 57-14.5t42-38.5q-22-13-47-20t-52-7q-27 0-52 7t-47 20q16 24 42 38.5t57 14.5ZM480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v227q-19-8-39-14.5t-41-9.5v-147l-240-90-240 90v188q0 47 12.5 94t35 89.5Q310-290 342-254t71 60q11 32 29 61t41 52q-1 0-1.5.5t-1.5.5Zm200 0q-83 0-141.5-58.5T480-280q0-83 58.5-141.5T680-480q83 0 141.5 58.5T880-280q0 83-58.5 141.5T680-80ZM480-494Z" fill="#ffffff"/></svg>
\ No newline at end of file
src/assets/icons/friends.svg 0 → 100644
+ 1
− 0
View file @ 925a139a
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48"><path d="M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM360-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Zm400-160q0 66-47 113t-113 47q-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0 320Zm0-400Z" fill="#ffffff"/></svg>
\ No newline at end of file
src/assets/icons/remove-white.svg 0 → 100644
+ 1
− 0
View file @ 925a139a
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-520v-80h240v80H640Zm-280 40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z" fill="#ffffff"/></svg>
\ No newline at end of file
src/assets/icons/remove.svg 0 → 100644
+ 1
− 0
View file @ 925a139a
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M640-520v-80h240v80H640Zm-280 40q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z"/></svg>
\ No newline at end of file
src/components/BaseComponents/Menu.vue
+ 7
− 0
View file @ 925a139a
......@@ -36,10 +36,14 @@
<ul class="dropdown-menu dropdown-username-content">
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toUserProfile"><img src="@/assets/icons/person.svg">User Profile</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toFriends"><img src="@/assets/icons/friends.svg">Friends</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toSetting"><img src="@/assets/icons/settings.svg">Setting</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toFeedback"><img src="@/assets/icons/feedback.svg">Feedback</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toSetting"><img src="@/assets/icons/admin.svg">Admin table</a></li>
<li><a class="dropdown-item text-white dropdown-username-link" href="#"
@click="toLogout"><img src="@/assets/icons/logout.svg">Log out</a></li>
</ul>
......@@ -88,6 +92,9 @@ function toFeedback() {
router.push('/feedback')
}
function toFriends() {
router.push('/friends')
}
function toUserProfile() {
router.push('/profile')
......
src/views/User/UserFriendsView.vue
+ 357
− 333
View file @ 925a139a
<template>
<div class="container">
<h1>Your Friends</h1>
<button class="btn btn-primary pull-right my-3" @click="addFriend">+ Add Friend</button>
<div class="row">
<div class="col-lg-3">
<div class="card card-one">
......@@ -14,10 +15,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -33,10 +41,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -52,10 +67,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -71,10 +93,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -93,10 +122,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -112,10 +148,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -131,10 +174,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -150,10 +200,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -169,10 +226,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -188,10 +252,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -207,10 +278,17 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
......@@ -226,13 +304,30 @@
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
<div class="contacts">
<a href="#"><i class="fas fa-plus"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
<div class="clear"></div>
<a class="text removeFriend" data-bs-toggle="collapse" href="#collapseExample" role="button"
aria-expanded="false" aria-controls="collapseExample">
See more
</a>
<div class="collapse" id="collapseExample">
<button class="btn btn-danger">
<h5> <img src="@/assets/icons/remove-white.svg" style="width: 30px"> Remove friend</h5>
</button>
</div>
</div>
</div>
</div>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
</template>
......@@ -258,8 +353,8 @@
}
async function fetchLibrary() {
function addFriend() {
router.push('/add-friend');
}
// Define the navigateToQuiz method
......@@ -280,6 +375,7 @@
color: #28384d;
}
/*social */
.card-one {
position: relative;
......@@ -287,8 +383,10 @@
background: #fff;
box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.4);
}
.card {
margin-bottom: 35px;
padding-bottom: 1rem;
box-shadow: 0 10px 20px 0 rgba(26, 44, 57, 0.14);
border: none;
}
......@@ -543,96 +641,22 @@ ul.friend-list .right p {
color: #777;
}
.card-one .contacts {
width: 200px;
max-width: 100%;
margin: 0 auto 3rem;
}
.card-one .contacts a {
display: block;
width: 33.333333%;
#gallery li {
width: 24%;
float: left;
text-align: center;
color: #c8c;
}
.card-one .contacts a:hover {
color: #333;
}
.card-one .contacts a:hover .fa::before {
color: #fff;
}
.card-one .contacts a:hover .fa::after {
width: 100%;
height: 100%;
}
.card-one .contacts a .fa {
position: relative;
width: 40px;
height: 40px;
line-height: 39px;
overflow: hidden;
text-align: center;
font-size: 1.3em;
}
.card-one .contacts a .fa:before {
position: relative;
z-index: 1;
}
.card-one .contacts a .fa::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: #c8c;
transition: width .3s, height .3s;
}
.card-one .contacts a:last-of-type .fa {
line-height: 36px;
}
.card-one .footer {
position: relative;
padding: 1rem;
background-color: #3afe;
text-align: center;
}
.card-one .footer a {
padding: 0 1rem;
color: #e2e2e2;
transition: color .4s;
}
margin: 6px;
.card-one .footer a:hover {
color: #c8c;
}
.card-one .footer::before {
content: '';
position: absolute;
top: -27px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-bottom-color: #3afe;
.removeFriend {
text-wrap: nowrap;
}
#gallery li {
width: 24%;
float: left;
margin: 6px;
.contacts {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment