Skip to content
Extraits de code Groupes Projets
Valider d26ca746 rédigé par Jonne Haß's avatar Jonne Haß
Parcourir les fichiers

Merge pull request #4805 from Flaburgan/refactor-mobile-css 

Fix drawer in mobile version
parents a1c222dd 67d71e22
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
app/assets/stylesheets/mobile/header.css.scss 0 → 100644
+ 171
− 0
Voir le fichier @ d26ca746
/* 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%);
}
app/assets/stylesheets/mobile.css.scss → app/assets/stylesheets/mobile/mobile.css.scss
+ 7
− 196
Voir le fichier @ d26ca746
......@@ -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,
......
app/views/layouts/application.mobile.haml
+ 37
− 39
Voir le fichier @ d26ca746
......@@ -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
......
config/application.rb
+ 1
− 1
Voir le fichier @ d26ca746
......@@ -87,7 +87,7 @@ module Diaspora
default.css
error_pages.css
login.css
mobile.css
mobile/mobile.css
new-templates.css
rtl.css
}
......
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter