Fix most pages on small screens

main
Eugen Rochko 8 years ago
parent 188c6f326b
commit b3c7c8700d

@ -3,7 +3,7 @@
.about-body { .about-body {
.wrapper { .wrapper {
width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
color: #9baec8; color: #9baec8;
padding-top: 200px; padding-top: 200px;
@ -38,4 +38,10 @@
font: 16px/16px 'Montserrat', sans-serif; font: 16px/16px 'Montserrat', sans-serif;
font-weight: 300; font-weight: 300;
} }
@media screen and (max-width: 360px) {
.wrapper {
padding: 20px;
}
}
} }

@ -63,6 +63,13 @@
margin-top: 30px; margin-top: 30px;
position: relative; position: relative;
z-index: 2; z-index: 2;
flex-direction: row;
}
.details-counters {
display: flex;
flex-direction: row;
order: 0;
} }
.counter { .counter {
@ -129,6 +136,26 @@
line-height: 18px; line-height: 18px;
padding: 5px 10px; padding: 5px 10px;
color: #d9e1e8; 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; cursor: default;
color: lighten(#282c37, 10%); 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 { .accounts-grid {

@ -69,7 +69,6 @@ body {
padding-bottom: 140px; padding-bottom: 140px;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-feature-settings: "kern"; font-feature-settings: "kern";
min-width: 380px;
&.app-body { &.app-body {
position: fixed; position: fixed;
@ -77,6 +76,10 @@ body {
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
@media screen and (max-width: 360px) {
padding-bottom: 0;
}
} }
.app-holder { .app-holder {
@ -99,10 +102,14 @@ body {
} }
.logo-container { .logo-container {
width: 400px; max-width: 400px;
margin: 100px auto; margin: 100px auto;
cursor: default; cursor: default;
@media screen and (max-width: 360px) {
margin: 30px auto;
}
h1 { h1 {
display: block; display: block;
text-align: center; text-align: center;
@ -145,7 +152,7 @@ body {
} }
.form-container { .form-container {
width: 400px; max-width: 400px;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 20px;
@ -321,6 +328,11 @@ body {
font-size: 12px; font-size: 12px;
font-weight: 400; font-weight: 400;
font-family: 'Roboto Mono', monospace; font-family: 'Roboto Mono', monospace;
a {
color: inherit;
text-decoration: none;
}
} }
.powered-by { .powered-by {

@ -60,8 +60,12 @@
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
&.activity-stream-headless { .entry {
.entry:first-child { &:last-child {
border-radius: 0;
}
&:first-child {
border-radius: 0; border-radius: 0;
&:last-child { &:last-child {
@ -71,6 +75,12 @@
} }
} }
@media screen and (max-width: 360px) {
.avatar {
display: none;
}
}
.entry__container { .entry__container {
display: flex; display: flex;
} }
@ -192,6 +202,7 @@
display: block; display: block;
overflow: hidden; overflow: hidden;
padding-left: 10px; padding-left: 10px;
margin-bottom: 21px;
li { li {
display: block; display: block;
@ -200,7 +211,7 @@
height: 100px; height: 100px;
border-radius: 4px; border-radius: 4px;
margin-right: 4px; margin-right: 4px;
margin-bottom: 25px; margin-bottom: 4px;
a { a {
display: block; display: block;

@ -1,5 +1,10 @@
module AccountsHelper module AccountsHelper
def pagination_options 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
end end

@ -6,8 +6,6 @@ class User < ApplicationRecord
validates :account, presence: true 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 :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 :recent, -> { order('created_at desc') }
scope :admins, -> { where(admin: true) } scope :admins, -> { where(admin: true) }

@ -4,17 +4,19 @@
= display_name(@account) = display_name(@account)
%small= "@#{@account.username}" %small= "@#{@account.username}"
.details .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 .bio
%p= @account.note %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

@ -1,7 +1,7 @@
- content_for :content do - content_for :content do
.container= yield .container= yield
.footer .footer
%span.domain= Rails.configuration.x.local_domain %span.domain= link_to Rails.configuration.x.local_domain, root_path
%span.powered-by %span.powered-by
\// \//
powered by powered by

Loading…
Cancel
Save