Skip to content

B
Backend Server
Commit f61015a2 authored by SpinShare's avatar SpinShare
Browse files
Options

added user menu and notification style

parent 5ad0b236
Hide whitespace changes
Inline Side-by-side
Showing with 432 additions and 43 deletions
public/assets/css/main.css
View file @ f61015a2
......@@ -32,26 +32,33 @@ main {
}
main aside {
background: #000;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
display: grid;
position: fixed;
z-index: 1000;
top: 0px;
left: 0px;
right: 0px;
grid-template-columns: 180px auto 1fr auto;
}
main aside .logo {
padding: 15px 30px;
height: 60px;
}
main aside .logo img {
height: 100%;
grid-template-columns: 1fr 500px 1fr;
}
main aside nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
main aside nav.items-left {
justify-content: flex-start;
}
main aside nav.items-right {
justify-content: flex-end;
}
main aside nav .logo {
width: 180px;
padding: 15px 30px;
height: 60px;
}
main aside nav .logo img {
height: 100%;
}
main aside nav .upload-button {
align-items: center;
......@@ -67,12 +74,28 @@ main aside nav .item {
background: transparent;
border-bottom: 2px solid transparent;
color: #fff;
position: relative;
transition: 0.2s ease opacity, 0.2s ease background;
}
main aside nav .item .indicator {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
font-size: 10px;
font-weight: bold;
background: #e22c78;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
main aside nav .item:hover {
cursor: pointer;
}
main aside nav .item:hover .mdi {
main aside nav .item:hover > .mdi {
opacity: 1;
}
main aside nav .item.active {
......@@ -81,17 +104,156 @@ main aside nav .item.active {
main aside nav .item.active .mdi {
opacity: 1;
}
main aside nav .item .mdi {
main aside nav .item > .mdi {
font-size: 22px;
opacity: 0.4;
}
main aside nav .user-avatar {
main aside nav .item-notifications {
position: relative;
}
main aside nav .item-notifications .notification-box {
width: 400px;
height: 500px;
position: absolute;
top: 70px;
right: 10px;
border-radius: 4px;
background: #000;
cursor: default;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
display: none;
grid-template-rows: auto 1fr;
}
main aside nav .item-notifications .notification-box > header {
display: grid;
grid-template-columns: 1fr auto;
padding: 10px 15px;
align-items: center;
}
main aside nav .item-notifications .notification-box > header span {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
}
main aside nav .item-notifications .notification-box .notification-list {
overflow-y: scroll;
display: flex;
background: rgba(255, 255, 255, 0.075);
flex-direction: column;
}
main aside nav .item-notifications .notification-box .notification-list .notification-item {
display: grid;
grid-template-columns: 32px 1fr;
grid-gap: 10px;
padding: 10px;
color: #fff;
text-decoration: none;
align-items: center;
}
main aside nav .item-notifications .notification-box .notification-list .notification-item .notification-icon {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
}
main aside nav .item-notifications .notification-box .notification-list .notification-item .cover {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
}
main aside nav .item-notifications .notification-box .notification-list .notification-item .notification-text {
font-size: 12px;
line-height: 1.5;
}
main aside nav .item-notifications .notification-box .notification-list .notification-item:hover {
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
}
main aside nav .item-notifications .notification-box:after {
bottom: 100%;
right: 12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 8px;
}
main aside nav .item-notifications:focus-within {
outline: 0;
}
main aside nav .item-notifications:focus-within .notification-box {
display: grid;
}
main aside nav .item-notifications:focus-within > .mdi {
opacity: 1;
}
main aside nav .item-user {
position: relative;
}
main aside nav .item-user .user-avatar {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
border-radius: 50px;
}
main aside nav .item-user .user-actions {
width: 300px;
position: absolute;
top: 70px;
right: 10px;
border-radius: 4px;
background: #000;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
display: none;
}
main aside nav .item-user .user-actions .user-action-item {
color: #fff;
text-decoration: none;
display: grid;
grid-template-columns: 50px 1fr;
}
main aside nav .item-user .user-actions .user-action-item .mdi {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
opacity: 0.6;
}
main aside nav .item-user .user-actions .user-action-item span {
align-self: center;
}
main aside nav .item-user .user-actions .user-action-item:hover {
background: rgba(255, 255, 255, 0.1);
}
main aside nav .item-user .user-actions:after {
bottom: 100%;
right: 12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 8px;
}
main aside nav .item-user:focus-within {
outline: 0;
}
main aside nav .item-user:focus-within .user-actions {
display: grid;
}
main aside .search {
align-self: center;
justify-self: center;
......
public/assets/css/main.less
View file @ f61015a2
......@@ -30,27 +30,30 @@ main {
& aside {
background: #000;
box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
display: grid;
position: fixed;
z-index: 1000;
top: 0px;
left: 0px;
right: 0px;
grid-template-columns: 180px auto 1fr auto;
grid-template-columns: 1fr 500px 1fr;
& .logo {
padding: 15px 30px;
height: 60px;
& img {
height: 100%;
}
}
& nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
&.items-left { justify-content: flex-start; }
&.items-right { justify-content: flex-end; }
& .logo {
width: 180px;
padding: 15px 30px;
height: 60px;
& img {
height: 100%;
}
}
& .upload-button {
align-items: center;
justify-content: center;
......@@ -65,12 +68,29 @@ main {
background: transparent;
border-bottom: 2px solid transparent;
color :#fff;
position: relative;
transition: 0.2s ease opacity, 0.2s ease background;
& .indicator {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
font-size: 10px;
font-weight: bold;
background: rgb(226, 44, 120);
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
&:hover {
cursor: pointer;
& .mdi {
& > .mdi {
opacity: 1;
}
}
......@@ -82,17 +102,171 @@ main {
}
}
& .mdi {
& > .mdi {
font-size: 22px;
opacity: 0.4;
}
}
& .user-avatar {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
border-radius: 50px;
& .item-notifications {
position: relative;
& .notification-box {
width: 400px;
height: 500px;
position: absolute;
top: 70px;
right: 10px;
border-radius: 4px;
background: #000;
cursor: default;
box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
display: none;
grid-template-rows: auto 1fr;
& > header {
display: grid;
grid-template-columns: 1fr auto;
padding: 10px 15px;
align-items: center;
& span {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.25em;
}
}
& .notification-list {
overflow-y: scroll;
display: flex;
background: rgba(255,255,255,0.075);
flex-direction: column;
& .notification-item {
display: grid;
grid-template-columns: 32px 1fr;
grid-gap: 10px;
padding: 10px;
color: #fff;
text-decoration: none;
align-items: center;
& .notification-icon {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
}
& .cover {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
}
& .notification-text {
font-size: 12px;
line-height: 1.5;
}
&:hover {
background: rgba(255,255,255,0.1);
cursor: pointer;
}
}
}
&:after {
bottom: 100%;
right: 12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 8px;
}
}
&:focus-within {
outline: 0;
& .notification-box {
display: grid;
}
& > .mdi {
opacity: 1;
}
}
}
& .item-user {
position: relative;
& .user-avatar {
width: 32px;
height: 32px;
background-position: center;
background-size: cover;
border-radius: 50px;
}
& .user-actions {
width: 300px;
position: absolute;
top: 70px;
right: 10px;
border-radius: 4px;
background: #000;
box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
display: none;
& .user-action-item {
color: #fff;
text-decoration: none;
display: grid;
grid-template-columns: 50px 1fr;
& .mdi {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
opacity: 0.6;
}
& span {
align-self: center;
}
&:hover {
background: rgba(255,255,255,0.1);
}
}
&:after {
bottom: 100%;
right: 12px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #000;
border-width: 8px;
}
}
&:focus-within {
outline: 0;
& .user-actions {
display: grid;
}
}
}
}
& .search {
......
public/assets/js/notifications.js 0 → 100644
View file @ f61015a2
// TODO
\ No newline at end of file
templates/base.html.twig
View file @ f61015a2
......@@ -22,12 +22,11 @@
<body>
<main>
<aside>
<div class="logo">
<a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
</div>
<nav>
<a class="item {% if app.request.attributes.get('_route') == 'index.index' %}active{% endif %}" href="{{ path('index.index') }}" title="Home"><i class="mdi mdi-home-outline"></i></a>
<nav class="items-left">
<div class="logo">
<a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
</div>
<a class="item {% if app.request.attributes.get('_route') == 'index.index' %}active{% endif %}" href="{{ path('index.index') }}"><i class="mdi mdi-home-outline"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.client' %}active{% endif %}" href="{{ path('index.client') }}" title="Download Client"><i class="mdi mdi-desktop-tower-monitor"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.support' %}active{% endif %}" href="{{ path('index.support') }}" title="Support"><i class="mdi mdi-hand-heart"></i></a>
<a class="item {% if app.request.attributes.get('_route') == 'index.legal' %}active{% endif %}" href="{{ path('index.legal') }}" title="Legal"><i class="mdi mdi-gavel"></i></a>
......@@ -39,19 +38,71 @@
{% endif %}
</form>
<nav>
<nav class="items-right">
{% if is_granted("ROLE_USER") %}
<div class="upload-button">
<a href="{{ path('upload.index') }}" class="button">Upload</a>
</div>
<a class="item {% if app.request.attributes.get('_route') == 'user.detail' and app.request.attributes.get('_route_params')['userId']|default('') == app.user.id %}active{% endif %}" href="{{ path('user.detail', {userId: app.user.id}) }}" title="My Profile">
{# <div class="item item-notifications" tabindex="0">
<i class="mdi mdi-bell"></i>
<div class="indicator">2</div>
<div class="notification-box">
<header>
<span>Notifications</span>
<div class="button">Clear all</div>
</header>
<div class="notification-list">
<a href="{{ path('index.index') }}" class="notification-item">
<div class="notification-icon">
<i class="mdi mdi-server"></i>
</div>
<div class="notification-text">
Hello! This is your first notification!
</div>
</a>
<a href="{{ path('index.index') }}" class="notification-item">
<div class="notification-icon">
<div class="cover" style="background-image: url(/www/spinshare/server/public/uploads/thumbnail/spinshare_5ea59d9ff2be9.jpg?v=1595247910), url(/www/spinshare/server/public/assets/img/defaultAlbumArt.jpg);"></div>
</div>
<div class="notification-text">
<strong>taw</strong> reviewed your chart <strong>Xenoblade Chronicles Medley (Tournament Edit)</strong>.
</div>
</a>
<a href="{{ path('index.index') }}" class="notification-item">
<div class="notification-icon">
<div class="cover" style="background-image: url(/www/spinshare/server/public/uploads/thumbnail/spinshare_5ea59d9ff2be9.jpg?v=1595247910), url(/www/spinshare/server/public/assets/img/defaultAlbumArt.jpg);"></div>
</div>
<div class="notification-text">
<strong>taw</strong> added a SpinPlay to your chart <strong>Xenoblade Chronicles Medley (Tournament Edit)</strong>.
</div>
</a>
</div>
</div>
</div> #}
<div class="item item-user" tabindex="0">
<div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ app.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
</a>
{% if is_granted("ROLE_MODERATOR") or is_granted("ROLE_ADMIN") %}
<a class="item {% if 'moderation' in app.request.attributes.get('_route') %}active{% endif %}" href="{{ path('moderation.index') }}" title="Moderator Dashboard"><i class="mdi mdi-shield-outline"></i></a>
{% endif %}
<a class="item {% if app.request.attributes.get('_route') == 'user.settings' %}active{% endif %}" href="{{ path('user.settings') }}" title="Settings"><i class="mdi mdi-cog-outline"></i></a>
<a class="item" href="{{ path('fos_user_security_logout') }}" title="Logout"><i class="mdi mdi-close-circle-outline"></i></a>
<div class="user-actions">
<a href="{{ path('user.detail', {userId: app.user.id}) }}" class="user-action-item">
<i class="mdi mdi-account"></i>
<span>My Profile</span>
</a>
<a href="{{ path('user.settings') }}" class="user-action-item">
<i class="mdi mdi-cog"></i>
<span>Settings</span>
</a>
{% if is_granted("ROLE_MODERATOR") or is_granted("ROLE_ADMIN") %}
<a href="{{ path('moderation.index') }}" class="user-action-item">
<i class="mdi mdi-police-badge"></i>
<span>Moderator Dashboard</span>
</a>
{% endif %}
<a href="{{ path('fos_user_security_logout') }}" class="user-action-item">
<i class="mdi mdi-close-circle-outline"></i>
<span>Logout</span>
</a>
</div>
</div>
{% else %}
<a class="item" href="{{ path('fos_user_security_login') }}" title="Login/Register"><i class="mdi mdi-login-variant"></i></a>
{% endif %}
......@@ -63,6 +114,7 @@
<!-- Scripts -->
{% block scripts %}{% endblock %}
<script src="{{ asset('assets/js/notifications.js') }}"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-167917395-1"></script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment