Fix drawer in some mobile browsers.
Remove the black background on menu badges. Fix body content on screen width > 768px. Start split of mobile css in different files in /mobile/
This commit is contained in:
flaburgan
parent
a1c222dd23
commit
67d71e2280
4 changed files with 217 additions and 237 deletions
171
app/assets/stylesheets/mobile/header.css.scss
Normal file
171
app/assets/stylesheets/mobile/header.css.scss
Normal file
|
|
@ -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%);
|
||||||
|
}
|
||||||
|
|
@ -5,6 +5,8 @@
|
||||||
@import 'vendor/autoSuggest';
|
@import 'vendor/autoSuggest';
|
||||||
@import '_flash_messages.scss';
|
@import '_flash_messages.scss';
|
||||||
|
|
||||||
|
@import 'header';
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #2489ce;
|
color: #2489ce;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -17,12 +19,7 @@ body {
|
||||||
/* scale background image down for iOS retina display */
|
/* scale background image down for iOS retina display */
|
||||||
size: 200px;
|
size: 200px;
|
||||||
}
|
}
|
||||||
padding-left: 0px;
|
padding: 0px;
|
||||||
padding-right: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#main.container {
|
|
||||||
margin: 55px 10px 0px 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
|
@ -33,144 +30,12 @@ h3 {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
transition: all 0.25s ease;
|
||||||
|
}
|
||||||
|
|
||||||
#main {
|
#main {
|
||||||
position: relative;
|
padding: 55px 10px 0px 10px;
|
||||||
}
|
|
||||||
|
|
||||||
#main_nav, #main {
|
|
||||||
-moz-transition:left 0.35s;
|
|
||||||
-webkit-transition:left 0.35s;
|
|
||||||
-o-transition:left 0.35s;
|
|
||||||
transition:left 0.35s;
|
|
||||||
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#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%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.message {
|
.message {
|
||||||
|
|
@ -465,60 +330,6 @@ h3 {
|
||||||
float: right;
|
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 {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
a,
|
a,
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
|
|
||||||
/ Stylesheets
|
/ Stylesheets
|
||||||
|
|
||||||
= stylesheet_link_tag :mobile, :format => 'all'
|
= stylesheet_link_tag 'mobile/mobile', :format => 'all'
|
||||||
= yield(:custom_css)
|
= yield(:custom_css)
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -62,23 +62,13 @@
|
||||||
- if current_user.unread_message_count > 0
|
- if current_user.unread_message_count > 0
|
||||||
%span.badge_count{id: "conversation"}
|
%span.badge_count{id: "conversation"}
|
||||||
= current_user.unread_message_count
|
= current_user.unread_message_count
|
||||||
-# Composition
|
-# Publisher
|
||||||
= link_to(image_tag('icons/compose_mobile.png'), new_status_message_path, class: "badge", id: "compose_badge")
|
= link_to(image_tag('icons/compose_mobile.png'), new_status_message_path, class: "badge", id: "compose_badge")
|
||||||
-# Menu
|
-# Menu
|
||||||
= link_to(image_tag('icons/menu.png'), "#", id: "menu_badge", class: "badge")
|
= 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')
|
= 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?
|
- if user_signed_in?
|
||||||
= render :partial =>'shared/footer'
|
|
||||||
|
|
||||||
#drawer
|
#drawer
|
||||||
%header
|
%header
|
||||||
#global_search
|
#global_search
|
||||||
|
|
@ -87,32 +77,40 @@
|
||||||
= hidden_field_tag "utf8", "✓"
|
= hidden_field_tag "utf8", "✓"
|
||||||
= search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input"
|
= search_field_tag "q", nil, id: "q", placeholder: t("search"), results: "5", autocomplete: "off", class: "ac_input"
|
||||||
|
|
||||||
.container
|
%nav
|
||||||
%nav
|
%ul
|
||||||
%ul
|
%li
|
||||||
%li
|
= link_to t("streams.activity.title"), activity_stream_path
|
||||||
= link_to t("streams.activity.title"), activity_stream_path
|
%li
|
||||||
%li
|
= link_to t("streams.mentions.title"), mentioned_stream_path
|
||||||
= link_to t("streams.mentions.title"), mentioned_stream_path
|
%li#all_aspects
|
||||||
%li#all_aspects
|
= link_to t('streams.aspects.title'), "#"
|
||||||
= link_to t('streams.aspects.title'), "#"
|
%li.no_border.hide
|
||||||
%li.no_border.hide
|
%ul
|
||||||
%ul
|
- current_user.aspects.each do |aspect|
|
||||||
- current_user.aspects.each do |aspect|
|
%li
|
||||||
%li
|
= link_to aspect.name, aspects_stream_path(a_ids: [aspect.id])
|
||||||
= link_to aspect.name, aspects_stream_path(a_ids: [aspect.id])
|
%li
|
||||||
%li
|
= link_to user_profile_path(current_user.username) do
|
||||||
= link_to user_profile_path(current_user.username) do
|
= t('layouts.header.profile')
|
||||||
= t('layouts.header.profile')
|
= person_image_tag(current_user)
|
||||||
= person_image_tag(current_user)
|
%li
|
||||||
%li
|
= link_to t('_contacts'), contacts_path
|
||||||
= link_to t('_contacts'), contacts_path
|
%li
|
||||||
%li
|
= link_to t('layouts.header.settings'), users_edit_path
|
||||||
= link_to t('layouts.header.settings'), users_edit_path
|
%li
|
||||||
%li
|
= link_to t('layouts.application.toggle'), toggle_mobile_path
|
||||||
= link_to t('layouts.application.toggle'), toggle_mobile_path
|
%li
|
||||||
%li
|
= link_to t('layouts.header.logout'), destroy_user_session_path, method: :delete
|
||||||
= 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
|
/ javascripts at the bottom
|
||||||
= jquery_include_tag
|
= jquery_include_tag
|
||||||
|
|
|
||||||
|
|
@ -87,7 +87,7 @@ module Diaspora
|
||||||
default.css
|
default.css
|
||||||
error_pages.css
|
error_pages.css
|
||||||
login.css
|
login.css
|
||||||
mobile.css
|
mobile/mobile.css
|
||||||
new-templates.css
|
new-templates.css
|
||||||
rtl.css
|
rtl.css
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue