feature: mobile - classes added

src/styles/chat/_index.scss

@@ -1,3 +1,7 @@
 .chat-view {
   height: calc(100vh - 72px - 78px);
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px - 68px);
+  }
 }

src/styles/content/_index.scss

@@ -1,5 +1,9 @@
 main {
   height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px);
+  }
 }
 
 /* Styles of the right-hand menu + pages with that menu */
@@ -11,17 +15,13 @@ main {
   /*margin-top: 50px;*/
   overflow: hidden;
 
-  /*@media(min-width: 1024px) {
-    margin-top: 0;
-  }*/
-
   .views-container {
     flex: 1 0 0;
     /*-webkit-backface-visibility: hidden;*/
 
     &.sidebar-is-closed {
 
-      @media(min-width: 1024px) {
+      @media(min-width: 768.01px) {
         margin-left: -152px;
         transform: translate(152px);
       }
@@ -38,6 +38,11 @@ main {
     transition: all 0.5s;
     width: 217px;
 
+    @media (max-width: 768px) {
+      height: calc(100vh - 50px);
+      width: 65px;
+    }
+
     ul {
 
       li {
@@ -65,35 +70,35 @@ main {
 
     /* Styles use with JS to open/close the sidebar */
     &.jsRightMenu {
-      display: none;
-
-      @media(min-width: 1024px) {
-        display: block;
-      }
+      display: block;
     }
 
     &.jsRightMenu:not([open]) {
-      transform: translate(152px);
+      @media (min-width: 768.01px) {
+        transform: translate(152px);
+      }
+
+      /* Quick fix. When you got time, use animation on the span instead */
+      @media (max-width: 768px) {
+        ul>li:first-child>span,
+        ul>li:first-child>a {
+          visibility: hidden;
+        }
+      }
     }
 
     &.jsRightMenu[open] {
+      display: block;
+      bottom: 0;
+      right: 0;
 
-      @media(min-width: 1024px) {
-        display: block;
-        bottom: 0;
+      @media(max-width: 768px) {
         box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
         min-width: 60%;
         position: fixed;
-        right: 0;
         top: 50px;
         z-index: 1;
       }
-      @media(min-width: 1024px) {
-        box-shadow: none;
-        min-width: unset;
-        position: unset;
-        z-index: unset;
-      }
     }
   }
 }
@@ -105,6 +110,10 @@ main {
   height: calc(100vh - 72px); /* 72px == header's height */
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
+
+  @media (max-width: 768px) {
+    height: calc(100vh - 50px);
+  }
 }
 
 /* Custom scrollbar of the left-menu*/

src/styles/header/_index.scss

@@ -33,7 +33,7 @@ header {
     color: var(--color-heading);
     align-self: center;
 
-    @media(min-width: 640px) {
+    @media(min-width: 768.01px) {
       margin-right: 23px;
     }
 
@@ -80,7 +80,7 @@ header {
       .solid-notifications__triangle-shadow {
         display: none;
 
-        @media(min-width: 1024px) {
+        @media(min-width: 768.01px) {
           background: white;
           display: block;
           position: absolute;
@@ -118,7 +118,7 @@ header {
         top: 2.5em;
         width: 100vw;
 
-        @media(min-width: 1024px) {
+        @media(min-width: 768.01px) {
           max-height: calc(100vh - 93px);
           position: absolute;
           left: auto;
@@ -223,11 +223,7 @@ header {
                 line-height: 17px;
                 margin-top: 4px;
 
-                @media(min-width: 640px) {
-                  max-width: 226px;
-                }
-
-                @media(min-width: 1024px) {
+                @media(min-width: 768.01px) {
                   max-width: 256px;
                 }
               }

src/styles/index.scss

@@ -2,10 +2,6 @@
 
 @import "@startinblox/hubl-styling-framework/dist/index.css";
 
-main {
-  background-color: pink;
-}
-
 solid-display>div {
   display: contents !important;
 }
@@ -22,11 +18,23 @@ solid-display>div {
   line-height: 22px;
 }
 
+.sm-whitespace-normal {
+  @media (max-width: 768px) {
+    white-space: normal;
+  }
+}
+
+.sm-text-center {
+  @media (max-width: 768px) {
+    text-align: center;
+  }
+}
 
 .send-display {
   position: absolute;
   right: 20px;
   top: 20px;
+  z-index: 1;
 
   &::before {
     margin-top: 4px;
@@ -39,19 +47,32 @@ solid-display>div {
   bottom: 51px;
   right: 30px;
   z-index: 1;
+
+  @media (max-width: 768px) {
+    right: 20px;
+  }
 }
 
 .button-modify-profile {
   position: absolute;
-  right: 40px;
   top: 40px;
+  right: 40px;
   z-index: 1;
+
+  @media (max-width: 768px) {
+    top: 20px;
+    right: 20px;
+  }
 }
 
 .button-modify-skill {
   position: absolute;
   z-index: 1;
   right: 40px;
+
+  @media (max-width: 768px) {
+    right: 20px;
+  }
 }
 
 .counter>div:nth-child(1) {
@@ -154,7 +175,10 @@ solid-display>div {
 
 #member-profile .member-bio,
 #profile .member-bio {
-  max-width: 50%;
+
+  @media (min-width: 768.01px) {
+    max-width: 50%;
+  }
 }
 
 .icon-location-pin::before,
@@ -162,6 +186,21 @@ solid-display>div {
   margin-left: -3px;
 }
 
+#member-profile,
+#solid-profile-my-profile {
+  .avatar {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (max-width: 768px) {
+    .member-bio {
+      max-width: none;
+      width: 100%;
+    }
+  }
+}
+
 /* Job-offers */
 .job-edit {
   position: absolute;
@@ -249,7 +288,12 @@ $small: "max-width: 768px";
   }
 }
 
-
+/* Converse */
+@media (max-width: 767.98px) {
+  #conversejs .converse-chatboxes .chatbox .box-flyout {
+    width: 100% !important;
+  }
+}
 
 
 

src/styles/job-offers/_index.scss

@@ -1,3 +1,7 @@
 #job-offers>div:first-of-type {
   min-height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
 }

src/styles/left-nav/_index.scss

@@ -1,6 +1,10 @@
 nav#main__menu {
   height: calc(100vh - 72px);
 
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
+
   .unread {
     font-weight: bolder;
   }

src/styles/members/_index.scss

@@ -1,3 +1,7 @@
 #members>div:first-of-type {
   min-height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
 }

src/styles/profile/_index.scss

@@ -1,3 +1,7 @@
 #profile>div:first-of-type {
   min-height: calc(100vh - 72px);
+
+  @media (max-width: 768px) {
+    min-height: calc(100vh - 50px);
+  }
 }