Fix most pages on small screens
This commit is contained in:
parent
188c6f326b
commit
b3c7c8700d
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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) }
|
||||
|
@ -4,6 +4,10 @@
|
||||
= display_name(@account)
|
||||
%small= "@#{@account.username}"
|
||||
.details
|
||||
.bio
|
||||
%p= @account.note
|
||||
|
||||
.details-counters
|
||||
.counter{ class: active_nav_class(account_url(@account)) }
|
||||
= link_to account_url(@account) do
|
||||
%span.counter-label Posts
|
||||
@ -16,5 +20,3 @@
|
||||
= link_to followers_account_url(@account) do
|
||||
%span.counter-label Followers
|
||||
%span.counter-number= @account.followers.count
|
||||
.bio
|
||||
%p= @account.note
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user