Commit 3a5406a6 authored by augier's avatar augier

Styling of mobile header compilant with desktop version

parent cdc6e912
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 744.09448819 1052.3622047"
height="40px"
width="40px">
<g
style="display:inline"
id="layer1"
transform="matrix(4.9383994,0,0,5.2618096,-1527.6262,-2214.8726)">
<path
id="path3511"
d="m 278.125,520.93362 0,-100 79.0625,0.0138 c 43.48437,0.008 81.17062,0.36221 83.74721,0.7881 3.3747,0.55781 6.95755,2.85698 12.8125,8.22198 l 8.12779,7.44764 0,16.13926 0,16.13926 -10,0 -10,0 -0.0158,-10.3125 -0.0157,-10.3125 -6.77054,-5.9375 -6.77057,-5.9375 -66.3387,0 -66.33869,0 0,83.75 0,83.75 24.54911,0 24.54912,0 -0.77696,6.5625 c -0.47778,4.0355 -1.59948,7.16416 -2.91302,8.125 -1.57019,1.14856 -10.18586,1.5625 -32.52216,1.5625 l -30.38609,0 0,-100 z m 75.01385,98.75856 c -0.95897,-0.59267 0.76874,-9.48251 5.61079,-28.86997 l 6.99644,-28.01359 39.00196,-39.14467 c 21.45108,-21.52956 40.5209,-39.95144 42.37738,-40.9375 1.87165,-0.99411 6.78352,-1.79283 11.02537,-1.79283 l 7.64993,0 12.71105,12.39542 12.71105,12.39542 0,12.61571 0,12.6157 -39.44885,39.44886 -39.44886,39.44885 -19.28755,4.7892 c -18.3445,4.55503 -36.89916,6.90323 -39.89871,5.0494 z m 33.55295,-18.06936 c 3.68049,-0.97963 6.89841,-1.98775 7.15094,-2.24027 0.25252,-0.25253 -3.66299,-4.55375 -8.70115,-9.55828 l -9.16028,-9.09915 -2.11015,8.40052 c -2.09814,8.35273 -2.09435,8.41733 0.66474,11.35425 3.24463,3.45376 3.41414,3.46969 12.1559,1.14293 z m 66.1351,-79.11794 -5.26283,-5.36242 -24.7019,24.67873 -24.70189,24.67874 5.26282,5.36243 5.26282,5.36242 24.70191,-24.67873 24.70189,-24.67875 -5.26282,-5.36242 z"
style="fill:#fefefe"
inkscape:connector-curvature="0" />
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="70px"
height="40px">
<path
style="fill:#fefefe"
d="M 0,20.50854 C 0,4.9747198 0.0555205,1.0473598 0.2734375,1.1662098 c 0.15039063,0.082 3.756821,2.50162 8.0142897,5.3768802 4.2574688,2.87526 7.7723718,5.18087 7.8108958,5.12358 0.03852,-0.0573 0.197328,0.049 0.352898,0.23633 0.304769,0.36687 4.329729,3.16109 4.329729,3.00579 0,-0.0515 0.312191,0.17793 0.693756,0.50984 0.381567,0.33191 0.775316,0.55547 0.875001,0.49679 0.09968,-0.0587 0.181243,-0.0199 0.181243,0.0863 0,0.17515 1.4204,1.17408 1.798547,1.26487 0.08686,0.0208 0.475045,0.31377 0.862638,0.65092 0.387595,0.33716 0.740563,0.57887 0.784377,0.53714 0.04381,-0.0417 0.388343,0.19265 0.765625,0.52084 0.37728,0.32818 0.721811,0.56256 0.765625,0.52083 0.04381,-0.0417 0.386174,0.19076 0.760803,0.51664 0.374632,0.32588 0.762708,0.5445 0.862392,0.48583 0.09968,-0.0587 0.181243,-0.0233 0.181243,0.0786 0,0.23477 1.966416,1.59121 1.975402,1.36264 0.0037,-0.0931 0.106984,-0.005 0.22962,0.19539 0.122631,0.20052 0.311441,0.36458 0.419578,0.36458 0.108138,0 0.462148,0.23437 0.786697,0.52083 0.324548,0.28646 0.712838,0.52084 0.862866,0.52084 0.150029,0 0.334847,0.15404 0.410707,0.34232 0.07587,0.18827 0.199705,0.28348 0.275212,0.21157 0.07551,-0.0719 0.255963,0.0238 0.401017,0.21275 0.236803,0.30843 0.400949,0.25183 1.607568,-0.55426 0.739108,-0.49376 1.343833,-0.97792 1.343833,-1.0759 0,-0.098 0.07758,-0.15471 0.17241,-0.12607 0.18371,0.0555 18.700235,-12.40475 19.349573,-13.02083 0.211348,-0.20052 0.384267,-0.32198 0.384267,-0.26991 0,0.0521 2.534765,-1.618 5.632812,-3.7112702 3.098048,-2.09326 5.903516,-3.97477 6.234375,-4.18113 L 70,0.9937498 70,20.49687 70,40 35,40 0,40 0,20.50854 Z M 24.49916,15.76283 C 18.904168,11.96306 11.380861,6.86198 7.7806989,4.4270798 L 1.234951,-2e-7 l 33.759559,0 33.759558,0 -3.478598,2.36022 C 43.901195,16.86261 35.18624,22.70533 34.951873,22.68991 34.797875,22.67978 30.094154,19.56259 24.49916,15.76283 Z"
id="path3371"
inkscape:connector-curvature="0" />
</svg>
......@@ -38,7 +38,7 @@ $(document).ready(function(){
};
/* Drawer menu */
$("#menu_badge").bind("tap click", function(evt){
$("#menu-badge").bind("tap click", function(evt){
evt.preventDefault();
$("#app").toggleClass("draw");
});
......
......@@ -2,56 +2,76 @@
$drawer-width: 400px;
$drawer-width-offset: $drawer-width + 50px;
$mobile-navbar-height: 46px;
header {
position: fixed;
height: 45px;
top: 0px;
z-index: 10;
@include header-gradient($header-background-color);
box-shadow: 0 1px 2px #333;
border-bottom: 1px solid darken($header-background-color, 8%);
}
#main_nav {
#main-nav.navbar-fixed-top {
width: 100%;
height: $mobile-navbar-height !important;
min-height: $mobile-navbar-height !important;
max-height: $mobile-navbar-height !important;
#header_title {
display: inline-block;
width: 45px;
height: 100%;
padding: 7px;
.navbar {
margin: 0;
padding: 0;
border: none;
min-height: $mobile-navbar-height;
}
#nav_badges {
#header-title {
padding: 7px 15px;
margin: 0 0 0 -15px;
height: $mobile-navbar-height;
}
#nav-badges {
float: right;
margin: 7px 0;
display: inline-block;
margin: 0 -15px;
display: inline-flex;
.badge {
display: inline;
margin: 0 4px;
padding: 10px 6px;
font-weight: bold;
font-size: smaller;
li > a, li > button {
background-color: transparent;
&.badge-link {
font-size: 26px;
padding: 14px 6px;
text-align: center;
width: $mobile-navbar-height;
height: $mobile-navbar-height;
[class^="entypo-"], [class^="diaspora-custom-"] {
color: $white;
width: 100%;
padding: 0;
margin: 0;
&.entypo-bell, &.diaspora-custom-compose {
text-align: center;
font-size: 22px;
&:before {
position: relative;
top: -2px;
}
}
}
}
}
.badge_count {
border-radius: 2px;
.navbar-toggle {
display: unset;
margin: 6px 15px;
}
.badge {
z-index: 3;
top: 6px;
right: 6px;
padding: 2px 6px;
position: absolute;
top: 3px;
padding: 1px 3px;
background-color: $red;
margin-left: -8px;
}
#conversation_icon {
height: 18px;
}
}
#nav_badges, #header_title{
#header-title{
img {
height: 30px;
width: 30px;
......@@ -74,25 +94,23 @@ header {
header {
width: 100%;
position: absolute;
height: $mobile-navbar-height;
background-color: $navbar-inverse-bg;
border-bottom: solid $navbar-inverse-border 1px;
#global_search {
#global-search {
form {
padding: 0 15px;
width: 100%;
input {
box-shadow: 0 1px 1px #444;
border-radius: 15px;
margin-top: 5px;
background-color: #444;
border: 1px solid #222;
margin-top: 7px;
background-color: $navbar-inverse-bg;
font-size: 13px;
color: black;
&.active {
background-color: rgba(160,160,160,0.6);
background-color: $white;
}
&:focus {
......@@ -108,26 +126,25 @@ header {
nav {
position: absolute;
top: 45px;
bottom: 0px;
top: $mobile-navbar-height;
bottom: 0;
overflow: auto;
width: 100%;
li {
font-size: 1.8rem;
line-height: 25px;
font-weight: bold;
color: $light-grey;
border-bottom: solid rgb(53, 53, 53) 2px;
border-bottom: solid $navbar-inverse-border 1px;
}
li:hover {
background-color: $link-grey;
}
.no_border {
padding: 0px;
border-bottom: 0px;
.no-border {
padding: 0;
border-bottom: 0;
&:hover {
background-color: transparent;
......@@ -165,20 +182,18 @@ header {
}
}
#main_nav,
#drawer {
#main-nav, #drawer {
transition: all 0.25s ease;
z-index: 10;
}
/* This class is added when the user open the drawer */
#app.draw {
#main_nav,
#drawer {
#main-nav, #drawer {
transform: translateX(-$drawer-width);
}
@media (max-width: $drawer-width-offset) {
#main_nav {
#main-nav {
transform: translateX(-80%);
}
#drawer {
......
......@@ -13,6 +13,8 @@
@import "mobile/stream_element";
@import "mobile/comments";
@import "new_styles/typography";
a {
color: #2489ce;
text-decoration: none;
......@@ -34,12 +36,16 @@ body {
h3 { margin-top: 0; }
.clear { clear: both; }
#main { padding: 55px 10px 0 10px; }
#main { padding: 56px 10px 0 10px; }
.message {
padding-left: 2px;
}
.avatar {
border-radius: 4px;
}
.stream_element,
.comments {
overflow: auto;
......@@ -52,7 +58,6 @@ h3 { margin-top: 0; }
* { max-width: 100%; }
.avatar {
border-radius: 4px;
float: left;
margin-top: 0;
max-width: 35px;
......
......@@ -16,3 +16,30 @@
src : image-url('fonts/Roboto-Light.ttf');
weight : normal;
}
/* diaspora custom icons font */
@font-face {
font-family: "diaspora-custom";
src: image-url("fonts/diaspora-custom.ttf");
font-weight: normal;
font-style: normal;
}
[class^="diaspora-custom-"]:before,
[class*=" diaspora-custom-"]:before {
font-family: "diaspora-custom" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.diaspora-custom-compose:before {
content: "a";
}
.diaspora-custom-mail:before {
content: "b";
}
#drawer
%header
#global-search
= form_tag("/search", :method => "get", :class => "search_form", "accept-charset" => "UTF-8") do
%div
= hidden_field_tag "utf8", "✓"
= search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5",
autocomplete: "off", class: "ac_input form-control"
%nav.navbar-inverse
%ul
%li= link_to t("streams.activity.title"), activity_stream_path
%li= link_to t("streams.mentions.title"), mentioned_stream_path
%li#all_aspects
= link_to t("streams.aspects.title"), "#"
%li.no-border.hide
%ul
- current_user.aspects.each do |aspect|
%li= link_to aspect.name, aspects_stream_path(a_ids: [aspect.id])
%li#followed_tags
= link_to t("streams.followed_tag.title"), "#"
%li.no-border.hide
%ul
- current_user.followed_tags.each do |tag|
%li= tag_link(tag)
- if current_user.followed_tags.length > 0
%li.manage-followed-tags
= link_to t("tag_followings.manage.title"), manage_tag_followings_path
%li
= link_to user_profile_path(current_user.username) do
= t("layouts.header.profile")
= person_image_tag(current_user, size: :thumb_small)
%li= link_to t("_contacts"), contacts_path
%li= link_to t("layouts.header.settings"), users_edit_path
%li= link_to t("layouts.application.toggle"), toggle_mobile_path
%li= link_to t("layouts.header.logout"), destroy_user_session_path, method: :delete
.nav.navbar-inverse.navbar-fixed-top#main-nav
.container-fluid
.navbar
= link_to(image_tag("mobile/asterisk_white_mobile.png", class: "img-responsive"),
stream_path, id: "header-title", class: "navbar-brand")
%ul.nav.navbar-nav#nav-badges
-# Notifications
%li
= link_to notifications_path, class: "badge-link", id: "notification-badge" do
%i.entypo-bell
- if current_user.unread_notifications.size > 0
%span.badge{id: "notification"}
= current_user.unread_notifications.size
-# Conversations
%li
= link_to conversations_path, class: "badge-link", id: "conversations-badge" do
%i.diaspora-custom-mail
- if current_user.unread_message_count > 0
%span.badge{id: "conversation"}
= current_user.unread_message_count
-# Publisher
%li
= link_to new_status_message_path, class: "badge-link", id: "compose-badge" do
%i.diaspora-custom-compose
-# Menu
%li
%button.navbar-toggle#menu-badge{type: "button"}
%span.sr-only
%span.icon-bar
%span.icon-bar
%span.icon-bar
......@@ -52,69 +52,8 @@
%body
#app
- if user_signed_in?
%header#main_nav
#nav_badges
-# Notifications
= link_to notifications_path, class: "badge", id: "notification_badge" do
= image_tag("mobile/notifications_white.png")
- if current_user.unread_notifications.size > 0
%span.badge_count{id: "notification"}
= current_user.unread_notifications.size
-# Conversations
= link_to conversations_path, class: "badge", id: "conversations_badge" do
= image_tag("mobile/mail_white.png", id: "conversation_icon")
- if current_user.unread_message_count > 0
%span.badge_count{id: "conversation"}
= current_user.unread_message_count
-# Publisher
= link_to(image_tag("mobile/compose_mobile.png"), new_status_message_path, class: "badge", id: "compose_badge")
-# Menu
= link_to(image_tag("mobile/menu.png"), "#", id: "menu_badge", class: "badge")
= link_to(image_tag("mobile/asterisk_white_mobile.png"), stream_path, id: "header_title")
- if user_signed_in?
#drawer
%header
#global_search
= form_tag('/search', method: 'get', class: 'search_form', "accept-charset" => "UTF-8") do
%div
= hidden_field_tag "utf8", "✓"
= search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input form-control"
%nav
%ul
%li
= link_to t("streams.activity.title"), activity_stream_path
%li
= link_to t("streams.mentions.title"), mentioned_stream_path
%li#all_aspects
= link_to t('streams.aspects.title'), "#"
%li.no_border.hide
%ul
- current_user.aspects.each do |aspect|
%li
= link_to aspect.name, aspects_stream_path(a_ids: [aspect.id])
%li#followed_tags
= link_to t('streams.followed_tag.title'), "#"
%li.no_border.hide
%ul
- current_user.followed_tags.each do |tag|
%li
= tag_link(tag)
- if current_user.followed_tags.length > 0
%li.manage_followed_tags
= link_to t("tag_followings.manage.title"), manage_tag_followings_path
%li
= link_to user_profile_path(current_user.username) do
= t('layouts.header.profile')
= person_image_tag(current_user, size: :thumb_small)
%li
= link_to t('_contacts'), contacts_path
%li
= link_to t('layouts.header.settings'), users_edit_path
%li
= link_to t('layouts.application.toggle'), toggle_mobile_path
%li
= link_to t('layouts.header.logout'), destroy_user_session_path, method: :delete
= render "layouts/header"
= render "layouts/drawer"
#main{:role => "main"}
- if current_page?(:activity_stream)
......
......@@ -15,19 +15,19 @@ Feature: Navigate between pages using the header menu and the drawer
Scenario: navigate to the stream page
When I open the drawer
And I follow "My activity"
And I click on selector "#header_title"
And I click on selector "#header-title"
Then I should see "There are no posts yet." within "#main_stream"
Scenario: navigate to the notification page
When I click on selector "#notification_badge"
When I click on selector "#notification-badge"
Then I should see "Notifications" within "#main"
Scenario: navigate to the conversation page
When I click on selector "#conversations_badge"
When I click on selector "#conversations-badge"
Then I should see "Inbox" within "#main"
Scenario: navigate to the publisher page
When I click on selector "#compose_badge"
When I click on selector "#compose-badge"
Then I should see "All aspects" within "#new_status_message"
Scenario: search a user
......@@ -66,7 +66,7 @@ Feature: Navigate between pages using the header menu and the drawer
And I search for "#boss"
And I click on selector ".tag_following_action"
# Loading another page to refresh the drawer and make the now followed tag appears
And I click on selector "#compose_badge"
And I click on selector "#compose-badge"
And I open the drawer
And I follow "#Followed tags"
Then I should see "#boss" within "#followed_tags + li > ul"
......
......@@ -7,7 +7,7 @@ Feature: viewing photos on the mobile main page
Background:
Given a user with username "bob"
When I sign in as "bob@bob.bob" on the mobile website
And I click on selector "#compose_badge"
And I click on selector "#compose-badge"
Scenario: view full size image
Given I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
......
When /^I toggle the mobile view$/ do
visit('/mobile/toggle')
visit("/mobile/toggle")
end
Given /^I visit the mobile publisher page$/ do
visit('/status_messages/new.mobile')
visit("/status_messages/new.mobile")
end
When /^I visit the mobile search page$/ do
visit('/people.mobile')
visit("/people.mobile")
end
When /^I open the drawer$/ do
find('#menu_badge').click
find("#menu-badge").click
end
Then /^the aspect dropdown within "([^"]*)" should be labeled "([^"]*)"/ do |selector, label|
......
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