Commit 7f4a4c79 authored by Angelo Chiacchio's avatar Angelo Chiacchio

Responsive: first iteration of homepage for mobile

parent a754b1cd
......@@ -397,7 +397,7 @@ viewCollections collectionsWebData language =
viewCollectionThumbnail : I18n.Language -> User -> Collection -> Html Msg
viewCollectionThumbnail language user collection =
div [ class "col-xs-6 col-md-4 " ]
div [ class "col-xs-12 col-md-4 " ]
[ aForPath
navigate
language
......@@ -485,7 +485,7 @@ viewThumbnail thumbnailExtraClasses language values card =
cardType =
getCardType card
in
div [ class "col-xs-6 col-md-3" ]
div [ class "col-xs-12 col-sm-6 col-md-4 col-lg-3" ]
[ div
[ class ("thumbnail " ++ thumbnailExtraClasses)
, onClick (navigate urlPath)
......@@ -529,7 +529,7 @@ viewThumbnail thumbnailExtraClasses language values card =
viewThumbnailLoading : String -> Html Msg
viewThumbnailLoading thumbnailExtraClasses =
div [ class "col-xs-6 col-md-3" ]
div [ class "col-xs-12 col-sm-6 col-md-4 col-lg-3" ]
[ div [ class ("thumbnail " ++ thumbnailExtraClasses) ]
([ div [ class "visual" ]
[ h1 [ class "dynamic" ] [ text "..." ] ]
......
......@@ -1263,7 +1263,7 @@ viewHeader model language containerClass =
[ attribute "aria-controls" "navbar"
, attribute "aria-expanded" "false"
, class "navbar-toggle collapsed"
, attribute "data-target" "#navbar"
, attribute "data-target" "#menu-collapse"
, attribute "data-toggle" "collapse"
, type' "button"
]
......@@ -1285,7 +1285,7 @@ viewHeader model language containerClass =
, p [ class "navbar-text" ]
[ text (I18n.translate language I18n.HeaderTitle) ]
]
, ul [ class "nav navbar-nav navbar-right" ]
, ul [ class "nav navbar-nav navbar-right collapse navbar-collapse" ]
[ profileOrResetPasswordNavItem
, signInOrOutNavItem
, signUpNavItem
......@@ -1300,25 +1300,24 @@ viewHeader model language containerClass =
]
, nav [ class "navbar navbar-inverse" ]
[ div [ class containerClass ]
[ div [ class "navbar-header" ]
[ button
[ attribute "aria-expanded" "false"
, class "navbar-toggle collapsed"
, attribute "data-target" "#bs-example-navbar-collapse-1"
, attribute "data-toggle" "collapse"
, type' "button"
[ Html.form
[ class "navbar-form navbar-right collapse mobile"
, onSubmit Search
]
[ span [ class "sr-only" ]
[ text "Toggle navigation" ]
, span [ class "icon-bar" ]
[]
, span [ class "icon-bar" ]
[]
, span [ class "icon-bar" ]
[]
[ div [ class "form-group search-bar" ]
[ span [ attribute "aria-hidden" "true", class "glyphicon glyphicon-search" ]
[]
, input
[ class "form-control"
, onInput SearchInputChanged
, placeholder (I18n.translate language I18n.SearchInputPlaceholder)
, type' "search"
, value model.searchInputValue
]
[]
]
]
]
, div [ class "collapse navbar-collapse", id "bs-example-navbar-collapse-1" ]
, div [ class "collapse navbar-collapse navbar-fixed-top"]
[ ul [ class "nav navbar-nav" ]
[ li []
[ aForPath
......@@ -1379,6 +1378,59 @@ viewHeader model language containerClass =
]
]
]
, div [ class "collapse", id "menu-collapse" ]
[ ul [ class "nav navbar-nav" ]
[ button
[ class "btn btn-default btn-action"
, onClick (DisplayAddNewModal True)
, type' "button"
]
[ text (I18n.translate language I18n.AddNew) ]
, li []
[ aForPath
Navigate
language
"/tools"
[]
[ text (I18n.translate language (I18n.Tool I18n.Plural)) ]
]
, li []
[ aForPath
Navigate
language
"/use-cases"
[]
[ text (I18n.translate language (I18n.UseCase I18n.Plural)) ]
]
-- , li []
-- [ aForPath
-- Navigate
-- language
-- "/organizations"
-- []
-- [ text (I18n.translate language (I18n.Organization I18n.Plural)) ]
-- ]
, li []
[ aForPath
Navigate
language
"/collections"
[]
[ text (I18n.translate language (I18n.Collection I18n.Plural)) ]
]
, li []
[ aForPath
Navigate
language
"/help"
[]
[ text (I18n.translate language I18n.Help) ]
]
, profileOrResetPasswordNavItem
, signInOrOutNavItem
, signUpNavItem
]
]
]
]
]
......
......@@ -42,6 +42,11 @@ a {
&.last {
padding-bottom: 100px;
}
@media (max-width: 768px) {
padding: 55px 15px 60px;
}
}
.btn.btn-default {
......@@ -249,12 +254,21 @@ ul.nav.nav-pills {
a.banner-link {
color: white;
opacity: 0.8;
font-size: 16px;
.glyphicon {
margin-left: 7px;
font-size: 85%;
}
&:hover {
opacity: 1;
}
}
// NAVIGATION
.navbar {
min-height: 83px;
}
nav.navbar.navbar-default {
background-image: none;
background-color: white;
......@@ -537,7 +551,8 @@ ol.breadcrumb {
// FOOTER
.row.footer {
background-color: @darkest;
padding: 45px 0 20px;
padding-top: 45px;
padding-bottom: 20px;
margin-top: 0px;
h4 {
......@@ -585,6 +600,11 @@ a.etalab-logo img {
&:hover {
opacity: 1;
}
@media(max-width:768px) {
margin-bottom: 50px;
}
}
.dropdown-language .dropdown-toggle {
......@@ -2307,3 +2327,74 @@ h3.user-mail {
.loader {
margin: 30px 0;
}
//MOBILE OPTILIZATION
@media(max-width:760px) {
.navbar-toggle {
float: left;
margin-left: 15px;
margin-top: 28px;
margin-right: 20px;
border: none;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: transparent;
}
p.navbar-text {
float: left;
line-height: 0;
position: relative;
top: -40px;
left: 58px;
font-size: 13px;
}
a.navbar-brand {
position: relative;
top: -6px;
}
.search-bar {
span.glyphicon.glyphicon-search {
color: grey;
position: relative;
top: 4px;
left: 13px;
}
input.form-control {
width: 92%;
}
}
.form-control {
display: initial;
}
button.btn.btn-default.btn-action {
margin-left: -30px;
margin-top: 8px;
margin-bottom: 15px;
}
form.navbar-form.navbar-right {
margin: 0;
border: none;
padding: 5px 0px 15px;
box-shadow: none;
}
.mobile {
display: block;
}
#menu-collapse nav.navbar.navbar-inverse {
position: fixed;
left: 0;
right: 0;
z-index: 1000;
}
}
\ No newline at end of file
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