moved nav to bottom header
This commit is contained in:
parent
d1630b6c45
commit
0c392a0cce
7 changed files with 170 additions and 132 deletions
|
|
@ -1,38 +1,29 @@
|
||||||
|
|
||||||
%div.big_text#info_top
|
/%div.big_text#info_top
|
||||||
welcome home, daniel.
|
/welcome home, daniel.
|
||||||
%p.description
|
/%p.description
|
||||||
this is your diaspora dashboard, a place where you can catch a
|
/this is your diaspora dashboard, a place where you can catch a
|
||||||
= link_to "glimpse", "#"
|
/= link_to "glimpse", "#"
|
||||||
of what all your friends are doing.
|
/of what all your friends are doing.
|
||||||
|
|
||||||
|
.span-16.append-2.last
|
||||||
|
|
||||||
|
%div.big_text
|
||||||
|
recent activity
|
||||||
|
|
||||||
|
/%div#publish
|
||||||
|
/- form_for 'StatusMessage' do |f|
|
||||||
|
/= f.text_field :thought
|
||||||
|
|
||||||
|
%ul#stream
|
||||||
|
- for post in @posts
|
||||||
|
= render "status_messages/pane", :post => post
|
||||||
|
|
||||||
.span-6.last
|
.span-6.last
|
||||||
%div{ :style => "padding: 1em" }
|
%div.big_text
|
||||||
%div.big_text
|
requests
|
||||||
daniel grippi
|
|
||||||
|
|
||||||
%img{:src=>"/images/bp.jpeg", :id => "profile_image"}
|
%div.big_text
|
||||||
|
%div.big_number= link_to "30", "#"
|
||||||
%div.big_text
|
new requests
|
||||||
requests
|
|
||||||
|
|
||||||
%div.big_text
|
|
||||||
%div.big_number= link_to "30", "#"
|
|
||||||
new requests
|
|
||||||
|
|
||||||
|
|
||||||
.prepend-2.span-16.last
|
|
||||||
%div{ :style => "padding: 1em" }
|
|
||||||
|
|
||||||
%div.big_text
|
|
||||||
updates
|
|
||||||
|
|
||||||
/%div#publish
|
|
||||||
/- form_for 'update' do |f|
|
|
||||||
/= f.text_field :thought
|
|
||||||
|
|
||||||
%ul#stream
|
|
||||||
- for post in @posts
|
|
||||||
%li
|
|
||||||
= render "status_messages/pane", :post => post
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,21 +20,22 @@
|
||||||
#huge_star *
|
#huge_star *
|
||||||
%a#diaspora_text{:href => root_path}
|
%a#diaspora_text{:href => root_path}
|
||||||
/%img{:src => '/images/diaspora_white.png'}
|
/%img{:src => '/images/diaspora_white.png'}
|
||||||
%ul.nav
|
|
||||||
%li= link_to "home", root_path
|
|
||||||
%li= link_to "users", users_path
|
|
||||||
%li= link_to "status messages", status_messages_path
|
|
||||||
%li= link_to "friends", friends_path
|
|
||||||
%li= link_to "bookmarks", bookmarks_path
|
|
||||||
%li= link_to "blogs", blogs_path
|
|
||||||
|
|
||||||
#session_action
|
#session_action
|
||||||
- if user_signed_in?
|
- if user_signed_in?
|
||||||
= link_to "log out", destroy_user_session_path
|
= link_to User.first.email, destroy_user_session_path
|
||||||
- else
|
- else
|
||||||
= link_to "login", new_user_session_path
|
= link_to "login", new_user_session_path
|
||||||
|
|
||||||
#header_below
|
#header_below
|
||||||
|
.container
|
||||||
|
%div.big_text#info_top
|
||||||
|
daniel grippi posted a new update
|
||||||
|
%p.description
|
||||||
|
let's take this into overdrive.
|
||||||
|
%ul.nav
|
||||||
|
%li= link_to "home", root_path
|
||||||
|
%li= link_to "friends", friends_path
|
||||||
|
|
||||||
.container
|
.container
|
||||||
- if show_title?
|
- if show_title?
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,10 @@
|
||||||
%sp.message
|
%li
|
||||||
%sp.from= post.owner
|
.span-2.last
|
||||||
= post.message
|
%img{:src => "/images/mocks/user_pic.jpeg", :height => "35px", :class => "avatar"}
|
||||||
|
.span-13.last
|
||||||
|
%sp.message
|
||||||
|
%sp.from= post.owner
|
||||||
|
= post.message
|
||||||
|
%br
|
||||||
|
%sp.time= "#{time_ago_in_words(post.updated_at)} ago"
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 261 KiB |
BIN
public/images/mocks/user_pic.jpeg
Normal file
BIN
public/images/mocks/user_pic.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
|
|
@ -52,46 +52,55 @@ h4 {
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
min-height: 35px;
|
height: 30px;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 110%;
|
font-size: 110%;
|
||||||
background-color: #1a1a21;
|
background-color: #1a1a21;
|
||||||
border-bottom: 1px solid white; }
|
border-bottom: 1px solid white;
|
||||||
|
padding-top: 5px; }
|
||||||
#header #huge_star {
|
#header #huge_star {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 80px;
|
font-family: "helvetica neue", "helvetica", "arial", "sans-serif";
|
||||||
top: -25px; }
|
font-size: 60px;
|
||||||
|
top: -15px; }
|
||||||
#header #diaspora_text {
|
#header #diaspora_text {
|
||||||
border: none; }
|
border: none; }
|
||||||
#header #session_action {
|
#header #session_action {
|
||||||
display: none;
|
float: right;
|
||||||
float: right; }
|
font-size: 110%;
|
||||||
#header ul.nav {
|
margin-top: 1px; }
|
||||||
padding: 0;
|
#header #session_action a {
|
||||||
margin: 0;
|
color: #cccccc;
|
||||||
margin-top: 6px;
|
border: none; }
|
||||||
display: block;
|
#header #session_action a:hover {
|
||||||
font-size: 130%;
|
color: white; }
|
||||||
float: right; }
|
|
||||||
#header ul.nav li {
|
ul.nav {
|
||||||
display: inline;
|
padding: 0;
|
||||||
margin-right: 1em; }
|
margin: 0;
|
||||||
#header ul.nav li:last-child {
|
font-size: 130%;
|
||||||
margin: 0; }
|
position: absolute;
|
||||||
#header ul.nav a {
|
margin-top: -62px; }
|
||||||
border-bottom: none;
|
ul.nav li {
|
||||||
color: #999999; }
|
display: inline;
|
||||||
#header ul.nav a:hover {
|
margin-right: 1em;
|
||||||
color: #cccccc; }
|
padding: 5px 10px;
|
||||||
|
background: #f2f8fc;
|
||||||
|
border: 1px solid white;
|
||||||
|
border-bottom: none; }
|
||||||
|
ul.nav li:first-child {
|
||||||
|
background: white; }
|
||||||
|
ul.nav li:last-child {
|
||||||
|
margin: 0; }
|
||||||
|
ul.nav a {
|
||||||
|
border-bottom: none;
|
||||||
|
color: #b1cfe3; }
|
||||||
|
ul.nav a:hover {
|
||||||
|
color: #cccccc; }
|
||||||
|
|
||||||
#header_below {
|
#header_below {
|
||||||
background-color: #e6eff7;
|
background-color: #e6eff7;
|
||||||
min-height: 150px;
|
text-align: right; }
|
||||||
line-height: 150px;
|
|
||||||
border-bottom: 0;
|
|
||||||
position: relative;
|
|
||||||
text-align: right;
|
|
||||||
z-index: -2; }
|
|
||||||
|
|
||||||
#left_pane {
|
#left_pane {
|
||||||
background-color: #e6eff7;
|
background-color: #e6eff7;
|
||||||
|
|
@ -105,33 +114,37 @@ ul#stream {
|
||||||
ul#stream > li {
|
ul#stream > li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 2em;
|
padding: 2em;
|
||||||
-webkit-box-shadow: 0 4px 5px -5px #999999; }
|
-webkit-box-shadow: 0 4px 5px -5px #999999;
|
||||||
ul#stream > li:first-child {
|
min-height: 40px; }
|
||||||
padding-top: 0; }
|
ul#stream > li img.avatar {
|
||||||
|
background: white;
|
||||||
|
padding: 2px;
|
||||||
|
border: 1px solid #eaeaea;
|
||||||
|
border-radius: 3px; }
|
||||||
|
|
||||||
sp.message {
|
sp.message {
|
||||||
font-size: 110%;
|
font-size: 120%;
|
||||||
letter-spacing: 0.1em; }
|
color: #999999;
|
||||||
|
text-shadow: none; }
|
||||||
sp.message sp.from {
|
sp.message sp.from {
|
||||||
color: #999999; }
|
color: black; }
|
||||||
|
sp.message sp.time {
|
||||||
|
color: #cccccc;
|
||||||
|
font-size: 80%; }
|
||||||
|
|
||||||
div.big_text {
|
div.big_text {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 36px;
|
line-height: 36px; }
|
||||||
margin-bottom: 2em; }
|
|
||||||
div.big_text p.description {
|
div.big_text p.description {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
color: #999999; }
|
color: #999999; }
|
||||||
div.big_text .big_number {
|
div.big_text .big_number {
|
||||||
font-size: 300%; }
|
font-size: 300%;
|
||||||
|
line-height: 100%; }
|
||||||
div.big_text .big_number a {
|
div.big_text .big_number a {
|
||||||
border: none; }
|
border: none; }
|
||||||
|
|
||||||
#info_top {
|
|
||||||
margin-top: -130px;
|
|
||||||
margin-bottom: 50px; }
|
|
||||||
|
|
||||||
#publish input {
|
#publish input {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
|
|
@ -139,6 +152,10 @@ div.big_text {
|
||||||
width: 90%; }
|
width: 90%; }
|
||||||
|
|
||||||
#profile_image {
|
#profile_image {
|
||||||
margin-top: 1em;
|
margin-top: 0;
|
||||||
width: 240px;
|
width: 100px;
|
||||||
border: 2px solid #eaeaea; }
|
border: 2px solid #eaeaea; }
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
background: #fffdb8;
|
||||||
|
border: 1px solid #e3e08d; }
|
||||||
|
|
|
||||||
|
|
@ -58,7 +58,7 @@ h4
|
||||||
:margin 0
|
:margin 0
|
||||||
|
|
||||||
#header
|
#header
|
||||||
:min-height 35px
|
:height 30px
|
||||||
:color #fff
|
:color #fff
|
||||||
:font
|
:font
|
||||||
:size 110%
|
:size 110%
|
||||||
|
|
@ -66,58 +66,72 @@ h4
|
||||||
:color #1A1A21
|
:color #1A1A21
|
||||||
:border
|
:border
|
||||||
:bottom 1px solid #fff
|
:bottom 1px solid #fff
|
||||||
|
:padding
|
||||||
|
:top 5px
|
||||||
|
|
||||||
|
|
||||||
#huge_star
|
#huge_star
|
||||||
:position absolute
|
:position absolute
|
||||||
:font
|
:font
|
||||||
:size 80px
|
:family 'helvetica neue', 'helvetica', 'arial', 'sans-serif'
|
||||||
|
:size 60px
|
||||||
//:background
|
//:background
|
||||||
//:color #ff3378
|
//:color #ff3378
|
||||||
:top -25px
|
:top -15px
|
||||||
|
|
||||||
#diaspora_text
|
#diaspora_text
|
||||||
:border none
|
:border none
|
||||||
|
|
||||||
|
|
||||||
#session_action
|
#session_action
|
||||||
:display none
|
|
||||||
:float right
|
:float right
|
||||||
|
:font-size 110%
|
||||||
ul.nav
|
:margin-top 1px
|
||||||
:padding 0
|
|
||||||
:margin 0
|
|
||||||
:margin-top 6px
|
|
||||||
:display block
|
|
||||||
:font
|
|
||||||
:size 130%
|
|
||||||
:float right
|
|
||||||
|
|
||||||
li
|
|
||||||
:display inline
|
|
||||||
:margin
|
|
||||||
:right 1em
|
|
||||||
|
|
||||||
li:last-child
|
|
||||||
:margin 0
|
|
||||||
a
|
a
|
||||||
:border
|
:color #ccc
|
||||||
:bottom none
|
:border none
|
||||||
:color #999
|
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
:color #ccc
|
:color #fff
|
||||||
|
|
||||||
|
|
||||||
|
ul.nav
|
||||||
|
:padding 0
|
||||||
|
:margin 0
|
||||||
|
:font
|
||||||
|
:size 130%
|
||||||
|
:position absolute
|
||||||
|
:margin-top -62px
|
||||||
|
|
||||||
|
li
|
||||||
|
:display inline
|
||||||
|
:margin
|
||||||
|
:right 1em
|
||||||
|
:padding 5px 10px
|
||||||
|
:background #F2F8FC
|
||||||
|
:border 1px solid #fff
|
||||||
|
:border-bottom none
|
||||||
|
|
||||||
|
li:first-child
|
||||||
|
:background #fff
|
||||||
|
|
||||||
|
li:last-child
|
||||||
|
:margin 0
|
||||||
|
a
|
||||||
|
:border
|
||||||
|
:bottom none
|
||||||
|
:color #B1CFE3
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
:color #ccc
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#header_below
|
#header_below
|
||||||
:background
|
:background
|
||||||
:color #e6eff7
|
:color #e6eff7
|
||||||
:min-height 150px
|
|
||||||
:line-height 150px
|
|
||||||
:border-bottom 0
|
|
||||||
:position relative
|
|
||||||
:text-align right
|
:text-align right
|
||||||
:z-index -2
|
|
||||||
|
|
||||||
|
|
||||||
#left_pane
|
#left_pane
|
||||||
:background
|
:background
|
||||||
|
|
@ -134,17 +148,27 @@ ul#stream
|
||||||
:list-style none
|
:list-style none
|
||||||
:padding 2em
|
:padding 2em
|
||||||
:-webkit-box-shadow 0 4px 5px -5px #999
|
:-webkit-box-shadow 0 4px 5px -5px #999
|
||||||
> li:first-child
|
:min-height 40px
|
||||||
:padding-top 0
|
|
||||||
|
img.avatar
|
||||||
|
background: #fff
|
||||||
|
padding: 2px
|
||||||
|
:border 1px solid #eaeaea
|
||||||
|
:border-radius 3px
|
||||||
|
|
||||||
|
|
||||||
sp.message
|
sp.message
|
||||||
:font
|
:font
|
||||||
:size 110%
|
:size 120%
|
||||||
:letter-spacing 0.1em
|
:color #999
|
||||||
|
:text-shadow none
|
||||||
|
|
||||||
sp.from
|
sp.from
|
||||||
:color #999
|
:color #000
|
||||||
|
|
||||||
|
sp.time
|
||||||
|
:color #ccc
|
||||||
|
:font-size 80%
|
||||||
|
|
||||||
|
|
||||||
div.big_text
|
div.big_text
|
||||||
|
|
@ -152,7 +176,6 @@ div.big_text
|
||||||
:size 24px
|
:size 24px
|
||||||
:weight bold
|
:weight bold
|
||||||
:line-height 36px
|
:line-height 36px
|
||||||
:margin-bottom 2em
|
|
||||||
|
|
||||||
p.description
|
p.description
|
||||||
:font
|
:font
|
||||||
|
|
@ -162,13 +185,10 @@ div.big_text
|
||||||
.big_number
|
.big_number
|
||||||
:font
|
:font
|
||||||
:size 300%
|
:size 300%
|
||||||
|
:line-height 100%
|
||||||
a
|
a
|
||||||
:border none
|
:border none
|
||||||
|
|
||||||
#info_top
|
|
||||||
:margin
|
|
||||||
:top -130px
|
|
||||||
:bottom 50px
|
|
||||||
|
|
||||||
#publish
|
#publish
|
||||||
input
|
input
|
||||||
|
|
@ -181,8 +201,11 @@ div.big_text
|
||||||
|
|
||||||
#profile_image
|
#profile_image
|
||||||
:margin
|
:margin
|
||||||
:top 1em
|
:top 0
|
||||||
:width 240px
|
:width 100px
|
||||||
|
|
||||||
:border 2px solid #eaeaea
|
:border 2px solid #eaeaea
|
||||||
|
|
||||||
|
.yellow
|
||||||
|
:background #FFFDB8
|
||||||
|
:border 1px solid #E3E08D
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue