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 '_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;
|
||||
}
|
||||
|
||||
#app {
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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%;
|
||||
}
|
||||
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,
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ module Diaspora
|
|||
default.css
|
||||
error_pages.css
|
||||
login.css
|
||||
mobile.css
|
||||
mobile/mobile.css
|
||||
new-templates.css
|
||||
rtl.css
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue