From b3c7c8700d7ddf73d6fef4076f15ae7c3d39ce67 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Mon, 3 Oct 2016 16:10:17 +0200 Subject: [PATCH] Fix most pages on small screens --- app/assets/stylesheets/about.scss | 8 ++++- app/assets/stylesheets/accounts.scss | 39 ++++++++++++++++++++++ app/assets/stylesheets/application.scss | 18 ++++++++-- app/assets/stylesheets/stream_entries.scss | 17 ++++++++-- app/helpers/accounts_helper.rb | 7 +++- app/models/user.rb | 2 -- app/views/accounts/_header.html.haml | 26 ++++++++------- app/views/layouts/public.html.haml | 2 +- 8 files changed, 96 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/about.scss b/app/assets/stylesheets/about.scss index df52ec18..84627383 100644 --- a/app/assets/stylesheets/about.scss +++ b/app/assets/stylesheets/about.scss @@ -3,7 +3,7 @@ .about-body { .wrapper { - width: 600px; + max-width: 600px; margin: 0 auto; color: #9baec8; padding-top: 200px; @@ -38,4 +38,10 @@ font: 16px/16px 'Montserrat', sans-serif; font-weight: 300; } + + @media screen and (max-width: 360px) { + .wrapper { + padding: 20px; + } + } } diff --git a/app/assets/stylesheets/accounts.scss b/app/assets/stylesheets/accounts.scss index 57da3285..f2be0fcf 100644 --- a/app/assets/stylesheets/accounts.scss +++ b/app/assets/stylesheets/accounts.scss @@ -63,6 +63,13 @@ margin-top: 30px; position: relative; z-index: 2; + flex-direction: row; + } + + .details-counters { + display: flex; + flex-direction: row; + order: 0; } .counter { @@ -129,6 +136,26 @@ line-height: 18px; padding: 5px 10px; color: #d9e1e8; + order: 1; + } + + @media screen and (max-width: 360px) { + .details { + display: block; + } + + .bio { + text-align: center; + margin-bottom: 20px; + } + + .counter { + flex: 1 1 auto; + } + + .counter:last-child { + border-right: none; + } } } @@ -186,6 +213,18 @@ cursor: default; color: lighten(#282c37, 10%); } + + @media screen and (max-width: 360px) { + padding: 30px 20px; + + a, .current, .next_page, .previous_page, .gap { + display: none; + } + + .next_page, .previous_page { + display: inline-block; + } + } } .accounts-grid { diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 917a2f9d..e6ae1d91 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -69,7 +69,6 @@ body { padding-bottom: 140px; text-rendering: optimizelegibility; font-feature-settings: "kern"; - min-width: 380px; &.app-body { position: fixed; @@ -77,6 +76,10 @@ body { height: 100%; padding: 0; } + + @media screen and (max-width: 360px) { + padding-bottom: 0; + } } .app-holder { @@ -99,10 +102,14 @@ body { } .logo-container { - width: 400px; + max-width: 400px; margin: 100px auto; cursor: default; + @media screen and (max-width: 360px) { + margin: 30px auto; + } + h1 { display: block; text-align: center; @@ -145,7 +152,7 @@ body { } .form-container { - width: 400px; + max-width: 400px; margin: 0 auto; padding: 20px; @@ -321,6 +328,11 @@ body { font-size: 12px; font-weight: 400; font-family: 'Roboto Mono', monospace; + + a { + color: inherit; + text-decoration: none; + } } .powered-by { diff --git a/app/assets/stylesheets/stream_entries.scss b/app/assets/stylesheets/stream_entries.scss index a111ec1e..27eb2136 100644 --- a/app/assets/stylesheets/stream_entries.scss +++ b/app/assets/stylesheets/stream_entries.scss @@ -60,8 +60,12 @@ border-radius: 0; box-shadow: none; - &.activity-stream-headless { - .entry:first-child { + .entry { + &:last-child { + border-radius: 0; + } + + &:first-child { border-radius: 0; &:last-child { @@ -71,6 +75,12 @@ } } + @media screen and (max-width: 360px) { + .avatar { + display: none; + } + } + .entry__container { display: flex; } @@ -192,6 +202,7 @@ display: block; overflow: hidden; padding-left: 10px; + margin-bottom: 21px; li { display: block; @@ -200,7 +211,7 @@ height: 100px; border-radius: 4px; margin-right: 4px; - margin-bottom: 25px; + margin-bottom: 4px; a { display: block; diff --git a/app/helpers/accounts_helper.rb b/app/helpers/accounts_helper.rb index 8d303cb6..23eec6c6 100644 --- a/app/helpers/accounts_helper.rb +++ b/app/helpers/accounts_helper.rb @@ -1,5 +1,10 @@ module AccountsHelper def pagination_options - { previous_label: "#{fa_icon('chevron-left')} Prev".html_safe, next_label: "Next #{fa_icon('chevron-right')}".html_safe, inner_window: 2 } + { + previous_label: "#{fa_icon('chevron-left')} Prev".html_safe, + next_label: "Next #{fa_icon('chevron-right')}".html_safe, + inner_window: 1, + outer_window: 0 + } end end diff --git a/app/models/user.rb b/app/models/user.rb index 04f3eb02..da096d6e 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -6,8 +6,6 @@ class User < ApplicationRecord validates :account, presence: true - has_many :oauth_applications, class_name: 'Doorkeeper::Application', as: :owner - scope :prolific, -> { joins('inner join statuses on statuses.account_id = users.account_id').select('users.*, count(statuses.id) as statuses_count').group('users.id').order('statuses_count desc') } scope :recent, -> { order('created_at desc') } scope :admins, -> { where(admin: true) } diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml index deb70b30..371bc62c 100644 --- a/app/views/accounts/_header.html.haml +++ b/app/views/accounts/_header.html.haml @@ -4,17 +4,19 @@ = display_name(@account) %small= "@#{@account.username}" .details - .counter{ class: active_nav_class(account_url(@account)) } - = link_to account_url(@account) do - %span.counter-label Posts - %span.counter-number= @account.statuses.count - .counter{ class: active_nav_class(following_account_url(@account)) } - = link_to following_account_url(@account) do - %span.counter-label Following - %span.counter-number= @account.following.count - .counter{ class: active_nav_class(followers_account_url(@account)) } - = link_to followers_account_url(@account) do - %span.counter-label Followers - %span.counter-number= @account.followers.count .bio %p= @account.note + + .details-counters + .counter{ class: active_nav_class(account_url(@account)) } + = link_to account_url(@account) do + %span.counter-label Posts + %span.counter-number= @account.statuses.count + .counter{ class: active_nav_class(following_account_url(@account)) } + = link_to following_account_url(@account) do + %span.counter-label Following + %span.counter-number= @account.following.count + .counter{ class: active_nav_class(followers_account_url(@account)) } + = link_to followers_account_url(@account) do + %span.counter-label Followers + %span.counter-number= @account.followers.count diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml index 14c37e0d..056393bb 100644 --- a/app/views/layouts/public.html.haml +++ b/app/views/layouts/public.html.haml @@ -1,7 +1,7 @@ - content_for :content do .container= yield .footer - %span.domain= Rails.configuration.x.local_domain + %span.domain= link_to Rails.configuration.x.local_domain, root_path %span.powered-by \// powered by