Commit fce3513b authored by simon's avatar simon
Browse files

Me likey reponsive

parent 15ac0c2e
...@@ -32,6 +32,10 @@ ...@@ -32,6 +32,10 @@
"avatar partner" "avatar partner"
"avatar message"; "avatar message";
@include mobile {
width: 250px;
}
transition: all 0.5s ease; transition: all 0.5s ease;
&:hover { &:hover {
...@@ -43,6 +47,10 @@ ...@@ -43,6 +47,10 @@
grid-area: avatar; grid-area: avatar;
margin: auto; margin: auto;
font-family: $heading; font-family: $heading;
@include mobile {
max-height: 50%;
}
} }
.conversation-right { .conversation-right {
...@@ -83,6 +91,16 @@ ...@@ -83,6 +91,16 @@
"create"; "create";
border-radius: 10px; border-radius: 10px;
@include tablet {
width: 70%;
}
@include mobile {
width: 100%;
height: 90%;
margin-top: 0;
}
h1 { h1 {
color: black; color: black;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
...@@ -94,6 +112,10 @@ ...@@ -94,6 +112,10 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@include tablet {
font-size: $size-heading;
}
img { img {
height: 80%; height: 80%;
} }
...@@ -124,6 +146,10 @@ ...@@ -124,6 +146,10 @@
grid-template-rows: 30px auto; grid-template-rows: 30px auto;
grid-template-columns: 100%; grid-template-columns: 100%;
@include mobile {
width: 70%;
}
&.left { &.left {
align-self: flex-start; align-self: flex-start;
} }
......
...@@ -19,14 +19,20 @@ ...@@ -19,14 +19,20 @@
width: 100vw; width: 100vw;
height: 93vh; height: 93vh;
.logout {
width: 10%;
filter: invert(1);
justify-self: center;
margin-left: 5%;
}
.profile { .profile {
margin-top: 20px; margin-top: 20px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
padding-left: 50px;
.nav_profile_image { .nav_profile_image {
width: 20%; width: 20%;
......
...@@ -17,6 +17,11 @@ ...@@ -17,6 +17,11 @@
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
align-items: flex-start; align-items: flex-start;
@include tablet {
justify-content: flex-start;
flex-direction: column;
align-items: center;
}
} }
.single-user-container { .single-user-container {
...@@ -35,6 +40,16 @@ ...@@ -35,6 +40,16 @@
grid-template-areas: "avatar content"; grid-template-areas: "avatar content";
transition: all 0.5s ease; transition: all 0.5s ease;
@include tablet {
margin: 15px;
max-width: 40%;
}
@include mobile {
margin: 15px;
max-width: 100%;
}
&:hover { &:hover {
background-color: $background-light; background-color: $background-light;
} }
...@@ -173,6 +188,15 @@ ...@@ -173,6 +188,15 @@
"avatar avatar" "avatar avatar"
"edit statistics"; "edit statistics";
@include tablet {
grid-template-rows: auto;
grid-template-columns: 100%;
grid-template-areas:
"avatar "
"edit"
"statistics";
}
.profile-avatar-section { .profile-avatar-section {
grid-area: avatar; grid-area: avatar;
display: flex; display: flex;
...@@ -186,6 +210,9 @@ ...@@ -186,6 +210,9 @@
align-items: center; align-items: center;
img { img {
width: 50%; width: 50%;
@include tablet {
width: 40%;
}
} }
} }
...@@ -202,6 +229,11 @@ ...@@ -202,6 +229,11 @@
justify-self: center; justify-self: center;
align-self: center; align-self: center;
border-radius: 10px; border-radius: 10px;
@include tablet {
min-height: 400px;
margin-bottom: 30px;
}
} }
.profile-statistics-section { .profile-statistics-section {
......
...@@ -88,7 +88,7 @@ main { ...@@ -88,7 +88,7 @@ main {
.fab { .fab {
position: absolute; position: absolute;
z-index: 100000; z-index: 100000;
bottom: 5%; bottom: 3%;
right: 2%; right: 2%;
width: 4rem; width: 4rem;
background-color: $highlight; background-color: $highlight;
......
...@@ -13,9 +13,13 @@ document.addEventListener('turbolinks:load', (event) => { ...@@ -13,9 +13,13 @@ document.addEventListener('turbolinks:load', (event) => {
} }
} }
function fixNavLinks() {
menuButton.classList.remove("is-active")
}
menuButton.addEventListener('click', toggleBurgerMenu) menuButton.addEventListener('click', toggleBurgerMenu)
navigationLinks.forEach(link => {
link.addEventListener('click', fixNavLinks)
})
}) })
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
<div class="profile"> <div class="profile">
<%= image_tag(current_user.avatar.variant(resize_to_fill: [400,400]), class: "avatar nav_profile_image") %> <%= image_tag(current_user.avatar.variant(resize_to_fill: [400,400]), class: "avatar nav_profile_image") %>
<h2 class="profile_name"> <% if !current_user.nil? %> <%= current_user.username %> <% end %></h2> <h2 class="profile_name"> <% if !current_user.nil? %> <%= current_user.username %> <% end %></h2>
<%= link_to image_tag('sign-out-alt-solid.svg'), destroy_user_session_path, method: :delete, :class => ['logout'] %>
</div> </div>
<div class="menu-points"> <div class="menu-points">
<ul> <ul>
...@@ -51,8 +52,6 @@ ...@@ -51,8 +52,6 @@
<% end %> <% end %>
<% end %> <% end %>
</div> </div>
</div> </div>
</header> </header>
<header id="normal-header"> <header id="normal-header">
......
Supports Markdown
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