Skip to content

Commit

Permalink
ActiveStorage stuff to let users have avatars
Browse files Browse the repository at this point in the history
  • Loading branch information
@ask-42
ask-42 committed May 6, 2019
1 parent d3e17be commit 45e8731
Show file tree
Hide file tree
Showing 32 changed files with 481 additions and 149 deletions.
1 change: 1 addition & 0 deletions Gemfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ gem 'puma', '~> 3.11'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
gem 'aws-sdk-s3'
gem 'activestorage-validator'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
Expand Down
3 changes: 3 additions & 0 deletions Gemfile.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ GEM
actionpack (= 5.2.3)
activerecord (= 5.2.3)
marcel (~> 0.3.1)
activestorage-validator (0.1.2)
rails (~> 5.2.0)
activesupport (5.2.3)
concurrent-ruby (~> 1.0, >= 1.0.2)
i18n (>= 0.7, < 2)
Expand Down Expand Up @@ -229,6 +231,7 @@ PLATFORMS
ruby

DEPENDENCIES
activestorage-validator
annotate
aws-sdk-s3
bcrypt (~> 3.1.7)
Expand Down
17 changes: 17 additions & 0 deletions app/assets/images/creepy-ghost.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions app/assets/stylesheets/base/glitch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,10 @@
.body{
flex-grow: 1;
display: flex;
section{
max-height:100%;
max-width: 100%;
box-sizing: border-box;
overflow: auto;
}
}
41 changes: 41 additions & 0 deletions app/assets/stylesheets/base/mixins/text_glitch.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,47 @@
animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
}
}
@mixin sizeImgGlitch($name, $intensity, $width, $height, $top, $left, $size) {

$steps: $intensity;

// Ensure the @keyframes are generated at the root level
@at-root {
// We need two different ones
@for $i from 1 through 2 {
@keyframes #{$name}-anim-#{$i} {
@for $i from 0 through $steps {
#{percentage($i*(1/$steps))} {
clip: rect(
random($height)+px,
$width+px,
random($height)+px,
0
);
}
}
}
}
}

> img {
position: absolute;
top: $top+px;
left: $left+px;
}
> img:nth-child(2),
> img:nth-child(3){
clip: rect(0, 0, 0, 0);
}
> img:nth-child(2) {
left: ($left + $size) + px;
animation: #{$name}-anim-1 2s infinite linear alternate-reverse;
}
> img:nth-child(3) {
left: ($left - $size) + px;
animation: #{$name}-anim-2 3s infinite linear alternate-reverse;
}
}



Expand Down
259 changes: 146 additions & 113 deletions app/assets/stylesheets/base/navbar/navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,127 +4,160 @@

.navbar{
font-family: $sans-serif;
}
.navbar {
display: flex;
background-color: $purple;
color: $white;
align-items: center;
font-size: 14px;
height: 50px;
}
.navbar a, .navbar a:visited{
display: flex;
height: 50px;
text-decoration: none;
align-items: center;
color: $light-grey;
}
.navbar a:hover, .navbar button:hover{
color: $white;
}
.navbar a.logo{
display: inline-block;
width: 50px;
height: 50px;
font-size: 25px;
padding: 0px;
position: relative;
}
.navbar a.logo i:nth-child(n+2){
display:none
}
.navbar a.logo:hover i:nth-child(n+2){
display:inline;
}
.navbar a.logo:hover{
@include iGlitch("base", 17, 25, 25, 10, 12.5);
}
.logo .baselogo{
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
top: 10px;
left: 12.5px;
color: $white;
}
a, a:visited{
display: flex;
height: 50px;
text-decoration: none;
align-items: center;
color: $light-grey;
}
a:hover, button:hover{
color: $white;
}
a.logo{
display: inline-block;
width: 50px;
height: 50px;
font-size: 25px;
padding: 0px;
position: relative;
}
a.logo i:nth-child(n+2){
display:none;
}
a.logo:hover i:nth-child(n+2){
display:inline;
}
a.logo:hover{
@include iGlitch("base", 17, 25, 25, 10, 12.5);
}
.logo .baselogo{
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
top: 10px;
left: 12.5px;
color: $white;
}

> *{
padding: 10px;
padding-top: 11px;
box-sizing: border-box;
border-bottom: 2px solid transparent;
}

.logo div{
display: inline-block;
width: 50px;
height: 50px;
}
a, button{
text-align: center;
}
button{
font-size: 12px;
padding: 7px 8px;
margin-right: 10px;
border-radius: 3px;
border: 1px solid transparent;
vertical-align: baseline;
cursor: pointer;
}
.login-btn, .logout-btn{
border: 1px solid $white;
}
button.profile-btn{
font-size: 16px;
margin-left: 0px;
margin-right: 10px;
width: 38px;
height: 30px;
padding: 0px 3px 0px 0px;
position: relative;
display: inline-block;
}
button.profile-btn i{
padding: 7px 0px;
}
button.profile-btn i:nth-child(n+2){
display:none;
}
button.profile-btn:hover i:nth-child(n+2){
display:inline;
}

button.profile-btn img{
width: 24px;
height: 24px;
padding: 3px;
}
button.profile-btn img:nth-child(n+2){
display:none;
}
button.profile-btn:hover img:nth-child(n+2){
display:inline;
}
button.img-glitch:hover{
@include imgGlitch("profile", 17, 30, 30, 0, 0);
}
button.i-glitch:hover{
@include iGlitch("profile-i", 17, 20, 20, 0, 10);
}


button:hover{
background-color: $light-purple;
}

a.active{
color: $white;
border-bottom: 2px solid $white;
}
.searchbar{
flex-grow: 1;
font-size: 12px;
display: flex;

.navbar .searchbar{
flex-grow: 1;
font-size: 12px;
}
.navbar > *{
padding: 10px;
padding-top: 11px;
box-sizing: border-box;
border-bottom: 2px solid transparent;
}
i{
cursor: not-allowed;
display: inline-block;
background-color: $dark-purple;
border-top: 1px solid $purple-glow;
border-left: 1px solid $purple-glow;
border-bottom: 1px solid $purple-glow;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
padding: 6px 8px;
font-size: 16px;
color: $dark-grey;

.navbar .logo div{
display: inline-block;
width: 50px;
height: 50px;
}
.navbar a, .navbar button{
text-align: center;
}
.navbar button{
font-size: 12px;
padding: 7px 8px;
margin-right: 10px;
border-radius: 3px;
border: 1px solid transparent;
vertical-align: baseline;
cursor: pointer;
}
.navbar .login-btn, .navbar .logout-btn{
border: 1px solid $white;
}
.navbar button.profile-btn{
font-size: 16px;
margin-left: 0px;
margin-right: 10px;
padding: 7px 11px;
}
.navbar button:hover{
background-color: $light-purple;
}
.search-input{
color: $white;
background-color: $dark-purple;
border-top: 1px solid $purple-glow;
border-right: 1px solid $purple-glow;
border-bottom: 1px solid $purple-glow;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 350px;
}
.search-input:hover{
cursor: not-allowed; //TODO - Remove when search is implemented
}
.search-input::placeholder{
color: $white;
}
}
}

.navbar a.active{
color: $white;
border-bottom: 2px solid $white;
}
.searchbar{
display: flex;
}
.searchbar i{
cursor: not-allowed;
display: inline-block;
background-color: $dark-purple;
border-top: 1px solid $purple-glow;
border-left: 1px solid $purple-glow;
border-bottom: 1px solid $purple-glow;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
padding: 6px 8px;
font-size: 16px;
color: $dark-grey;

}
.searchbar .search-input{
color: $white;
background-color: $dark-purple;
border-top: 1px solid $purple-glow;
border-right: 1px solid $purple-glow;
border-bottom: 1px solid $purple-glow;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
width: 350px;
}
.searchbar .search-input:hover{
cursor: not-allowed; //TODO - Remove when search is implemented
}
.searchbar .search-input::placeholder{
color: $white;
}

7 changes: 7 additions & 0 deletions app/assets/stylesheets/base/navbar/profile_dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ ul.profile-dropdown{
align-content: center;
border-radius: 3px;
cursor: pointer;
img{
width: 40px;
height: 40px;
margin-right: 10px;
border-radius: 3px;
cursor: pointer;
}
i{
margin-right: 7px;
font-size: 16px;
Expand Down
Loading

0 comments on commit 45e8731

Please sign in to comment.