Commit fce3513b authored by simon's avatar simon
Browse files

Me likey reponsive

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