FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove old navbar styles and refactor navigation 

- Create components/buttons for btn-fab element
- Create components/avatars for defined avatar size classes and behaviour
This commit is contained in:
Andreas Nedbal 2020-04-29 18:15:52 +02:00
parent 77b650ed86
commit c4c0c44eec
7 changed files with 46 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/stylesheets/_variables.scss
View File

@ -19,6 +19,16 @@ $colorNames: (
"success"
);
// Avatar variables
$avatar-border-radius: 4px;
$avatar-sizes: (
"xs": 20px,
"sm": 30px,
"md": 40px,
"lg": 80px
);
:root {
--background: #f0edf4;
--card-bg: #ffffff;

2
app/assets/stylesheets/application.css.scss
View File

@ -98,6 +98,8 @@ $navbar-inverse-toggle-border-color: #512da8;
*/
@import
"components/avatars",
"components/buttons",
"components/jumbotron";
body { padding-top: 50px; }

1
app/assets/stylesheets/base.css.scss
View File

@ -12,7 +12,6 @@ body {
@import "scss/answerbox";
@import "scss/comments";
@import "scss/entry";
@import "scss/navbar";
@import "scss/panel";
@import "scss/user";
@import "scss/notifications";

12
app/assets/stylesheets/components/_avatars.scss Normal file
View File

@ -0,0 +1,12 @@
[class^="avatar-"] {
border-radius: $avatar-border-radius;
}
@each $name, $size in $avatar-sizes {
.avatar-#{$name} {
min-height: $size;
min-width: $size;
height: $size;
width: $size;
}
}

19
app/assets/stylesheets/components/_buttons.scss Normal file
View File

@ -0,0 +1,19 @@
.btn-fab {
border-radius: 100%;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
margin: 0px;
padding: 3px 5px 4px 8px;
font-size: 26px;
width: 56px;
height: 56px;
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
outline: medium none !important;
text-transform: uppercase;
text-decoration: none;
position: fixed;
bottom: 0px;
right: 0px;
margin-right: 7px;
margin-bottom: 7px;
z-index: 99;
}

158
app/assets/stylesheets/scss/navbar.scss
View File

@ -1,158 +0,0 @@
.navbar .nav .badge {
padding: 3px 6px 3px;
background-color: $navbar-inverse-link-active-bg;
color: #fff;
}
.navbar .nav .active .badge, li.dropdown.open a.dropdown-toggle span.badge {
padding: 3px 6px 3px;
background-color: $navbar-inverse-bg;
color: #fff;
}
.navbar--inbox-animation {
animation: animationFrames ease-in-out 1.5s;
animation-iteration-count: infinite;
-webkit-animation: animationFrames ease-in-out 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation: animationFrames ease-in-out 1.5s;
-moz-animation-iteration-count: infinite;
-o-animation: animationFrames ease-in-out 1.5s;
-o-animation-iteration-count: infinite;
-ms-animation: animationFrames ease-in-out 1.5s;
-ms-animation-iteration-count: infinite;
}
@keyframes animationFrames{
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-moz-keyframes animationFrames{
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-webkit-keyframes animationFrames {
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-o-keyframes animationFrames {
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-ms-keyframes animationFrames {
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
.btn-fab {
border-radius: 100%;
box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.12), 0px 1px 6px rgba(0, 0, 0, 0.12);
margin: 0px;
padding: 3px 5px 4px 8px;
font-size: 26px;
width: 56px;
height: 56px;
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0s;
outline: medium none !important;
text-transform: uppercase;
text-decoration: none;
position: fixed;
bottom: 0px;
right: 0px;
margin-right: 7px;
margin-bottom: 7px;
z-index: 99;
}
.profile--dropdown {
min-width: 220px;
margin-top: 0px !important;
}
.profile--dropdown-media {
padding: 3px 15px;
}
.profile--dropdown-img {
min-height: 45px;
min-width: 45px;
height: 45px;
width: 45px;
}
.profile--dropdown-username {
font-weight: 700;
font-size: 1.2em;
line-height: 1.33em;
margin-top: 10px;
}
.profile--dropdown-displayname {
font-weight: 700;
font-size: 1.2em;
line-height: 1.33em;
margin-top: 2px;
}
.profile--image-dropdown > a {
padding: 0px !important;
}
.profile--image-avatar {
min-height: 40px;
min-width: 40px;
height: 40px;
width: 40px;
border-radius: 4px;
}
.navbar-inverse {
border: none;
}
@media (max-width: 768px) {
nav.navbar .nav {
margin-bottom: 0;
margin-top: 0;
& > li {
&.active a {
background-color: $navbar-inverse-link-active-bg-mobile !important;
}
&.dropdown.profile--image-dropdown a .visible-xs {
padding-left: 15px;
line-height: 40px;
margin: 0;
}
}
}
body {
padding-bottom: 60px;
}
}

6
app/views/navigation/main/_profile.haml
View File

@ -1,7 +1,7 @@
%li.nav-item.dropdown.profile--image-dropdown
%a.nav-link.dropdown-toggle{href: "#", "data-toggle" => "dropdown"}
%img.profile--image-avatar.d-none.d-sm-inline{src: current_user.profile_picture.url(:small)}
%span.d-none.d-sm-inline.d-md-none
%a.nav-link.dropdown-toggle.p-sm-0{href: "#", "data-toggle" => "dropdown"}
%img.avatar-md.d-none.d-sm-inline{src: current_user.profile_picture.url(:small)}
%span.d-inline.d-sm-none
= current_user.screen_name
%b.caret
.dropdown-menu