From e24c37290b97eb00bf08a45b8ce913cd5da3bd51 Mon Sep 17 00:00:00 2001
From: Frederic Guillot <fred@kanboard.net>
Date: Sun, 14 Aug 2016 14:19:20 -0400
Subject: Make form columns and popover more responsive

---
 assets/sass/_files.sass      | 43 -------------------------------------------
 assets/sass/_form.sass       | 25 ++++++++++++++-----------
 assets/sass/_popover.sass    | 15 ++++++++++++---
 assets/sass/_thumbnails.sass | 43 +++++++++++++++++++++++++++++++++++++++++++
 assets/sass/app.sass         |  2 +-
 5 files changed, 70 insertions(+), 58 deletions(-)
 delete mode 100644 assets/sass/_files.sass
 create mode 100644 assets/sass/_thumbnails.sass

(limited to 'assets/sass')

diff --git a/assets/sass/_files.sass b/assets/sass/_files.sass
deleted file mode 100644
index 9e130576..00000000
--- a/assets/sass/_files.sass
+++ /dev/null
@@ -1,43 +0,0 @@
-@import variables
-@import mixins
-
-.file-thumbnails
-  +display-flex
-  +flex-direction(row)
-  +flex-wrap
-  +justify-content(flex-start)
-
-.file-thumbnail
-  width: 250px
-  border: 1px solid #efefef
-  border-radius: 5px
-  margin-bottom: 20px
-  box-shadow: 4px 2px 10px -6px rgba(0, 0, 0, 0.55)
-  margin-right: 15px
-  img
-    border-top-left-radius: 5px
-    border-top-right-radius: 5px
-    &:hover
-      opacity: 0.5
-
-.file-thumbnail-content
-  padding-left: 8px
-  padding-right: 8px
-
-.file-thumbnail-title
-  font-weight: 700
-  font-size: size('compact')
-  color: color('medium')
-
-.file-thumbnail-description
-  font-size: size('small')
-  color: color('light')
-  margin-top: 8px
-  margin-bottom: 5px
-
-.file-viewer
-  position: relative
-  img
-    max-width: 95%
-    max-height: 85%
-    margin-top: 10px
diff --git a/assets/sass/_form.sass b/assets/sass/_form.sass
index d70d505c..8db142af 100644
--- a/assets/sass/_form.sass
+++ b/assets/sass/_form.sass
@@ -70,6 +70,14 @@ span.select2-container
   padding-top: 20px
   clear: both
 
+.form-required
+  color: red
+  padding-left: 5px
+  font-weight: bold
+
+  @include xs-device
+    display: none
+
 input.form-error, textarea.form-error
   border: 2px solid #b94a48
 
@@ -77,11 +85,6 @@ input.form-error:focus, textarea.form-error:focus
   box-shadow: none
   border: 2px solid #b94a48
 
-.form-required
-  color: red
-  padding-left: 5px
-  font-weight: bold
-
 .form-errors
   color: color('error')
   list-style-type: none
@@ -109,13 +112,13 @@ ul.form-errors li
   display: inline
 
 .form-columns
-  display: -webkit-flex
-  display: flex
-  -webkit-flex-direction: row
-  flex-direction: row
+  +display-flex
+  +flex-direction(row)
+  +flex-wrap
+  +justify-content(flex-start)
 
-.form-column
-  margin-right: 25px
+  .form-column
+    margin-right: 25px
 
 .form-login
   width: 350px
diff --git a/assets/sass/_popover.sass b/assets/sass/_popover.sass
index ed58cfbc..3939f059 100644
--- a/assets/sass/_popover.sass
+++ b/assets/sass/_popover.sass
@@ -1,4 +1,5 @@
 @import variables
+@import mixins
 
 #popover-container
   position: fixed
@@ -12,13 +13,21 @@
 
 #popover-content
   position: absolute
-  width: 70%
-  left: 15%
+  width: 75%
+  left: 12%
   top: 1%
   padding: 15px
   background: #fff
   overflow: auto
-  max-height: 90%
+  max-height: 95%
+
+  @include xs-device
+    left: 0
+    width: 100%
+
+  @include sm-device
+    left: 2.5%
+    width: 85%
 
 .popover-form
   margin-bottom: 0
diff --git a/assets/sass/_thumbnails.sass b/assets/sass/_thumbnails.sass
new file mode 100644
index 00000000..9e130576
--- /dev/null
+++ b/assets/sass/_thumbnails.sass
@@ -0,0 +1,43 @@
+@import variables
+@import mixins
+
+.file-thumbnails
+  +display-flex
+  +flex-direction(row)
+  +flex-wrap
+  +justify-content(flex-start)
+
+.file-thumbnail
+  width: 250px
+  border: 1px solid #efefef
+  border-radius: 5px
+  margin-bottom: 20px
+  box-shadow: 4px 2px 10px -6px rgba(0, 0, 0, 0.55)
+  margin-right: 15px
+  img
+    border-top-left-radius: 5px
+    border-top-right-radius: 5px
+    &:hover
+      opacity: 0.5
+
+.file-thumbnail-content
+  padding-left: 8px
+  padding-right: 8px
+
+.file-thumbnail-title
+  font-weight: 700
+  font-size: size('compact')
+  color: color('medium')
+
+.file-thumbnail-description
+  font-size: size('small')
+  color: color('light')
+  margin-top: 8px
+  margin-bottom: 5px
+
+.file-viewer
+  position: relative
+  img
+    max-width: 95%
+    max-height: 85%
+    margin-top: 10px
diff --git a/assets/sass/app.sass b/assets/sass/app.sass
index 8c109ebb..9a93e4ab 100644
--- a/assets/sass/app.sass
+++ b/assets/sass/app.sass
@@ -20,8 +20,8 @@
 @import sidebar
 @import avatar
 @import file_upload
+@import thumbnails
 @import color_picker
-@import files
 @import filter_box
 @import project
 @import project_overview
-- 
cgit v1.2.3