Skip to content

Commit

Permalink
Redesign admin navbar & background (#536)
Browse files Browse the repository at this point in the history 
* Restyle admin navbar & small changes to normal navbar

* Replace yellow background with grid pattern

* Fix alignment of "quick access"

* Make CSS selector more specific

This is so that it overwrites Bootstrap defaults.

* Move nav-item related CSS to navbar CSS file

* Nest navbar-related CSS

* Fix admin-button highlight color

* Add missing icon

* Add dot to indicate current active navbar item

* Remove unnecessary newline
  • Loading branch information
@Splines
Splines authored Sep 10, 2023
1 parent 7daf91a commit 0415477
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 106 deletions.
4 changes: 4 additions & 0 deletions app/assets/stylesheets/admin.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.admin-background {
background-size: 20px 20px;
background-image: radial-gradient(circle, #bebebe 1px, #ffffff00 1px);
}
4 changes: 0 additions & 4 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -302,8 +302,4 @@ a {
&:hover {
text-decoration: underline;
}
}

.nav-item {
position: relative;
}
54 changes: 37 additions & 17 deletions app/assets/stylesheets/navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@
background: linear-gradient(110deg, #223e62 0%, #405d75 100%);
}

.admin-navbars-container {
background: linear-gradient(110deg, #821A3B 0%, #8d1c40 100%);
}

#mampfbrand {
color: white;
font-weight: bold;
Expand All @@ -12,10 +16,6 @@
width: 35px;
}

.navbar-nav a {
filter: drop-shadow(1px 4px 7px rgba(0, 0, 0, 0.2));
}

.navbar {
box-shadow: 1px 4px 7px -2px rgba(0, 0, 0, 0.1);
z-index: 1000; // place navbar and its shadow on top of everything
Expand All @@ -24,21 +24,41 @@
.new-comment {
color: #ffc107 !important;
}
}

#navbar-buttons a {
text-decoration: none;
font-size: 1.35rem;
padding: 0 9px;
color: white;
.nav-item {
position: relative;
}

.navbar-nav .nav-link {
filter: drop-shadow(1px 4px 7px rgba(0, 0, 0, 0.2));

&::after {
&.active-item {
content: "\2022";
font-size: 1rem;
position: absolute;
top: 21px;
left: 16px;
&:hover {
color: #cee2ff;
}

&:focus {
color: white;
}

text-decoration: none;
font-size: 1.35rem;
padding: 0 9px;
color: white;

&::after {
&.active-item {
content: "\2022"; // dot
font-size: 1rem;
position: absolute;
top: 21px;
left: 16px;
}
}
}
}

.admin-navbars-container .navbar-nav .nav-link {
&:hover {
color: #ffe5ed;
}
}
142 changes: 67 additions & 75 deletions app/views/administration/_navbar.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,119 @@
<% I18n.with_locale(current_user.try(:locale)) do %>
<nav class="navbar navbar-expand-md navbar-dark bg-dark"
id="first-admin-nav">
<div class="container-fluid">
<%= link_to image_tag('/MaMpf-Logo_32x32.png',
class: 'img-fluid me-2'),
<%= stylesheet_link_tag 'navbar' %>
<div class="admin-navbars-container">
<nav class="navbar navbar-expand" id="first-admin-nav">
<%= link_to image_tag('MaMpf-Logo.svg',
class: 'me-2',
id: 'mampf-logo'),
exit_administration_path,
title: t('admin.navbar.exit'),
data: { toggle: 'tooltip' }%>
data: { 'bs-toggle': 'tooltip' } %>
<%= link_to t('mampf'),
exit_administration_path,
class: 'navbar-brand',
style: "text-decoration: none;",
id: 'mampfbrand',
title: t('admin.navbar.exit'),
data: { toggle: 'tooltip' },
style: "text-decoration: none;" %>
<ul class="navbar-nav me-auto" id="adminMain">
<li class="nav-item"
id="adminHome">
data: { 'bs-toggle': 'tooltip' } %>

<ul class="navbar-nav" id="adminHome">
<li class="nav-item" id="adminHome">
<%= link_to '', administration_path,
class: 'fas fa-home fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: "tooltip" },
title: t('admin.navbar.main') %>
class: 'nav-link bi bi-house-fill ' + get_class_for_path(administration_path()),
data: { 'bs-toggle': "tooltip" },
title: t('admin.navbar.main') %>
</li>

<% if current_user.current_lecture_id
.in?(current_user.teaching_related_lectures.map(&:id)) %>
<li class="nav-item"
id="adminCurrentLecture">
<li class="nav-item" id="adminCurrentLecture">
<%= link_to '',
edit_lecture_path(Lecture.find_by_id(current_user.current_lecture_id)),
class: 'fas fa-chalkboard-teacher fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: "tooltip" },
title: t('admin.navbar.current_lecture') %>
edit_lecture_path(Lecture.find_by_id(current_user.current_lecture_id)),
class: 'nav-link bi bi-bookmark-fill ' + get_class_for_path_startswith(lectures_path()),
data: { 'bs-toggle': "tooltip" },
title: t('admin.navbar.current_lecture') %>
</li>
<% end %>
<li class="nav-item"
id="adminSearch">

<li class="nav-item" id="adminSearch">
<%= link_to '', administration_search_path,
class: 'fas fa-search fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('navbar.search') %>
class: 'nav-link bi bi-binoculars-fill ' + get_class_for_path(administration_search_path()),
data: { 'bs-toggle': 'tooltip' },
title: t('navbar.search') %>
</li>
<li class="nav-item">
<%= link_to '', destroy_user_session_path,
class: 'fas fa-sign-out-alt fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip', method: 'delete' },
title: t('admin.navbar.logout') %>
class: 'nav-link bi bi-box-arrow-right',
data: { 'bs-toggle': 'tooltip', method: 'delete' },
title: t('admin.navbar.logout') %>
</li>
</ul>
<ul class="navbar-nav me-auto" id="adminDetails">

<ul class="navbar-nav ms-auto me-auto" id="adminDetails">
<% if current_user.admin? %>
<li class="nav-item">
<%= link_to '', terms_path,
class: 'far fa-calendar-alt fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.terms') %>
class: 'nav-link bi bi-calendar-range-fill ' + get_class_for_path(terms_path()),
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.terms') %>
</li>
<li class="nav-item">
<%= link_to '',
classification_path,
class: 'fas fa-clipboard-list fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.classification') %>
classification_path,
class: 'nav-link bi bi-node-plus-fill ' + + get_class_for_path(classification_path()),
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.classification') %>
</li>
<li>
<%= link_to '', announcements_path,
class: 'far fa-newspaper fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.news') %>
class: 'nav-link bi bi-megaphone-fill ' + get_class_for_path(announcements_path()),
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.news') %>
</li>
<li>
<%= link_to '', thredded_path,
class: 'fas fa-comment-alt fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.boards'),
target: :_blank %>
class: 'nav-link bi bi-chat-fill',
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.boards'),
target: :_blank %>
</li>
<li>
<%= link_to '', sidekiq_web_path,
class: 'fas fa-chart-line fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.stats'),
target: :_blank %>
class: 'nav-link bi bi-bar-chart-fill',
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.stats'),
target: :_blank %>
</li>
<li>
<%= link_to '', interactions_path,
class: 'fas fa-download fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.export_stats') %>
class: 'nav-link bi-cloud-arrow-down-fill ' + get_class_for_path(interactions_path()),
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.export_stats') %>
</li>
<% end %>
</ul>

