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
Show 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 { ...@@ -32,26 +32,33 @@ main {
} }
main aside { main aside {
background: #000; background: #000;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
display: grid; display: grid;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
grid-template-columns: 180px auto 1fr auto; grid-template-columns: 1fr 500px 1fr;
}
main aside .logo {
padding: 15px 30px;
height: 60px;
}
main aside .logo img {
height: 100%;
} }
main aside nav { main aside nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; 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 { main aside nav .upload-button {
align-items: center; align-items: center;
...@@ -67,12 +74,28 @@ main aside nav .item { ...@@ -67,12 +74,28 @@ main aside nav .item {
background: transparent; background: transparent;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color: #fff; color: #fff;
position: relative;
transition: 0.2s ease opacity, 0.2s ease background; 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 { main aside nav .item:hover {
cursor: pointer; cursor: pointer;
} }
main aside nav .item:hover .mdi { main aside nav .item:hover > .mdi {
opacity: 1; opacity: 1;
} }
main aside nav .item.active { main aside nav .item.active {
...@@ -81,17 +104,156 @@ main aside nav .item.active { ...@@ -81,17 +104,156 @@ main aside nav .item.active {
main aside nav .item.active .mdi { main aside nav .item.active .mdi {
opacity: 1; opacity: 1;
} }
main aside nav .item .mdi { main aside nav .item > .mdi {
font-size: 22px; font-size: 22px;
opacity: 0.4; 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; width: 32px;
height: 32px; height: 32px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
border-radius: 50px; 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 { main aside .search {
align-self: center; align-self: center;
justify-self: center; justify-self: center;
......
public/assets/css/main.less
View file @ f61015a2
...@@ -30,27 +30,30 @@ main { ...@@ -30,27 +30,30 @@ main {
& aside { & aside {
background: #000; background: #000;
box-shadow: 0px 4px 12px rgba(0,0,0,0.6);
display: grid; display: grid;
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 0px; top: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
grid-template-columns: 180px auto 1fr auto; grid-template-columns: 1fr 500px 1fr;
& nav {
display: flex;
flex-direction: row;
align-items: center;
&.items-left { justify-content: flex-start; }
&.items-right { justify-content: flex-end; }
& .logo { & .logo {
width: 180px;
padding: 15px 30px; padding: 15px 30px;
height: 60px; height: 60px;
& img { & img {
height: 100%; height: 100%;
} }
} }
& nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
& .upload-button { & .upload-button {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -65,12 +68,29 @@ main { ...@@ -65,12 +68,29 @@ main {
background: transparent; background: transparent;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
color :#fff; color :#fff;
position: relative;
transition: 0.2s ease opacity, 0.2s ease background; 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 { &:hover {
cursor: pointer; cursor: pointer;
& .mdi { & > .mdi {
opacity: 1; opacity: 1;
} }
} }
...@@ -82,11 +102,110 @@ main { ...@@ -82,11 +102,110 @@ main {
} }
} }
& .mdi { & > .mdi {
font-size: 22px; font-size: 22px;
opacity: 0.4; opacity: 0.4;
} }
} }
& .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 { & .user-avatar {
width: 32px; width: 32px;
height: 32px; height: 32px;
...@@ -94,6 +213,61 @@ main { ...@@ -94,6 +213,61 @@ main {
background-size: cover; background-size: cover;
border-radius: 50px; 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 { & .search {
align-self: center; align-self: center;
......
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 @@ ...@@ -22,12 +22,11 @@
<body> <body>
<main> <main>
<aside> <aside>
<nav class="items-left">
<div class="logo"> <div class="logo">
<a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a> <a href="{{ path('index.index') }}"><img src="{{ asset('assets/img/logo_colored_ondark.svg') }}" alt="SpinShare Logo" /></a>
</div> </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>
<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>
<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.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.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> <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 @@ ...@@ -39,19 +38,71 @@
{% endif %} {% endif %}
</form> </form>
<nav> <nav class="items-right">
{% if is_granted("ROLE_USER") %} {% if is_granted("ROLE_USER") %}
<div class="upload-button"> <div class="upload-button">
<a href="{{ path('upload.index') }}" class="button">Upload</a> <a href="{{ path('upload.index') }}" class="button">Upload</a>
</div> </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> <div class="user-avatar" style="background-image: url({{ asset('uploads/avatar/' ~ app.user.coverReference ~ '?t=' ~ date().timestamp) }}), url({{ asset("assets/img/defaultAvatar.jpg") }});"></div>
<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> </a>
{% if is_granted("ROLE_MODERATOR") or is_granted("ROLE_ADMIN") %} {% 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> <a href="{{ path('moderation.index') }}" class="user-action-item">
<i class="mdi mdi-police-badge"></i>
<span>Moderator Dashboard</span>
</a>
{% endif %} {% 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 href="{{ path('fos_user_security_logout') }}" class="user-action-item">
<a class="item" href="{{ path('fos_user_security_logout') }}" title="Logout"><i class="mdi mdi-close-circle-outline"></i></a> <i class="mdi mdi-close-circle-outline"></i>
<span>Logout</span>
</a>
</div>
</div>
{% else %} {% else %}
<a class="item" href="{{ path('fos_user_security_login') }}" title="Login/Register"><i class="mdi mdi-login-variant"></i></a> <a class="item" href="{{ path('fos_user_security_login') }}" title="Login/Register"><i class="mdi mdi-login-variant"></i></a>
{% endif %} {% endif %}
...@@ -63,6 +114,7 @@ ...@@ -63,6 +114,7 @@
<!-- Scripts --> <!-- Scripts -->
{% block scripts %}{% endblock %} {% block scripts %}{% endblock %}
<script src="{{ asset('assets/js/notifications.js') }}"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-167917395-1"></script> <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