diff --git a/app/assets/stylesheets/mobile/header.css.scss b/app/assets/stylesheets/mobile/header.css.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2b1408d0fbf796464aa35867b4aa5f5d4fb03c2d
--- /dev/null
+++ b/app/assets/stylesheets/mobile/header.css.scss
@@ -0,0 +1,171 @@
+/* This file contains the CSS code corresponding to the header and the drawer (including the menu) of the mobile version */
+
+header {
+ position: fixed;
+ height: 45px;
+ top: 0px;
+ z-index: 10;
+ background: url('../header-bg-long.jpg') rgb(40,35,35);
+ @include box-shadow(0, 1px, 2px, #333);
+ border-bottom: 1px solid #222;
+}
+
+#main_nav {
+ width: 100%;
+
+ #header_title {
+ display: inline-block;
+ width: 30px;
+ height: 30px;
+ padding: 7px;
+ }
+
+ #nav_badges {
+ float: right;
+ margin: 7px 0px;
+ display: inline-block;
+
+ .badge {
+ display: inline;
+ margin: 0px 4px;
+ padding: 10px 6px;
+ font-weight: bold;
+ font-size: smaller;
+ background-color: transparent;
+
+ img {
+ height: 30px;
+ width: 30px;
+ }
+ }
+
+ .badge_count {
+ @include border-radius(2px);
+ z-index: 3;
+ position: absolute;
+ top: 3px;
+ padding: 1px 3px;
+ background-color: $red;
+ margin-left: -8px;
+ }
+
+ #conversation_icon {
+ height: 18px;
+ }
+ }
+}
+
+#drawer {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ width: 80%;
+ left: 100%;
+ background-color: #444;
+
+ box-shadow: -2px 0px 2px 1px #333;
+ -o-box-shadow: -2px 0px 2px 1px #333;
+ -ms-box-shadow: -2px 0px 2px 1px #333;
+ -moz-box-shadow: -2px 0px 2px 1px #333;
+ -webkit-box-shadow: -2px 0px 2px 1px #333;
+
+ header {
+ width: 80%;
+
+ #global_search {
+ margin-left: 10px;
+
+ form {
+ margin-right: 20px;
+
+ input {
+ @include box-shadow(0, 1px, 1px, #444);
+ @include border-radius(15px);
+ width: 100%;
+ margin-top: 7px;
+ background-color: #444;
+ border: 1px solid #222;
+ font-size: 13px;
+ padding: 4px;
+ color: black;
+
+ &.active {
+ background-color: $highlight-white;
+ background-color: rgba(160,160,160,0.6);
+ }
+
+ &:focus {
+ outline: none;
+ background-color: white;
+ }
+
+ &::-webkit-input-placeholder { text-shadow: none; }
+ &:-moz-placeholder { text-shadow: none; }
+ }
+ }
+ }
+ }
+
+ nav {
+ position: absolute;
+ top: 45px;
+ bottom: 0px;
+ overflow: auto;
+ width: 100%;
+ height: 100%;
+
+ li {
+ font-size: 25px;
+ line-height: 25px;
+ font-weight: bold;
+ color: $light-grey;
+ border-bottom: solid rgb(53, 53, 53) 2px;
+ }
+
+ li:hover {
+ background-color: $link-grey;
+ }
+
+ .no_border {
+ padding: 0px;
+ border-bottom: 0px;
+
+ > ul > li > a {
+ font-size: 14px;
+ padding: 8px 42px;
+ }
+ }
+
+ .hide {
+ display: none;
+ }
+
+ .avatar {
+ height: 35px;
+ width: 35px;
+ margin: -5px 5px;
+ float: right;
+ }
+ }
+
+ a {
+ display: block;
+ color: $light-grey;
+ text-decoration: none;
+ padding: 12px 25px;
+ }
+
+ ul {
+ list-style: none;
+ margin: 0px;
+ }
+}
+
+/* This class is added when the user open the drawer */
+#app.draw {
+ transform: translateX(-80%);
+ -o-transform: translateX(-80%);
+ -ms-transform: translateX(-80%);
+ -moz-transform: translateX(-80%);
+ -webkit-transform: translateX(-80%);
+}
diff --git a/app/assets/stylesheets/mobile.css.scss b/app/assets/stylesheets/mobile/mobile.css.scss
similarity index 84%
rename from app/assets/stylesheets/mobile.css.scss
rename to app/assets/stylesheets/mobile/mobile.css.scss
index df9e4279f1bf69ac6ce1589302477e1c012bf209..e475bcea1f070edbaed060d26e0718e30f6c4ad3 100644
--- a/app/assets/stylesheets/mobile.css.scss
+++ b/app/assets/stylesheets/mobile/mobile.css.scss
@@ -5,6 +5,8 @@
@import 'vendor/autoSuggest';
@import '_flash_messages.scss';
+@import 'header';
+
a {
color: #2489ce;
text-decoration: none;
@@ -17,12 +19,7 @@ body {
/* scale background image down for iOS retina display */
size: 200px;
}
- padding-left: 0px;
- padding-right: 0px;
-}
-
-#main.container {
- margin: 55px 10px 0px 10px;
+ padding: 0px;
}
h3 {
@@ -33,144 +30,12 @@ h3 {
clear: both;
}
-#main {
- position: relative;
-}
-
-#main_nav, #main {
- -moz-transition:left 0.35s;
- -webkit-transition:left 0.35s;
- -o-transition:left 0.35s;
- transition:left 0.35s;
-
- left: 0;
+#app {
+ transition: all 0.25s ease;
}
-#drawer {
- position: fixed;
- top: 0;
- bottom: 0;
- width: 80%;
- left: 100%;
- background-color: #444;
-
- -moz-transition:left 0.35s;
- -webkit-transition:left 0.35s;
- -o-transition:left 0.35s;
- transition:left 0.35s;
-
- -webkit-box-shadow: -2px 0px 2px 1px #333;
- -moz-box-shadow: -2px 0px 2px 1px #333;
- box-shadow: -2px 0px 2px 1px #333;
-
- header {
- position: static;
- height: 45px;
- border-radius: 0;
-
- #global_search {
- margin-right: 20px;
- margin-left: 10px;
- position: relative;
-
- form {
- position: absolute;
- width: 100%;
- margin-right: 20px;
-
- input {
- @include box-shadow(0, 1px, 1px, #444);
- @include border-radius(15px);
- @include transition(width);
- width: 100%;
- margin-top: 7px;
- background-color: #444;
- border: 1px solid #222;
- font-size: 13px;
- padding: 4px;
-
- color: black;
-
- &.active {
- background-color: $highlight-white;
- background-color: rgba(160,160,160,0.6);
- }
-
- &:focus {
- outline: none;
- background-color: white;
- }
-
- &::-webkit-input-placeholder { text-shadow: none; }
- &:-moz-placeholder { text-shadow: none; }
- }
- }
- }
- }
-
- nav {
- position: absolute;
- top: 45px;
- bottom: 0px;
- overflow: auto;
- width: 100%;
-
- li {
- font-size: 25px;
- line-height: 25px;
- font-weight: bold;
- color: $light-grey;
- border-bottom: solid rgb(53, 53, 53) 2px;
- }
-
- .no_border {
- padding: 0px;
- border-bottom: 0px;
-
- > ul > li > a {
- font-size: 14px;
- padding: 8px 42px;
- }
- }
-
- .hide {
- display: none;
- }
-
- .avatar {
- height: 35px;
- width: 35px;
- margin: -2px 5px;
- }
- }
-
- a {
- display: block;
- color: $light-grey;
- text-decoration: none;
- padding: 12px 25px;
- }
-
- ul {
- list-style: none;
- margin: 0px;
- }
-}
-
-#app.draw {
-
- /* Turn the main content to fixed to avoid it to be scrollable, so to have only
- * one scroll when the height of nav in the drawer is bigger than the screen
- */
- #main_nav,
- #main {
- position: fixed;
- left: -80%;
- }
-
- #drawer {
- left: 20%;
- }
+#main {
+ padding: 55px 10px 0px 10px;
}
.message {
@@ -465,60 +330,6 @@ h3 {
float: right;
}
-header {
- position: fixed;
- height: 45px;
- top: 0px;
- left: 0px;
- right: 0px;
- width: 100%;
- z-index: 10;
- background: url("header-bg-long.jpg") rgb(40,35,35);
- @include box-shadow(0, 1px, 2px, #333);
- border-bottom: 1px solid #222;
-
- #header_title {
- display: inline-block;
- width: 30px;
- height: 30px;
- padding: 7px;
- }
-
- #nav_badges {
- float: right;
- margin: 7px 0px;
- display: inline-block;
-
- .badge {
- display: inline;
- margin: 0px 4px;
- padding: 10px 6px;
- font-weight: bold;
- font-size: smaller;
- background-color: #333333;
-
- img {
- height: 30px;
- width: 30px;
- }
- }
-
- .badge_count {
- @include border-radius(2px);
- z-index: 3;
- position: absolute;
- top: 3px;
- padding: 1px 3px;
- background-color: $red;
- margin-left: -8px;
- }
-
- #conversation_icon {
- height: 18px;
- }
- }
-}
-
footer {
text-align: center;
a,
diff --git a/app/views/layouts/application.mobile.haml b/app/views/layouts/application.mobile.haml
index 8c6f51395ad97907491ec1f0038178543f852685..8494823cdf1b865ad6bb723b348568f872347d69 100644
--- a/app/views/layouts/application.mobile.haml
+++ b/app/views/layouts/application.mobile.haml
@@ -34,7 +34,7 @@
/ Stylesheets
- = stylesheet_link_tag :mobile, :format => 'all'
+ = stylesheet_link_tag 'mobile/mobile', :format => 'all'
= yield(:custom_css)
@@ -62,23 +62,13 @@
- if current_user.unread_message_count > 0
%span.badge_count{id: "conversation"}
= current_user.unread_message_count
- -# Composition
+ -# Publisher
= link_to(image_tag('icons/compose_mobile.png'), new_status_message_path, class: "badge", id: "compose_badge")
-# Menu
= link_to(image_tag('icons/menu.png'), "#", id: "menu_badge", class: "badge")
= link_to(image_tag('icons/asterisk_white_mobile.png'), stream_path, id: 'header_title')
-
-
-
- #main.container{:role => "main"}
- - if current_page?(:activity_stream)
- %h3
- = t('streams.activity.title')
- = yield
-
+
- if user_signed_in?
- = render :partial =>'shared/footer'
-
#drawer
%header
#global_search
@@ -87,32 +77,40 @@
= hidden_field_tag "utf8", "✓"
= search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input"
- .container
- %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
- = link_to user_profile_path(current_user.username) do
- = t('layouts.header.profile')
- = person_image_tag(current_user)
- %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
+ %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
+ = link_to user_profile_path(current_user.username) do
+ = t('layouts.header.profile')
+ = person_image_tag(current_user)
+ %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
+
+ #main{:role => "main"}
+ - if current_page?(:activity_stream)
+ %h3
+ = t('streams.activity.title')
+ = yield
+
+ - if user_signed_in?
+ = render :partial =>'shared/footer'
/ javascripts at the bottom
= jquery_include_tag
diff --git a/config/application.rb b/config/application.rb
index ee781069e353cb7497ec3fbadb8aba24205c78ba..5344092fbd30db5cdbd3c4a174b281916924cbf8 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -87,7 +87,7 @@ module Diaspora
default.css
error_pages.css
login.css
- mobile.css
+ mobile/mobile.css
new-templates.css
rtl.css
}