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,34 +195,36 @@ viewCollectionContent language user collection cards values = ...@@ -195,34 +195,36 @@ viewCollectionContent language user collection cards values =
] ]
, div [ class "row section grey last" ] , div [ class "row section grey last" ]
[ div [ class "container" ] [ div [ class "container" ]
[ h4 [ class "zone-label" ] [ div [ class "col-xs-12" ]
[ text "Utilisations" [ h4 [ class "zone-label" ]
-- TODO i18n [ text "Utilisations"
-- TODO i18n
]
, div [ class "row" ]
(let
useCaseCards =
List.filterMap
(\cardId ->
let
card =
getCard cards cardId
in
if
List.any
(\subTypeId -> List.member subTypeId card.subTypeIds)
cardTypesForUseCase
then
Just card
else
Nothing
)
collection.cardIds
in
List.map
(viewCardThumbnail language values "example")
useCaseCards
)
] ]
, div [ class "row" ]
(let
useCaseCards =
List.filterMap
(\cardId ->
let
card =
getCard cards cardId
in
if
List.any
(\subTypeId -> List.member subTypeId card.subTypeIds)
cardTypesForUseCase
then
Just card
else
Nothing
)
collection.cardIds
in
List.map
(viewCardThumbnail language values "example")
useCaseCards
)
] ]
] ]
] ]
...@@ -230,7 +232,7 @@ viewCollectionContent language user collection cards values = ...@@ -230,7 +232,7 @@ viewCollectionContent language user collection cards values =
viewCardThumbnail : I18n.Language -> Dict String Value -> String -> Card -> Html Msg viewCardThumbnail : I18n.Language -> Dict String Value -> String -> Card -> Html Msg
viewCardThumbnail language values extraClass card = 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 [ aForPath
navigate navigate
language language
......
...@@ -1289,12 +1289,14 @@ viewHeader model language containerClass = ...@@ -1289,12 +1289,14 @@ viewHeader model language containerClass =
[ profileOrResetPasswordNavItem [ profileOrResetPasswordNavItem
, signInOrOutNavItem , signInOrOutNavItem
, signUpNavItem , signUpNavItem
, button , li []
[ class "btn btn-default btn-action" [ button
, onClick (DisplayAddNewModal True) [ class "btn btn-default btn-action"
, type' "button" , onClick (DisplayAddNewModal True)
, type' "button"
]
[ text (I18n.translate language I18n.AddNew) ]
] ]
[ text (I18n.translate language I18n.AddNew) ]
] ]
] ]
] ]
......
...@@ -43,10 +43,6 @@ a { ...@@ -43,10 +43,6 @@ a {
padding-bottom: 100px; padding-bottom: 100px;
} }
@media (max-width: 768px) {
padding: 55px 15px 60px;
}
} }
.btn.btn-default { .btn.btn-default {
...@@ -160,7 +156,7 @@ a { ...@@ -160,7 +156,7 @@ a {
position: fixed; position: fixed;
left: 50%; left: 50%;
right: 0; right: 0;
padding: 0 22px; padding: 0 10px;
margin: 0; margin: 0;
z-index: 100000; z-index: 100000;
background: white; background: white;
...@@ -292,7 +288,7 @@ nav.navbar.navbar-default { ...@@ -292,7 +288,7 @@ nav.navbar.navbar-default {
height: 25px; height: 25px;
background: url(../img/ogptoolbox-logo.png) no-repeat no-repeat ; background: url(../img/ogptoolbox-logo.png) no-repeat no-repeat ;
background-size: 191px ; background-size: 191px ;
margin: 27px 0 25px; margin: 29px 0 25px;
margin-left: 0px !important; margin-left: 0px !important;
} }
...@@ -306,8 +302,9 @@ p.navbar-text { ...@@ -306,8 +302,9 @@ p.navbar-text {
color: #434343; color: #434343;
line-height: 50px; line-height: 50px;
font-weight: 600; font-weight: 600;
margin-right: 20px; margin-right: 10px;
font-size: 13px; font-size: 13px;
padding-left: 0px;
} }
.navbar-inverse { .navbar-inverse {
border: none; border: none;
...@@ -1312,8 +1309,8 @@ a.show-more { ...@@ -1312,8 +1309,8 @@ a.show-more {
padding: 0px; padding: 0px;
padding-left: 15px; padding-left: 15px;
height: 72px; height: 72px;
min-height: 72px; min-height: 65px;
max-height: 72px; max-height: 65px;
h4 { h4 {
margin: 0px 0 4px; margin: 0px 0 4px;
...@@ -1789,7 +1786,7 @@ body, html, #main, .main-container { ...@@ -1789,7 +1786,7 @@ body, html, #main, .main-container {
right: 0; right: 0;
margin: auto 0; margin: auto 0;
opacity: .5; opacity: .5;
width: 100%; width: 110%;
} }
.breadcrumb>.active { .breadcrumb>.active {
...@@ -1851,6 +1848,8 @@ body, html, #main, .main-container { ...@@ -1851,6 +1848,8 @@ body, html, #main, .main-container {
font-size: 52px; font-size: 52px;
margin-top: -10px; margin-top: -10px;
font-weight: 300; font-weight: 300;
line-height: 0.9em;
margin: -2px 0 16px;
} }
h3 { h3 {
font-size: 17px; font-size: 17px;
...@@ -2333,6 +2332,13 @@ h3.user-mail { ...@@ -2333,6 +2332,13 @@ h3.user-mail {
//MOBILE OPTILIZATION //MOBILE OPTILIZATION
@media(max-width:760px) { @media(max-width:760px) {
.container {
padding: 28px;
}
header .container {
padding: 0 15px;
}
.navbar-toggle { .navbar-toggle {
float: left; float: left;
margin-left: 15px; margin-left: 15px;
...@@ -2403,7 +2409,11 @@ h3.user-mail { ...@@ -2403,7 +2409,11 @@ h3.user-mail {
} }
.row.show { .row.show {
margin: 13px 0; margin: 13px 0;
a {
font-size: 13px;
}
} }
div.metrics { div.metrics {
padding: 20px 0; padding: 20px 0;
...@@ -2412,5 +2422,92 @@ h3.user-mail { ...@@ -2412,5 +2422,92 @@ h3.user-mail {
font-size: 20px; font-size: 20px;
} }
} }
}
// 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 () { ...@@ -548,8 +548,12 @@ function installPolyfill () {
var max_r = null; var max_r = null;
if ($(window).width() < 768) { if ($(window).width() < 768) {
min_r = 20; min_r = 10;
max_r = 100; max_r = 70;
}
if ($(window).width() < 1030) {
min_r = 30;
max_r = 130;
} }
else { else {
min_r = 30; min_r = 30;
...@@ -557,7 +561,10 @@ else { ...@@ -557,7 +561,10 @@ else {
} }
var h = null; var h = null;
if ($(window).width() < 768) { if ($(window).width() < 768) {
h = 358; h = 365;
}
if ($(window).width() < 1100) {
h = 400;
} }
else { else {
h = 510; h = 510;
...@@ -597,13 +604,6 @@ function mount(options) { ...@@ -597,13 +604,6 @@ function mount(options) {
$(window).off('resize'); $(window).off('resize');
$(window).on('resize', function() { $(window).on('resize', function() {
var max_r = null;
if ($(window).width() < 768) {
max_r = 100;
}
else {
max_r = 180;
}
tagcloud.redraw(); 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