From 9e3a6e21717a5152b53505534169f997b3e454e3 Mon Sep 17 00:00:00 2001 From: Yuki Date: Sat, 16 May 2015 04:09:33 +0530 Subject: [PATCH] Mobile-friendly profile info box --- app/assets/stylesheets/base.css.scss | 1 + app/assets/stylesheets/scss/mobile.scss | 4 + .../stylesheets/scss/mobile/profile.scss | 76 +++++++++++++++++++ .../stylesheets/scss/mobile/settings.scss | 11 +++ app/views/shared/_sidebar.html.haml | 2 +- app/views/user/_profile_info.html.haml | 17 +++-- app/views/user/_stats.html.haml | 4 +- app/views/user/edit.html.haml | 4 +- app/views/user/show.html.haml | 4 +- 9 files changed, 108 insertions(+), 15 deletions(-) create mode 100644 app/assets/stylesheets/scss/mobile.scss create mode 100644 app/assets/stylesheets/scss/mobile/profile.scss create mode 100644 app/assets/stylesheets/scss/mobile/settings.scss diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss index 6c41e941..aa31dc4d 100644 --- a/app/assets/stylesheets/base.css.scss +++ b/app/assets/stylesheets/base.css.scss @@ -16,6 +16,7 @@ body { @import "scss/user"; @import "scss/notifications"; @import "scss/groups"; +@import "scss/mobile"; .j2-page { padding-top: 30px; diff --git a/app/assets/stylesheets/scss/mobile.scss b/app/assets/stylesheets/scss/mobile.scss new file mode 100644 index 00000000..8279eb21 --- /dev/null +++ b/app/assets/stylesheets/scss/mobile.scss @@ -0,0 +1,4 @@ +@media (max-width: 768px) { + @import "mobile/settings"; + @import "mobile/profile"; +} diff --git a/app/assets/stylesheets/scss/mobile/profile.scss b/app/assets/stylesheets/scss/mobile/profile.scss new file mode 100644 index 00000000..3799ba3b --- /dev/null +++ b/app/assets/stylesheets/scss/mobile/profile.scss @@ -0,0 +1,76 @@ +.container.headerable:not(.profile--no-header) { + margin-top: 0; + padding-top: 0; +} + +#profile--header:not(.profile--no-header) { + min-width: 0px; + * { + min-width: 0px; + } +} + + +.container.headerable { + #profile-info { + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); + margin-bottom: 15px; + + #profile.panel, #profile-stats.panel { + box-shadow: none; + margin-bottom: 0; + } + + #profile.panel { + font-size: 0; + + .profile--avatar { + width: 64px; + position: relative; + top: -15px; + left: 5px; + display: inline; + } + + .profile--panel-badge { + display: inline-block; + padding: 0 5px; + vertical-align: top; + width: auto; + margin-top: -15px; + &:nth-child(2) { + margin-left: 5px; + } + .fa { + font-size: 15px; + } + } + + .panel-body { + font-size: 15px; + .profile--panel-name { + margin-top: -75px; + margin-left: 60px + } + } + } + + #profile-stats { + border: none; + .panel-heading { + display: none; + } + + .panel-body { + font-size: 0px; + padding: 0; + .row { + width: 50%; + display: inline-block; + font-size: 12px; + margin: 0; + } + } + } + } +} diff --git a/app/assets/stylesheets/scss/mobile/settings.scss b/app/assets/stylesheets/scss/mobile/settings.scss new file mode 100644 index 00000000..a9b4f2cf --- /dev/null +++ b/app/assets/stylesheets/scss/mobile/settings.scss @@ -0,0 +1,11 @@ +#profile-header-media { + clear: both; + display: block; + .pull-left { + float: none !important; + clear: both; + img { + width: 100% + } + } +} diff --git a/app/views/shared/_sidebar.html.haml b/app/views/shared/_sidebar.html.haml index ec135868..d9304d8d 100644 --- a/app/views/shared/_sidebar.html.haml +++ b/app/views/shared/_sidebar.html.haml @@ -37,4 +37,4 @@ %a{href: show_user_profile_path(member.user.screen_name), title: member.user.screen_name, data: { toggle: :tooltip, placement: :top }} %img.img-rounded.answerbox--img-small{src: member.user.profile_picture.url(:medium)} -.hidden-xs= render 'shared/links' \ No newline at end of file +.hidden-xs= render 'shared/links' diff --git a/app/views/user/_profile_info.html.haml b/app/views/user/_profile_info.html.haml index 97cb3076..0d1d866e 100644 --- a/app/views/user/_profile_info.html.haml +++ b/app/views/user/_profile_info.html.haml @@ -28,14 +28,15 @@ .profile--panel-badge.panel-badge-default Follows you .panel-body - - if @user.display_name.blank? - .profile--displayname - = @user.screen_name - - else - .profile--displayname - = @user.display_name - .profile--username - = @user.screen_name + .profile--panel-name + - if @user.display_name.blank? + .profile--displayname + = @user.screen_name + - else + .profile--displayname + = @user.display_name + .profile--username + = @user.screen_name - unless @user.bio.blank? %p.profile--text= markdown @user.bio - unless @user.website.blank? diff --git a/app/views/user/_stats.html.haml b/app/views/user/_stats.html.haml index b6ff4d5d..7ca49232 100644 --- a/app/views/user/_stats.html.haml +++ b/app/views/user/_stats.html.haml @@ -1,4 +1,4 @@ -.panel.panel-default.profile--panel +.panel.panel-default.profile--panel#profile-stats .panel-heading %h3.panel-title Stats .panel-body @@ -19,4 +19,4 @@ %a{href: show_user_profile_path(@user.screen_name)} .col-md-6.col-sm-6.col-xs-6 %h4.entry-text#answered-count= @user.answered_count - %h6.entry-subtext Answers \ No newline at end of file + %h6.entry-subtext Answers diff --git a/app/views/user/edit.html.haml b/app/views/user/edit.html.haml index 07d9f0d9..a2409b3a 100644 --- a/app/views/user/edit.html.haml +++ b/app/views/user/edit.html.haml @@ -9,7 +9,7 @@ = f.text_field :display_name, label: "Your name" - .media + .media#profile-picture-media .pull-left %img.img-rounded.profile--img{src: current_user.profile_picture.url(:medium)} .media-body @@ -26,7 +26,7 @@ %button#cropper-zoom-in.btn.btn-inverse{type: :button} %i.fa.fa-search-plus - .media + .media#profile-header-media .pull-left %img.img-rounded.header--img{src: current_user.profile_header.url(:mobile)} .media-body diff --git a/app/views/user/show.html.haml b/app/views/user/show.html.haml index 9170e382..00f5b723 100644 --- a/app/views/user/show.html.haml +++ b/app/views/user/show.html.haml @@ -1,9 +1,9 @@ - provide(:title, user_title(@user)) - no_header = unless @user.profile_header.exists? then "profile--no-header" else "" end -#profile--header.hidden-xs{class: no_header} +#profile--header{class: no_header} %img.profile--header-img{src: @user.profile_header.url(:web)} .container.j2-page.headerable{class: no_header} - .col-md-3.col-xs-12.col-sm-4.j2-col-reset + #profile-info.col-md-3.col-xs-12.col-sm-4.j2-col-reset = render 'user/profile_info' .hidden-xs= render 'shared/links' .col-md-9.col-xs-12.col-sm-8.j2-col-reset