Commit 65dea9f6 authored by Angelo Chiacchio's avatar Angelo Chiacchio

Responsive: completed media queries

It’s a first step to make the platform readable on mobile devices. Will
need improvements.
parent 898475de
......@@ -195,6 +195,7 @@ viewCollectionContent language user collection cards values =
]
, div [ class "row section grey last" ]
[ div [ class "container" ]
[ div [ class "col-xs-12" ]
[ h4 [ class "zone-label" ]
[ text "Utilisations"
-- TODO i18n
......@@ -226,11 +227,12 @@ viewCollectionContent language user collection cards values =
]
]
]
]
viewCardThumbnail : I18n.Language -> Dict String Value -> String -> Card -> Html Msg
viewCardThumbnail language values extraClass card =
div [ class "col-xs-6 col-md-3" ]
div [ class "col-xs-12 col-sm-6 col-md-4 col-lg-3" ]
[ aForPath
navigate
language
......
......@@ -1289,7 +1289,8 @@ viewHeader model language containerClass =
[ profileOrResetPasswordNavItem
, signInOrOutNavItem
, signUpNavItem
, button
, li []
[ button
[ class "btn btn-default btn-action"
, onClick (DisplayAddNewModal True)
, type' "button"
......@@ -1298,6 +1299,7 @@ viewHeader model language containerClass =
]
]
]
]
, nav [ class "navbar navbar-inverse" ]
[ div [ class containerClass ]
[ Html.form
......
......@@ -43,10 +43,6 @@ a {
padding-bottom: 100px;
}
@media (max-width: 768px) {
padding: 55px 15px 60px;
}
}
.btn.btn-default {
......@@ -160,7 +156,7 @@ a {
position: fixed;
left: 50%;
right: 0;
padding: 0 22px;
padding: 0 10px;
margin: 0;
z-index: 100000;
background: white;
......@@ -292,7 +288,7 @@ nav.navbar.navbar-default {
height: 25px;
background: url(../img/ogptoolbox-logo.png) no-repeat no-repeat ;
background-size: 191px ;
margin: 27px 0 25px;
margin: 29px 0 25px;
margin-left: 0px !important;
}
......@@ -306,8 +302,9 @@ p.navbar-text {
color: #434343;
line-height: 50px;
font-weight: 600;
margin-right: 20px;
margin-right: 10px;
font-size: 13px;
padding-left: 0px;
}
.navbar-inverse {
border: none;
......@@ -1312,8 +1309,8 @@ a.show-more {
padding: 0px;
padding-left: 15px;
height: 72px;
min-height: 72px;
max-height: 72px;
min-height: 65px;
max-height: 65px;
h4 {
margin: 0px 0 4px;
......@@ -1789,7 +1786,7 @@ body, html, #main, .main-container {
right: 0;
margin: auto 0;
opacity: .5;
width: 100%;
width: 110%;
}
.breadcrumb>.active {
......@@ -1851,6 +1848,8 @@ body, html, #main, .main-container {
font-size: 52px;
margin-top: -10px;
font-weight: 300;
line-height: 0.9em;
margin: -2px 0 16px;
}
h3 {
font-size: 17px;
......@@ -2333,6 +2332,13 @@ h3.user-mail {
//MOBILE OPTILIZATION
@media(max-width:760px) {
.container {
padding: 28px;
}
header .container {
padding: 0 15px;
}
.navbar-toggle {
float: left;
margin-left: 15px;
......@@ -2403,7 +2409,11 @@ h3.user-mail {
}
.row.show {
margin: 13px 0;
a {
font-size: 13px;
}
}
div.metrics {
padding: 20px 0;
......@@ -2414,3 +2424,90 @@ h3.user-mail {
}
}
// TABLETTE
@media(max-width:768px) {
.browse-tag {
display: none;
}
.row.browse {
padding: 150px 10px;
}
.scroll-content {
left: 0;
}
.full-bg img.cover, .banner.screenshot img {
width: auto;
height: 100%;
}
.banner.collection-header {
height: auto;
}
.row.fixed {
position: fixed;
left: 0;
bottom: 0;
}
p.navbar-text {
font-size: 14px;
}
.banner {
height: 470px;
}
.list {
&.p90 {
padding-top: 0px;
padding-bottom: 70px;
}
.thumbnail {
.visual {
width: 100px;
}
}
}
.content-right {
padding-left: 10px;
margin-top: 40px;
}
.modal-dialog {
width: 90%;
margin: 20px auto;
.media.action .icon {
padding: 6px 20px;
}
}
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
header .container-fluid {
padding: 0 10px;
}
}
@media(min-width:768px) and (max-width:1050px) {
.row.list.p90 {
padding-top: 70px;
}
.browse-tag {
display: block;
float: left;
height: 520px;
width: 100%;
z-index: 1000;
}
.scroll-content {
top: 300px;
left: 0;
}
.banner {
height: 470px;
}
}
\ No newline at end of file
......@@ -548,8 +548,12 @@ function installPolyfill () {
var max_r = null;
if ($(window).width() < 768) {
min_r = 20;
max_r = 100;
min_r = 10;
max_r = 70;
}
if ($(window).width() < 1030) {
min_r = 30;
max_r = 130;
}
else {
min_r = 30;
......@@ -557,7 +561,10 @@ else {
}
var h = null;
if ($(window).width() < 768) {
h = 358;
h = 365;
}
if ($(window).width() < 1100) {
h = 400;
}
else {
h = 510;
......@@ -597,13 +604,6 @@ function mount(options) {
$(window).off('resize');
$(window).on('resize', function() {
var max_r = null;
if ($(window).width() < 768) {
max_r = 100;
}
else {
max_r = 180;
}
tagcloud.redraw();
});
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment