From c26181dbd11cdf227d45301acbee1844d9f99638 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 24 Sep 2019 11:05:24 +0200
Subject: [PATCH] Responsive create account page

---
 src/components/InstanceCard.vue  | 29 ++++++++++++++++++++++++-
 src/components/InstancesList.vue | 37 +++++++++++++++++++++++++++++++-
 src/views/Instances.vue          | 14 ++++++++++++
 3 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/src/components/InstanceCard.vue b/src/components/InstanceCard.vue
index 56f70de..d3dea06 100644
--- a/src/components/InstanceCard.vue
+++ b/src/components/InstanceCard.vue
@@ -96,7 +96,7 @@
   @import '../scss/_variables.scss';
 
   .root {
-    height: 185px;
+    min-height: 185px;
     width: 770px;
     margin: auto;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
@@ -129,6 +129,7 @@
     .name-host {
       display: flex;
       margin-bottom: 3px;
+      flex-wrap: wrap;
     }
 
     .name {
@@ -178,6 +179,32 @@
       align-self: flex-end;
     }
   }
+
+  @media screen and (max-width: $responsive-screen) {
+    .root {
+      width: auto;
+      flex-direction: column;
+      padding: 15px 10px;
+
+      .left {
+        width: auto;
+        margin-right: 0;
+      }
+
+      .right {
+        margin-top: 20px;
+
+        .follow,
+        .languages {
+          margin-bottom: 5px;
+        }
+
+        .link {
+          margin-top: 20px;
+        }
+      }
+    }
+  }
 </style>
 
 <script>
diff --git a/src/components/InstancesList.vue b/src/components/InstancesList.vue
index f27ddad..a99dabb 100644
--- a/src/components/InstancesList.vue
+++ b/src/components/InstancesList.vue
@@ -173,7 +173,7 @@
           color: #000;
           background-color: #fff;
           border-color: $orange;
-          height: 30px;
+          min-height: 30px;
           padding: 0 15px;
           cursor: pointer;
 
@@ -190,6 +190,26 @@
   .instances-list {
     margin-bottom: 50px;
   }
+
+  @media screen and (max-width: $responsive-screen) {
+    .filters {
+      margin-bottom: 100px;
+
+      form {
+        padding-left: 15px;
+
+        .group {
+          flex-direction: column;
+          align-items: flex-start;
+
+          label {
+            margin-bottom: 5px;
+            font-size: 15px;
+          }
+        }
+      }
+    }
+  }
 </style>
 
 <style lang="scss">
@@ -239,6 +259,21 @@
       min-height: 400px;
     }
   }
+
+  @media screen and (max-width: $responsive-screen) {
+    .custom-checkbox {
+      .custom-control-label > span {
+        font-size: 15px;
+      }
+    }
+
+    #themes {
+      .custom-control {
+        margin-right: 10px;
+        width: calc(50% - 10px) !important;
+      }
+    }
+  }
 </style>
 
 <script>
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index df16c40..de0694d 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -94,6 +94,20 @@
       margin-bottom: 20px;
     }
   }
+
+  @media screen and (max-width: $small-screen) {
+    .blocks {
+      width: auto;
+    }
+
+    .block-with-image {
+      flex-direction: column;
+
+      img {
+        margin-bottom: 20px;
+      }
+    }
+  }
 </style>
 
 <script>