<% if current_user.admin? %>
<ul class="navbar-nav me-auto" id="adminUsers">
<ul class="navbar-nav" id="adminUsers">
<li class="nav-item <%= active_controller?('users') %>">
<%= link_to '', users_path,
class: 'fas fa-users-cog fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.users') %>
class: 'nav-link bi bi-people-fill ' + get_class_for_path(users_path()),
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.users') %>
</li>
</ul>
<% end %>

<ul class="navbar-nav" id="adminProfile">
<li class="nav-item">
<%= link_to '', elevated_profile_path,
class: 'fas fa-user fa-lg text-light nav-link',
style: 'text-decoration: none;',
data: { toggle: 'tooltip' },
title: t('admin.navbar.profile') %>
class: 'nav-link bi bi-person-fill ' + get_class_for_path(elevated_profile_path()),
data: { 'bs-toggle': 'tooltip' },
title: t('admin.navbar.profile') %>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand navbar-dark bg-dark" id="second-admin-nav"
style="display: none;">
</nav>
<% end %>
</nav>
<nav class="navbar navbar-expand" id="second-admin-nav" style="display: none;">
</nav>
</div>
<% end %>
3 changes: 2 additions & 1 deletion app/views/layouts/administration.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,10 @@
<head>
<%= render partial: 'layouts/head' %>
<%= render partial: 'layouts/head_additional_js' %>
<%= stylesheet_link_tag 'admin' %>
</head>
<body data-locale="<%= I18n.locale %>"
class="bg-lime-lighten-5">
class="admin-background">
<div id="admin-navbar">
<%= render partial: 'administration/navbar' %>
</div>
Expand Down
12 changes: 3 additions & 9 deletions app/views/shared/_navbar.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
class: 'me-2',
id: 'mampf-logo'),
home_path %>
<%= link_to "MaMpf",
<%= link_to t('mampf'),
home_path,
class: 'navbar-brand',
style: "text-decoration: none;",
id: 'mampfbrand' %>
<ul class="navbar-nav mr-auto" id="navbar-buttons">
<ul class="navbar-nav">
<li class="nav-item">
<% is_home_active = !get_class_for_any_path_startswith([start_path(), lectures_path()]).empty?\
|| !get_class_for_path(root_path()).empty? %>
Expand All @@ -30,7 +30,6 @@
</a>
</li>


<% if current_user.admin || current_user.editor? || current_user.teacher? %>
<li class="nav-item">
<a href="<%= administration_path %>"
Expand All @@ -41,7 +40,6 @@
</li>
<% end %>


<li class="nav-item">
<a href="<%= watchlists_path %>"
id="watchlistsIcon"
Expand All @@ -51,7 +49,6 @@
</a>
</li>


<li class="nav-item">
<a href="<%= comments_path %>"
id="commentsIcon"
Expand All @@ -63,7 +60,6 @@
</a>
</li>


<li class="nav-item">
<a href="<%= news_path %>"
class="nav-link bi bi-megaphone-fill <%= get_class_for_path(news_path()) %>"
Expand All @@ -72,7 +68,6 @@
</a>
</li>


<li class="nav-item">
<a href="<%= DefaultSetting::BLOG_LINK %>"
class="nav-link bi bi-newspaper"
Expand All @@ -81,7 +76,6 @@
</a>
</li>


<li class="nav-item">
<a href="<%= destroy_user_session_path(params: { locale: current_user.locale }) %>"
class="nav-link bi bi-box-arrow-right"
Expand All @@ -96,7 +90,7 @@
<%= render partial: 'shared/dropdown_lectures',
locals: { lecture: @lecture || current_lecture } %>
</ul>
<%= render partial: 'shared/dropdown_notifications'%>
<%= render partial: 'shared/dropdown_notifications' %>
<%= form_tag(search_index_path,
method: 'get',
class: 'form-inline mt-2 mt-md-0',
Expand Down

0 comments on commit 0415477

Please sign in to comment.