YunoHost/SSOwat
1
0
Fork 0
mirror of https://github.com/YunoHost/SSOwat.git synced 2024-09-03 20:06:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

[fix] Panel/portal responsiveness.

Browse source
This commit is contained in:
opi 2014-05-15 12:49:24 +02:00
parent e50de1a26a
commit a156639fd8
3 changed files with 64 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
portal/assets/css/ynh-style.css
View file

@ -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;

27
portal/assets/css/ynhpanel.css
View file

@ -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;
}

8
portal/header.ms
View file

@ -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}}