From a156639fd8c0c42325fbdda6ed1933f35e80a5bc Mon Sep 17 00:00:00 2001
From: opi <opi@no-log.org>
Date: Thu, 15 May 2014 12:49:24 +0200
Subject: [PATCH] [fix] Panel/portal responsiveness.

---
 portal/assets/css/ynh-style.css | 38 +++++++++++++++++++++++++++++----
 portal/assets/css/ynhpanel.css  | 27 +++++++++++++++++++++++
 portal/header.ms                |  8 +++----
 3 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/portal/assets/css/ynh-style.css b/portal/assets/css/ynh-style.css
index a3fa6b9..3c59de1 100644
--- a/portal/assets/css/ynh-style.css
+++ b/portal/assets/css/ynh-style.css
@@ -34,6 +34,9 @@ body {
   margin: 2% 5%;
   z-index: 10;
 }
+.wrapper:before,
+.wrapper:after {content: " ";display: table;}
+.wrapper:after {clear: both;}
 
 .logo {
   text-align: center;
@@ -70,15 +73,14 @@ body {
 }
 
 .messages {
-  max-width: none;
   text-align: center;
-  width: 21em;
-  margin: 2% auto;
+  max-width: 21em;
+  margin: 2% auto 1em auto;
   padding: 1.5em;
 }
 
 .logged .messages {
-  width: 90%;
+  max-width: none;
   margin: 2% 5%;
   padding: 1.5em 15%;
 }
@@ -236,6 +238,26 @@ textarea {
   .listing-apps .first-letter { margin: 0; }
   .listing-apps span + span { font-size: 0.3em; }
 
+@media screen and (max-width: 450px) {
+  .apps {margin: 10% 5%;}
+  .listing-apps a {font-size: 3em;}
+  .listing-apps span + span { font-size: 0.32em; }
+  .listing-apps a:hover,
+  .listing-apps a:focus {left: -5px;top: -5px;}
+  .listing-apps a:hover:before,
+  .listing-apps a:focus:before {height: 5px;}
+  .listing-apps a:hover:after,
+  .listing-apps a:focus:after {width: 5px;}
+  .listing-apps a:before {left: 3px;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);}
+  .listing-apps a:after {top: 3px;box-shadow: 3px 0 5px rgba(0, 0, 0, 0.4);}
+}
+@media screen and (max-width: 350px) {
+  .listing-apps a {
+    width: 2.5em;
+    height: 2.5em;
+    font-size: 2.8em;
+  }
+}
 
 
 /* ==========================================================================
@@ -244,6 +266,8 @@ textarea {
 
 .user-container {
   display:block;
+  position: relative;
+  max-width: 320px;
   padding: 0.4em 1em;
   color: #fff;
 }
@@ -272,6 +296,12 @@ textarea {
   left: -20px;
   opacity: 1;
 }
+@media screen and (max-width: 480px) {
+  .user-container-edit:after,
+  .user-container-password:after {left: -10px;}
+  .user-container-edit:hover:after,
+  .user-container-password:hover:after {left: -14px;}
+}
 
 .user-container:before {
   display: block;
diff --git a/portal/assets/css/ynhpanel.css b/portal/assets/css/ynhpanel.css
index b7ea176..b546559 100644
--- a/portal/assets/css/ynhpanel.css
+++ b/portal/assets/css/ynhpanel.css
@@ -146,6 +146,9 @@ body {/*overflow-y: scroll;*/}
   -webkit-transition: all 0.2s ease;
   z-index: 10;
 }
+#ynhoverlay .wrapper:before,
+#ynhoverlay .wrapper:after {content: " ";display: table;}
+#ynhoverlay .wrapper:after {clear: both;}
 
 /* ******************************************************************
 	Button
@@ -335,6 +338,28 @@ body {/*overflow-y: scroll;*/}
   #ynhoverlay .listing-apps span + span { font-size: 0.3em; }
 
 
+@media screen and (max-width: 450px) {
+  #ynhoverlay .apps {margin: 10% 5%;}
+  #ynhoverlay .listing-apps a {font-size: 3em;}
+  #ynhoverlay .listing-apps span + span { font-size: 0.32em; }
+  #ynhoverlay .listing-apps a:hover,
+  #ynhoverlay .listing-apps a:focus {left: -5px;top: -5px;}
+  #ynhoverlay .listing-apps a:hover:before,
+  #ynhoverlay .listing-apps a:focus:before {height: 5px;}
+  #ynhoverlay .listing-apps a:hover:after,
+  #ynhoverlay .listing-apps a:focus:after {width: 5px;}
+  #ynhoverlay .listing-apps a:before {left: 3px;box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);}
+  #ynhoverlay .listing-apps a:after {top: 3px;box-shadow: 3px 0 5px rgba(0, 0, 0, 0.4);}
+}
+@media screen and (max-width: 350px) {
+  #ynhoverlay .listing-apps a {
+    width: 2.5em;
+    height: 2.5em;
+    font-size: 2.8em;
+  }
+}
+
+
 
 
 /* ==========================================================================
@@ -343,6 +368,8 @@ body {/*overflow-y: scroll;*/}
 
 #ynhoverlay .user-container {
   display:block;
+  position: relative;
+  max-width: 320px;
   padding: 0.4em 1em;
   color: #fff;
 }
diff --git a/portal/header.ms b/portal/header.ms
index bf35d18..9fe25c9 100644
--- a/portal/header.ms
+++ b/portal/header.ms
@@ -19,16 +19,14 @@
 
   <div class="overlay">
     {{#flash_win}}
-    <div class="box messages success inner">{{.}}</div>
+    <div class="wrapper messages success">{{.}}</div>
     {{/flash_win}}
 
     {{#flash_fail}}
-    <div class="box messages danger inner">{{.}}</div>
+    <div class="wrapper messages danger">{{.}}</div>
     {{/flash_fail}}
 
     {{#flash_info}}
-    <div class="box messages info inner">{{.}}</div>
+    <div class="wrapper messages info">{{.}}</div>
     {{/flash_info}}
 
-    
-