Fix most pages on small screens

This commit is contained in:
Eugen Rochko 2016-10-03 16:10:17 +02:00
parent 188c6f326b
commit b3c7c8700d
8 changed files with 96 additions and 23 deletions

View file

@ -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;
}
}
}

View file

@ -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 {

View file

@ -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 {

View file

@ -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;

View file

@ -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

View file

@ -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) }

View file

@ -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

View file

@ -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