Fix most pages on small screens
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…
Reference in New Issue